feat: send request to backend; refactor some things

src/App.svelte

@@ -3,8 +3,8 @@
 
 <script lang="ts">
     import "../node_modules/bulma/css/bulma.min.css";
-    import List from "./lib/List.svelte";
+    import List from "./components/List.svelte";
-    import Navbar from "./lib/Navbar.svelte";
+    import Navbar from "./components/Navbar.svelte";
 </script>
 
 <main>

src/components/Drink.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { inventory } from "../stores/inventory"
-    import inventoryApi from "../stores/api";
+    import inventoryApi from "../lib/api";
 
     export let drinkName: string;
 
@@ -9,13 +9,14 @@
     let amountBottles: number;
 
     const saveInventory = () => {
-        // If there is not a timestamp entry yet, create one.
+        // If there is not a timestamp entry yet, create one. This one is only used to show an info window for the user
-        if ( !$inventory.some(item => "timestamp" in item)) {
+        // to indicate when the inventory was started. It won't get processed by the backend.
+        if ( !$inventory.some(item => "inventoryStartedAt" in item)) {
             let _unixTime = Date.now();
             let _date = new Date(_unixTime).toLocaleDateString();
             let _time = new Date(_unixTime).toLocaleTimeString();
             $inventory = [{
-                timestamp: _date + " um " + _time
+                inventoryStartedAt: _date + " um " + _time
             }, ...$inventory];
         }
         // Check if a drink is already in the inventory. If yes, then update the amounts. If not, add it.
@@ -37,7 +38,7 @@
                 ...$inventory,
             ];
         }
-        inventoryApi.save($inventory);
+        inventoryApi.save("drinks", $inventory);
     };
 
     const loadAmountsFromInventory = () => {

src/components/Finish.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import inventoryApi from "../stores/api";
+    import inventoryApi from "../lib/api";
-    import { inventory } from "../stores/inventory";
+    import { drinks, inventory } from "../stores/inventory";
     import Success from "./Success.svelte";
 
     export let finishKind = "";
@@ -14,7 +14,17 @@
 
     const closeWindow = () => {
         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, amountContainers: 0, amountBottles: 0 }, ...$inventory] 
+            }
+        });
+    }
+    
 </script>
 
 <div class="modal {windowIsVisible}">
@@ -58,10 +68,11 @@
                     <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!
+                                fillInventoryWithZeroes()
-                                closeWindow();
+                                inventoryApi.sendResultToBackend($inventory, name, comment)
-                                successWindow.showWindow();
+                                closeWindow()
-                                setTimeout(() => inventoryApi.reset(), 2000);
+                                successWindow.showWindow()
+                                setTimeout(() => inventoryApi.reset(), 3000)
                         }}>Abschließen</button>
                         {:else}
                             <button class="button" disabled>Abschließen</button>
@@ -70,7 +81,7 @@
                     </footer>
                 {:else}
                 <section class="modal-card-body">
-                    <p>Du hast noch gar keine Daten erfasst... 🤓</p>
+                    <p>Du hast noch gar keine Daten erfasst. 🤓</p>
                 </section>
                 <footer class="modal-card-foot">
                     <button class="button" on:click={closeWindow}>Zurück</button>

src/components/Info.svelte

@@ -18,11 +18,11 @@
     </div>
 </article>
 
-{#if $inventory.some(item => "timestamp" in item)}
+{#if $inventory.some(item => "inventoryStartedAt" in item)}
 <article class="message is-link">
     <div class="message-body">
         <p>
-            Du hast <strong>am {$inventory.at(-1).timestamp}</strong> auf deinem aktuellen Gerät eine Inventur gestartet.
+            Du hast <strong>am {$inventory.at(-1).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>

src/components/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 inventoryApi from "../stores/api";
+    import inventoryApi from "../lib/api";
 
     $: filteredDrinks = $drinks.filter(drink => drink.type == $activeCategory);
 
     onMount(async () => {
-        $inventory = await inventoryApi.load();
+        $inventory = await inventoryApi.load("drinks");
     })
 
 </script>

src/lib/api.ts

@@ -0,0 +1,60 @@
+const backendProtocol = "http"
+const backendHost = "localhost"
+const backendPort = "8151"
+const backendEndpoint = "drinks"
+
+export default class inventoryApi {
+    static async save(key: string, value: any) {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+
+    static async load(key: string) {
+        return JSON.parse(localStorage.getItem(key) || "[]");
+    }
+
+    static async reset() {
+        localStorage.removeItem("drinks")
+        window.location.reload();
+    }
+
+    static async sendResultToBackend(inventory: any, name: string, comment: string) {
+        let result = {
+            inventory: inventory,
+            name: name,
+            comment: comment,
+            timestamp: await inventoryApi.createTimestamp()
+        }
+
+        try {
+            await fetch(backendProtocol+"://"+backendHost+":"+backendPort+"/"+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 async createTimestamp() {
+        let _unixTime = Date.now();
+        let _date = new Date(_unixTime).toLocaleDateString();
+        let _time = new Date(_unixTime).toLocaleTimeString();
+
+        return _date + " um " + _time
+    }
+
+    static async saveNameAndComment(name: string, comment: string) {
+        let performingPerson = {
+            name: name,
+            comment: comment
+        }
+
+        inventoryApi.save("performingPerson", performingPerson)
+    }
+
+}

src/stores/api.js

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