From a7cea3b13a5a26eac4ea48a78409b11ecbdcb496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bianca=20F=C3=BCrstenau?= <bianca@mathebau.de>
Date: Sat, 15 Feb 2025 19:48:49 +0100
Subject: [PATCH] More UI

---
 src/index.html | 171 ++++++++++++++++++++++++++-----------------------
 src/main.js    | 100 ++++++++++++++++-------------
 src/styles.css |  53 +++++++++++++--
 3 files changed, 192 insertions(+), 132 deletions(-)
diff --git a/src/index.html b/src/index.html
index a617e74..b105d6c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,12 +5,12 @@
 		<link rel="stylesheet" href="styles.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Darmstadt sagt Nein zur Bezahlkartei!</title>
-		<script type="module" src="/main.js" defer></script>
+		<script type="module" src="main.js" defer></script>
 	</head>
 
 	<body>
-		<div class="v-container" id="cafe">
-			<div id=cafe-voucher>
+		<div class="v-container" id="cafe" style="display: none">
+			<div id="cafe-voucher" style="display: none">
 				<h1 class="shout">
 					Sumpf
 				</h1>
@@ -18,7 +18,7 @@
 					<form class="column" id="cafe-voucher-aldi">
 						<button type="submit">
 							<img
-								src="/assets/aldi.svg"
+								src="assets/aldi.svg"
 								class="logo"
 								alt="ALDI-Süd-Logo"
 							/>
@@ -27,7 +27,7 @@
 					<form class="column" id="cafe-voucher-edeka">
 						<button type="submit">
 							<img
-								src="/assets/edeka.svg"
+								src="assets/edeka.svg"
 								class="logo"
 								alt="Edeka-Logo"
 							/>
@@ -36,7 +36,7 @@
 					<form class="column" id="cafe-voucher-dm">
 						<button type="submit">
 							<img
-								src="/assets/dm.svg"
+								src="assets/dm.svg"
 								class="logo"
 								alt="dm-Logo"
 							/>
@@ -45,7 +45,7 @@
 					<form class="column" id="cafe-voucher-lidl">
 						<button type="submit">
 							<img
-								src="/assets/lidl.svg"
+								src="assets/lidl.svg"
 								class="logo"
 								alt="Lidl-Logo"
 							/>
@@ -54,7 +54,7 @@
 					<form class="column" id="cafe-voucher-rewe">
 						<button type="submit">
 							<img
-								src="/assets/rewe.svg"
+								src="assets/rewe.svg"
 								class="logo"
 								alt="Rewe-Logo"
 							/>
@@ -63,7 +63,7 @@
 					<form class="column" id="cafe-voucher-tegut">
 						<button type="submit">
 							<img
-								src="/assets/tegut.svg"
+								src="assets/tegut.svg"
 								class="logo"
 								alt="Tegut-Logo"
 							/>
@@ -71,85 +71,96 @@
 					</form>
 				</div>
 			</div>
-			<div id="cafe-inventory">
-				<form class="v-container">
-					<div>
-						<input type="radio" id="cafe-inventory-acc-sumpf" name="cafe-inventory-acc">
-						<label for="cafe-inventory-acc-sumpf">Sumpf</label>
-						<br/>
-						<input type="radio" id="cafe-inventory-acc-hs" name="cafe-inventory-acc">
-						<label for="cafe-inventory-acc-hs">Heinersyndikat</label>
+			<div id="cafe-inventory" style="display: none">
+				<form>
+					<div style="display: contents">
+						<div class="labelled-input">
+							<input type="radio" id="cafe-inventory-acc-sumpf" name="cafe-inventory-acc">
+							<label for="cafe-inventory-acc-sumpf">Sumpf</label>
+						</div>
+						<div class="labelled-input">
+							<input type="radio" id="cafe-inventory-acc-hs" name="cafe-inventory-acc">
+							<label for="cafe-inventory-acc-hs">Heinersyndikat</label>
+						</div>
 					</div>
