Priority/frontend/src/routes/surfers/+page.svelte

<script>
	import Header from '$lib/header-setup.svelte';
	import Button from '$lib/button.svelte';
	import Select from '$lib/select.svelte';
	import Input from '$lib/input.svelte';
	import { categories } from '$lib/stores/categories.js';

	$: surfers = [];

	let surfer = {
		firstname: '',
		lastname: '',
		category: ''
	};

	$: value = '';

	async function loadSurfers() {
		const res = await fetch(`/api/loadsurfers`);
		const data = await res.json();
		for (let i in data) {
			surfers[i] = data[i];
			console.log(`${i} retval: ${JSON.stringify(data[i])}`);
		}
	}

	function onclick() {
		alert('clicked');
	}

	function reset() {
		surfer = {
			firstname: '',
			lastname: '',
			category: ''
		};
	}
</script>

<Header title="Surfer Edit" />

<div class="form">
	<Input label="Firstame" id="firstname" bind:value={surfer.firstname} />
	<Input label="Lastname" id="lastname" bind:value={surfer.lastname} />
	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
</div>

<Button handleClick={onclick} label="SAVE"></Button>
<Button handleClick={reset} label="Reset"></Button>

<hr />

<label for="surfer">{JSON.stringify(surfer)}</label>

<hr />

{#each surfers as s}
	<label for={s}>{JSON.stringify(s)}</label>
{/each}}