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 -->
<script lang="ts">
import "../node_modules/bulma/css/bulma.min.css";
import List from "./components/List.svelte";
import Navbar from "./components/Navbar.svelte";
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<main>
<Navbar />
<div class="container" id="drink-container">

74
src/components/Drink.svelte
View File

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

75
src/components/Finish.svelte
View File

@ -10,7 +10,7 @@
let successWindow;
export const showWindow = () => windowIsVisible = "is-active";
export const showWindow = () => (windowIsVisible = "is-active");
const closeWindow = () => {
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
const fillInventoryWithZeroes = () => {
$drinks.forEach(drink => {
if (!$inventory.some(item => item.name === drink.name)) {
$inventory = [{name: drink.name, type: drink.type, amountContainers: 0, amountBottles: 0 }, ...$inventory]
$drinks.forEach((drink) => {
if (!$inventory.some((item) => item.name === drink.name)) {
$inventory = [
{
name: drink.name,
type: drink.type,
amountContainers: 0,
amountBottles: 0,
},
...$inventory,
];
}
})
}
});
};
</script>
<div class="modal {windowIsVisible}">
<div class="modal-background" />
<div class="modal-card">
{#if finishKind === "reset"}
<header class="modal-card-head">
<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>
<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>
<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>
</footer>
{:else if finishKind === "finish"}
<!--Prevent saving empty inventories-->
{#if $inventory.length > 0}
<header class="modal-card-head">
<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>
<section class="modal-card-body">
<p>
Vielen Dank, dass du eine Inventur gemacht hast! 🫶
<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.
<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.
</p>
<br>
<br />
<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 class="field">
<textarea class="textarea is-info" placeholder="Kommentare" bind:value={comment} />
<textarea
class="textarea is-info"
placeholder="Kommentare"
bind:value={comment}
/>
</div>
</section>
<footer class="modal-card-foot">
{#if name.length > 0}
<button class="button is-primary" on:click={() => {
fillInventoryWithZeroes()
inventoryApi.sendResultToBackend($inventory, name, comment)
closeWindow()
successWindow.showWindow()
setTimeout(() => inventoryApi.reset(), 3000)
}}>Abschließen</button>
<button
class="button is-primary"
on:click={() => {
fillInventoryWithZeroes();
inventoryApi.sendResultToBackend($inventory, name, comment);
closeWindow();
successWindow.showWindow();
setTimeout(() => inventoryApi.reset(), 3000);
}}>Abschließen</button
>
{:else}
<button class="button" disabled>Abschließen</button>
{/if}
@ -88,7 +112,6 @@
</footer>
{/if}
{/if}
</div>
</div>

22
src/components/Info.svelte
View File

@ -4,8 +4,8 @@
import inventoryApi from "../lib/api";
onMount(async () => {
$inventoryStartedAt = await inventoryApi.load("inventoryStartedAt")
})
$inventoryStartedAt = await inventoryApi.load("inventoryStartedAt");
});
</script>
<article class="message is-info">
@ -15,12 +15,13 @@
<div class="message-body">
<p>
Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen.
<br>
Dein Fortschritt wird gespeichert, bis du mit Klick auf <span class="tag is-primary"><strong>Abschluss</strong></span> die Inventur abschließt.
<br>
<br />
Dein Fortschritt wird gespeichert, bis du mit Klick auf
<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.
</p>
</div>
</article>
@ -28,9 +29,12 @@
<article class="message is-link">
<div class="message-body">
<p>
Du hast <strong>am {$inventoryStartedAt}</strong> auf deinem aktuellen Gerät eine Inventur gestartet.
<br>
Klicke oben rechts auf <span class="tag is-danger"><strong>Reset</strong></span>, wenn du deinen Fortschritt löschen möchtest.
Du hast <strong>am {$inventoryStartedAt}</strong> auf deinem aktuellen
Gerät eine Inventur gestartet.
<br />
Klicke oben rechts auf
<span class="tag is-danger"><strong>Reset</strong></span>, wenn du
deinen Fortschritt löschen möchtest.
</p>
</div>
</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 -->
<script lang="ts">
import { onMount } from "svelte";
import Drink from "./Drink.svelte";
@ -8,14 +6,16 @@
import { activeCategory, drinks, inventory } from "../stores/inventory.js";
import inventoryApi from "../lib/api";
$: filteredDrinks = $drinks.filter(drink => drink.type == $activeCategory);
$: filteredDrinks = $drinks.filter((drink) => drink.type == $activeCategory);
onMount(async () => {
$inventory = await inventoryApi.load("drinks");
})
});
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<section class="section">
<div class="container">
{#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 -->
<script lang="ts">
import { activeCategory } from "../stores/inventory";
import { inventory } from "../stores/inventory";
@ -16,43 +14,53 @@
{ name: "fizzyDrink", friendlyName: "Brause & Wasser" },
{ name: "wine", friendlyName: "Wein" },
{ name: "spirit", friendlyName: "Schnaps & Sirup" },
]
];
const setActiveCategory = (category: string) => {
$activeCategory = category;
}
};
const setFinishKind = (kind: string) => {
resetOrFinish = kind;
}
};
const toggleBurgerMenu = () => {
burgerMenuActive = burgerMenuActive === "is-active" ? "" : "is-active"
}
burgerMenuActive = burgerMenuActive === "is-active" ? "" : "is-active";
};
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<nav class="navbar is-light is-spaced has-shadow is-fixed-top">
<div class="navbar-brand">
<a on:click={() => setActiveCategory("")} class="navbar-item">
<img src={sparti_logo} />
</a>
<a role="button" class="navbar-burger {burgerMenuActive}" on:click={toggleBurgerMenu} aria-label="menu" aria-expanded="false" data-target="spartacusNavbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<a
role="button"
class="navbar-burger {burgerMenuActive}"
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>
</div>
<div class="navbar-menu {burgerMenuActive}" id="spartacusNavbar">
<div class="navbar-start">
{#each drinkCategories as category (category.name)}
<a class="navbar-item" on:click={() => {
<a
class="navbar-item"
on:click={() => {
setActiveCategory(category.name);
toggleBurgerMenu();
}
}>
}}
>
{category.friendlyName}
</a>
{/each}
@ -61,12 +69,13 @@
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a on:click={
() => {
<a
on:click={() => {
setFinishKind("finish");
modalWindow.showWindow()
}
} class="button is-primary">
modalWindow.showWindow();
}}
class="button is-primary"
>
<strong>Abschluss</strong>
</a>
</div>
@ -74,12 +83,13 @@
{#if $inventory.length > 0}
<div class="navbar-item">
<div class="buttons">
<a on:click={
() => {
<a
on:click={() => {
setFinishKind("reset");
modalWindow.showWindow()
}
} class="button is-danger">
modalWindow.showWindow();
}}
class="button is-danger"
>
<strong>Reset</strong>
</a>
</div>

10
src/components/Success.svelte
View File

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

54
src/lib/api.ts
View File

@ -1,7 +1,7 @@
const backendProtocol = "http"
const backendHost = "localhost"
const backendPort = "8161"
const backendEndpoint = "drinks"
const backendProtocol = "http";
const backendHost = "localhost";
const backendPort = "8161";
const backendEndpoint = "drinks";
export default class inventoryApi {
static async save(key: string, value: any) {
@ -13,31 +13,46 @@ export default class inventoryApi {
}
static async reset() {
localStorage.removeItem("drinks")
localStorage.removeItem("inventoryStartedAt")
localStorage.removeItem("drinks");
localStorage.removeItem("inventoryStartedAt");
window.location.reload();
}
static async sendResultToBackend(inventory: any, name: string, comment: string) {
static async sendResultToBackend(
inventory: any,
name: string,
comment: string
) {
let result = {
inventory: inventory,
name: name,
comment: comment,
inventoryFinishedAt: inventoryApi.createTimestamp()
}
inventoryFinishedAt: inventoryApi.createTimestamp(),
};
try {
await fetch(backendProtocol+"://"+backendHost+":"+backendPort+"/"+backendEndpoint, {
await fetch(
backendProtocol +
"://" +
backendHost +
":" +
backendPort +
"/" +
backendEndpoint,
{
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(result),
})
}
);
} catch (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...")
console.log(err);
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 _time = new Date(_unixTime).toLocaleTimeString();
return _date + " um " + _time
return _date + " um " + _time;
}
static async saveNameAndComment(name: string, comment: string) {
let performingPerson = {
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({
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([
// Biere
@ -41,10 +41,10 @@ export const drinks = readable([
{ name: "Havanna (1,0 l)", type: "spirit" },
{ name: "'51' Cachaca (1,0 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 {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}
};

6
vite.config.ts
View File

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