+colors

+components

frontend/pnpm-lock.yaml

@@ -568,16 +568,16 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /acorn-jsx@5.3.2(acorn@8.11.2):
+  /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.11.2
+      acorn: 8.11.3
     dev: true
 
-  /acorn@8.11.2:
+  /acorn@8.11.3:
-    resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
     dev: true
@@ -648,7 +648,7 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@types/estree': 1.0.5
-      acorn: 8.11.2
+      acorn: 8.11.3
       estree-walker: 3.0.3
       periscopic: 3.1.0
     dev: true
@@ -884,8 +884,8 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.11.2
+      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.2)
+      acorn-jsx: 5.3.2(acorn@8.11.3)
       eslint-visitor-keys: 3.4.3
     dev: true
 
@@ -1478,7 +1478,7 @@ packages:
       '@ampproject/remapping': 2.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.20
-      acorn: 8.11.2
+      acorn: 8.11.3
       aria-query: 5.3.0
       axobject-query: 3.2.1
       code-red: 1.0.4

frontend/src/lib/button.svelte

@@ -0,0 +1,16 @@
+<script>
+	export let handleClick;
+	export let title;
+</script>
+
+<button class="button" on:click={handleClick}>{title}</button>
+
+<style>
+	.button {
+		border-radius: 8px;
+		margin-left: 0.2rem;
+		margin-right: 0.2rem;
+		margin-bottom: 8px;
+		margin-top: 8px;
+	}
+</style>

frontend/src/lib/input.svelte

@@ -0,0 +1,31 @@
+<script>
+	export let label;
+	export let value;
+	export let id;
+
+	function capitalize() {
+		value = value.charAt(0).toUpperCase() + value.slice(1);
+		console.log(`element: ${value}`);
+	}
+</script>
+
+<label class="label" for={id}>{label}</label>
+<input bind:value on:change={capitalize} {id} type="text" />
+
+<style>
+	.label {
+		border: 2px solid #555;
+		background-color: gray;
+		border-radius: 8px;
+		padding: 2px;
+	}
+
+	input {
+		font-size: 1.2rem;
+		border-radius: 6px;
+		margin-left: 0.1rem;
+		margin-right: 0.1rem;
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
+</style>

frontend/src/lib/select.svelte

@@ -0,0 +1,26 @@
+<script>
+	export let label;
+	export let id;
+	export let options;
+	export let value;
+</script>
+
+<label class="label" for={id}>{label}</label>
+<select name={id} {id} bind:value>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+<style>
+	.label {
+		border: 2px solid #555;
+		background-color: gray;
+		border-radius: 8px;
+		padding: 2px;
+	}
+
+	select {
+		font-size: 1.2rem;
+	}
+</style>

frontend/src/lib/stores/colors.js

@@ -0,0 +1,11 @@
+import { readable } from "svelte/store"
+
+export const colors = readable([
+    "black",
+    "blue",
+    "red",
+    "green",
+    "yellow",
+    "pink",
+    "white",
+]);

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

@@ -1,19 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
-    import Header from  "$lib/header-setup.svelte"
+	import Header from '$lib/header-setup.svelte';
-    import {categories} from "$lib/stores/categories.js"
+	import { categories } from '$lib/stores/categories.js';
-    import {rounds} from "$lib/stores/rounds.js"
+	import { rounds } from '$lib/stores/rounds.js';
-
+	import { colors } from '$lib/stores/colors.js';
-
-    let colors = [
-        "black",
-        "blue",
-        "red",
-        "green",
-        "yellow",
-        "pink",
-        "white",
-    ];
 
 	$: surfers = 2;
 
@@ -46,7 +36,7 @@
 			category: '',
 			timer: 20,
 			surfers: surfer_list
-        }
+		};
 	}
 
 	async function loadHeats() {
@@ -169,7 +159,8 @@
 	}
 
 	function capitalize(element, elementName) {
-        element[elementName] = element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1); 
+		element[elementName] =
+			element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
 		console.log(`element: ${element[elementName]}`);
 	}
 
@@ -177,7 +168,6 @@
 		resetHeat();
 		loadHeats();
 	});
-
 </script>
 
 <Header title="Heat setup" />
@@ -191,7 +181,7 @@
 			{/each}
 		</select>
 		<label class="label" for="number">Number</label>
