=setup post data

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

@@ -1,5 +1,102 @@
 <script>
     import Logo from "$lib/img/topscorer_logo_web.png"
+
+    $: surfers = 1;
+
+    let surfer_list = new Array();
+
+    surfer_list.push({
+        name: '',
+        color: '#000000',
+        score: '',
+        priority: ''
+    });
+
+    let heat = {
+        number: '',
+        name: '',
+        category: '',
+        timer: '',
+        surfers: surfer_list
+    }
+
+    function addSurfers() {
+        surfers++;
+        surfer_list.push({
+            name: '',
+            color: '#000000',
+            score: '',
+            priority: ''
+            });
+    }
+
+    function removeSurfers() { 
+        surfers--; 
+        if (surfers < 1) surfers = 1;
+    }
+
+    async function save() {
+        if(hasDuplicateColors(surfer_list)) {
+            alert('Colors must be unique');
+            return;
+        }
+
+        if(surfer_list.length < 2) {
+            alert('Must have at least 2 surfers');
+            return;
+        }
+
+        if(heat.name === '') {
+            alert('Must have a name');
+            return;
+        }
+
+        if(heat.category === '') {
+            alert('Must have a category');
+            return;
+        }
+
+        if(heat.number === '') {
+            alert('Must have a number');
+            return;
+        }
+
+        if(heat.timer === '') {
+            alert('Must have a timer');
+            return;
+        }
+
+		const res = await fetch(`/api/setup`, {
+			method: 'POST',
+			body: JSON.stringify(heat),
+			headers: {
+				'Content-Type': 'application/json'
+			}
+		});
+		console.log(`retval: ${JSON.stringify(res)}`);
+    
+        console.log(JSON.stringify(heat));
+    }
+
+    function hasDuplicateColors(arr) {
+        const colors = [];
+
+        console.log(JSON.stringify(arr));
+
+        for(let i = 0; i < arr.length; i++) {
+            const color = arr[i].color;
+            
+            if(colors.includes(color)) {
+                console.log(`duplicate color: ${color}`);
+                return true;
+            }
+
+            colors.push(color);
+        }
+
+        return false;
+    }    
+
 </script>
 
 <div class="header">
@@ -10,30 +107,31 @@
 <div class="container">    
     <div class="heat">
             <label class="label" for="name">Name</label>
-            <input id="name" type="text">
+            <input bind:value={heat.name} id="name" type="text">
             <label class="label" for="category">Category</label>
-            <input id="category" type="text">
+            <input bind:value={heat.category} id="category" type="text">
+            <label class="label" for="number">Number</label>
+            <input bind:value={heat.number} id="number" on:keydown={(event) => {event.preventDefault()}} type="number" min="1" max="20">
+            <label class="label" for="timer">Timer</label>
+            <input bind:value={heat.timer} id="timer" on:keydown={(event) => {event.preventDefault()}} type="number" min="5" max="60" step="5">
     </div>
     
-    <div class="surfer">
-            <label class="label" for="firstname">Firstname</label>
-            <input id="firstname" type="text">
-            <label class="label" for="lastname">Lastname</label>
-            <input id="lastname" type="text">
-            <label class="label" for="color">Color</label>
-            <select id="color">
-                <option value="white" style="background-color: white;">White</option>
-                <option value="black" style="background-color: black;">Black</option>
-                <option value="red" style="background-color: red;">Red</option>
-                <option value="green" style="background-color: green;">Green</option>
-                <option value="blue" style="background-color: blue;">Blue</option>
-                <option value="yellow" style="background-color: yellow;">Yellow</option>
-                <option value="purple" style="background-color: purple;">Purple</option>
-            </select>
-        <button class="plus">+</button>
-    </div>    
+    <button class="plus" on:click={() => {addSurfers();}}>+</button>
+    <button class="plus" on:click={() => {removeSurfers();}}>-</button>
+
+    {#each Array(surfers) as _, surfer}
+        <div class="surfer">
+            <label class="label" for="name{surfer}">Name</label>
+            <input bind:value={surfer_list[surfer].name} id="name{surfer}" type="text">
+            <label class="label" for="color{surfer}">Color</label>
+            <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}">
+        </div>  
+    {/each}
+      
 </div>
 
+<button class="plus" on:click={() => {save();}}>SET</button>
+
 <style>
 
    .container {