Peter/bkbh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More UI

Browse source
This commit is contained in:
Bianca Fürstenau 2025-02-15 19:48:49 +01:00
parent 4b1efa3a30
commit a7cea3b13a
3 changed files with 192 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/index.html
View file

@ -5,12 +5,12 @@
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Darmstadt sagt Nein zur Bezahlkartei!</title> <title>Darmstadt sagt Nein zur Bezahlkartei!</title>
<script type="module" src="/main.js" defer></script> <script type="module" src="main.js" defer></script>
</head> </head>
<body> <body>
<div class="v-container" id="cafe"> <div class="v-container" id="cafe" style="display: none">
<div id=cafe-voucher> <div id="cafe-voucher" style="display: none">
<h1 class="shout"> <h1 class="shout">
Sumpf Sumpf
</h1> </h1>
@ -18,7 +18,7 @@
<form class="column" id="cafe-voucher-aldi"> <form class="column" id="cafe-voucher-aldi">
<button type="submit"> <button type="submit">
<img <img
src="/assets/aldi.svg" src="assets/aldi.svg"
class="logo" class="logo"
alt="ALDI-Süd-Logo" alt="ALDI-Süd-Logo"
/> />
@ -27,7 +27,7 @@
<form class="column" id="cafe-voucher-edeka"> <form class="column" id="cafe-voucher-edeka">
<button type="submit"> <button type="submit">
<img <img
src="/assets/edeka.svg" src="assets/edeka.svg"
class="logo" class="logo"
alt="Edeka-Logo" alt="Edeka-Logo"
/> />
@ -36,7 +36,7 @@
<form class="column" id="cafe-voucher-dm"> <form class="column" id="cafe-voucher-dm">
<button type="submit"> <button type="submit">
<img <img
src="/assets/dm.svg" src="assets/dm.svg"
class="logo" class="logo"
alt="dm-Logo" alt="dm-Logo"
/> />
@ -45,7 +45,7 @@
<form class="column" id="cafe-voucher-lidl"> <form class="column" id="cafe-voucher-lidl">
<button type="submit"> <button type="submit">
<img <img
src="/assets/lidl.svg" src="assets/lidl.svg"
class="logo" class="logo"
alt="Lidl-Logo" alt="Lidl-Logo"
/> />
@ -54,7 +54,7 @@
<form class="column" id="cafe-voucher-rewe"> <form class="column" id="cafe-voucher-rewe">
<button type="submit"> <button type="submit">
<img <img
src="/assets/rewe.svg" src="assets/rewe.svg"
class="logo" class="logo"
alt="Rewe-Logo" alt="Rewe-Logo"
/> />
@ -63,7 +63,7 @@
<form class="column" id="cafe-voucher-tegut"> <form class="column" id="cafe-voucher-tegut">
<button type="submit"> <button type="submit">
<img <img
src="/assets/tegut.svg" src="assets/tegut.svg"
class="logo" class="logo"
alt="Tegut-Logo" alt="Tegut-Logo"
/> />
@ -71,85 +71,96 @@
</form> </form>
</div> </div>
</div> </div>
<div id="cafe-inventory"> <div id="cafe-inventory" style="display: none">
<form class="v-container"> <form>
<div> <div style="display: contents">
<div class="labelled-input">
<input type="radio" id="cafe-inventory-acc-sumpf" name="cafe-inventory-acc"> <input type="radio" id="cafe-inventory-acc-sumpf" name="cafe-inventory-acc">
<label for="cafe-inventory-acc-sumpf">Sumpf</label> <label for="cafe-inventory-acc-sumpf">Sumpf</label>
<br/> </div>
<div class="labelled-input">
<input type="radio" id="cafe-inventory-acc-hs" name="cafe-inventory-acc"> <input type="radio" id="cafe-inventory-acc-hs" name="cafe-inventory-acc">
<label for="cafe-inventory-acc-hs">Heinersyndikat</label> <label for="cafe-inventory-acc-hs">Heinersyndikat</label>
</div> </div>
<div> </div>
<div style="display: contents">
<div class="labelled-input" id="cafe-inventory-aldi">
<label for="cafe-inventory-voucher-aldi"> <label for="cafe-inventory-voucher-aldi">
<img <img
src="/assets/aldi.svg" src="assets/aldi.svg"
class="logo" class="logo"
alt="ALDI-Süd-Logo" alt="ALDI-Süd-Logo"
/> />
</label> </label>
<input type="number" id="cafe-inventory-voucher-aldi" name="cafe-inventory-voucher-aldi" min="0"> <input type="number" name="cafe-inventory-voucher-aldi" min="0">
<br/> </div>
<div class="labelled-input" id="cafe-inventory-edeka">
<label for="cafe-inventory-voucher-edeka"> <label for="cafe-inventory-voucher-edeka">
<img <img
src="/assets/edeka.svg" src="assets/edeka.svg"
class="logo" class="logo"
alt="Edeka-Logo" alt="Edeka-Logo"
/> />
</label> </label>
<input type="number" id="cafe-inventory-voucher-edeka" name="cafe-inventory-voucher-edeka" min="0"> <input type="number" name="cafe-inventory-voucher-edeka" min="0">
<br/> </div>
<div class="labelled-input" id="cafe-inventory-dm">
<label for="cafe-inventory-voucher-dm"> <label for="cafe-inventory-voucher-dm">
<img <img
src="/assets/dm.svg" src="assets/dm.svg"
class="logo" class="logo"
alt="dm-Logo" alt="dm-Logo"
/> />
</label> </label>
<input type="number" id="cafe-inventory-voucher-dm" name="cafe-inventory-voucher-dm" min="0"> <input type="number" id="cafe-inventory-voucher-dm" name="cafe-inventory-voucher-dm" min="0">
<br/> </div>
<div class="labelled-input" id="cafe-inventory-lidl">
<label for="cafe-inventory-voucher-lidl"> <label for="cafe-inventory-voucher-lidl">
<img <img
src="/assets/lidl.svg" src="assets/lidl.svg"
class="logo" class="logo"
alt="Lidl-Logo" alt="Lidl-Logo"
/> />
</label> </label>
<input type="number" id="cafe-inventory-voucher-lidl" name="cafe-inventory-voucher-lidl" min="0"> <input type="number" id="cafe-inventory-voucher-lidl" name="cafe-inventory-voucher-lidl" min="0">
<br/> </div>
<div class="labelled-input" id="cafe-inventory-rewe">
<label for="cafe-inventory-voucher-rewe"> <label for="cafe-inventory-voucher-rewe">
<img <img
src="/assets/rewe.svg" src="assets/rewe.svg"
class="logo" class="logo"
alt="Rewe-Logo" alt="Rewe-Logo"
/> />
</label> </label>
<input type="number" id="cafe-inventory-voucher-rewe" name="cafe-inventory-voucher-rewe" min="0"> <input type="number" id="cafe-inventory-voucher-rewe" name="cafe-inventory-voucher-rewe" min="0">
<br/> </div>
<div class="labelled-input" id="cafe-inventory-tegut">
<label for="cafe-inventory-voucher-tegut"> <label for="cafe-inventory-voucher-tegut">
<img <img
src="/assets/tegut.svg" src="assets/tegut.svg"
class="logo" class="logo"
alt="Tegut-Logo" alt="Tegut-Logo"
/> />
</label> </label>
<input type="number" id="cafe-inventory-voucher-tegut" name="cafe-inventory-voucher-tegut" min="0"> <input type="number" id="cafe-inventory-voucher-tegut" name="cafe-inventory-voucher-tegut" min="0">
<br/>
</div> </div>
<div> </div>
<div class="labelled-input">
<label for="cafe-inventory-cash"> <label for="cafe-inventory-cash">
<img <img
src="/assets/cash.svg" src="assets/cash.svg"
class="logo" class="logo"
alt="Bargeld" alt="Bargeld"
/> />
</label> </label>
<input type="number" id="cafe-inventory-cash" name="cafe-inventory-cash" min="0"> <input type="number" id="cafe-inventory-cash" name="cafe-inventory-cash" min="0">
<br/>
</div> </div>
<button type="submit" class="shout">
Senden
</button>
</form> </form>
</div> </div>
<div class="h-container nav"> <div class="v-container nav" id="cafe-nav">
<form id="cafe-nav-inventory"> <form id="cafe-nav-inventory">
<button type="submit"> <button type="submit">
<span class="shout"> <span class="shout">
@ -166,17 +177,17 @@
</form> </form>
</div> </div>
</div> </div>
<div class="angel"> <div id="angel">
<div> <div>
<form class="h-container"> <form class="h-container">
</form> </form>
</div> </div>
</div> </div>
<div class="h-container nav"> <div class="v-container nav" id="nav">
<form class="column" id="nav-cafe"> <form class="column" id="nav-cafe">
<button type="submit"> <button type="submit">
<img <img
src="/assets/cafe.svg" src="assets/cafe.svg"
class="logo" class="logo"
alt="Tauschcafé" alt="Tauschcafé"
/> />
@ -185,7 +196,7 @@
<form class="column" id="nav-angel"> <form class="column" id="nav-angel">
<button type="submit"> <button type="submit">
<img <img
src="/assets/angel.svg" src="assets/angel.svg"
class="logo" class="logo"
alt="Botengang" alt="Botengang"
/> />

