Initial commit

site/src/routes/flair/+page.svelte

@@ -0,0 +1,116 @@
+<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>