From aa1a4a6b4d0fe3403b7b19da43c1271f0b1dd1e2 Mon Sep 17 00:00:00 2001
From: Miki <mikif70@gmail.com>
Date: Tue, 2 Jan 2024 11:58:43 +0000
Subject: [PATCH] =Select options =priority layout

---
 frontend/src/app.html                     |   7 +-
 frontend/src/lib/select.svelte            |   9 +-
 frontend/src/routes/priority/+page.svelte | 101 ++++++++++++----------
 3 files changed, 67 insertions(+), 50 deletions(-)
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 77a5ff5..d68b724 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -1,12 +1,15 @@
 <!doctype html>
 <html lang="en">
+
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
+
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
+		<div style="display: grid">%sveltekit.body%</div>
 	</body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/frontend/src/lib/select.svelte b/frontend/src/lib/select.svelte
index 7bcb404..43e52ff 100644
--- a/frontend/src/lib/select.svelte
+++ b/frontend/src/lib/select.svelte
@@ -5,6 +5,7 @@
 	export let value;
 	export let handleSelect;
 	export let element;
+	export let option_label;
 
 	console.log(`options: ${JSON.stringify(options)}`);
 </script>
@@ -13,7 +14,13 @@
 <select name={id} {id} bind:value on:change={handleSelect}>
 	{#each options as option}
 		{#if element}
-			<option value={option[element]}>{option[element]}</option>
+			{#if option_label}
+				<option value={option[element]}>{option[option_label]}</option>
+			{:else}
+				<option value={option[element]}>{option[element]}</option>
+			{/if}
+		{:else if option_label}
+			<option value={option}>{option[option_label]}</option>
 		{:else}
 			<option value={option}>{option}</option>
 		{/if}
diff --git a/frontend/src/routes/priority/+page.svelte b/frontend/src/routes/priority/+page.svelte
index 582bdfe..e9d8bf4 100644
--- a/frontend/src/routes/priority/+page.svelte
+++ b/frontend/src/routes/priority/+page.svelte
@@ -3,6 +3,8 @@
 	import { onMount } from 'svelte';
 	import { dev } from '$app/environment';
 	import { priority } from '$lib/stores/priority.js';
+	import Select from '$lib/select.svelte';
+	import Button from '../../lib/button.svelte';
 
 	if (dev) {
 		console.log('Dev mode');
@@ -18,8 +20,8 @@
 	}
 
 	let width;
-	let heat_number = 0;
-	let heats = [];
+	let heat;
+	$: heats = [];
 
 	$: surfers = [];
 	$: min = 0;
@@ -27,8 +29,16 @@
 	$: end = false;
 	$: start = false;
 
-	// let end = false;
-	// let start = false;
+	function resetHeat() {
+		heat = {
+			name: '',
+			number: 0,
+			round: '',
+			category: '',
+			timer: 0,
+			surfers: []
+		};
+	}
 
 	onMount(async () => {
 		let ses = window.sessionStorage.getItem('priority');
@@ -47,10 +57,13 @@
 	}
 
 	async function loadHeats() {
+		resetHeat();
 		const res = await fetch(`/api/loadheats`);
 		const data = await res.json();
 		for (let i in data) {
 			heats[i] = data[i];
+			heats[i].name = `${data[i].round} ${data[i].number} ${data[i].category}`;
+			heats = heats;
 			console.log(`${i} retval: ${JSON.stringify(data[i])}`);
 		}
 	}
@@ -116,15 +129,10 @@
 		end = false;
 	}
 
-	function setHeat(id) {
-		console.log(`setHeat: ${id}`);
-		if (id === '99') {
-			min = 0;
-			surfers = [];
-			return;
-		}
-		min = heats[id].timer;
-		surfers = heats[id].surfers;
+	function setHeat(h) {
+		console.log(`setHeat: ${h}`);
+		min = heat.timer;
+		surfers = heat.surfers;
 		$priority.surfers = surfers;
 		$priority.min = min;
 	}
@@ -207,23 +215,41 @@
 
 <div class="header">
 	<!-- <button class="button" on:click={() => loadHeats()} disabled={start}>Load</button> -->
-	<select name="heats" id="heats" bind:value={heat_number} on:change={() => setHeat(heat_number)}>
-		<option value="99">Select Heat</option>
-		{#each heats as heat, id}
-			<option value={id}>{heat.name} {heat.number} {heat.category}</option>
-		{/each}
-	</select>
+	<Select
+		options={heats}
+		option_label="name"
+		bind:value={heat}
+		handleSelect={() => setHeat(heat)}
+		label="Heats"
+		id="heats"
+	/>
 	{#if !end}
 		<div class="timer">{pad2(min)}:{pad2(sec)}</div>
 	{:else}
 		<div class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</div>
 	{/if}
-	<button class="button" on:click={() => startHeat()} disabled={start}>Start</button>
+	{#if start}
+		<Button handleClick={() => startHeat()} label="STOP" />
+	{:else}
+		<Button handleClick={() => startHeat()} label="START" />
+	{/if}
+	<!-- <button class="button" on:click={() => startHeat()} disabled={start}>Start</button> -->
 </div>
 
 <div class="container">
-	{#each surfers as surfer, id}
+	{#each surfers || [] as surfer, id}
 		<div class="box">
+			{#if surfer.priority != ''}
+				{#if surfer.priority === 'P'}
+					{#if surfer.color === 'white'}
+						<span class="priority_white">{surfer.priority}</span>
+					{:else}
+						<span class="priority">{surfer.priority}</span>
+					{/if}
+				{:else}
+					<span class="priority_small">{surfer.priority}</span>
+				{/if}
+			{/if}
 			<div
 				class="square"
 				{id}
@@ -236,19 +262,7 @@
 				on:keypress={console.log('keypress')}
 				role="button"
 				tabindex={id}
-			>
-				{#if surfer.priority != ''}
-					{#if surfer.priority === 'P'}
-						{#if surfer.color === 'white'}
-							<span class="priority_white">{surfer.priority}</span>
-						{:else}
-							<span class="priority">{surfer.priority}</span>
-						{/if}
-					{:else}
-						<span class="priority_small">{surfer.priority}</span>
-					{/if}
-				{/if}
-			</div>
+			></div>
 			<div class="score">{surfer.score}</div>
 		</div>
 	{/each}
@@ -263,7 +277,7 @@
 
 	.header {
 		display: grid;
-		grid-template-columns: auto 1fr auto;
+		grid-template-columns: repeat(4, 1fr);
 		align-items: center;
 		justify-content: center;
 		/* height: 10vh; */
@@ -282,6 +296,7 @@
 	}
 
 	.header .timer {
+		grid-column: 3 / 4;
 		font-size: 13vh;
 		padding-left: 10px;
 		padding-right: 20px;
@@ -291,13 +306,6 @@
 		text-align: center;
 	}
 
-	.header .button {
-		height: 40%;
-		align-items: center;
-		background-color: yellow;
-		border-radius: 10%;
-	}
-
 	.container {
 		height: 85vh;
 		background-color: var(--backColor);
@@ -310,13 +318,15 @@
 
 	.box {
 		width: 100%;
-		display: flex;
+		display: grid;
+		grid-template-columns: repeat(6, 1fr);
 		align-items: center;
 		padding: 1px;
 		margin-bottom: 1px;
 	}
 
 	.priority {
+		grid-column: 1/1;
 		width: 15%;
 		height: 100%;
 		border-radius: 20%;
@@ -325,7 +335,6 @@
 		margin-right: auto;
 		background-color: white;
 		color: black;
-		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-weight: bold;
@@ -340,7 +349,6 @@
 		margin-right: auto;
 		background-color: black;
 		color: white;
-		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-weight: bold;
@@ -357,18 +365,17 @@
 		margin-left: 30px;
 		background-color: #ccc;
 		color: black;
-		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-weight: bold;
 	}
 
 	.square {
+		grid-column: 2/6;
 		width: 100%;
 		height: 16vh;
 		border-radius: 5px;
 		margin-right: 15px;
-		display: flex;
 		align-items: center;
 		justify-content: center;
 		padding-bottom: 2px;