-            <input bind:value={heat.number} id="number" type="number" min="1" max="20">
+		<input bind:value={heat.number} id="number" type="number" min="1" max="20" />
 		<label class="label" for="category">Category</label>
 		<select name="category" id="category" bind:value={heat.category}>
 			{#each $categories as category}
@@ -199,24 +189,44 @@
 			{/each}
 		</select>
 		<label class="label" for="timer">Duration</label>
-            <input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5"> <!-- on:keydown={(event) => {event.preventDefault()}} -->
+		<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5" />
+		<!-- on:keydown={(event) => {event.preventDefault()}} -->
 	</div>
 
-    <hr>
+	<hr />
 	<div class="controller">
-        <button class="plus" on:click={() => {addSurfers();}}>+</button>
+		<button
+			class="plus"
+			on:click={() => {
+				addSurfers();
+			}}>+</button
+		>
 		<span class="surfers">{surfers}</span>
-        <button class="plus" on:click={() => {removeSurfers();}}>-</button>    
+		<button
+			class="plus"
+			on:click={() => {
+				removeSurfers();
+			}}>-</button
+		>
 	</div>
 
-
 	{#each Array(surfers) as _, surfer}
 		<div class="surfer">
 			<label class="label" for="name{surfer}">Name</label>
-            <input bind:value={surfer_list[surfer].name} on:change={capitalize(surfer_list[surfer], "name")} id="name{surfer}" type="text">
+			<input
+				bind:value={surfer_list[surfer].name}
+				on:change={capitalize(surfer_list[surfer], 'name')}
+				id="name{surfer}"
+				type="text"
+			/>
 			<label class="label" for="color{surfer}">Color</label>
-            <select name="color" id="color{surfer}" bind:value={surfer_list[surfer].color} style="background-color: {surfer_list[surfer].color};">
+			<select
-                {#each colors as color}
+				name="color"
+				id="color{surfer}"
+				bind:value={surfer_list[surfer].color}
+				style="background-color: {surfer_list[surfer].color};"
+			>
+				{#each $colors as color}
 					<option value={color} style="background-color: {color};">{color}</option>
 				{/each}
 				<!-- <option value="red" style="background-color: red;">Select color</option> -->
@@ -230,16 +240,34 @@
 			<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
 		</div>
 	{/each}
-      
 </div>
 
-<button class="plus" on:click={() => {save();}}>SAVE</button>
+<button
-<button class="plus" on:click={() => {resetHeat();}}>RESET</button>
+	class="plus"
-<hr>
+	on:click={() => {
+		save();
+	}}>SAVE</button
+>
+<button
+	class="plus"
+	on:click={() => {
+		resetHeat();
+	}}>RESET</button
+>
+<hr />
 {#each heats as h, id}
 	<div class="surfer">
-        <button on:click={() => {setHeat(id);}}>{h.round} {h.number} {h.category}</button> 
+		<button
-        <button class="plus" on:click={() => {deleteHeat(id);}}>X</button>
+			on:click={() => {
+				setHeat(id);
+			}}>{h.round} {h.number} {h.category}</button
+		>
+		<button
+			class="plus"
+			on:click={() => {
+				deleteHeat(id);
+			}}>X</button
+		>
 	</div>
 {/each}
 
@@ -248,7 +276,6 @@
 <!-- <h2>{JSON.stringify(surfer_list)}</h2> -->
 
 <style>
-
 	.container {
 		background-color: lightgrey;
 	}
@@ -289,7 +316,6 @@
 		padding: 2px;
 	}
 
-
 	.surfer {
 		font-size: 1.3rem;
 		margin-top: 2px;
@@ -310,7 +336,6 @@
 		margin-right: 0.1rem;
 		padding-top: 2px;
 		padding-bottom: 2px;
-
 	}
 
 	.surfer select {
@@ -331,5 +356,4 @@
 		border-radius: 8px;
 		padding: 5px;
 	}
-
 </style>

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

@@ -1,24 +1,34 @@
 <script>
-    import Header from  "$lib/header-setup.svelte"
+	import Header from '$lib/header-setup.svelte';
-    import {categories} from "$lib/stores/categories.js"
+	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';
 
 	let surfer = {
-        name: "",
+		firstname: '',
-        category: ""
+		lastname: '',
+		category: ''
+	};
+
+	$: value = '';
+
+	function onclick() {
+		alert('clicked');
 	}
-
-
 </script>
 
 <Header title="Surfer Edit" />
 
 <div class="form">
-    <label for="name">Name</label>
+	<Input label="Firstame" id="firstname" bind:value={surfer.firstname} />
-    <input type="text" id="name" bind:value={surfer.name}>
+	<Input label="Lastname" id="lastname" bind:value={surfer.lastname} />
-    <label for="catrgoty">Category</label>
+	<Select label="category" id="category" options={$categories} bind:value={surfer.category} />
-    <select name="category" id="category">
-        {#each $categories as category}
-        <option value={category}>{category}</option>
-        {/each}
-    </select>
 </div>
+
+<Button handleClick={onclick} title="SAVE"></Button>
+<Button handleClick={onclick} title="Reset"></Button>
+
+<hr />
+
+<label for="surfer">{JSON.stringify(surfer)}</label>