feat: fill finish and reset buttons with some life

src/lib/Drink.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { inventory } from "../stores/inventory"
-    import drinksAPI from "../stores/drinksApi";
+    import inventoryApi from "../stores/api";
 
     export let drinkName: string;
 
@@ -29,7 +29,7 @@
                 ...$inventory,
             ];
         }
-        drinksAPI.save($inventory);
+        inventoryApi.save($inventory);
     };
 
     const loadAmountsFromInventory = () => {

src/lib/Finish.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import inventoryApi from "../stores/api";
+    import { inventory } from "../stores/inventory";
+
+    export let finishKind = "";
+
+    let windowIsVisible = "";
+
+    export const showWindow = () => windowIsVisible = "is-active";
+
+    const closeWindow = () => {
+        windowIsVisible = "";
+    };
+</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>
+                </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>
+                </section>
+                <footer class="modal-card-foot">
+                    <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"}
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Inventur abschließen ✅</p>
+                    <button class="delete" aria-label="close" on:click={closeWindow}></button>
+                </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 deine Inventur.
+                    </p>
+                </section>
+                <footer class="modal-card-foot">
+                    <button class="button is-primary" on:click={() => {
+                        // TODO: Hier muss dann der Request an das Backend rausgehen!
+                        console.log($inventory);
+                        closeWindow();
+                    }}>Abschließen</button>
+                    <button class="button" on:click={closeWindow}>Abbrechen</button>
+                </footer>
+            {/if}
+        </div>
+</div>

src/lib/Info.svelte

@@ -3,7 +3,7 @@
 
 <article class="message is-info">
     <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 class="message-body">
         <p>

src/lib/List.svelte

@@ -6,12 +6,12 @@
     import Drink from "./Drink.svelte";
     import Info from "./Info.svelte";
     import { activeCategory, drinks, inventory } from "../stores/inventory.js";
-    import drinksAPI from "../stores/drinksApi";
+    import inventoryApi from "../stores/api";
 
     $: filteredDrinks = $drinks.filter(drink => drink.type == $activeCategory);
 
     onMount(async () => {
-        $inventory = await drinksAPI.load();
+        $inventory = await inventoryApi.load();
     })
 
 </script>

src/lib/Navbar.svelte

@@ -3,12 +3,20 @@
 
 <script lang="ts">
     import { activeCategory } from "../stores/inventory";
+    import inventoryApi from "../stores/api";
+    import Finish from "./Finish.svelte";
 
     let sparti_logo = "./src/assets/sparti_logo.png";
+    let resetOrFinish = "";
+    let modalWindow;
 
     const setActiveCategory = (category: string) => {
         $activeCategory = category;
     }
+
+    const determineFinishKind = (kind: string) => {
+        resetOrFinish = kind;
+    }
 </script>
 
 <nav class="navbar is-light is-spaced has-shadow is-fixed-top">
@@ -36,19 +44,30 @@
         <div class="navbar-end">
             <div class="navbar-item">
                 <div class="buttons">
-                    <a on:click={() => console.log("TBD")} class="button is-primary">
+                    <a on:click={
+                        () => {
+                            determineFinishKind("finish"); 
+                            modalWindow.showWindow()
+                        }
+                    } class="button is-primary">
                         <strong>Abschluss</strong>
-                        <!-- Hier sollte dann auch ein Name eingegeben werden -->
                     </a>
                 </div>
             </div>
             <div class="navbar-item">
                 <div class="buttons">
-                    <a on:click={() => console.log("TBD")} class="button is-danger">
+                    <a on:click={
+                        () => {
+                            determineFinishKind("reset"); 
+                            modalWindow.showWindow()
+                        }
+                    } class="button is-danger">
                         <strong>Reset</strong>
                     </a>
                 </div>
             </div>
         </div>
     </div>
-</nav>
+</nav>
+
+<Finish bind:this={modalWindow} finishKind={resetOrFinish} />

src/stores/api.js

@@ -1,4 +1,4 @@
-export default class drinksAPI {
+export default class inventoryApi {
     static async save(drinks) {
         localStorage.setItem("drinks", JSON.stringify(drinks));
     }
@@ -6,4 +6,9 @@ export default class drinksAPI {
     static async load() {
         return JSON.parse(localStorage.getItem("drinks") || "[]");
     }
+
+    static async reset() {
+        localStorage.removeItem("drinks");
+        window.location.reload();
+    }
 }