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

9
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">

136
src/components/Drink.svelte
View File

@ -1,78 +1,88 @@
<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 { });
$inventory = [ } else {
{ $inventory = [
name: drinkName, {
type: drinkType, name: drinkName,
amountContainers: amountContainers, type: drinkType,
amountBottles: amountBottles, amountContainers: amountContainers,
}, amountBottles: amountBottles,
...$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 () => {
loadAmountsFromInventory()
// Check if an inventory has been ongoing on the current device
$inventoryStartedAt = await inventoryApi.load("inventoryStartedAt")
})
onMount(async () => {
loadAmountsFromInventory();
// Check if an inventory has been ongoing on the current device
$inventoryStartedAt = await inventoryApi.load("inventoryStartedAt");
});
</script> </script>
<div class="box"> <div class="box">
<div class="columns"> <div class="columns">
<div class="column is-one-third"> <div class="column is-one-third">
{drinkName} {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()
}}>
</div>
<div class="column">
<input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={() => {
saveInventory()
setStartOfInventory()
}}>
</div>
</div> </div>
<div class="column">
<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();
}}
/>
</div>
</div>
</div> </div>

189
src/components/Finish.svelte
View File

@ -1,95 +1,118 @@
<script lang="ts"> <script lang="ts">
import inventoryApi from "../lib/api"; import inventoryApi from "../lib/api";
import { drinks, inventory } from "../stores/inventory"; import { drinks, inventory } from "../stores/inventory";
import Success from "./Success.svelte"; import Success from "./Success.svelte";
export let finishKind = ""; export let finishKind = "";
let windowIsVisible = ""; let windowIsVisible = "";
let name = ""; let name = "";
let comment = ""; let comment = "";
let successWindow; let successWindow;
export const showWindow = () => windowIsVisible = "is-active"; export const showWindow = () => (windowIsVisible = "is-active");
const closeWindow = () => { const closeWindow = () => {
windowIsVisible = ""; windowIsVisible = "";
}; };
// 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]
}
})
}
// 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,
];
}
});
};
</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 class="delete" aria-label="close" on:click={closeWindow}></button> </header>
</header> <section class="modal-card-body">
<section class="modal-card-body"> <p>
<p>Bist du dir sicher, dass du die Inventur abbrechen willst? Damit werden alle bereits eingegebenen Werte zurückgesetzt.</p> Bist du dir sicher, dass du die Inventur abbrechen willst? Damit
</section> werden alle bereits eingegebenen Werte zurückgesetzt.
<footer class="modal-card-foot"> </p>
<button class="button is-danger" on:click={inventoryApi.reset}>Ja, Reset!</button> </section>
<button class="button" on:click={closeWindow}>Abbrechen</button> <footer class="modal-card-foot">
</footer> <button class="button is-danger" on:click={inventoryApi.reset}
>Ja, Reset!</button
{:else if finishKind === "finish"} >
<!--Prevent saving empty inventories--> <button class="button" on:click={closeWindow}>Abbrechen</button>
{#if $inventory.length > 0} </footer>
<header class="modal-card-head"> {:else if finishKind === "finish"}
<p class="modal-card-title">Inventur abschließen ✅</p> <!--Prevent saving empty inventories-->
<button class="delete" aria-label="close" on:click={closeWindow}></button> {#if $inventory.length > 0}
</header> <header class="modal-card-head">
<section class="modal-card-body"> <p class="modal-card-title">Inventur abschließen ✅</p>
<p> <button class="delete" aria-label="close" on:click={closeWindow} />
Vielen Dank, dass du eine Inventur gemacht hast! 🫶 </header>
<br> <section class="modal-card-body">
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> Vielen Dank, dass du eine Inventur gemacht hast! 🫶
<br> <br />
<div class="field"> Bitte gib noch deinen <strong>Namen</strong> ein. Außerdem hast du
<input class="input is-primary" type="text" placeholder="Name" bind:value={name} /> hier noch Platz für irgendwelche
</div> <strong>Kommentare</strong> zu deiner Inventur.
<div class="field"> </p>
<textarea class="textarea is-info" placeholder="Kommentare" bind:value={comment} /> <br />
</div> <div class="field">
</section> <input
<footer class="modal-card-foot"> class="input is-primary"
{#if name.length > 0} type="text"
<button class="button is-primary" on:click={() => { placeholder="Name"
fillInventoryWithZeroes() bind:value={name}
inventoryApi.sendResultToBackend($inventory, name, comment) />
closeWindow() </div>
successWindow.showWindow() <div class="field">
setTimeout(() => inventoryApi.reset(), 3000) <textarea
}}>Abschließen</button> class="textarea is-info"
{:else} placeholder="Kommentare"
<button class="button" disabled>Abschließen</button> bind:value={comment}
{/if} />
<button class="button" on:click={closeWindow}>Abbrechen</button> </div>
</footer> </section>
{:else} <footer class="modal-card-foot">
<section class="modal-card-body"> {#if name.length > 0}
<p>Du hast noch gar keine Daten erfasst. 🤓</p> <button
</section> class="button is-primary"
<footer class="modal-card-foot"> on:click={() => {
<button class="button" on:click={closeWindow}>Zurück</button> fillInventoryWithZeroes();
</footer> inventoryApi.sendResultToBackend($inventory, name, comment);
{/if} closeWindow();
{/if} successWindow.showWindow();
setTimeout(() => inventoryApi.reset(), 3000);
</div> }}>Abschließen</button
>
{:else}
<button class="button" disabled>Abschließen</button>
{/if}
<button class="button" on:click={closeWindow}>Abbrechen</button>
</footer>
{:else}
<section class="modal-card-body">
<p>Du hast noch gar keine Daten erfasst. 🤓</p>
</section>
<footer class="modal-card-foot">
<button class="button" on:click={closeWindow}>Zurück</button>
</footer>
{/if}
{/if}
</div>
</div> </div>
<Success bind:this={successWindow} /> <Success bind:this={successWindow} />

56
src/components/Info.svelte
View File

@ -1,37 +1,41 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { inventoryStartedAt } from "../stores/inventory"; import { inventoryStartedAt } from "../stores/inventory";
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">
<div class="message-header"> <div class="message-header">
<p>Hallo! Schön, dass du eine Inventur machen möchtest. 🙂</p> <p>Hallo! Schön, dass du eine Inventur machen möchtest. 🙂</p>
</div> </div>
<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>
Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst. die Inventur abschließt.
</p> <br />
Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
</div> </p>
</div>
</article> </article>
{#if $inventoryStartedAt.length > 0} {#if $inventoryStartedAt.length > 0}
<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 />
</p> Klicke oben rechts auf
<span class="tag is-danger"><strong>Reset</strong></span>, wenn du
deinen Fortschritt löschen möchtest.
</p>
</div> </div>
</article> </article>
{/if} {/if}

72
src/components/List.svelte
View File

@ -1,44 +1,44 @@
<!-- 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";
import Info from "./Info.svelte"; import Info from "./Info.svelte";
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 () => {
$inventory = await inventoryApi.load("drinks");
})
onMount(async () => {
$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 == ""}
<Info /> <Info />
{:else} {:else}
<div class="block"> <div class="block">
<div class="subtitle"> <div class="subtitle">
{#if $activeCategory === "beer"} {#if $activeCategory === "beer"}
<strong>Bier 🍺</strong> <strong>Bier 🍺</strong>
{:else if $activeCategory === "fizzyDrink"} {:else if $activeCategory === "fizzyDrink"}
<strong>Brause & Wasser 💧</strong> <strong>Brause & Wasser 💧</strong>
{:else if $activeCategory === "wine"} {:else if $activeCategory === "wine"}
<strong>Wein 🍷</strong> <strong>Wein 🍷</strong>
{:else} {:else}
<strong>Schnaps & Sirup 🥃</strong> <strong>Schnaps & Sirup 🥃</strong>
{/if} {/if}
</div> </div>
</div> </div>
<div class="block"> <div class="block">
{#each filteredDrinks as drink (drink.name)} {#each filteredDrinks as drink (drink.name)}
<Drink drinkName={drink.name} drinkType={drink.type} /> <Drink drinkName={drink.name} drinkType={drink.type} />
{/each} {/each}
</div> </div>
{/if} {/if}
</div> </div>
</section> </section>

156
src/components/Navbar.svelte
View File

@ -1,92 +1,102 @@
<!-- 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";
import Finish from "./Finish.svelte"; import Finish from "./Finish.svelte";
let sparti_logo = "./src/assets/sparti_logo.png"; let sparti_logo = "./src/assets/sparti_logo.png";
let resetOrFinish = ""; let resetOrFinish = "";
let modalWindow; let modalWindow;
let burgerMenuActive = ""; let burgerMenuActive = "";
const drinkCategories = [ const drinkCategories = [
{name: "beer", friendlyName: "Bier"}, { name: "beer", friendlyName: "Bier" },
{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 = () => {
burgerMenuActive = burgerMenuActive === "is-active" ? "" : "is-active"
}
const toggleBurgerMenu = () => {
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
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={() => {
setActiveCategory(category.name);
toggleBurgerMenu();
}}
>
{category.friendlyName}
</a> </a>
{/each}
</div>
<a role="button" class="navbar-burger {burgerMenuActive}" on:click={toggleBurgerMenu} aria-label="menu" aria-expanded="false" data-target="spartacusNavbar"> <div class="navbar-end">
<span aria-hidden="true"></span> <div class="navbar-item">
<span aria-hidden="true"></span> <div class="buttons">
<span aria-hidden="true"></span> <a
on:click={() => {
setFinishKind("finish");
modalWindow.showWindow();
}}
class="button is-primary"
>
<strong>Abschluss</strong>
</a> </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={() => {
setActiveCategory(category.name);
toggleBurgerMenu();
}
}>
{category.friendlyName}
</a>
{/each}
</div> </div>
</div>
<div class="navbar-end"> {#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("finish"); setFinishKind("reset");
modalWindow.showWindow() modalWindow.showWindow();
} }}
} class="button is-primary"> class="button is-danger"
<strong>Abschluss</strong> >
</a> <strong>Reset</strong>
</div> </a>
</div> </div>
{#if $inventory.length > 0}
<div class="navbar-item">
<div class="buttons">
<a on:click={
() => {
setFinishKind("reset");
modalWindow.showWindow()
}
} class="button is-danger">
<strong>Reset</strong>
</a>
</div>
</div>
{/if}
</div> </div>
{/if}
</div> </div>
</div>
</nav> </nav>
<Finish bind:this={modalWindow} finishKind={resetOrFinish} /> <Finish bind:this={modalWindow} finishKind={resetOrFinish} />

32
src/components/Success.svelte
View File

@ -1,25 +1,21 @@
<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 = "";
}; };
</script> </script>
<div class="modal {windowIsVisible}"> <div class="modal {windowIsVisible}">
<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> <!--Just a small, decorative, indefinite progress bar-->
<p class="subtitle"> <progress class="progress is-small is-primary" />
Die Seite wird gleich automatisch neu geladen... </div>
</p> </div>
<!--Just a small, decorative, indefinite progress bar-->
<progress class="progress is-small is-primary" />
</div>
</div>
</div> </div>

112
src/lib/api.ts
View File

@ -1,61 +1,75 @@
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) {
localStorage.setItem(key, JSON.stringify(value)); localStorage.setItem(key, JSON.stringify(value));
} }
static async load(key: string) { static async load(key: string) {
return JSON.parse(localStorage.getItem(key) || "[]"); return JSON.parse(localStorage.getItem(key) || "[]");
} }
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(
let result = { inventory: any,
inventory: inventory, name: string,
name: name, comment: string
comment: comment, ) {
inventoryFinishedAt: inventoryApi.createTimestamp() let result = {
} inventory: inventory,
name: name,
try { comment: comment,
await fetch(backendProtocol+"://"+backendHost+":"+backendPort+"/"+backendEndpoint, { inventoryFinishedAt: inventoryApi.createTimestamp(),
method: "POST", };
headers: {
'Accept': 'application/json', try {
'Content-Type': 'application/json' await fetch(
}, backendProtocol +
body: JSON.stringify(result), "://" +
}) backendHost +
} catch(err) { ":" +
console.log(err) backendPort +
alert("Ergebnis konnte nicht abgeschickt werden. Check mal die Dev-Console und/oder gib bitte kurz in der Gastro-Gruppe Bescheid...") "/" +
backendEndpoint,
{
method: "POST",
headers: {
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..."
);
} }
}
static createTimestamp() { static createTimestamp() {
let _unixTime = Date.now(); let _unixTime = Date.now();
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;

84
src/stores/inventory.ts
View File

@ -1,50 +1,50 @@
import { readable, writable } from "svelte/store" import { readable, writable } from "svelte/store";
export const drinks = readable([ export const drinks = readable([
// Biere // Biere
{ name: "Sternburg Export (0,5 l)", type: "beer" }, { name: "Sternburg Export (0,5 l)", type: "beer" },
{ name: "PU (0,5 l)", type: "beer" }, { name: "PU (0,5 l)", type: "beer" },
{ name: "Gösser Radler (0,5 l)", type: "beer" }, { name: "Gösser Radler (0,5 l)", type: "beer" },
{ name: "Paulaner Hefe alkoholfrei (0,5 l)", type: "beer" }, { name: "Paulaner Hefe alkoholfrei (0,5 l)", type: "beer" },
{ name: "Augustiner Lagerbier Hell (0,5 l)", type: "beer" }, { name: "Augustiner Lagerbier Hell (0,5 l)", type: "beer" },
{ name: "Störtebeker Atlantik-Ale (0,33 l)", type: "beer" }, { name: "Störtebeker Atlantik-Ale (0,33 l)", type: "beer" },
// Brause & Wasser // Brause & Wasser
{ name: "Soli Mate (0,5 l)", type: "fizzyDrink" }, { name: "Soli Mate (0,5 l)", type: "fizzyDrink" },
{ name: "Schneiders Spezi (0,5 l)", type: "fizzyDrink" }, { name: "Schneiders Spezi (0,5 l)", type: "fizzyDrink" },
{ name: "Proviant Cola (0,33 l)", type: "fizzyDrink" }, { name: "Proviant Cola (0,33 l)", type: "fizzyDrink" },
{ name: "Proviant Zitrone (0,33 l)", type: "fizzyDrink" }, { name: "Proviant Zitrone (0,33 l)", type: "fizzyDrink" },
{ name: "Proviant Orange (0,33 l)", type: "fizzyDrink" }, { name: "Proviant Orange (0,33 l)", type: "fizzyDrink" },
{ name: "Proviant Apfelschorle (0,33 l)", type: "fizzyDrink" }, { name: "Proviant Apfelschorle (0,33 l)", type: "fizzyDrink" },
{ name: "Proviant Rhabarber (0,33 l)", type: "fizzyDrink" }, { name: "Proviant Rhabarber (0,33 l)", type: "fizzyDrink" },
{ name: "Märkisch Kristall Classic PET (0,5 l)", type: "fizzyDrink" }, { name: "Märkisch Kristall Classic PET (0,5 l)", type: "fizzyDrink" },
{ name: "Märkisch Kristall Naturelle PET (0,5 l)", type: "fizzyDrink" }, { name: "Märkisch Kristall Naturelle PET (0,5 l)", type: "fizzyDrink" },
{ name: "Afri Cola (1,0 l)", type: "fizzyDrink" }, { name: "Afri Cola (1,0 l)", type: "fizzyDrink" },
{ name: "Tonic Water Bad Liebenwerder (1,0 l)", type: "fizzyDrink" }, { name: "Tonic Water Bad Liebenwerder (1,0 l)", type: "fizzyDrink" },
{ name: "Bitter Lemon Bad Liebenwerder (1,0 l)", type: "fizzyDrink" }, { name: "Bitter Lemon Bad Liebenwerder (1,0 l)", type: "fizzyDrink" },
{ name: "Ginger Ale Bad Liebenwerder (1,0 l)", type: "fizzyDrink" }, { name: "Ginger Ale Bad Liebenwerder (1,0 l)", type: "fizzyDrink" },
{ name: "ChariTea Black (0,33 l)", type: "fizzyDrink" }, { name: "ChariTea Black (0,33 l)", type: "fizzyDrink" },
{ name: "ChariTea Green (0,33 l)", type: "fizzyDrink" }, { name: "ChariTea Green (0,33 l)", type: "fizzyDrink" },
// Wein & Sekt // Wein & Sekt
{ name: "OBC Cidre Stark (0,33 l)", type: "wine" }, { name: "OBC Cidre Stark (0,33 l)", type: "wine" },
{ name: "OBC Cidre Classic (0,33 l)", type: "wine" }, { name: "OBC Cidre Classic (0,33 l)", type: "wine" },
{ name: "Pinot Grigio (0,75 l)", type: "wine" }, { name: "Pinot Grigio (0,75 l)", type: "wine" },
{ name: "Rotwein Montepulciano (1,5 l)", type: "wine" }, { name: "Rotwein Montepulciano (1,5 l)", type: "wine" },
{ name: "Lehmann Hausmarke Frizzante (0,75 l)", type: "wine" }, { name: "Lehmann Hausmarke Frizzante (0,75 l)", type: "wine" },
// Schnaps & Sirup // Schnaps & Sirup
{ name: "Vodka Partisan Black (1,0 l)", type: "spirit" }, { name: "Vodka Partisan Black (1,0 l)", type: "spirit" },
{ name: "Gordon's London Dry Gin (1,0 l)", type: "spirit" }, { name: "Gordon's London Dry Gin (1,0 l)", type: "spirit" },
{ name: "Absinth Tabu Classic 55% (1,0 l)", type: "spirit" }, { name: "Absinth Tabu Classic 55% (1,0 l)", type: "spirit" },
{ name: "Tequila Jose Cuervo Silver (1,0 l)", type: "spirit" }, { name: "Tequila Jose Cuervo Silver (1,0 l)", type: "spirit" },
{ 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()],
}) });