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