restock mode

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);
+			if(modalForm.getAttribute('data-extTable') != null) {
-			updateSingeltonsByTableName(table);
+				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/admin_products.js

@@ -1,6 +1,26 @@
 let uploadFileInput = document.getElementById('imgUpload');
 let fileName = document.getElementById('fileName');
 let imgUploadForm = document.getElementById('imgUploadForm');
+let scannerField = document.getElementById('scannerField');
+let btn_restock = document.getElementById('btn_restock');
+
+let btn_save_2 = document.getElementById('btn_save_2');
+
+let form_gtin = document.getElementById('form_gtin');
+
+let modal_stage_1 = document.getElementById('modal-stage-1');
+let modal_stage_2 = document.getElementById('modal-stage-2');
+let modal_stage_3 = document.getElementById('modal-stage-3');
+
+let modal_stage_2_result = document.getElementById("stage-2-result");
+
+let modal_stage_2_amount = document.getElementById("stage-2-amount");
+
+let globalData;
+
+waitingForScan = false;
+let currentRestockProduct = null;
+
 
 function handleImagePresence(row) {
 	// Check if /api/v1/image?id=row&check returns true
@@ -55,6 +75,10 @@ function silentFormSubmit() {
 	};
 }
 
+function enableScanner() {
+	waitingForScan = true;
+	scannerField.focus();
+}
 
 uploadFileInput.addEventListener('change', function() {
 	fileName.innerHTML = this.files[0].name;
@@ -62,4 +86,110 @@ uploadFileInput.addEventListener('change', function() {
 	setTimeout(() => {
 		refreshTableByName('products');
 	}, 1000);
-});
+});
+
+scannerField.style.fontSize = '1px';
+scannerField.style.height = '1px';
+scannerField.style.width = '1px';
+scannerField.style.opacity = '0';
+scannerField.style.position = 'relative';
+
+// Make sure text fields is always centerd vertically
+window.addEventListener('scroll', function(event) {
+	if(!waitingForScan) {
+		return;
+	}
+	scannerField.y = document.documentElement.scrollTop + 20;
+	scannerField.style.top = document.documentElement.scrollTop + 20 + "px";
+});
+
+setInterval(() => {
+	if(!waitingForScan) {
+		return;
+	}
+	scannerField.focus();
+}, 1000);
+
+btn_restock.addEventListener('click', function() {
+	modal_stage_1.classList.remove('is-hidden');
+	modal_stage_2.classList.add('is-hidden');
+	modal_stage_3.classList.add('is-hidden');
+	waitingForScan = true;
+});
+// Handle barcode scanner input
+scannerField.addEventListener('keydown', async function(event) {
+	if(event.key != 'Enter') {
+		return;
+	}
+	let barcode = scannerField.value;
+	console.log('Barcode scanned:', barcode);
+	scannerField.value = "";
+	// createTemporaryNotification(`Barcode ${barcode} gescannt`, 'is-info');
+	
+
+	// Check if barcode is in the database
+	let product = globalData.find(p => p.gtin == barcode);
+	if(product) {
+		console.log('Product found:', product);
+		currentRestockProduct = product;
+		modal_stage_2_amount.innerHTML = "Aktuelle Menge: " + product.stock;
+		modal_stage_1.classList.add('is-hidden');
+		modal_stage_2.classList.remove('is-hidden');
+		modal_stage_3.classList.add('is-hidden');
+		createTemporaryNotification(`<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} gefunden`, 'is-success');
+	} else {
+		modal_stage_1.classList.add('is-hidden');
+		modal_stage_2.classList.add('is-hidden');
+		modal_stage_3.classList.remove('is-hidden');
+		form_gtin.value = barcode;
+	}
+	// modal_stage_2_result.innerHTML = product ? `<i class="bi bi-check"></i> Produkt gefunden: ${product.name}` : `<i class="bi bi-x"></i> Produkt nicht gefunden`;
+	waitingForScan = false;
+
+
+	// let product = globalData.find(p => p.gtin == barcode);
+	// if(product) {
+	// 	let event = new Event('click');
+	// 	createTemporaryNotification(`<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} gefunden`, 'is-success');
+	// 	document.getElementById(`product_${product.id}`).dispatchEvent(event);
+	// } else {
+	// 	createTemporaryNotification( `<i class="bi bi-upc-scan"></i> Barcode scan: GTIN ${barcode} nicht gefunden`, 'is-danger');
+	// }
+});
+
+function restock(amount) {
+	currentRestockProduct.stock += amount;
+	modal_stage_2_amount.innerHTML = "Aktuelle Menge: " + currentRestockProduct.stock;
+}
+
+function applyStock() {
+	let result = _api.patch('products', {
+		"id": currentRestockProduct.id,
+		"stock": currentRestockProduct.stock
+	})
+	if(result) {
+		createTemporaryNotification('Bestand erfolgreich aktualisiert', 'is-success');
+		modal_stage_2.classList.add('is-hidden');
+		modal_stage_1.classList.remove('is-hidden');
+		modal_stage_3.classList.add('is-hidden');
+		enableScanner();
+	} else {
+		createTemporaryNotification('Fehler beim Aktualisieren des Bestands', 'is-danger');
+	}
+
+
+}
+
+document.addEventListener('DOMContentLoaded', async function() {
+	let data = await returnTableDataByTableName('products');
+	console.info(`Found ${data.count} products`);
+	const result = data.result;
+	globalData = result;
+});
+
+// btn_save_2.addEventListener('click', async function() {
+// 	// Assume submission is valid
+// 	// Get the form data
+// 	// reload table
+// 	// close modal
+// });

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()

static/pages/product_select.js

@@ -186,13 +186,7 @@ function confirmedCart() {
 	});
 }
 
