pay up implementation

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);
 	});
 });
@@ -680,4 +687,31 @@ document.addEventListener('DOMContentLoaded', () => {
 	    $notification.parentNode.removeChild($notification);
 	  });
 	});
-      });
+      });
+
+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()