82 lines
2.4 KiB
Svelte
82 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
import axios from "$lib/api.ts";
|
|
import WordForm from "$lib/WordForm.svelte";
|
|
import { type Word } from "../../lib/types";
|
|
|
|
import { snakeToCamelCase } from "$lib/case";
|
|
|
|
let words: Word[];
|
|
const wordResponse = axios.get("words/").then((data) => {
|
|
words = snakeToCamelCase(data.data);
|
|
});
|
|
let isFormNewShown = false;
|
|
|
|
function toggleFormNew() {
|
|
isFormNewShown = !isFormNewShown;
|
|
}
|
|
|
|
function newWord(e) {
|
|
const formData = new FormData(e.target);
|
|
|
|
const data = {};
|
|
for (let field of formData) {
|
|
const [key, value] = field;
|
|
data[key] = value;
|
|
}
|
|
console.log(data);
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
{#await wordResponse}
|
|
<p>…</p>
|
|
{:then}
|
|
<div class="grid grid-cols-3 gap-y-2 gap-x-1">
|
|
<div class="font-bold">Live</div>
|
|
<div class="font-bold">Ger</div>
|
|
<div class="font-bold">Termenadur</div>
|
|
|
|
{#if !isFormNewShown}
|
|
<div />
|
|
<button
|
|
type="button"
|
|
class="bg-violet-600 hover:bg-violet-700 rounded-md text-white p-1 w-8 text-center"
|
|
on:click={toggleFormNew}
|
|
>
|
|
<span class="fa-regular fa-plus" />
|
|
</button>
|
|
<div />
|
|
{:else}
|
|
<form on:submit|preventDefault={newWord}>
|
|
<div>
|
|
<input
|
|
name="level"
|
|
placeholder="Live"
|
|
class="p-1 rounded-md border w-1/2"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
name="word"
|
|
placeholder="Ger"
|
|
class="p-1 rounded-md border w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
name="definition"
|
|
placeholder="Termenadur"
|
|
class="p-1 rounded-md border w-full"
|
|
/>
|
|
</div>
|
|
</form>
|
|
{/if}
|
|
|
|
{#each words as word}
|
|
<WordForm {...word} />
|
|
{/each}
|
|
</div>
|
|
{/await}
|
|
</main>
|