From f4d832081777e8fe67e86e7d589e61e44cae9e7b Mon Sep 17 00:00:00 2001
From: Miki <mikif70@gmail.com>
Date: Tue, 9 Jan 2024 15:03:52 +0100
Subject: [PATCH] +start & stop

---
 frontend/src/routes/light/setup/+page.svelte | 83 ++++++++++++--------
 1 file changed, 51 insertions(+), 32 deletions(-)

diff --git a/frontend/src/routes/light/setup/+page.svelte b/frontend/src/routes/light/setup/+page.svelte
index 2b564cb..1144fb3 100644
--- a/frontend/src/routes/light/setup/+page.svelte
+++ b/frontend/src/routes/light/setup/+page.svelte
@@ -4,7 +4,7 @@
     import Color from '$lib/color.svelte';
 
     let saved = false;
-    let start = false;
+    $: start = false;
 
     $: surfer = [
         { color: 'gray', priority: '2' },
@@ -18,6 +18,7 @@
 	$: if (saved && surfer) {
 		window.sessionStorage.setItem('priority', JSON.stringify(surfer));        
         window.sessionStorage.setItem('surfers', JSON.stringify(surfers));        
+        window.sessionStorage.setItem('status', JSON.stringify(start));        
 		console.log(`saved: ${JSON.stringify(surfer)}`);
 	}  
 
@@ -29,6 +30,7 @@
 		if (ses) {
 			surfer = JSON.parse(ses);
             surfers = JSON.parse(window.sessionStorage.getItem('surfers'));
+            start = JSON.parse(window.sessionStorage.getItem('status'));
 			console.log(`loaded: ${JSON.stringify(surfer)}`);
 		}
 		saved = true;
@@ -36,38 +38,55 @@
 
 </script>
 
-<ul>
-    {#each Array(surfers) as _, id}
-        <li style="--height:{setup_height}vh">
-            {#if surfer[id].priority == 'P'}
-                <div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
-            {:else}
-                <div class="priority" id="n">{surfer[id].priority}</div>
-            {/if}
-            <div class="color" style:background-color={surfer[id].color}></div>
-        </li>        
-    {/each}
-</ul>
-<div class="footer" style="--height:{footer_height}vh">
-    <span>{footer_height} - {setup_height}</span>
-    <span style:padding-left="20px"></span>
-    {#each Array(surfers) as _, id}        
-        <span style:padding-left="20px"></span><span>{surfer[id].color}</span>
-    {/each}
-    <br>
-    <Button label="+" handleClick={() => {if (surfers < 5) surfers += 1;}} />
-        <span class="surfers">{surfers}</span>
-    <Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
-    {#each Array(surfers) as _, id}
+{#if start}
+    <ul>
+        {#each Array(surfers) as _, id}
+            <li style="--height:{setup_height}vh">
+                {#if surfer[id].priority == 'P'}
+                    <div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
+                {:else}
+                    <div class="priority" id="n">{surfer[id].priority}</div>
+                {/if}
+                <div class="color" style:background-color={surfer[id].color}></div>
+            </li>        
+        {/each}
+    </ul>
+    <div class="footer" style="--height:{footer_height}vh">
+        <Button label="STOP" handleClick={() => {start = false;}} />    
+    </div>    
+{:else}
+    <ul>
+        {#each Array(surfers) as _, id}
+            <li style="--height:{setup_height}vh">
+                {#if surfer[id].priority == 'P'}
+                    <div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
+                {:else}
+                    <div class="priority" id="n">{surfer[id].priority}</div>
+                {/if}
+                <div class="color" style:background-color={surfer[id].color}></div>
+            </li>        
+        {/each}
+    </ul>
+    <div class="footer" style="--height:{footer_height}vh">
+        <span>{footer_height} - {setup_height}</span>
+        <span style:padding-left="20px"></span>
+        {#each Array(surfers) as _, id}        
+            <span style:padding-left="20px"></span><span>{surfer[id].color}</span>
+        {/each}
+        <br>
+        <Button label="+" handleClick={() => {if (surfers < 5) surfers += 1;}} />
+            <span class="surfers">{surfers}</span>
+        <Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
+        {#each Array(surfers) as _, id}
+            <span style:padding-left="16px"></span>
+            <Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
+        {/each}
         <span style:padding-left="16px"></span>
-        <Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
-    {/each}
-    <span style:padding-left="16px"></span>
-    <Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
-    <span style:padding-left="16px"></span>
-    <Button label="START" handleClick={() => {start = true;}} />
-    
-</div>
+        <Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
+        <span style:padding-left="16px"></span>
+        <Button label="START" handleClick={() => {start = true;}} />    
+    </div>
+{/if}
 
 <style>
 	:global(body) {