+color input

frontend/src/lib/color.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { colors } from '$lib/stores/colors.js';
+
+	export let label;
+	export let id;
+	export let value;
+</script>
+
+<label class="label" for={id}>{label}</label>
+<select name={id} {id} bind:value style="background-color: {value}">
+	{#each $colors as color}
+		<option value={color} style="background-color: {color}">{color}</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/routes/setup/+page.svelte

@@ -4,9 +4,10 @@
 	import { categories } from '$lib/stores/categories.js';
 	import { rounds } from '$lib/stores/rounds.js';
 	import { colors } from '$lib/stores/colors.js';
-	import Number from '$lib/number.svelte'
+	import Number from '$lib/number.svelte';
-	import Input from '$lib/input.svelte'
+	import Input from '$lib/input.svelte';
-	import  Select  from '$lib/select.svelte'
+	import Select from '$lib/select.svelte';
+	import Color from '$lib/color.svelte';
 	import Button from '../../lib/button.svelte';
 
 	$: surfers = 2;
@@ -181,87 +182,30 @@
 
 <div class="container">
 	<div class="heat">
-		<Select label="Round" id="round" bind:value={heat.round} options={$rounds}/>
+		<Select label="Round" id="round" bind:value={heat.round} options={$rounds} />
-		<!-- <label class="label" for="round">Round</label>
-		<select name="round" id="round" bind:value={heat.round}>
-			{#each $rounds as round}
-				<option value={round}>{round}</option>
-			{/each}
-		</select> -->
 		<Number label="Number" min="1" max="20" id="number" bind:value={heat.number} />
-		<!-- <label class="label" for="number">Number</label>
-		<input bind:value={heat.number} id="number" type="number" min="1" max="20" /> -->
 		<Select label="Category" id="category" options={$categories} bind:value={heat.category} />
-		<!-- <label class="label" for="category">Category</label>
-		<select name="category" id="category" bind:value={heat.category}>
-			{#each $categories as category}
-				<option value={category}>{category}</option>
-			{/each}
-		</select> -->
 		<Number label="Duration" id="duration" min="5" max="60" step="5" bind:value={heat.timer} />
-		<!-- <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()}} -->
 	</div>
 
 	<hr />
 	<div class="controller">
 		<Button handleClick={addSurfers} label="+" />
-		<!-- <button
-			class="plus"
-			on:click={() => {
-				addSurfers();
-			}}>+</button
-		> -->
 		<span class="surfers">{surfers}</span>
 		<Button handleClick={removeSurfers} label="-" />
-		<!-- <button
-			class="plus"
-			on:click={() => {
-				removeSurfers();
-			}}>-</button
-		> -->
 	</div>
 
 	{#each Array(surfers) as _, surfer}
 		<div class="surfer">
 			<Input label="Name" id="name{surfer}" bind:value={surfer_list[surfer].name} />
-			<!-- <label class="label" for="name{surfer}">Name</label>
+			<Color id="color{surfer}" label="Color" bind:value={surfer_list[surfer].color} />
-			<input
-				bind:value={surfer_list[surfer].name}
-				on:change={capitalize(surfer_list[surfer], 'name')}
-				id="name{surfer}"
-				type="text"
-			/> -->
-			<Select id="color{surfer}" label="Color" options={$colors} bind:value={surfer_list[surfer].color} selectStyle="background-color: {surfer_list[surfer].color};"/>
-			<!-- <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};"
-			>
-				{#each $colors as color}
-					<option value={color} style="background-color: {color};">{color}</option>
-				{/each}
-			</select> -->
-			<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
 		</div>
 	{/each}
 </div>
 
-<button
+<Button handleClick={save} label="SAVE" />
-	class="plus"
+<Button handleClick={resetHeat} label="RESET" />
-	on:click={() => {
+
-		save();
-	}}>SAVE</button
->
-<button
-	class="plus"
-	on:click={() => {
-		resetHeat();
-	}}>RESET</button
->
 <hr />
 {#each heats as h, id}
 	<div class="surfer">

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

@@ -3,7 +3,7 @@
 	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 Number from '$lib/number.svelte';
 	import { categories } from '$lib/stores/categories.js';
 
 	let surfer = {
@@ -26,7 +26,6 @@
 	<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} />
-	<Number label="Heat" id="heat" min="1" max="20" bind:value={surfer.num} />
 </div>
 
 <Button handleClick={onclick} title="SAVE"></Button>