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

feat: split into more components; add save logic

This commit is contained in:
mmmchimps 2023-01-19 18:22:46 +01:00
parent 9af4d77039
commit bc16fffcdb
8 changed files with 108 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.svelte
View File

@ -3,13 +3,13 @@
<script lang="ts"> <script lang="ts">
import "../node_modules/bulma/css/bulma.min.css"; import "../node_modules/bulma/css/bulma.min.css";
import Drink from "./lib/Drink.svelte"; import List from "./lib/List.svelte";
import Navbar from "./lib/Navbar.svelte"; import Navbar from "./lib/Navbar.svelte";
</script> </script>
<main> <main>
<Navbar /> <Navbar />
<div class="container" id="drink-container"> <div class="container" id="drink-container">
<Drink /> <List />
</div> </div>
</main> </main>

9
src/api.js Normal file
View File

@ -0,0 +1,9 @@
export default class inventoryAPI {
static async save(drinks) {
localStorage.setItem("inventory", JSON.stringify(drinks));
}
static async load() {
return JSON.parse(localStorage.getItem("inventory") || "[]");
}
}

95
src/lib/Drink.svelte
View File

@ -1,57 +1,46 @@
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<script lang="ts"> <script lang="ts">
import { activeCategory, drinks } from "../stores.js"; import { inventory } from "../stores/inventory"
import { drinks } from "../stores/drinks";
export let drinkName: string;
let amountContainers: number;
let amountBottles: number;
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 (drinkName === item.name) {
item.amountContainers = amountContainers;
item.amountBottles = amountBottles;
}
});
}
else {
$inventory = [
{
name: drinkName,
amountContainers: amountContainers,
amountBottles: amountBottles,
},
...$inventory,
];
}
console.log($inventory);
};
</script> </script>
<section class="section"> <div class="box">
<div class="container"> <div class="columns">
{#if $activeCategory == ""} <div class="column is-one-third">
<article class="message is-info"> {drinkName}
<div class="message-header"> </div>
<p>Hallo! Schön, dass du eine Inventur machen möchtest. :)</p> <div class="column">
</div> <input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen" bind:value={amountContainers} on:input={saveInventory}>
<div class="message-body"> </div>
<p> <div class="column">
Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen. <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={saveInventory}>
<br> </div>
Dein Fortschritt wird gespeichert, bis du mit Klick auf <span class="tag is-primary"><strong>Abschluss</strong></span> die Inventur abschließt.
<br>
Wenn du neu starten möchtest, klicke auf <span class="tag is-danger"><strong>Reset</strong></span>.
<br><br>
Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
</p>
</div>
</article>
<article class="message is-link">
<div class="message-body">
<p>
ℹ️ Inventur begonnen am TBD
<!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
</p>
</div>
</article>
{:else}
{#each $drinks as drink, name}
{#if drink.type == $activeCategory}
<div class="box">
<div class="columns">
<div class="column is-one-third">
{drink.name}
</div>
<div class="column">
<input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen">
</div>
<div class="column">
<input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen">
</div>
</div>
</div>
{/if}
{/each}
{/if}
</div> </div>
</section> </div>

28
src/lib/Info.svelte Normal file
View File

@ -0,0 +1,28 @@
<script lang="ts">
</script>
<article class="message is-info">
<div class="message-header">
<p>Hallo! Schön, dass du eine Inventur machen möchtest. :)</p>
</div>
<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>
Wenn du neu starten möchtest, klicke auf <span class="tag is-danger"><strong>Reset</strong></span>.
<br><br>
Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
</p>
</div>
</article>
<article class="message is-link">
<div class="message-body">
<p>
ℹ️ Inventur begonnen am TBD
<!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
</p>
</div>
</article>

23
src/lib/List.svelte Normal file
View File

@ -0,0 +1,23 @@
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<script lang="ts">
import { activeCategory, drinks } from "../stores/drinks.js";
import Drink from "./Drink.svelte";
import Info from "./Info.svelte";
$: filteredDrinks = $drinks.filter(drink => drink.type == $activeCategory);
</script>
<section class="section">
<div class="container">
{#if $activeCategory == ""}
<Info />
{:else}
{#each filteredDrinks as drink (drink.name)}
<Drink drinkName={drink.name} />
{/each}
{/if}
</div>
</section>

2
src/lib/Navbar.svelte
View File

@ -2,7 +2,7 @@
<!-- 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"; import { activeCategory } from "../stores/drinks";
let sparti_logo = "./src/assets/sparti_logo.png"; let sparti_logo = "./src/assets/sparti_logo.png";

0
src/stores.js → src/stores/drinks.js
View File

3
src/stores/inventory.js Normal file
View File

@ -0,0 +1,3 @@
import { writable } from "svelte/store"
export const inventory = writable([])