pay up implementation

src/routes/api/v1/transaction/transaction.ts

@@ -163,7 +163,8 @@ async function patch(req: Request, res: Response) {
 				},
 				data: {
 					userId: value.user_id,
-					paid: value.paid
+					paid: value.paid,
+					// !!!!! paidAt: value.paid ? new Date() : undefined
 				},
 				select: {
 					id: true

src/routes/api/v1/transaction/transaction_schema.ts

@@ -30,6 +30,7 @@ const schema_post = validator.object({
 
 // MARK: UPDATE transaction
 const schema_patch = validator.object({
+	id: validator.number().positive().precision(0).required(),
 	user_id: validator.number().positive().precision(0).required(),
 	paid: validator.boolean().default(false)
 });

static/apiWrapper.js

@@ -100,13 +100,13 @@ let _api = {
 		// Handle the response
 		if (!response.ok) {
 			_testPageFail(response.statusText);
-			return;
+			return -1;
 		}
 		const result = await response.json();
 		// Handle the result, was json valid?
 		if (!result) {
 			_testPageFail('Invalid JSON response');
-			return;
+			return -1;
 		}
 
 		return result;

static/pageDriver.js

@@ -240,6 +240,7 @@ modalForms.forEach((modalForm) => {
 		console.log('Response: ', resp);
 		if (resp['status'] == 'CREATED' || resp['status'] == 'UPDATED') {
 			console.log('Entry created successfully');
+			createTemporaryNotification('Eintrag erfolgreich aktualisiert', 'is-success');
 			modalForm.closest('.modal').classList.remove('is-active');
 			modalForm.reset();
 			// Hide loadPhase
@@ -260,12 +261,18 @@ modalForms.forEach((modalForm) => {
 				entryPhase.classList.remove('is-hidden');
 			}
 			// TODO: Show error message
+			createTemporaryNotification('Error while creating entry', 'is-danger');
 		}
 
 		// Find all tables with data-searchTargetId set to table
 		setTimeout(() => {
-			refreshTableByName(table);
-			updateSingeltonsByTableName(table);
+			if(modalForm.getAttribute('data-extTable') != null) {
+				refreshTableByName(table);
+				updateSingeltonsByTableName(table);
+			} else {
+				refreshTableByName(document.getElementById(modalForm.getAttribute('data-extTable')));
+			}
+			
 		}, 500);
 	});
 });
@@ -681,3 +688,30 @@ document.addEventListener('DOMContentLoaded', () => {
 	  });
 	});
       });
+
+function getCookie(name) {
+	let value = "; " + document.cookie;
+	let parts = value.split("; " + name + "=");
+	if(parts.length == 2) {
+		return parts.pop().split(";").shift();
+	}
+}
+
+function eraseCookie(name) {
+	document.cookie = name + '=; Max-Age=-99999999;';
+}
+
+function errorIfAnyUndefined(inp) {
+	console.log(inp)
+	for(var i = 0; i < inp.length; i++) {
+		if(inp[i] == undefined) {
+			console.error("Missing element!")
+			createTemporaryNotification("Beim Laden der Seite ist ein Fehler aufgetreten", "is-danger", 90000)
+		}
+	}
+}
+
+function formatTimestamp(timestamp) {
+	const date = new Date(timestamp);
+	return date.toLocaleString();
+}

static/pages/payup.js

@@ -1,4 +1,77 @@
 const tableContent = document.querySelector('.table-content');
-const tableSum = document.querySelector('.table-sum');
+// HTML Elements
+const isEmptyAlert = document.getElementById("noBalance");
+const tableDiv = document.getElementById("balanceSheet");
+const payTable = document.getElementById("payTable");
+const tableCnt = document.getElementById("table-content");
+const tableSum = document.getElementById("table-sum");
+const modal_sum = document.getElementById("ModalSum");
+const confirmModal = document.getElementById("confirmModal");
+const btn_paynow = document.getElementById("paynow");
+const btn_confirm = document.getElementById("confirmCheckout");
+const btn_logout = document.getElementById("logout");
 