-function getCookie(name) {
+
-	let value = "; " + document.cookie;
-	let parts = value.split("; " + name + "=");
-	if(parts.length == 2) {
-		return parts.pop().split(";").shift();
-	}
-}
 
 // Handle barcode scanner
 // Force the cursor to the scanner field

views/admin/products.eta

@@ -1,11 +1,13 @@
 <%~ include("partials/base_head.eta", {"title": "Admin - Benutzer"}) %>
 <%~ include("partials/nav.eta") %>
-
+<input id="scannerField" type="text"/>
 <section class="section container" id="mainSelect">
 	<h1 class="title">Produktverwaltung</h1>
 	<p class="heading"><button class="js-modal-trigger button" data-target="modal-js-example">
 				Neues Produkt anlegen
-	</button></p>
+	</button><button class="js-modal-trigger button" data-target="modal-restock" id="btn_restock">
+				Lager nachfüllen
+	</button><br></p>
 
 		<input class="input" type="text"  data-searchTargetId="productTable" placeholder="Nach Produkt suchen.." />
 	<table class="table is-striped is-fullwidth is-hoverable" data-dataSource="products" id="productTable" data-pageSize="10">
@@ -148,6 +150,84 @@
 	<button class="modal-close is-large" aria-label="close"></button>
 	</div>
 
+<div id="modal-restock" class="modal">
+	<div class="modal-background"></div>
+
+	<div class="modal-content">
+		<div class="box" id="modal-stage-1">
+			<h2 class="title">Nachfüllen</h1>
+			<center><h1 class="title"><i class="bi bi-upc-scan"></i></h1></center>
+			Warten auf Scan....
+		</div>
+		<div class="box" id="modal-stage-2">
+			<h2 class="title">Scan erfolgreich - Produktmenge eingeben</h1>
+			<h3 class="subtitle" id="stage-2-amount">Aktuelle Menge: 0</h3>
+			<div class="buttons">
+				<button class="button is-info" onclick="restock(6)">+6</button>
+				<button class="button is-info" onclick="restock(10)">+10</button>
+				<button class="button is-info" onclick="restock(12)">+12</button>
+			</div>
+			<button class="button is-success" onclick="applyStock()">Änderungen speichern</button>
+			<div id="stage-2-result"></div>
+		</div>
+		<div class="box" id="modal-stage-3">
+			<h2 class="title">Scan erfolgreich - Produkt erstellen</h1>
+			<form data-targetTable="products">
+			<div class="field">
+				<label class="label">Bezeichner</label>
+				<div class="control has-icons-left">
+					<input class="input" type="text" placeholder="Schokolade" value="" name="name">
+					<span class="icon is-small is-left">
+					<i class="bi bi-file-earmark-person-fill"></i>
+					</span>
+				</div>
+			</div>
+
+			<div class="field">
+			<label class="label">GTIN</label>
+			<div class="control has-icons-left">
+				<input id="form_gtin" class="input" type="number" placeholder="" value="" name="gtin" readonly>
+				<span class="icon is-small is-left">
+				<i class="bi bi-upc"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<label class="label">Lagermenge</label>
+			<div class="control has-icons-left">
+				<input class="input" type="number" placeholder="" value="" name="stock">
+				<span class="icon is-small is-left">
+				<i class="bi bi-archive-fill"></i>
+				</span>
+			</div>
+			</div>
+
+			<div class="field">
+			<label class="label">Preis</label>
+			<div class="control has-icons-left">
+				<input class="input" type="number" placeholder="" value="" step=0.01 name="price">
+				<span class="icon is-small is-left">
+				<i class="bi bi-currency-euro"></i>
+				</span>
+			</div>
+			</div>
+			<div class="field is-grouped">
+			<div class="control">
+				<input type="submit" class="button is-link" value="Save" data-actionBtn="save" data-extTable="productTable" id="btn_save_2">
+			</div>
+			<!--<div class="control">
+				<button type="button" class="button is-link is-light" data-actionBtn="cancel">Cancel</button>
+			</div>-->
+			</div>
+		</form>
+			
+		</div>
+	</div>
+
+	<button class="modal-close is-large" aria-label="close"></button>
+</div>
+
 <script src="/static/pages/admin_products.js"></script>
 <%~ include("partials/footer.eta") %>
 <%~ include("partials/base_foot.eta") %>

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") %>