feat: success message, form, and much more

src/lib/Drink.svelte

@@ -9,9 +9,17 @@
     let amountBottles: number;
 
     const saveInventory = () => {
+        // If there is not a timestamp entry yet, create one.
+        if ( !$inventory.some(item => "timestamp" in item)) {
+            let _unixTime = Date.now();
+            let _date = new Date(_unixTime).toLocaleDateString();
+            let _time = new Date(_unixTime).toLocaleTimeString();
+            $inventory = [{
+                timestamp: _date + " um " + _time
+            }, ...$inventory];
+        }
         // 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)) {
-            // Potentially inefficient, how to refactor forEach?
             $inventory.forEach(item => {
                 if (drinkName === item.name) {
                     item.amountContainers = amountContainers;

src/lib/Finish.svelte

@@ -1,21 +1,26 @@
 <script lang="ts">
     import inventoryApi from "../stores/api";
     import { inventory } from "../stores/inventory";
+    import Success from "./Success.svelte";
 
     export let finishKind = "";
-
     let windowIsVisible = "";
+    let name = "";
+    let comment = "";
+
+    let successWindow;
 
     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>
@@ -28,26 +33,52 @@
                     <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">
+                <!--Prevent saving empty inventories-->
-                    <p class="modal-card-title">Inventur abschließen ✅</p>
+                {#if $inventory.length > 0}
-                    <button class="delete" aria-label="close" on:click={closeWindow}></button>
+                    <header class="modal-card-head">
-                </header>
+                        <p class="modal-card-title">Inventur abschließen ✅</p>
-                <section class="modal-card-body">
+                        <button class="delete" aria-label="close" on:click={closeWindow}></button>
-                    <p>
+                    </header>
-                        Vielen Dank, dass du eine Inventur gemacht hast! 🫶
+                    <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.
+                        </p>
                         <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.
+                        <div class="field">
-                    </p>
+                            <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} />
+                        </div>
+                    </section>
+                    <footer class="modal-card-foot">
+                        {#if name.length > 0}
+                            <button class="button is-primary" on:click={() => {
+                                // TODO: Hier muss dann der Request an das Backend rausgehen!
+                                closeWindow();
+                                successWindow.showWindow();
+                                setTimeout(() => inventoryApi.reset(), 2000);
+                        }}>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 is-primary" on:click={() => {
+                    <button class="button" on:click={closeWindow}>Zurück</button>
-                        // 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}
             {/if}
+
         </div>
-</div>
+</div>
+
+<Success bind:this={successWindow} />

src/lib/Info.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { inventory } from "../stores/inventory";
 </script>
 
 <article class="message is-info">
@@ -11,18 +12,20 @@
             <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>
+
+{#if $inventory.some(item => "timestamp" in item)}
 <article class="message is-link">
     <div class="message-body">
         <p>
-            ℹ️ Inventur begonnen am TBD
+            Du hast <strong>am {$inventory.at(-1).timestamp}</strong> auf deinem aktuellen Gerät eine Inventur gestartet.
-            <!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
+            <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>
+</article>
+{/if}

src/lib/Navbar.svelte

@@ -3,7 +3,7 @@
 
 <script lang="ts">
     import { activeCategory } from "../stores/inventory";
-    import inventoryApi from "../stores/api";
+    import { inventory } from "../stores/inventory";
     import Finish from "./Finish.svelte";
 
     let sparti_logo = "./src/assets/sparti_logo.png";
@@ -14,7 +14,7 @@
         $activeCategory = category;
     }
 
-    const determineFinishKind = (kind: string) => {
+    const setFinishKind = (kind: string) => {
         resetOrFinish = kind;
     }
 </script>
@@ -24,8 +24,16 @@
         <a on:click={() => setActiveCategory("")} class="navbar-item">
             <img src={sparti_logo} />
         </a>
+
+        <!--navbar auf mobile sichtbar machen!-->
+        <a role="button" class="navbar-burger" 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>
+
     </div>
-    <div class="navbar-menu">
+    <div class="navbar-menu" id="spartacusNavbar">
         <div class="navbar-start">
             <a class="navbar-item" on:click={() => setActiveCategory("beer")}>
                 Bier
@@ -46,7 +54,7 @@
                 <div class="buttons">
                     <a on:click={
                         () => {
-                            determineFinishKind("finish"); 
+                            setFinishKind("finish"); 
                             modalWindow.showWindow()
                         }
                     } class="button is-primary">
@@ -54,11 +62,12 @@
                     </a>
                 </div>
             </div>
+            {#if $inventory.length > 0}
             <div class="navbar-item">
                 <div class="buttons">
                     <a on:click={
                         () => {
-                            determineFinishKind("reset"); 
+                            setFinishKind("reset"); 
                             modalWindow.showWindow()
                         }
                     } class="button is-danger">
@@ -66,6 +75,7 @@
                     </a>
                 </div>
             </div>
+            {/if}
         </div>
     </div>
 </nav>

src/lib/Success.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    let windowIsVisible = "";
+    
+    export const showWindow = () => windowIsVisible = "is-active";
+
+    const closeWindow = () => {
+        windowIsVisible = "";
+    };
+</script>
+
+<div class="modal {windowIsVisible}">
+    <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>
+                <progress class="progress is-small" max="0" />
+            </div>
+        </div>
+</div>