123 lines
3.3 KiB
Svelte
123 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { flairStore, type Flair as FlairModel } from '$lib/FlairStore.svelte';
|
|
import { deleteR, preventDefault, put } from '$lib/utils';
|
|
import { onMount } from 'svelte';
|
|
import NavBar from '../NavBar.svelte';
|
|
import Flair from './Flair.svelte';
|
|
|
|
let flair: FlairModel = $state({} as unknown as FlairModel);
|
|
|
|
async function create() {
|
|
try {
|
|
await put('flair/', flair);
|
|
flair = {} as unknown as FlairModel;
|
|
flairStore.loadItems(true);
|
|
} catch (e) {
|
|
// TODO: Show to user
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
async function remove(id: string) {
|
|
try {
|
|
await deleteR(`flair/${id}`);
|
|
flairStore.loadItems(true);
|
|
} catch (e) {
|
|
// TODO: Show to user
|
|
console.log(e);
|
|
}
|
|
}
|
|
|
|
let edit: FlairModel | undefined = $state();
|
|
|
|
onMount(() => {
|
|
flairStore.loadItems();
|
|
});
|
|
|
|
async function update() {
|
|
try {
|
|
await put('flair/update', edit);
|
|
edit = undefined;
|
|
flairStore.loadItems(true);
|
|
} catch (e) {
|
|
// TODO: Show to user
|
|
console.log(e);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<NavBar />
|
|
|
|
<div class="p-2 flex flex-col gap-2">
|
|
<!-- Create -->
|
|
<div class="card p-2 rounded-lg">
|
|
<form class="flex flex-wrap gap-2" onsubmit={preventDefault(create)}>
|
|
<fieldset>
|
|
<label class="flabel" for="color">Color</label>
|
|
<input required type="color" id="color" class="finput" bind:value={flair.color} />
|
|
</fieldset>
|
|
<fieldset class="flex-grow">
|
|
<label class="flabel" for="name">Name</label>
|
|
<input required id="name" class="w-full finput" bind:value={flair.name} />
|
|
</fieldset>
|
|
<fieldset class="flex-grow">
|
|
<label class="flabel" for="expr">Expr</label>
|
|
<input required id="expr" class="w-full finput" bind:value={flair.expr} />
|
|
</fieldset>
|
|
<div class="btns w-full">
|
|
<button class="btn-confirm">Create</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- List -->
|
|
<div class="card rounded-lg p-2">
|
|
<h1>Flairs</h1>
|
|
{#each flairStore.flairs.filter((a) => !flair.name || ` ${flair.name} `.match(new RegExp(a.expr, 'i'))) as item}
|
|
<div class="p-1 flex items-center gap-2">
|
|
<button
|
|
onclick={() => {
|
|
edit = item;
|
|
}}
|
|
>
|
|
<Flair {item} />
|
|
</button>
|
|
<div class="inline text-white">
|
|
Expr: {item.expr}
|
|
</div>
|
|
<div class="flex-grow"></div>
|
|
<button class="btn-danger" onclick={preventDefault(() => remove(item.id))}>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
{#if item.id == edit?.id}
|
|
<form onsubmit={preventDefault(update)} class="shadow-inner p-2 rounded-xl">
|
|
<fieldset>
|
|
<label class="flabel" for="color">Color</label>
|
|
<input required type="color" id="color" bind:value={edit.color} />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label class="flabel" for="name">Name</label>
|
|
<input required id="name" class="finput w-full" bind:value={edit.name} />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label class="flabel" for="expr">Expr</label>
|
|
<input required id="expr" class="finput w-full" bind:value={edit.expr} />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label class="flabel" for="description">Description</label>
|
|
<textarea
|
|
required
|
|
id="description"
|
|
class="finput w-full"
|
|
bind:value={edit.description}
|
|
></textarea>
|
|
</fieldset>
|
|
<div class="btns w-full">
|
|
<button class="btn-confirm">Save</button>
|
|
</div>
|
|
</form>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|