More UI
This commit is contained in:
Bianca Fürstenau
parent
4b1efa3a30
commit
a7cea3b13a
3 changed files with 192 additions and 132 deletions
171
src/index.html
171
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"
|
||||
/>
|
||||
|
|
|
|||
100
src/main.js
100
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);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue