nico
/
spartacus-inventur-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Run prettier on everything

This commit is contained in:
mmmchimps 2023-03-27 19:49:02 +02:00
parent f8d6da0247
commit bed5841744
12 changed files with 469 additions and 413 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.svelte
View File

@ -1,12 +1,11 @@
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<script lang="ts"> <script lang="ts">
import "../node_modules/bulma/css/bulma.min.css"; import "../node_modules/bulma/css/bulma.min.css";
import List from "./components/List.svelte"; import List from "./components/List.svelte";
import Navbar from "./components/Navbar.svelte"; import Navbar from "./components/Navbar.svelte";
</script> </script>
<!-- svelte-ignore a11y-missing-attribute -->
<main> <main>
<Navbar /> <Navbar />
<div class="container" id="drink-container"> <div class="container" id="drink-container">

74
src/components/Drink.svelte
View File

@ -1,32 +1,31 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { inventory, inventoryStartedAt } from "../stores/inventory" import { inventory, inventoryStartedAt } from "../stores/inventory";
import inventoryApi from "../lib/api"; import inventoryApi from "../lib/api";
export let drinkName: string export let drinkName: string;
export let drinkType: string export let drinkType: string;
let amountContainers: number let amountContainers: number;
let amountBottles: number let amountBottles: number;
const setStartOfInventory = () => { const setStartOfInventory = () => {
if ($inventoryStartedAt.length < 1) { if ($inventoryStartedAt.length < 1) {
$inventoryStartedAt = inventoryApi.createTimestamp() $inventoryStartedAt = inventoryApi.createTimestamp();
inventoryApi.save("inventoryStartedAt", $inventoryStartedAt) inventoryApi.save("inventoryStartedAt", $inventoryStartedAt);
}
} }
};
const saveInventory = () => { const saveInventory = () => {
// Check if a drink is already in the inventory. If yes, then update the amounts. If not, add it. // Check if a drink is already in the inventory. If yes, then update the amounts. If not, add it.
if ($inventory.some(item => item.name === drinkName)) { if ($inventory.some((item) => item.name === drinkName)) {
$inventory.forEach(item => { $inventory.forEach((item) => {
if (drinkName === item.name) { if (drinkName === item.name) {
item.amountContainers = amountContainers item.amountContainers = amountContainers;
item.amountBottles = amountBottles item.amountBottles = amountBottles;
} }
}) });
} } else {
else {
$inventory = [ $inventory = [
{ {
name: drinkName, name: drinkName,
@ -37,24 +36,23 @@
...$inventory, ...$inventory,
]; ];
} }
inventoryApi.save("drinks", $inventory) inventoryApi.save("drinks", $inventory);
} };
const loadAmountsFromInventory = () => { const loadAmountsFromInventory = () => {
$inventory.forEach(item => { $inventory.forEach((item) => {
if (item.name === drinkName) { if (item.name === drinkName) {
amountContainers = item.amountContainers; amountContainers = item.amountContainers;
amountBottles = item.amountBottles; amountBottles = item.amountBottles;
} }
}) });
} };
onMount(async () => { onMount(async () => {
loadAmountsFromInventory() loadAmountsFromInventory();
// Check if an inventory has been ongoing on the current device // Check if an inventory has been ongoing on the current device
$inventoryStartedAt = await inventoryApi.load("inventoryStartedAt") $inventoryStartedAt = await inventoryApi.load("inventoryStartedAt");
}) });
</script> </script>
<div class="box"> <div class="box">
@ -63,16 +61,28 @@
{drinkName} {drinkName}
</div> </div>
<div class="column"> <div class="column">
<input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen" bind:value={amountContainers} on:input={() => { <input
saveInventory() class="input is-primary"
setStartOfInventory() type="number"
}}> placeholder="Anzahl volle Gebinde/Kästen"
bind:value={amountContainers}
on:input={() => {
saveInventory();
setStartOfInventory();
}}
/>
</div> </div>
<div class="column"> <div class="column">
<input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={() => { <input
saveInventory() class="input is-rounded"
setStartOfInventory() type="number"
}}> placeholder="Anzahl einzelne Flaschen"
bind:value={amountBottles}
on:input={() => {
saveInventory();
setStartOfInventory();
}}
/>
</div> </div>
</div> </div>
</div> </div>

75
src/components/Finish.svelte
View File

@ -10,7 +10,7 @@
let successWindow; let successWindow;
export const showWindow = () => windowIsVisible = "is-active"; export const showWindow = () => (windowIsVisible = "is-active");
const closeWindow = () => { const closeWindow = () => {
windowIsVisible = ""; windowIsVisible = "";
@ -18,62 +18,86 @@
// If the input field of a drink was not touched, interpret it as "0 containers, 0 bottles" and add it to the inventory // If the input field of a drink was not touched, interpret it as "0 containers, 0 bottles" and add it to the inventory
const fillInventoryWithZeroes = () => { const fillInventoryWithZeroes = () => {
$drinks.forEach(drink => { $drinks.forEach((drink) => {
if (!$inventory.some(item => item.name === drink.name)) { if (!$inventory.some((item) => item.name === drink.name)) {
$inventory = [{name: drink.name, type: drink.type, amountContainers: 0, amountBottles: 0 }, ...$inventory] $inventory = [
{
name: drink.name,
type: drink.type,
amountContainers: 0,
amountBottles: 0,
},
...$inventory,
];
} }
}) });
} };
</script> </script>
<div class="modal {windowIsVisible}"> <div class="modal {windowIsVisible}">
<div class="modal-background" /> <div class="modal-background" />
<div class="modal-card"> <div class="modal-card">
{#if finishKind === "reset"} {#if finishKind === "reset"}
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title">Inventur neu beginnen ❌</p> <p class="modal-card-title">Inventur neu beginnen ❌</p>
<button class="delete" aria-label="close" on:click={closeWindow}></button> <button class="delete" aria-label="close" on:click={closeWindow} />
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<p>Bist du dir sicher, dass du die Inventur abbrechen willst? Damit werden alle bereits eingegebenen Werte zurückgesetzt.</p> <p>
Bist du dir sicher, dass du die Inventur abbrechen willst? Damit
werden alle bereits eingegebenen Werte zurückgesetzt.
</p>
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<button class="button is-danger" on:click={inventoryApi.reset}>Ja, Reset!</button> <button class="button is-danger" on:click={inventoryApi.reset}
>Ja, Reset!</button
>
<button class="button" on:click={closeWindow}>Abbrechen</button> <button class="button" on:click={closeWindow}>Abbrechen</button>
</footer> </footer>
{:else if finishKind === "finish"} {:else if finishKind === "finish"}
<!--Prevent saving empty inventories--> <!--Prevent saving empty inventories-->
{#if $inventory.length > 0} {#if $inventory.length > 0}
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title">Inventur abschließen ✅</p> <p class="modal-card-title">Inventur abschließen ✅</p>
<button class="delete" aria-label="close" on:click={closeWindow}></button> <button class="delete" aria-label="close" on:click={closeWindow} />
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<p> <p>
Vielen Dank, dass du eine Inventur gemacht hast! 🫶 Vielen Dank, dass du eine Inventur gemacht hast! 🫶
<br> <br />
Bitte gib noch deinen <strong>Namen</strong> ein. Außerdem hast du hier noch Platz für irgendwelche <strong>Kommentare</strong> zu deiner Inventur. Bitte gib noch deinen <strong>Namen</strong> ein. Außerdem hast du
hier noch Platz für irgendwelche
<strong>Kommentare</strong> zu deiner Inventur.
</p> </p>
<br> <br />
<div class="field"> <div class="field">
<input class="input is-primary" type="text" placeholder="Name" bind:value={name} /> <input
class="input is-primary"
type="text"
placeholder="Name"
bind:value={name}
/>
</div> </div>
<div class="field"> <div class="field">
<textarea class="textarea is-info" placeholder="Kommentare" bind:value={comment} /> <textarea
class="textarea is-info"
placeholder="Kommentare"
bind:value={comment}
/>
</div> </div>
</section> </section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
{#if name.length > 0} {#if name.length > 0}
<button class="button is-primary" on:click={() => { <button
fillInventoryWithZeroes() class="button is-primary"
inventoryApi.sendResultToBackend($inventory, name, comment) on:click={() => {
closeWindow() fillInventoryWithZeroes();
successWindow.showWindow() inventoryApi.sendResultToBackend($inventory, name, comment);
setTimeout(() => inventoryApi.reset(), 3000) closeWindow();
}}>Abschließen</button> successWindow.showWindow();
setTimeout(() => inventoryApi.reset(), 3000);
}}>Abschließen</button
>
{:else} {:else}
<button class="button" disabled>Abschließen</button> <button class="button" disabled>Abschließen</button>
{/if} {/if}
@ -88,7 +112,6 @@
</footer> </footer>
{/if} {/if}
{/if} {/if}
</div> </div>
</div> </div>

22
src/components/Info.svelte
View File

@ -4,8 +4,8 @@
import inventoryApi from "../lib/api"; import inventoryApi from "../lib/api";
onMount(async () => { onMount(async () => {
$inventoryStartedAt = await inventoryApi.load("inventoryStartedAt") $inventoryStartedAt = await inventoryApi.load("inventoryStartedAt");
}) });
</script> </script>
<article class="message is-info"> <article class="message is-info">
@ -15,12 +15,13 @@
<div class="message-body"> <div class="message-body">
<p> <p>
Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen. Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen.
<br> <br />
Dein Fortschritt wird gespeichert, bis du mit Klick auf <span class="tag is-primary"><strong>Abschluss</strong></span> die Inventur abschließt. Dein Fortschritt wird gespeichert, bis du mit Klick auf
<br> <span class="tag is-primary"><strong>Abschluss</strong></span>
die Inventur abschließt.
<br />
Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst. Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
</p> </p>
</div> </div>
</article> </article>
@ -28,9 +29,12 @@
<article class="message is-link"> <article class="message is-link">
<div class="message-body"> <div class="message-body">
<p> <p>
Du hast <strong>am {$inventoryStartedAt}</strong> auf deinem aktuellen Gerät eine Inventur gestartet. Du hast <strong>am {$inventoryStartedAt}</strong> auf deinem aktuellen
<br> Gerät eine Inventur gestartet.
Klicke oben rechts auf <span class="tag is-danger"><strong>Reset</strong></span>, wenn du deinen Fortschritt löschen möchtest. <br />
Klicke oben rechts auf
<span class="tag is-danger"><strong>Reset</strong></span>, wenn du
deinen Fortschritt löschen möchtest.
</p> </p>
</div> </div>
</article> </article>

10
src/components/List.svelte
View File

@ -1,6 +1,4 @@
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import Drink from "./Drink.svelte"; import Drink from "./Drink.svelte";
@ -8,14 +6,16 @@
import { activeCategory, drinks, inventory } from "../stores/inventory.js"; import { activeCategory, drinks, inventory } from "../stores/inventory.js";
import inventoryApi from "../lib/api"; import inventoryApi from "../lib/api";
$: filteredDrinks = $drinks.filter(drink => drink.type == $activeCategory); $: filteredDrinks = $drinks.filter((drink) => drink.type == $activeCategory);
onMount(async () => { onMount(async () => {
$inventory = await inventoryApi.load("drinks"); $inventory = await inventoryApi.load("drinks");
}) });
</script> </script>
<!-- svelte-ignore a11y-missing-attribute -->
<section class="section"> <section class="section">
<div class="container"> <div class="container">
{#if $activeCategory == ""} {#if $activeCategory == ""}

62
src/components/Navbar.svelte
View File

@ -1,6 +1,4 @@
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<script lang="ts"> <script lang="ts">
import { activeCategory } from "../stores/inventory"; import { activeCategory } from "../stores/inventory";
import { inventory } from "../stores/inventory"; import { inventory } from "../stores/inventory";
@ -16,43 +14,53 @@
{ name: "fizzyDrink", friendlyName: "Brause & Wasser" }, { name: "fizzyDrink", friendlyName: "Brause & Wasser" },
{ name: "wine", friendlyName: "Wein" }, { name: "wine", friendlyName: "Wein" },
{ name: "spirit", friendlyName: "Schnaps & Sirup" }, { name: "spirit", friendlyName: "Schnaps & Sirup" },
] ];
const setActiveCategory = (category: string) => { const setActiveCategory = (category: string) => {
$activeCategory = category; $activeCategory = category;
} };
const setFinishKind = (kind: string) => { const setFinishKind = (kind: string) => {
resetOrFinish = kind; resetOrFinish = kind;
} };
const toggleBurgerMenu = () => { const toggleBurgerMenu = () => {
burgerMenuActive = burgerMenuActive === "is-active" ? "" : "is-active" burgerMenuActive = burgerMenuActive === "is-active" ? "" : "is-active";
} };
</script> </script>
<!-- svelte-ignore a11y-missing-attribute -->
<nav class="navbar is-light is-spaced has-shadow is-fixed-top"> <nav class="navbar is-light is-spaced has-shadow is-fixed-top">
<div class="navbar-brand"> <div class="navbar-brand">
<a on:click={() => setActiveCategory("")} class="navbar-item"> <a on:click={() => setActiveCategory("")} class="navbar-item">
<img src={sparti_logo} /> <img src={sparti_logo} />
</a> </a>
<a role="button" class="navbar-burger {burgerMenuActive}" on:click={toggleBurgerMenu} aria-label="menu" aria-expanded="false" data-target="spartacusNavbar"> <a
<span aria-hidden="true"></span> role="button"
<span aria-hidden="true"></span> class="navbar-burger {burgerMenuActive}"
<span aria-hidden="true"></span> on:click={toggleBurgerMenu}
aria-label="menu"
aria-expanded="false"
data-target="spartacusNavbar"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a> </a>
</div> </div>
<div class="navbar-menu {burgerMenuActive}" id="spartacusNavbar"> <div class="navbar-menu {burgerMenuActive}" id="spartacusNavbar">
<div class="navbar-start"> <div class="navbar-start">
{#each drinkCategories as category (category.name)} {#each drinkCategories as category (category.name)}
<a class="navbar-item" on:click={() => { <a
class="navbar-item"
on:click={() => {
setActiveCategory(category.name); setActiveCategory(category.name);
toggleBurgerMenu(); toggleBurgerMenu();
} }}
}> >
{category.friendlyName} {category.friendlyName}
</a> </a>
{/each} {/each}
@ -61,12 +69,13 @@
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<a on:click={ <a
() => { on:click={() => {
setFinishKind("finish"); setFinishKind("finish");
modalWindow.showWindow() modalWindow.showWindow();
} }}
} class="button is-primary"> class="button is-primary"
>
<strong>Abschluss</strong> <strong>Abschluss</strong>
</a> </a>
</div> </div>
@ -74,12 +83,13 @@
{#if $inventory.length > 0} {#if $inventory.length > 0}
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <div class="buttons">
<a on:click={ <a
() => { on:click={() => {
setFinishKind("reset"); setFinishKind("reset");
modalWindow.showWindow() modalWindow.showWindow();
} }}
} class="button is-danger"> class="button is-danger"
>
<strong>Reset</strong> <strong>Reset</strong>
</a> </a>
</div> </div>

10
src/components/Success.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
let windowIsVisible = ""; let windowIsVisible = "";
export const showWindow = () => windowIsVisible = "is-active"; export const showWindow = () => (windowIsVisible = "is-active");
const closeWindow = () => { const closeWindow = () => {
windowIsVisible = ""; windowIsVisible = "";
@ -12,12 +12,8 @@
<div class="modal-background" /> <div class="modal-background" />
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title"> <p class="title">Inventur abgeschlossen. Danke! ✨</p>
Inventur abgeschlossen. Danke! ✨ <p class="subtitle">Die Seite wird gleich automatisch neu geladen...</p>
</p>
<p class="subtitle">
Die Seite wird gleich automatisch neu geladen...
</p>
<!--Just a small, decorative, indefinite progress bar--> <!--Just a small, decorative, indefinite progress bar-->
<progress class="progress is-small is-primary" /> <progress class="progress is-small is-primary" />
</div> </div>

54
src/lib/api.ts
View File

@ -1,7 +1,7 @@
const backendProtocol = "http" const backendProtocol = "http";
const backendHost = "localhost" const backendHost = "localhost";
const backendPort = "8161" const backendPort = "8161";
const backendEndpoint = "drinks" const backendEndpoint = "drinks";
export default class inventoryApi { export default class inventoryApi {
static async save(key: string, value: any) { static async save(key: string, value: any) {
@ -13,31 +13,46 @@ export default class inventoryApi {
} }
static async reset() { static async reset() {
localStorage.removeItem("drinks") localStorage.removeItem("drinks");
localStorage.removeItem("inventoryStartedAt") localStorage.removeItem("inventoryStartedAt");
window.location.reload(); window.location.reload();
} }
static async sendResultToBackend(inventory: any, name: string, comment: string) { static async sendResultToBackend(
inventory: any,
name: string,
comment: string
) {
let result = { let result = {
inventory: inventory, inventory: inventory,
name: name, name: name,
comment: comment, comment: comment,
inventoryFinishedAt: inventoryApi.createTimestamp() inventoryFinishedAt: inventoryApi.createTimestamp(),
} };
try { try {
await fetch(backendProtocol+"://"+backendHost+":"+backendPort+"/"+backendEndpoint, { await fetch(
backendProtocol +
"://" +
backendHost +
":" +
backendPort +
"/" +
backendEndpoint,
{
method: "POST", method: "POST",
headers: { headers: {
'Accept': 'application/json', Accept: "application/json",
'Content-Type': 'application/json' "Content-Type": "application/json",
}, },
body: JSON.stringify(result), body: JSON.stringify(result),
}) }
);
} catch (err) { } catch (err) {
console.log(err) console.log(err);
alert("Ergebnis konnte nicht abgeschickt werden. Check mal die Dev-Console und/oder gib bitte kurz in der Gastro-Gruppe Bescheid...") alert(
"Ergebnis konnte nicht abgeschickt werden. Check mal die Dev-Console und/oder gib bitte kurz in der Gastro-Gruppe Bescheid..."
);
} }
} }
@ -46,16 +61,15 @@ export default class inventoryApi {
let _date = new Date(_unixTime).toLocaleDateString(); let _date = new Date(_unixTime).toLocaleDateString();
let _time = new Date(_unixTime).toLocaleTimeString(); let _time = new Date(_unixTime).toLocaleTimeString();
return _date + " um " + _time return _date + " um " + _time;
} }
static async saveNameAndComment(name: string, comment: string) { static async saveNameAndComment(name: string, comment: string) {
let performingPerson = { let performingPerson = {
name: name, name: name,
comment: comment comment: comment,
} };
inventoryApi.save("performingPerson", performingPerson) inventoryApi.save("performingPerson", performingPerson);
} }
} }

8
src/main.ts
View File

@ -1,7 +1,7 @@
import App from './App.svelte' import App from "./App.svelte";
const app = new App({ const app = new App({
target: document.body target: document.body,
}) });
export default app export default app;

10
src/stores/inventory.ts
View File

@ -1,4 +1,4 @@
import { readable, writable } from "svelte/store" import { readable, writable } from "svelte/store";
export const drinks = readable([ export const drinks = readable([
// Biere // Biere
@ -41,10 +41,10 @@ export const drinks = readable([
{ name: "Havanna (1,0 l)", type: "spirit" }, { name: "Havanna (1,0 l)", type: "spirit" },
{ name: "'51' Cachaca (1,0 l)", type: "spirit" }, { name: "'51' Cachaca (1,0 l)", type: "spirit" },
{ name: "Berliner Luft (0,7 l)", type: "spirit" }, { name: "Berliner Luft (0,7 l)", type: "spirit" },
]) ]);
export const activeCategory = writable("") export const activeCategory = writable("");
export const inventory = writable([]) export const inventory = writable([]);
export const inventoryStartedAt = writable("") export const inventoryStartedAt = writable("");

4
svelte.config.js
View File

@ -1,7 +1,7 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
export default { export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors // for more information about preprocessors
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
} };

6
vite.config.ts
View File

@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import { svelte } from '@sveltejs/vite-plugin-svelte' import { svelte } from "@sveltejs/vite-plugin-svelte";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [svelte()], plugins: [svelte()],
}) });