From 0920ca3fbd373c25acc32b48cda95ccd9fece5f4 Mon Sep 17 00:00:00 2001
From: Miki <mikif70@gmail.com>
Date: Wed, 17 Jan 2024 12:43:34 +0100
Subject: [PATCH] reset store solved

---
 frontend.light/src/lib/stores/priority.js     |  60 ++++----
 .../src/routes/display-h/+page.svelte         |  18 +--
 .../src/routes/display/+page.svelte           |  24 +--
 frontend.light/src/routes/mobile/+page.svelte |  42 +++---
 .../src/routes/priority/+page.svelte          | 137 +++++++++---------
 5 files changed, 142 insertions(+), 139 deletions(-)

diff --git a/frontend.light/src/lib/stores/priority.js b/frontend.light/src/lib/stores/priority.js
index 950818b..5ce38d0 100644
--- a/frontend.light/src/lib/stores/priority.js
+++ b/frontend.light/src/lib/stores/priority.js
@@ -1,40 +1,48 @@
 import { writable } from 'svelte/store';
 
-const initSurfers = [
-    { color: 'lightgray', priority: '', name: '' },
-    { color: 'lightgray', priority: '', name: '' },
-    { color: 'lightgray', priority: '', name: '' },
-    { color: 'lightgray', priority: '', name: '' },
-    { color: 'lightgray', priority: '', name: '' },
-    { color: 'lightgray', priority: '', name: '' },
-];
-
-const initRound = {
-    name: '',
-    heat: 1,
-    category: ''
-};
-
 function createPriority() {
     const { subscribe, set, update } = writable({
-        surfers: initSurfers,
-        round: initRound,
+        surfers: [
+            { color: 'lightgray', priority: '', name: '' },
+            { color: 'lightgray', priority: '', name: '' },
+            { color: 'lightgray', priority: '', name: '' },
+            { color: 'lightgray', priority: '', name: '' },
+            { color: 'lightgray', priority: '', name: '' },
+            { color: 'lightgray', priority: '', name: '' },        
+        ],
+        round: {
+            name: '',
+            heat: 1,
+            category: ''
+        },
         surfersCount: 4
-    })
-    const reset = () => {
+    });
+
+    const clear = () => {
         set({
-            surfers: initSurfers,
-            round: initRound,
-            surfersCount: 4
+            surfers: [
+                { color: 'lightgray', priority: '', name: '' },
+                { color: 'lightgray', priority: '', name: '' },
+                { color: 'lightgray', priority: '', name: '' },
+                { color: 'lightgray', priority: '', name: '' },
+                { color: 'lightgray', priority: '', name: '' },
+                { color: 'lightgray', priority: '', name: '' },        
+            ],
+            round: {
+                name: '',
+                heat: 1,
+                category: ''
+            },
+            surfersCount: 4        
         });
-    }
+    };
 
     return {
         subscribe,
         set,
         update,
-        reset,
+        clear
     }
-};
+}
 
-export const priority = createPriority();
\ No newline at end of file
+export const priorityStore = createPriority();
\ No newline at end of file
diff --git a/frontend.light/src/routes/display-h/+page.svelte b/frontend.light/src/routes/display-h/+page.svelte
index d8afe7b..24a4cc3 100644
--- a/frontend.light/src/routes/display-h/+page.svelte
+++ b/frontend.light/src/routes/display-h/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { dev } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { priority } from '$lib/stores/priority.js';
+	import { priorityStore } from '$lib/stores/priority.js';
 
 	if (dev) {
 		console.log('Dev mode');
@@ -11,7 +11,7 @@
 
 	const events = ['priority'];
 
-	$: setup_height = 100 / $priority.surfersCount - 2.2 / $priority.surfersCount;
+	$: setup_height = 100 / $priorityStore.surfersCount - 2.2 / $priorityStore.surfersCount;
 
 	window.document.body.oncontextmenu = function () {
 		return false;
@@ -42,7 +42,7 @@
 			let Msg = JSON.parse(e.data);
 			console.log(JSON.stringify(Msg));
 			console.log(`surfers: ${Msg.data.priority}`);
-			$priority = Msg.data.priority;
+			$priorityStore = Msg.data.priority;
 		});
 
 		return () => {
@@ -55,23 +55,23 @@
 		const res = await fetch(`/api/priority`);
 		const data = await res.json();
 		console.log(`load priority: ${JSON.stringify(data)}`);
-		$priority = data.priority;
+		$priorityStore = data.priority;
 	}
 </script>
 
 <ul>
