+save surfer

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

@@ -176,12 +176,6 @@
 		return false;
 	}
 
-	function capitalize(element, elementName) {
-		element[elementName] =
-			element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
-		console.log(`element: ${element[elementName]}`);
-	}
-
 	onMount(() => {
 		resetHeat();
 		loadHeats();

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

@@ -1,4 +1,5 @@
 <script>
+	import { onMount } from 'svelte';
 	import Header from '$lib/header-setup.svelte';
 	import Button from '$lib/button.svelte';
 	import Select from '$lib/select.svelte';
@@ -7,14 +8,18 @@
 
 	$: surfers = [];
 
-	let surfer = {
-		firstname: '',
-		lastname: '',
-		category: ''
-	};
+	let surfer = {};
 
 	$: value = '';
 
+	function resetSurfer() {
+		surfer = {
+			firstname: '',
+			lastname: '',
+			category: ''
+		};
+	}
+
 	async function loadSurfers() {
 		const res = await fetch(`/api/loadsurfers`);
 		const data = await res.json();
@@ -24,17 +29,41 @@
 		}
 	}
 
-	function onclick() {
-		alert('clicked');
+	async function save() {
+		if (surfer.firstname === '') {
+			alert('Must have a name');
+			return;
+		}
+
+		if (surfer.lastname === '') {
+			alert('Must have a name');
+			return;
+		}
+
+		if (surfer.category === '') {
+			alert('Must have a category');
+			return;
+		}
+
+		const res = await fetch(`/api/savesurfer`, {
+			method: 'POST',
+			body: JSON.stringify(surfer),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+
+		console.log(`retval: ${JSON.stringify(res)}`);
+		console.log(JSON.stringify(surfer));
+
+		resetSurfer();
+		loadSurfers();
 	}
 
-	function reset() {
-		surfer = {
-			firstname: '',
-			lastname: '',
-			category: ''
-		};
-	}
+	onMount(() => {
+		resetSurfer();
+		loadSurfers();
+	});
 </script>
 
 <Header title="Surfer Edit" />
@@ -45,8 +74,8 @@
 	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
 </div>
 
-<Button handleClick={onclick} label="SAVE"></Button>
-<Button handleClick={reset} label="Reset"></Button>
+<Button handleClick={save} label="SAVE"></Button>
+<Button handleClick={resetSurfer} label="Reset"></Button>
 
 <hr />
 
@@ -55,5 +84,5 @@
 <hr />
 
 {#each surfers as s}
-	<label for={s}>{JSON.stringify(s)}</label>
+	<label for={s}>{s.firstname} {s.lastname} - {s.category}</label><br />
 {/each}}