92
src/main.js
View file

@ -1,58 +1,66 @@
const { invoke } = window.__TAURI__.core; const { invoke } = window.__TAURI__.core;
let cafe; let callbacks = {
let cafeVoucher; '#nav-cafe': () => activate("", "cafe", ["angel"]),
let cafeInventory; '#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; async function increment(el) {
let pullMsgEl; 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) { async function swap(s) {
await invoke("swap", { store: s, acc: 1 }); await invoke("swap", { store: s, acc: 1 });
cntMsgEl.textContent = await invoke("count", {}); document.querySelector("h1").textContent = await invoke("count", {});
} }
async function push() { async function activate(ctx, el, nels) {
pullMsgEl.textContent = await invoke("push_data", {}); document.querySelector("#"+ctx+el).style.display = "";
} for (const nel of nels) {
document.querySelector("#"+ctx+nel).style.display = "none";
async function pull() { }
pullMsgEl.textContent = await invoke("pull_data", {}); document.querySelector("#"+ctx+"nav").classList.remove("v-container");
document.querySelector("#"+ctx+"nav").classList.add("h-container");
} }
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
cntMsgEl = document.querySelector("#cnt-msg"); for (let key in callbacks) {
pullMsgEl = document.querySelector("#pull-msg"); if (callbacks.hasOwnProperty(key)) {
document.querySelector("#aldi-form").addEventListener("submit", (e) => { document.querySelector(key).addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
swap("aldi"); callbacks[key]();
}); });
document.querySelector("#edeka-form").addEventListener("submit", (e) => { }
}
for (const store of stores) {
document.querySelector("#cafe-inventory-"+store+" label").addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
swap("edeka"); increment("#cafe-inventory-"+store);
});
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();
}); });
}
}); });

53
src/styles.css
View file

@ -39,18 +39,14 @@
min-height: fill; min-height: fill;
} }
label .logo {
height: 30px;
}
body { body {
min-height: 98vh; height: 98vh;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
justify-content: space-between; justify-content: space-between;
} }
.nav { .nav.h-container {
flex: 0; flex: 0;
margin: 3mm; margin: 3mm;
padding: 3mm; padding: 3mm;
@ -104,6 +100,10 @@ input[type=number] {
border: 1px solid #eee; border: 1px solid #eee;
} }
input[type=radio] {
height: 60%;
}
button:hover { button:hover {
border-color: #396cd8; border-color: #396cd8;
} }
@ -112,6 +112,47 @@ button:active {
background-color: #e8e8e8; 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) { @media (prefers-color-scheme: dark) {
:root { :root {
color: #f6f6f6; color: #f6f6f6;