-					<div>
-						<label for="cafe-inventory-voucher-aldi">
-							<img
-								src="/assets/aldi.svg"
-								class="logo"
-								alt="ALDI-Süd-Logo"
-							/>
-						</label>
-						<input type="number" id="cafe-inventory-voucher-aldi" name="cafe-inventory-voucher-aldi" min="0">
-						<br/>
-						<label for="cafe-inventory-voucher-edeka">
-							<img
-								src="/assets/edeka.svg"
-								class="logo"
-								alt="Edeka-Logo"
-							/>
-						</label>
-						<input type="number" id="cafe-inventory-voucher-edeka" name="cafe-inventory-voucher-edeka" min="0">
-						<br/>
-						<label for="cafe-inventory-voucher-dm">
-							<img
-								src="/assets/dm.svg"
-								class="logo"
-								alt="dm-Logo"
-							/>
-						</label>
-						<input type="number" id="cafe-inventory-voucher-dm" name="cafe-inventory-voucher-dm" min="0">
-						<br/>
-						<label for="cafe-inventory-voucher-lidl">
-							<img
-								src="/assets/lidl.svg"
-								class="logo"
-								alt="Lidl-Logo"
-							/>
-						</label>
-						<input type="number" id="cafe-inventory-voucher-lidl" name="cafe-inventory-voucher-lidl" min="0">
-						<br/>
-						<label for="cafe-inventory-voucher-rewe">
-							<img
-								src="/assets/rewe.svg"
-								class="logo"
-								alt="Rewe-Logo"
-							/>
-						</label>
-						<input type="number" id="cafe-inventory-voucher-rewe" name="cafe-inventory-voucher-rewe" min="0">
-						<br/>
-						<label for="cafe-inventory-voucher-tegut">
-							<img
-								src="/assets/tegut.svg"
-								class="logo"
-								alt="Tegut-Logo"
-							/>
-						</label>
-						<input type="number" id="cafe-inventory-voucher-tegut" name="cafe-inventory-voucher-tegut" min="0">
-						<br/>
+					<div style="display: contents">
+						<div class="labelled-input" id="cafe-inventory-aldi">
+							<label for="cafe-inventory-voucher-aldi">
+								<img
+									src="assets/aldi.svg"
+									class="logo"
+									alt="ALDI-Süd-Logo"
+								/>
+							</label>
+							<input type="number" name="cafe-inventory-voucher-aldi" min="0">
+						</div>
+						<div class="labelled-input" id="cafe-inventory-edeka">
+							<label for="cafe-inventory-voucher-edeka">
+								<img
+									src="assets/edeka.svg"
+									class="logo"
+									alt="Edeka-Logo"
+								/>
+							</label>
+							<input type="number" name="cafe-inventory-voucher-edeka" min="0">
+						</div>
+						<div class="labelled-input" id="cafe-inventory-dm">
+							<label for="cafe-inventory-voucher-dm">
+								<img
+									src="assets/dm.svg"
+									class="logo"
+									alt="dm-Logo"
+								/>
+							</label>
+							<input type="number" id="cafe-inventory-voucher-dm" name="cafe-inventory-voucher-dm" min="0">
+						</div>
+						<div class="labelled-input" id="cafe-inventory-lidl">
+							<label for="cafe-inventory-voucher-lidl">
+								<img
+									src="assets/lidl.svg"
+									class="logo"
+									alt="Lidl-Logo"
+								/>
+							</label>
+							<input type="number" id="cafe-inventory-voucher-lidl" name="cafe-inventory-voucher-lidl" min="0">
+						</div>
+						<div class="labelled-input" id="cafe-inventory-rewe">
+							<label for="cafe-inventory-voucher-rewe">
+								<img
+									src="assets/rewe.svg"
+									class="logo"
+									alt="Rewe-Logo"
+								/>
+							</label>
+							<input type="number" id="cafe-inventory-voucher-rewe" name="cafe-inventory-voucher-rewe" min="0">
+						</div>
+						<div class="labelled-input" id="cafe-inventory-tegut">
+							<label for="cafe-inventory-voucher-tegut">
+								<img
+									src="assets/tegut.svg"
+									class="logo"
+									alt="Tegut-Logo"
+								/>
+							</label>
+							<input type="number" id="cafe-inventory-voucher-tegut" name="cafe-inventory-voucher-tegut" min="0">
+						</div>
 					</div>
-					<div>
+					<div class="labelled-input">
 						<label for="cafe-inventory-cash">
 							<img
-								src="/assets/cash.svg"
+								src="assets/cash.svg"
 								class="logo"
 								alt="Bargeld"
 							/>
 						</label>
 						<input type="number" id="cafe-inventory-cash" name="cafe-inventory-cash" min="0">
-						<br/>
 					</div>
+					<button type="submit" class="shout">
+						Senden
+					</button>
 				</form>
 			</div>
-			<div class="h-container nav">
+			<div class="v-container nav" id="cafe-nav">
 				<form id="cafe-nav-inventory">
 					<button type="submit">
 						<span class="shout">
@@ -166,17 +177,17 @@
 				</form>
 			</div>
 		</div>
-		<div class="angel">
+		<div id="angel">
 			<div>
 				<form class="h-container">
 				</form>
 			</div>
 		</div>
-		<div class="h-container nav">
+		<div class="v-container nav" id="nav">
 			<form class="column" id="nav-cafe">
 				<button type="submit">
 					<img
-						src="/assets/cafe.svg"
+						src="assets/cafe.svg"
 						class="logo"
 						alt="Tauschcafé"
 					/>
@@ -185,7 +196,7 @@
 			<form class="column" id="nav-angel">
 				<button type="submit">
 					<img
-						src="/assets/angel.svg"
+						src="assets/angel.svg"
 						class="logo"
 						alt="Botengang"
 					/>
diff --git a/src/main.js b/src/main.js
index 365d449..92861f1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,58 +1,66 @@
 const { invoke } = window.__TAURI__.core;
 
