spartacus-inventur-frontend/src/lib/Finish.svelte

53 lines
2.3 KiB
Svelte
Raw Normal View History

<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>