feat: success message, form, and much more
This commit is contained in:
mmmchimps
parent
bdadf65e46
commit
8c5f2d7bc2
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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! 🫶
|
||||
<!--Prevent saving empty inventories-->
|
||||
{#if $inventory.length > 0}
|
||||
<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 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.
|
||||
</p>
|
||||
<div class="field">
|
||||
<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={() => {
|
||||
// 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>
|
||||
<button class="button" on:click={closeWindow}>Zurück</button>
|
||||
</footer>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Success bind:this={successWindow} />
|
||||
|
|
@ -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
|
||||
<!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
|
||||
Du hast <strong>am {$inventory.at(-1).timestamp}</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>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
{/if}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue