feat: fill input fields from local storage!

src/api.js

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

src/lib/Drink.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import { inventory } from "../stores/inventory"
-    import { drinks } from "../stores/drinks";
+    import drinksAPI from "../stores/drinksApi";
 
     export let drinkName: string;
 
@@ -10,6 +11,7 @@
     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)) {
+            // Potentially inefficient, how to refactor forEach?
             $inventory.forEach(item => {
                 if (drinkName === item.name) {
                     item.amountContainers = amountContainers;
@@ -27,8 +29,22 @@
                 ...$inventory,
             ];
         }
-        console.log($inventory);
+        drinksAPI.save($inventory);
     };
+
+    const loadAmountsFromInventory = () => {
+        $inventory.forEach(item => {
+            if (item.name === drinkName) {
+                amountContainers = item.amountContainers;
+                amountBottles = item.amountBottles;
+            }
+        });
+    }
+
+    onMount(async () => {
+        loadAmountsFromInventory();
+    })
+
 </script>
 
 <div class="box">

src/lib/List.svelte

@@ -2,12 +2,18 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
 <script lang="ts">
-    import { activeCategory, drinks } from "../stores/drinks.js";
+    import { onMount } from "svelte";
     import Drink from "./Drink.svelte";
     import Info from "./Info.svelte";
+    import { activeCategory, drinks, inventory } from "../stores/inventory.js";
+    import drinksAPI from "../stores/drinksApi";
 
     $: filteredDrinks = $drinks.filter(drink => drink.type == $activeCategory);
 
+    onMount(async () => {
+        $inventory = await drinksAPI.load();
+    })
+
 </script>
 
 <section class="section">

src/lib/Navbar.svelte

@@ -2,7 +2,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
 <script lang="ts">
-    import { activeCategory } from "../stores/drinks";
+    import { activeCategory } from "../stores/inventory";
 
     let sparti_logo = "./src/assets/sparti_logo.png";
 

src/stores/drinks.js

@@ -1,46 +0,0 @@
-import { readable, writable } from "svelte/store"
-
-export const drinks = readable([
-    // Biere
-    { name: "Sternburg Export (0,5 l)", type: "beer" },
-    { name: "PU (0,5 l)", type: "beer" },
-    { name: "Gösser Radler (0,5 l)", type: "beer" },
-    { name: "Paulaner Hefe alkoholfrei (0,5 l)", type: "beer" },
-    { name: "Augustiner Lagerbier Hell (0,5 l)", type: "beer" },
-    { name: "Störtebeker Atlantik-Ale (0,33 l)", type: "beer" },
-
-    // Brause & Wasser
-    { name: "Soli Mate (0,5 l)", type: "fizzyDrink" },
-    { name: "Schneiders Spezi (0,5 l)", type: "fizzyDrink" },
-    { name: "Proviant Cola (0,33 l)", type: "fizzyDrink" },
-    { name: "Proviant Zitrone (0,33 l)", type: "fizzyDrink" },
-    { name: "Proviant Orange (0,33 l)", type: "fizzyDrink" },
-    { name: "Proviant Apfelschorle (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 Naturelle PET (0,5 l)", type: "fizzyDrink" },
-    { name: "Afri Cola (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: "Ginger Ale Bad Liebenwerder (1,0 l)", type: "fizzyDrink" },
-    { name: "ChariTea Black (0,33 l)", type: "fizzyDrink" },
-    { name: "ChariTea Green (0,33 l)", type: "fizzyDrink" },
-
-    // Wein & Sekt
-    { name: "OBC Cidre Stark (0,33 l)", type: "wine" },
-    { name: "OBC Cidre Classic (0,33 l)", type: "wine" },
-    { name: "Pinot Grigio (0,75 l)", type: "wine" },
-    { name: "Rotwein Montepulciano (1,5 l)", type: "wine" },
-    { name: "Lehmann Hausmarke Frizzante (0,75 l)", type: "wine" },
-
-    // Schnaps & Sirup
-    { name: "Vodka Partisan Black (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: "Tequila Jose Cuervo Silver (1,0 l)", type: "spirit" },
-    { name: "Havanna (1,0 l)", type: "spirit" },
-    { name: "'51' Cachaca (1,0 l)", type: "spirit" },
-    { name: "Berliner Luft (0,7 l)", type: "spirit" },
-])
-
-export const activeCategory = writable("")

src/stores/drinksApi.js

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

src/stores/inventory.js

@@ -1,3 +1,48 @@
-import { writable } from "svelte/store"
+import { readable, writable } from "svelte/store"
 
-export const inventory = writable([])
+export const drinks = readable([
+    // Biere
+    { name: "Sternburg Export (0,5 l)", type: "beer" },
+    { name: "PU (0,5 l)", type: "beer" },
+    { name: "Gösser Radler (0,5 l)", type: "beer" },
+    { name: "Paulaner Hefe alkoholfrei (0,5 l)", type: "beer" },
+    { name: "Augustiner Lagerbier Hell (0,5 l)", type: "beer" },
+    { name: "Störtebeker Atlantik-Ale (0,33 l)", type: "beer" },
+
+    // Brause & Wasser
+    { name: "Soli Mate (0,5 l)", type: "fizzyDrink" },
+    { name: "Schneiders Spezi (0,5 l)", type: "fizzyDrink" },
+    { name: "Proviant Cola (0,33 l)", type: "fizzyDrink" },
+    { name: "Proviant Zitrone (0,33 l)", type: "fizzyDrink" },
+    { name: "Proviant Orange (0,33 l)", type: "fizzyDrink" },
+    { name: "Proviant Apfelschorle (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 Naturelle PET (0,5 l)", type: "fizzyDrink" },
+    { name: "Afri Cola (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: "Ginger Ale Bad Liebenwerder (1,0 l)", type: "fizzyDrink" },
+    { name: "ChariTea Black (0,33 l)", type: "fizzyDrink" },
+    { name: "ChariTea Green (0,33 l)", type: "fizzyDrink" },
+
+    // Wein & Sekt
+    { name: "OBC Cidre Stark (0,33 l)", type: "wine" },
+    { name: "OBC Cidre Classic (0,33 l)", type: "wine" },
+    { name: "Pinot Grigio (0,75 l)", type: "wine" },
+    { name: "Rotwein Montepulciano (1,5 l)", type: "wine" },
+    { name: "Lehmann Hausmarke Frizzante (0,75 l)", type: "wine" },
+
+    // Schnaps & Sirup
+    { name: "Vodka Partisan Black (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: "Tequila Jose Cuervo Silver (1,0 l)", type: "spirit" },
+    { name: "Havanna (1,0 l)", type: "spirit" },
+    { name: "'51' Cachaca (1,0 l)", type: "spirit" },
+    { name: "Berliner Luft (0,7 l)", type: "spirit" },
+])
+
+export const activeCategory = writable("")
+
+export const inventory = writable([])