-let cafe;
-let cafeVoucher;
-let cafeInventory;
+let callbacks = {
+	'#nav-cafe': () => activate("", "cafe", ["angel"]),
+	'#nav-angel': () => activate("", "angel", ["cafe"]),
+	'#cafe-nav-inventory': () => activate("cafe-", "inventory", ["voucher"]),
+	'#cafe-nav-voucher': () => activate("cafe-", "voucher", ["inventory"]),
+	'#cafe-inventory form': () => inventory(),
+	'#cafe-voucher-aldi': () => swap("aldi"),
+	'#cafe-voucher-edeka': () => swap("edeka"),
+	'#cafe-voucher-dm': () => swap("dm"),
+	'#cafe-voucher-lidl': () => swap("lidl"),
+	'#cafe-voucher-rewe': () => swap("rewe"),
+	'#cafe-voucher-tegut': () => swap("tegut"),
+}
+let stores = [
+	"aldi",
+	"edeka",
+	"dm",
+	"lidl",
+	"rewe",
+	"tegut",
+]
 
-let cntMsgEl;
-let pullMsgEl;
+async function increment(el) {
+	var el = document.querySelector(el+" input");
+	let v = parseInt(el.value, 10);
+	v = isNaN(v) ? 0 : v;
+	v++;
+	el.value = v;
+}
+
+async function inventory() {
+	alert("Hi!");
+}
 
 async function swap(s) {
 	await invoke("swap", { store: s, acc: 1 });
-	cntMsgEl.textContent = await invoke("count", {});
+	document.querySelector("h1").textContent = await invoke("count", {});
 }
 
-async function push() {
-	pullMsgEl.textContent = await invoke("push_data", {});
-}
-
-async function pull() {
-	pullMsgEl.textContent = await invoke("pull_data", {});
+async function activate(ctx, el, nels) {
+	document.querySelector("#"+ctx+el).style.display = "";
+	for (const nel of nels) {
+		document.querySelector("#"+ctx+nel).style.display = "none";
+	}
+	document.querySelector("#"+ctx+"nav").classList.remove("v-container");
+	document.querySelector("#"+ctx+"nav").classList.add("h-container");
 }
 
 window.addEventListener("DOMContentLoaded", () => {
-	cntMsgEl = document.querySelector("#cnt-msg");
-	pullMsgEl = document.querySelector("#pull-msg");
-	document.querySelector("#aldi-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		swap("aldi");
-	});
-	document.querySelector("#edeka-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		swap("edeka");
-	});
-	document.querySelector("#dm-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		swap("dm");
-	});
-	document.querySelector("#lidl-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		swap("lidl");
-	});
-	document.querySelector("#rewe-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		swap("rewe");
-	});
-	document.querySelector("#tegut-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		swap("tegut");
-	});
-	document.querySelector("#push-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		push();
-	});
-	document.querySelector("#pull-form").addEventListener("submit", (e) => {
-		e.preventDefault();
-		pull();
-	});
+	for (let key in callbacks) {
+		if (callbacks.hasOwnProperty(key)) {
+			document.querySelector(key).addEventListener("submit", (e) => {
+				e.preventDefault();
+				callbacks[key]();
+			});
+		}
+	}
+	for (const store of stores) {
+		document.querySelector("#cafe-inventory-"+store+" label").addEventListener("click", (e) => {
+			e.preventDefault();
+			increment("#cafe-inventory-"+store);
+		});
+	}
 });
diff --git a/src/styles.css b/src/styles.css
index de40503..f86db57 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -39,18 +39,14 @@
 	min-height: fill;
 }
 
-label .logo {
-	height: 30px;
-}
-
 body {
-	min-height: 98vh;
+	height: 98vh;
 	display: flex;
 	flex-flow: column nowrap;
 	justify-content: space-between;
 }
 
-.nav {
+.nav.h-container {
 	flex: 0;
 	margin: 3mm;
 	padding: 3mm;
@@ -104,6 +100,10 @@ input[type=number] {
 	border: 1px solid #eee;
 }
 
+input[type=radio] {
+	height: 60%;
+}
+
 button:hover {
 	border-color: #396cd8;
 }
@@ -112,6 +112,47 @@ button:active {
 	background-color: #e8e8e8;
 }
 
+#cafe-inventory form {
+	font-size: 7mm;
+	line-height: 11mm;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(1cm, 1fr) minmax(14ch, 2fr));
+	grid-auto-flow: row;
+	column-gap: 3mm;
+}
+
+.labelled-input {
+	display: grid;
+	grid-column-end: span 2;
+	grid-row-end: span 1;
+	grid-template-columns: subgrid;
+}
+
+.labelled-input :first-child {
+	justify-self: end;
+	align-self: baseline;
+}
+
+label .logo {
+	height: 1.5cm;
+}
+
+#cafe-inventory form button {
+	grid-column-end: -1;
+}
+
+#cafe-voucher {
+	flex: 1;
+}
+
+#cafe-inventory {
+	flex: 1;
+}
+
+#cafe {
+	width: 100%;
+}
+
 @media (prefers-color-scheme: dark) {
 	:root {
 		color: #f6f6f6;
