84 lines
3.7 KiB
Svelte
84 lines
3.7 KiB
Svelte
<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>
|
|
<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"}
|
|
<!--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>
|
|
<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" on:click={closeWindow}>Zurück</button>
|
|
</footer>
|
|
{/if}
|
|
{/if}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<Success bind:this={successWindow} /> |