RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made multi deck work!

Browse source
This commit is contained in:
RezHackXYZ 2025-06-13 16:12:51 +05:30
parent dcf1fed0c3
commit 677176e0f9
No known key found for this signature in database
GPG key ID: C4C90E569C9669E2
3 changed files with 47 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/routes/flashcards/editCards.svelte
View file

@ -1,24 +1,38 @@
<script>
import { SetNewDeck, deck, stats } from "./logic.svelte";
import { SetNewDeck, StorageDeck } from "./logic.svelte";
import toast from "svelte-5-french-toast";
let LocalDeck = $state($state.snapshot(deck));
function saveDeck() {
localStorage.setItem("deck", JSON.stringify(LocalDeck));
SetNewDeck(LocalDeck);
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="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"><i class="nf nf-md-delete"></i></button>
<button aria-label="delete" class="btn invisible h-0"><i class="nf nf-md-delete"></i></button>
</div>
{#each LocalDeck as card, i}
{#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} />
@ -26,20 +40,20 @@
aria-label="delete"
onclick={() => {
if (confirm("Are you sure you want to delete this card?")) {
LocalDeck.splice(i, 1);
toast.success("Card deleted successfully! To make it apply, please save the deck.");
deck[CurrentlyEditingDeckId].cards.splice(i, 1);
}
}}
class="btn dull"><i class="nf nf-md-delete"></i></button
class="btn dull"
>
<i class="nf nf-md-delete"></i>
</button>
</div>
{/each}
</div>
<div class="flex gap-3">
<button
onclick={() => {
LocalDeck.push({ Q: "", a: "" });
toast.success("New card added! To make it apply, please save the deck.");
deck[CurrentlyEditingDeckId].cards.push({ Q: "", a: "" });
}}
class="btn"
>
@ -47,8 +61,8 @@
Add New Card
</button>
<button onclick={saveDeck} class="btn">
<i class="nf nf-fa-save"></i>
Save
<i class="nf nf-md-content_save"></i>
Save All Changes You Made
</button>
</div>
</div>