-	{#each Array($priority.surfersCount) as _, id}
+	{#each Array($priorityStore.surfersCount) as _, id}
 		<li style="--height:{setup_height}vh">
-			{#if $priority.surfers[id].priority == 'P'}
+			{#if $priorityStore.surfers[id].priority == 'P'}
 				<div class="priority" id="p">
-					{$priority.surfers[id].priority}
+					{$priorityStore.surfers[id].priority}
 				</div>
 			{:else}
 				<div class="priority" id="n">
-					{$priority.surfers[id].priority}
+					{$priorityStore.surfers[id].priority}
 				</div>
 			{/if}
-			<div class="color" style:background-color={$priority.surfers[id].color}></div>
+			<div class="color" style:background-color={$priorityStore.surfers[id].color}></div>
 		</li>
 	{/each}
 </ul>
diff --git a/frontend.light/src/routes/display/+page.svelte b/frontend.light/src/routes/display/+page.svelte
index 1a5dc3a..427a81f 100644
--- a/frontend.light/src/routes/display/+page.svelte
+++ b/frontend.light/src/routes/display/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { dev } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { priority } from '$lib/stores/priority.js';
+	import { priorityStore } from '$lib/stores/priority.js';
 
 	let base;
 
@@ -46,9 +46,9 @@
 			let Msg = JSON.parse(e.data);
 			console.log(JSON.stringify(Msg));
 			console.log(`surfers: ${Msg.data.priority}`);
-			$priority.surfers = Msg.data.surfers;
-			$priority.round = Msg.data.round;
-			$priority.surfersCount = Msg.data.surfersCount;
+			$priorityStore.surfers = Msg.data.surfers;
+			$priorityStore.round = Msg.data.round;
+			$priorityStore.surfersCount = Msg.data.surfersCount;
 		});
 
 		return () => {
@@ -61,21 +61,21 @@
 		const res = await fetch(`${base}/api/priority`);
 		const data = await res.json();
 		console.log(`load priority: ${JSON.stringify(data)}`);
-		$priority.surfers = data.surfers;
-		$priority.round = data.round;
-		$priority.surfersCount = data.surfersCount;
+		$priorityStore.surfers = data.surfers;
+		$priorityStore.round = data.round;
+		$priorityStore.surfersCount = data.surfersCount;
 	}
 </script>
 
 <div class="wall">
-	{#each Array($priority.surfersCount) as _, id}
+	{#each Array($priorityStore.surfersCount) as _, id}
 		<div class="column">
-			{#if $priority.surfers[id].priority == 'P'}
-				<div class="priority" id="p">{$priority.surfers[id].priority}</div>
+			{#if $priorityStore.surfers[id].priority == 'P'}
+				<div class="priority" id="p">{$priorityStore.surfers[id].priority}</div>
 			{:else}
-				<div class="priority" id="n">{$priority.surfers[id].priority}</div>
+				<div class="priority" id="n">{$priorityStore.surfers[id].priority}</div>
 			{/if}
-			<div class="color" style="background-color: {$priority.surfers[id].color}"></div>
+			<div class="color" style="background-color: {$priorityStore.surfers[id].color}"></div>
 		</div>
 	{/each}
 </div>
diff --git a/frontend.light/src/routes/mobile/+page.svelte b/frontend.light/src/routes/mobile/+page.svelte
index bcb197a..c6b9393 100644
--- a/frontend.light/src/routes/mobile/+page.svelte
+++ b/frontend.light/src/routes/mobile/+page.svelte
@@ -2,7 +2,7 @@
 	// import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { dev } from '$app/environment';
-	import { priority } from '$lib/stores/priority.js';
+	import { priorityStore } from '$lib/stores/priority.js';
 
 	let base;
 
@@ -19,7 +19,7 @@
 	let width;
 
 	let header_height = 8;
-	$: setup_height = (100 - header_height) / $priority.surfersCount - 12 / $priority.surfersCount;
+	$: setup_height = (100 - header_height) / $priorityStore.surfersCount - 12 / $priorityStore.surfersCount;
 
 	LoadPriority();
 
@@ -44,18 +44,18 @@
 			let Msg = JSON.parse(e.data);
 			console.log(JSON.stringify(Msg));
 			console.log(`surfers: ${Msg.data.priority}`);
-			$priority.surfers = Msg.data.surfers;
-			$priority.round = Msg.data.round;
-			$priority.surfersCount = Msg.data.surfersCount;
+			$priorityStore.surfers = Msg.data.surfers;
+			$priorityStore.round = Msg.data.round;
+			$priorityStore.surfersCount = Msg.data.surfersCount;
 		};
 
 		sse.addEventListener('priority', (e) => {
 			let Msg = JSON.parse(e.data);
 			console.log(JSON.stringify(Msg));
 			console.log(`surfers: ${Msg.data.priority}`);
-			$priority.surfers = Msg.data.surfers;
-			$priority.round = Msg.data.round;
-			$priority.surfersCount = Msg.data.surfersCount;
+			$priorityStore.surfers = Msg.data.surfers;
+			$priorityStore.round = Msg.data.round;
+			$priorityStore.surfersCount = Msg.data.surfersCount;
 //			SaveSession();
 		});
 
@@ -75,9 +75,9 @@
 		const res = await fetch(`${base}/api/priority`);
 		const data = await res.json();
 		console.log(`load priority: ${JSON.stringify(data)}`);
-		$priority.surfers = data.surfers;
-		$priority.round = data.round;
-		$priority.surfersCount = data.surfersCount;
+		$priorityStore.surfers = data.surfers;
+		$priorityStore.round = data.round;
+		$priorityStore.surfersCount = data.surfersCount;
 	}
 
 	onMount(async () => {
@@ -85,8 +85,8 @@
 
 		let pri = window.sessionStorage.getItem('priority')
 		if (pri) {
-			$priority = JSON.parse(pri);
-			console.log(`loaded: ${JSON.stringify($priority)}`);
+			$priorityStore = JSON.parse(pri);
+			console.log(`loaded: ${JSON.stringify($priorityStore)}`);
 		}
 
 		return sse;
@@ -96,23 +96,23 @@
 <svelte:window bind:innerWidth={width} />
 
 <div class="header" style="--height:{header_height}vh">
-	<span class="title">{$priority.round.name}</span>
-	<span class="title">{$priority.round.category}</span>
-	<span class="heat">Heat {$priority.round.heat}</span>
+	<span class="title">{$priorityStore.round.name}</span>
+	<span class="title">{$priorityStore.round.category}</span>
+	<span class="heat">Heat {$priorityStore.round.heat}</span>
 </div>
 
 <div class="container">
-	{#each Array($priority.surfersCount) as _, id}
+	{#each Array($priorityStore.surfersCount) as _, id}
 		<div class="box">
 			<div
 				class="square"
-				style="background-color: {$priority.surfers[id].color}; --height:{setup_height}vh"
+				style="background-color: {$priorityStore.surfers[id].color}; --height:{setup_height}vh"
 			>
-				{#if $priority.surfers[id].priority != ''}
-					<span class="priority">{$priority.surfers[id].priority}</span>
+				{#if $priorityStore.surfers[id].priority != ''}
+					<span class="priority">{$priorityStore.surfers[id].priority}</span>
 				{/if}
 			</div>
-			<div class="text">{$priority.surfers[id].name}</div>
+			<div class="text">{$priorityStore.surfers[id].name}</div>
 		</div>
 	{/each}
 </div>
diff --git a/frontend.light/src/routes/priority/+page.svelte b/frontend.light/src/routes/priority/+page.svelte
index 52ae11f..0240d93 100644
--- a/frontend.light/src/routes/priority/+page.svelte
+++ b/frontend.light/src/routes/priority/+page.svelte
@@ -1,25 +1,20 @@
 <script>
 	import { onMount } from 'svelte';
-	import { priority } from '$lib/stores/priority.js';
+	import { priorityStore } from '$lib/stores/priority.js';
 	import { colors } from '$lib/stores/colors.js';
 	import { rounds } from '$lib/stores/rounds.js';
 	import { categories } from '$lib/stores/categories.js';
 	import { dev } from '$app/environment';
 
-	// if (dev) {
-	// 	console.log('Dev mode');
-	// } else {
-	// 	console.log('Not dev mode');
-	// }
-
 	window.document.body.oncontextmenu = function () {
 		return false;
 	};
 
+	// $: $priorityStore = $priorityStore;
 	$: start = false;
 
 	let footer_height = 8;
-	$: setup_height = (100 - footer_height) / $priority.surfersCount - 2.2 / $priority.surfersCount;
+	let setup_height = (100 - footer_height) / $priorityStore.surfersCount - 2.2 / $priorityStore.surfersCount;
 
 	// $: if ($priority.surfers) {
 	// 	SaveToLocalCahe();
@@ -27,16 +22,16 @@
 
 	onMount(async () => {
 		LoadFromLocalCache();
-		console.log(`loaded: ${JSON.stringify($priority)}`);
+		console.log(`loaded: ${JSON.stringify($priorityStore)}`);
 	});
 
 	function hasDuplicateColors() {
 		const colors = [];
 
-		console.log(JSON.stringify($priority.surfers));
+		console.log(JSON.stringify($priorityStore.surfers));
 
-		for (let i = 0; i < $priority.surfersCount; i++) {
-			const color = $priority.surfers[i].color;
+		for (let i = 0; i < $priorityStore.surfersCount; i++) {
+			const color = $priorityStore.surfers[i].color;
 
 			if (colors.includes(color)) {
 				console.log(`duplicate color: ${color}`);
@@ -50,8 +45,8 @@
 	}
 
 	function ResetPriority() {
-		for (let i = 0; i < $priority.surfersCount; i++) {
-			$priority.surfers[i].priority = '';
+		for (let i = 0; i < $priorityStore.surfersCount; i++) {
+			$priorityStore.surfers[i].priority = '';
 		}
 	}
 
@@ -74,37 +69,37 @@
 	}
 
 	function AddSurfer() {
-		if ($priority.surfersCount < 6) {
-			$priority.surfersCount += 1;
+		if ($priorityStore.surfersCount < 6) {
+			$priorityStore.surfersCount += 1;
 		}
 	}
 
 	function RemSurfer() {
-		if ($priority.surfersCount > 2) {
-			$priority.surfersCount -= 1;
+		if ($priorityStore.surfersCount > 2) {
+			$priorityStore.surfersCount -= 1;
 		}
 	}
 
 	function ResetLocalCache() {
 		console.log('ResetLocalCache');
 		window.sessionStorage.clear();
-		priority.reset();
-		console.log(`reset store: ${$priority}`);
-		// SendPriority();
+		priorityStore.clear();
+		console.log(`reset store: ${JSON.stringify($priorityStore)}`);
 	}
 
 	function SaveToLocalCahe() {
-		window.sessionStorage.setItem('priority', JSON.stringify($priority));
+		window.sessionStorage.setItem('priority', JSON.stringify($priorityStore));
 		window.sessionStorage.setItem('start', JSON.stringify(start));
-		console.log(`update cache: ${JSON.stringify($priority)}`);
+		console.log(`update cache: ${JSON.stringify($priorityStore)}`);
 	}
 
 	function LoadFromLocalCache() {
 		let pri = window.sessionStorage.getItem('priority')
 		if (pri) {
-			$priority = JSON.parse(pri);
+			// $priority = JSON.parse(pri);
+			$priorityStore = JSON.parse(pri);
 			start = JSON.parse(window.sessionStorage.getItem('start'));
-			console.log(`load cache: ${JSON.stringify($priority)} - ${start}`);			
+			console.log(`load cache: ${JSON.stringify($priorityStore)} - ${start}`);			
 		} else {
 			console.log(`no cache found`);
 		}
@@ -117,69 +112,69 @@
 		const res = await fetch(`/api/priority`, {
 			method: 'POST',
 			body: JSON.stringify({
-				surfers: $priority.surfers,
-				round: $priority.round,
-				surfersCount: $priority.surfersCount
+				surfers: $priorityStore.surfers,
+				round: $priorityStore.round,
+				surfersCount: $priorityStore.surfersCount
 			}),
 			headers: {
 				'Content-Type': 'application/json'
 			}
 		});
-		console.log(`SendPriority: ${JSON.stringify($priority)}`);
+		console.log(`SendPriority: ${JSON.stringify($priorityStore)}`);
 	}
 
 	async function ChangePriority(id) {
-		console.log($priority.surfers[id]);
-		if ($priority.surfers[id].priority === 'P') {
-			for (let i = 0; i < $priority.surfersCount; i++) {
+		console.log($priorityStore.surfers[id]);
+		if ($priorityStore.surfers[id].priority === 'P') {
+			for (let i = 0; i < $priorityStore.surfersCount; i++) {
 				if (i != id) {
-					let pos = parseInt($priority.surfers[i].priority) - 1;
+					let pos = parseInt($priorityStore.surfers[i].priority) - 1;
 					if (pos === 1) {
-						$priority.surfers[i].priority = 'P';
+						$priorityStore.surfers[i].priority = 'P';
 					} else {
-						$priority.surfers[i].priority = pos.toString();
+						$priorityStore.surfers[i].priority = pos.toString();
 					}
 				}
 			}
-			$priority.surfers[id].priority = $priority.surfersCount.toString();
-		} else if ($priority.surfers[id].priority === '') {
-			console.log(`priority empty; pressed: [${id}] ${$priority.surfers[id].priority}`);
-			for (let i = 0; i < $priority.surfersCount; i++) {
-				console.log(`looping(${id}): ${i} - ${$priority.surfers[i].priority}`);
+			$priorityStore.surfers[id].priority = $priorityStore.surfersCount.toString();
+		} else if ($priorityStore.surfers[id].priority === '') {
+			console.log(`priority empty; pressed: [${id}] ${$priorityStore.surfers[id].priority}`);
+			for (let i = 0; i < $priorityStore.surfersCount; i++) {
+				console.log(`looping(${id}): ${i} - ${$priorityStore.surfers[i].priority}`);
 				if (i != id) {
-					if ($priority.surfers[i].priority === '') {
-						console.log(`empty: [${i}] ${$priority.surfers[i].priority}`);
+					if ($priorityStore.surfers[i].priority === '') {
+						console.log(`empty: [${i}] ${$priorityStore.surfers[i].priority}`);
 						continue;
 					} else {
-						console.log(`not empty: [${i}] ${$priority.surfers[i].priority}`);
-						let pos = parseInt($priority.surfers[i].priority) - 1;
+						console.log(`not empty: [${i}] ${$priorityStore.surfers[i].priority}`);
+						let pos = parseInt($priorityStore.surfers[i].priority) - 1;
 						if (pos === 1) {
-							$priority.surfers[i].priority = 'P';
+							$priorityStore.surfers[i].priority = 'P';
 						} else {
-							$priority.surfers[i].priority = pos.toString();
+							$priorityStore.surfers[i].priority = pos.toString();
 						}
 					}
 				}
-				$priority.surfers[id].priority = $priority.surfersCount.toString();
+				$priorityStore.surfers[id].priority = $priorityStore.surfersCount.toString();
 			}
 		} else {
-			console.log(`pressed: [${id}] ${$priority.surfers[id].priority}`);
-			let oldpos = parseInt($priority.surfers[id].priority);
-			for (let i = 0; i < $priority.surfersCount; i++) {
+			console.log(`pressed: [${id}] ${$priorityStore.surfers[id].priority}`);
+			let oldpos = parseInt($priorityStore.surfers[id].priority);
+			for (let i = 0; i < $priorityStore.surfersCount; i++) {
 				if (i != id) {
 					console.log(
-						`pos: [${i}] ${$priority.surfers[i].priority} ${$priority.surfers[i].priority > oldpos}`
+						`pos: [${i}] ${$priorityStore.surfers[i].priority} ${$priorityStore.surfers[i].priority > oldpos}`
 					);
-					if ($priority.surfers[i].priority != 'P') {
-						let pos = parseInt($priority.surfers[i].priority);
+					if ($priorityStore.surfers[i].priority != 'P') {
+						let pos = parseInt($priorityStore.surfers[i].priority);
 						if (pos > oldpos) {
-							console.log(`newpos: ${$priority.surfers[i].priority}`);
-							$priority.surfers[i].priority = (pos - 1).toString();
+							console.log(`newpos: ${$priorityStore.surfers[i].priority}`);
+							$priorityStore.surfers[i].priority = (pos - 1).toString();
 						}
 					}
 				} else {
-					$priority.surfers[i].priority = $priority.surfersCount.toString();
-					console.log(`last: [${i}] ${$priority.surfers[i].priority}`);
+					$priorityStore.surfers[i].priority = $priorityStore.surfersCount.toString();
+					console.log(`last: [${i}] ${$priorityStore.surfers[i].priority}`);
 				}
 			}
 		}
@@ -213,9 +208,9 @@
 	</div>
 
 	<ul>
-		{#each Array($priority.surfersCount) as _, id}
+		{#each Array($priorityStore.surfersCount) as _, id}
 			<li style="--height:{setup_height}vh">
-				{#if $priority.surfers[id].priority == 'P'}
+				{#if $priorityStore.surfers[id].priority == 'P'}
 					<div
 						class="priority"
 						id="p"
@@ -224,7 +219,7 @@
 						role="button"
 						tabindex="-1"
 					>
-						{$priority.surfers[id].priority}
+						{$priorityStore.surfers[id].priority}
 					</div>
 				{:else}
 					<div
@@ -235,11 +230,11 @@
 						role="button"
 						tabindex="-1"
 					>
-						{$priority.surfers[id].priority}
+						{$priorityStore.surfers[id].priority}
 					</div>
 				{/if}
-				<div class="color" style:background-color={$priority.surfers[id].color}>
-					{$priority.surfers[id].name}
+				<div class="color" style:background-color={$priorityStore.surfers[id].color}>
+					{$priorityStore.surfers[id].name}
 				</div>
 			</li>
 		{/each}
@@ -260,7 +255,7 @@
 			<div class="col align-self-center">
 				<div class="btn-toolbar btn-group-sm" role="toolbar">
 					<button class="btn btn-primary" on:click={AddSurfer}>+</button>
-					<button class="btn btn-outline-black disabled">{$priority.surfersCount}</button>
+					<button class="btn btn-outline-black disabled">{$priorityStore.surfersCount}</button>
 					<button class="btn btn-primary" on:click={RemSurfer}>-</button>
 				</div>
 			</div>
@@ -273,7 +268,7 @@
 								class="form-select form-select-sm"
 								name="round"
 								id="round"
-								bind:value={$priority.round.name}
+								bind:value={$priorityStore.round.name}
 							>
 								{#each $rounds as round}
 									<option value={round}>{round}</option>
@@ -288,7 +283,7 @@
 								class="form-select form-select-sm"
 								name="cetegory"
 								id="category"
-								bind:value={$priority.round.category}
+								bind:value={$priorityStore.round.category}
 							>
 								{#each $categories as category}
 									<option value={category}>{category}</option>
@@ -305,7 +300,7 @@
 								min="1"
 								max="999"
 								size="3"
-								bind:value={$priority.round.heat}
+								bind:value={$priorityStore.round.heat}
 							/>
 						</div>
 					</div>
@@ -325,14 +320,14 @@
 			</tr>
 		</thead>
 		<tbody class="table-group-divider">
-			{#each Array($priority.surfersCount) as _, id}
+			{#each Array($priorityStore.surfersCount) as _, id}
 				<tr class="table-light">
 					<td
 						><input
 							class="input"
 							type="text"
 							size="30"
-							bind:value={$priority.surfers[id].name}
+							bind:value={$priorityStore.surfers[id].name}
 						/></td
 					>
 					<td>
@@ -340,8 +335,8 @@
 							<select
 								name="color{id}"
 								{id}
-								bind:value={$priority.surfers[id].color}
-								style="background-color: {$priority.surfers[id].color};"
+								bind:value={$priorityStore.surfers[id].color}
+								style="background-color: {$priorityStore.surfers[id].color};"
 							>
 								{#each $colors as color}
 									<option value={color} style="background-color: {color}">{color}</option>