88 lines
2.5 KiB
Svelte
88 lines
2.5 KiB
Svelte
<script>
|
|
import { SetNewDeck, StorageDeck } from "./logic.svelte";
|
|
import toast from "svelte-5-french-toast";
|
|
|
|
function saveDeck() {
|
|
localStorage.setItem("deck", JSON.stringify(deck));
|
|
SetNewDeck(deck);
|
|
toast.success("Deck saved successfully! You can now close this window.");
|
|
}
|
|
|
|
let CurrentlyEditingDeckId = $state(0);
|
|
|
|
let deck = $state($state.snapshot(StorageDeck).v);
|
|
</script>
|
|
|
|
<div class="flex flex-col items-center gap-7 rounded border-2 bg-zinc-800 p-3">
|
|
<div class="flex w-full flex-col gap-2">
|
|
<div class="mb-2">
|
|
<label for="SelectOneDeckToEdit" class="text-lg leading-0.5 text-gray-500">
|
|
What deck do you want to edit?
|
|
</label>
|
|
<select bind:value={CurrentlyEditingDeckId} class="input" id="SelectOneDeckToEdit">
|
|
{#each deck as d, i}
|
|
<option value={i}>{d.deckName}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label for="NameOfthisDeck" class="text-lg leading-0.5 text-gray-500">
|
|
Name Of this Deck?
|
|
</label>
|
|
<input type="text" class="input mt-1" bind:value={deck[CurrentlyEditingDeckId].deckName} id="NameOfthisDeck" />
|
|
</div>
|
|
|
|
<div class="flex w-full gap-2 text-3xl">
|
|
<span class="flex-1">Question</span>
|
|
<span class="flex-1">Answer</span>
|
|
<button aria-label="delete" class="btn invisible h-0"><i class="nf nf-md-delete"></i></button>
|
|
</div>
|
|
|
|
{#each deck[CurrentlyEditingDeckId].cards as card, i}
|
|
<div class="flex w-full gap-2">
|
|
<input type="text" class="input flex-1" bind:value={card.Q} />
|
|
<input type="text" class="input flex-1" bind:value={card.a} />
|
|
<button
|
|
aria-label="delete"
|
|
onclick={() => {
|
|
if (confirm("Are you sure you want to delete this card?")) {
|
|
deck[CurrentlyEditingDeckId].cards.splice(i, 1);
|
|
}
|
|
}}
|
|
class="btn dull"
|
|
>
|
|
<i class="nf nf-md-delete"></i>
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button
|
|
onclick={() => {
|
|
if (confirm("Are you sure you want to delete this deck?")) {
|
|
deck.splice(CurrentlyEditingDeckId, 1);
|
|
CurrentlyEditingDeckId = Math.max(0, CurrentlyEditingDeckId - 1);
|
|
toast.success("Deck deleted successfully");
|
|
}
|
|
}}
|
|
class="btn"
|
|
>
|
|
<i class="nf nf-md-layers_remove"></i>
|
|
Delete this Deck
|
|
</button>
|
|
<button
|
|
onclick={() => {
|
|
deck[CurrentlyEditingDeckId].cards.push({ Q: "", a: "" });
|
|
}}
|
|
class="btn"
|
|
>
|
|
<i class="nf nf-md-card_plus"></i>
|
|
Add New Card
|
|
</button>
|
|
<button onclick={saveDeck} class="btn">
|
|
<i class="nf nf-md-content_save"></i>
|
|
Save All Changes You Made
|
|
</button>
|
|
</div>
|
|
</div>
|