From bdadf65e461c9cd3cd64dc868e14c1f21bd65b25 Mon Sep 17 00:00:00 2001 From: mmmchimps <mmmchimps@posteo.me> Date: Tue, 24 Jan 2023 16:05:51 +0100 Subject: [PATCH] feat: fill finish and reset buttons with some life --- src/lib/Drink.svelte | 4 +-- src/lib/Finish.svelte | 53 +++++++++++++++++++++++++++++ src/lib/Info.svelte | 2 +- src/lib/List.svelte | 4 +-- src/lib/Navbar.svelte | 27 ++++++++++++--- src/stores/{drinksApi.js => api.js} | 7 +++- 6 files changed, 87 insertions(+), 10 deletions(-) create mode 100644 src/lib/Finish.svelte rename src/stores/{drinksApi.js => api.js} (58%) diff --git a/src/lib/Drink.svelte b/src/lib/Drink.svelte index f2ace63..c74a4d4 100644 --- a/src/lib/Drink.svelte +++ b/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 = () => { diff --git a/src/lib/Finish.svelte b/src/lib/Finish.svelte new file mode 100644 index 0000000..a513c2a --- /dev/null +++ b/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> \ No newline at end of file diff --git a/src/lib/Info.svelte b/src/lib/Info.svelte index de67e34..e9e22df 100644 --- a/src/lib/Info.svelte +++ b/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> diff --git a/src/lib/List.svelte b/src/lib/List.svelte index f88100c..ee99171 100644 --- a/src/lib/List.svelte +++ b/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> diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte index 533fd01..1852f0b 100644 --- a/src/lib/Navbar.svelte +++ b/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> \ No newline at end of file +</nav> + +<Finish bind:this={modalWindow} finishKind={resetOrFinish} /> \ No newline at end of file diff --git a/src/stores/drinksApi.js b/src/stores/api.js similarity index 58% rename from src/stores/drinksApi.js rename to src/stores/api.js index bb64388..73fed81 100644 --- a/src/stores/drinksApi.js +++ b/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(); + } } \ No newline at end of file