+surfers & athletes

frontend/src/routes/setup/+page.svelte

@@ -11,6 +11,7 @@
 	import Button from '../../lib/button.svelte';
 
 	$: surfers = 2;
+	$: athletes = [];
 
 	$: heats = [];
 	let surfer_list = [];
@@ -68,6 +69,15 @@
 		loadHeats();
 	}
 
+	async function loadSurfers() {
+		const res = await fetch(`/api/loadsurfers`);
+		const data = await res.json();
+		for (let i in data) {
+			athletes[i] = data[i];
+			console.log(`${i} retval: ${JSON.stringify(data[i])}`);
+		}
+	}
+
 	function setHeat(id) {
 		resetHeat();
 		console.log(`setHeat: ${id}`);
@@ -188,7 +198,13 @@
 		<Number label="Number" min="1" max="20" id="number" bind:value={heat.number} />
 	</div>
 	<div class="category">
-		<Select label="Category" id="category" options={$categories} bind:value={heat.category} />
+		<Select
+			label="Category"
+			id="category"
+			options={$categories}
+			bind:value={heat.category}
+			handleSelect={loadSurfers}
+		/>
 	</div>
 	<div class="duration">
 		<Number label="Duration" id="duration" min="5" max="60" step="5" bind:value={heat.timer} />
@@ -204,7 +220,13 @@
 <div class="surfer">
 	{#each Array(surfers) as _, surfer}
 		<div class="name">
-			<Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} />
+			<Select
+				label="Name"
+				id="name{surfer}"
+				bind:value={surfer_list[surfer].name}
+				options={athletes}
+			/>
+			<!-- <Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} /> -->
 		</div>
 		<div class="color">
 			<Color id="color{surfer}" label="Color" bind:value={surfer_list[surfer].color} />

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

@@ -3,21 +3,38 @@
 	import Button from '$lib/button.svelte';
 	import Select from '$lib/select.svelte';
 	import Input from '$lib/input.svelte';
-	import Number from '$lib/number.svelte';
 	import { categories } from '$lib/stores/categories.js';
 
+	$: surfers = [];
+
 	let surfer = {
 		firstname: '',
 		lastname: '',
-		category: '',
-		num: '1'
+		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" />
@@ -28,9 +45,15 @@
 	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
 </div>
 
-<Button handleClick={onclick} title="SAVE"></Button>
-<Button handleClick={onclick} title="Reset"></Button>
+<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}}