-alert("NYI: Endpoint is not yet implemented. This demo ends here.");
+errorIfAnyUndefined([isEmptyAlert, tableDiv, payTable, tableCnt, tableSum, modal_sum])
+
+// Current user
+let cookieUser = getCookie('user');
+
+if(cookieUser == undefined) {
+	createTemporaryNotification('Fehler: Nutzer nicht angemeldet.', 'is-danger');
+	window.location.href = '/user_select';
+}
+
+let transactionIds = [];
+
+// Request outstanding transactions by user
+async function pullData() {
+	let data = await _api.get("transaction?user_id=" + parseInt(cookieUser) + "&paid=false");
+	console.log(data)
+	if(data.count == 0) {
+		isEmptyAlert.classList.remove("is-hidden");
+		tableDiv.classList.add("is-hidden");
+		return;
+	}
+	// Write data to table
+	const result = data.result;
+	let priceSum = 0;
+	for(var i = 0; i < data.count; i++) {
+		const row = result[i];
+		const newRow = tableCnt.insertRow();
+		newRow.id = `row_${row.id}`;
+		newRow.innerHTML = `
+			<td>${formatTimestamp(row.createdAt)}</td>
+			<td>${parseFloat(row.total).toFixed(2)} €</td>
+		`;
+		priceSum += parseFloat(row.total);
+		transactionIds.push(row.id);
+	}
+	tableSum.innerText = priceSum.toFixed(2) + " €";
+	modal_sum.innerText = priceSum.toFixed(2) + " €";
+}
+
+btn_paynow.onclick = () => {
+	confirmModal.classList.add("is-active");
+}
+
+btn_confirm.onclick = () => {
+	for(let i = 0; i < transactionIds.length; i++) {
+		let res = _api.patch(`transaction`, {paid: true, id: transactionIds[i], user_id: parseInt(cookieUser)});
+		console.log(res);
+		if(res == -1 || res == undefined) {
+			createTemporaryNotification('Fehler: Zahlung fehlgeschlagen.', 'is-danger');
+			return;
+		}
+	}
+	createTemporaryNotification('Zahlung erfolgreich.', 'is-success');
+	setTimeout(() => {
+		window.location.href = '/user_select';
+	}, 1000);
+}
+
+btn_logout.onclick = () => {
+	eraseCookie('user');
+	window.location.href = '/user_select';
+}
+
+pullData()

views/payup.eta

@@ -5,28 +5,57 @@
 <h1 class="title">Abrechnung</h1>
 <h2 class="subtitle">Ausstehend</h2>
 
-<table class="table">
+<div class="notification is-info is-light is-hidden" id="noBalance">
+  Für diesen Benutzer stehen keine Transaktionen aus. <strong>Es gibt nichts zu bezahlen.</strong>
+  <br>
+  <button class="button is-info is-large" id="logout">Abmelden</button>
+</div>
+
+<div id="balanceSheet">
+<table class="table is-striped is-hoverable" id="payTable">
+
          <thead>
      <tr>
-      <th><abbr title="Bezeichner">Bez.</abbr></th>
+      <th>Austellungsdatum</th>
       <th>Preis</th>
-      <th></th>
-       
-
     </tr>
   </thead>
   <tfoot>
     <tr>
       <th></th>
       <th id="table-sum"></th>
-      <th></th>
     </tr>
   </tfoot>
   <tbody id="table-content">
        </tbody>
        </table>
+
+       <button class="button is-success is-large" id="paynow">Jetzt bezahlen <i class="bi bi-wallet2"></i></button>
+       </div>
 </section>
 
+<!-- Confirmation modal -->
+<div class="modal" id="confirmModal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Bezahlung bestätigen</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      <div class="content">
+        <p>
+          Wurde der Betrag in die Kasse eingezahlt?
+        </p>
+        <h2 class="title is-2" id="ModalSum"></h2>
+      </div>
+    </section>
+    <footer class="modal-card-foot buttons">
+      <button class="button is-success" id="confirmCheckout">Bestätigen</button>
+      <button class="button" id="cancelCheckout">Abbrechen</button>
+    </footer>
+  </div>
+</div>
 <%~ include("partials/footer.eta") %>
 <script src="/static/pages/payup.js"></script>
 <%~ include("partials/base_foot.eta") %>