From 84ef5dd5d600ac9674d451573dbb5ee5625cb9bd Mon Sep 17 00:00:00 2001
From: Miki <mikif70@gmail.com>
Date: Wed, 10 Jan 2024 11:52:56 +0100
Subject: [PATCH] priority setup - OK todo: add SSE
---
frontend/src/lib/stores/surfers.js | 29 ++
frontend/src/routes/light/setup/+page.svelte | 265 +++++++++++++++----
2 files changed, 238 insertions(+), 56 deletions(-)
create mode 100644 frontend/src/lib/stores/surfers.js
diff --git a/frontend/src/lib/stores/surfers.js b/frontend/src/lib/stores/surfers.js
new file mode 100644
index 0000000..51da363
--- /dev/null
+++ b/frontend/src/lib/stores/surfers.js
@@ -0,0 +1,29 @@
+import { writable } from 'svelte/store';
+
+function createSurfers() {
+ const { subscribe, set, update } = writable([
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ ])
+ return {
+ subscribe,
+ set,
+ update,
+ reset: () => set([
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ { color: 'gray', priority: '' },
+ ]),
+ }
+}
+
+export const surfers = createSurfers()
+
+export const surfersCount = writable(6)
\ No newline at end of file
diff --git a/frontend/src/routes/light/setup/+page.svelte b/frontend/src/routes/light/setup/+page.svelte
index 60219bd..134a283 100644
--- a/frontend/src/routes/light/setup/+page.svelte
+++ b/frontend/src/routes/light/setup/+page.svelte
@@ -1,93 +1,206 @@
<script>
import { onMount } from 'svelte';
+ import { surfers, surfersCount } from '$lib/stores/surfers.js';
+ import { colors } from '$lib/stores/colors.js';
import Button from '$lib/button.svelte';
- import Color from '$lib/color.svelte';
- let saved = false;
$: start = false;
-
- $: surfer = [
- { color: 'gray', priority: '2' },
- { color: 'gray', priority: 'P' },
- { color: 'gray', priority: '4' },
- { color: 'gray', priority: '3' },
- { color: 'gray', priority: '6' },
- { color: 'gray', priority: '5' },
- ];
- $: surfers = 6;
-
- $: 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)}`);
- }
+ // $: surfers_tot = 6;
let footer_height = 8;
- $: setup_height = ((100 - footer_height) / surfers) - (2.2 / surfers);
+ $: setup_height = ((100 - footer_height) / $surfersCount) - (2.2 / $surfersCount);
+
+ $: if (start && $surfers) {
+ window.sessionStorage.setItem('priority', JSON.stringify($surfers));
+ window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount));
+ window.sessionStorage.setItem('status', JSON.stringify(start));
+ console.log(`saved: ${JSON.stringify($surfers)}`);
+ }
onMount(async () => {
let ses = window.sessionStorage.getItem('priority');
if (ses) {
- surfer = JSON.parse(ses);
- surfers = JSON.parse(window.sessionStorage.getItem('surfers'));
+ $surfers = JSON.parse(ses);
+ $surfersCount = JSON.parse(window.sessionStorage.getItem('surfers'));
start = JSON.parse(window.sessionStorage.getItem('status'));
- console.log(`loaded: ${JSON.stringify(surfer)}`);
+ console.log(`loaded: ${JSON.stringify($surfers)}`);
}
- saved = true;
});
+ function hasDuplicateColors() {
+ const colors = [];
+
+ console.log(JSON.stringify($surfers));
+
+ for (let i = 0; i < $surfersCount; i++) {
+ const color = $surfers[i].color;
+
+ if (colors.includes(color)) {
+ console.log(`duplicate color: ${color}`);
+ return true;
+ }
+
+ colors.push(color);
+ }
+
+ return false;
+ }
+
+ function ResetPriority() {
+ for (let i = 0; i < $surfersCount; i++) {
+ $surfers[i].priority = '';
+ }
+ }
+
+ function StartHeat() {
+ if (hasDuplicateColors()) {
+ alert('Duplicate colors');
+ return;
+ }
+ ResetPriority();
+ start = true;
+ }
+
+ function StopHeat() {
+ window.sessionStorage.clear();
+ start = false;
+ }
+
+ function AddSurfer() {
+ if ($surfersCount < 6) {
+ $surfersCount += 1;
+ }
+ }
+
+ function RemSurfer() {
+ if ($surfersCount > 2) {
+ $surfersCount -= 1;
+ }
+ }
+
+ function ResetSurfer() {
+ window.sessionStorage.clear();
+ location.reload();
+ }
+
+ async function ChangePriority(id) {
+ // let max = $priority.surfers.length;
+ console.log($surfers[id]);
+ if ($surfers[id].priority === 'P') {
+ for (let i=0; i<$surfersCount; i++) {
+ if (i != id) {
+ let pos = parseInt($surfers[i].priority) - 1;
+ if (pos === 1) {
+ $surfers[i].priority = 'P';
+ } else {
+ $surfers[i].priority = pos.toString();
+ }
+ }
+ }
+ $surfers[id].priority = $surfersCount.toString();
+ } else if ($surfers[id].priority === '') {
+ console.log(`priority empty; pressed: [${id}] ${$surfers[id].priority}`);
+ for (let i=0; i<$surfersCount; i++) {
+ console.log(`looping(${id}): ${i} - ${$surfers[i].priority}`);
+ if (i != id) {
+ if ($surfers[i].priority === '') {
+ console.log(`empty: [${i}] ${$surfers[i].priority}`);
+ continue;
+ } else {
+ console.log(`not empty: [${i}] ${$surfers[i].priority}`);
+ let pos = parseInt($surfers[i].priority) - 1;
+ if (pos === 1) {
+ $surfers[i].priority = 'P';
+ } else {
+ $surfers[i].priority = pos.toString();
+ }
+ }
+ }
+ $surfers[id].priority = $surfersCount.toString();
+ }
+ } else {
+ console.log(`pressed: [${id}] ${$surfers[id].priority}`);
+ let oldpos = parseInt($surfers[id].priority);
+ for (let i=0; i<$surfersCount; i++) {
+ if (i != id) {
+ console.log(`pos: [${i}] ${$surfers[i].priority} ${$surfers[i].priority > oldpos}`);
+ if ($surfers[i].priority != 'P') {
+ let pos = parseInt($surfers[i].priority);
+ if (pos > oldpos) {
+ console.log(`newpos: ${$surfers[i].priority}`);
+ $surfers[i].priority = (pos - 1).toString();
+ }
+ }
+ } else {
+ $surfers[i].priority = $surfersCount.toString();
+ console.log(`last: [${i}] ${$surfers[i].priority}`);
+ }
+ }
+ }
+
+ // const res = await fetch(`/api/priority`, {
+ // method: 'POST',
+ // body: JSON.stringify({
+ // priority: $priority.surfers.map((obj) => obj.priority),
+ // mode: 'priority'
+ // }),
+ // headers: {
+ // 'Content-Type': 'application/json'
+ // }
+ // });
+ // console.log(
+ // JSON.stringify({
+ // priority: $priority.surfers.map((obj) => obj.priority),
+ // mode: 'priority'
+ // })
+ // );
+ // console.log(`retval: ${JSON.stringify(res)}`);
+ }
+
</script>
{#if start}
<ul>
- {#each Array(surfers) as _, id}
+ {#each Array($surfersCount) 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>
+ {#if $surfers[id].priority == 'P'}
+ <div class="priority" id="p" on:click={() => ChangePriority(id)}>{$surfers[id].priority}</div>
{:else}
- <div class="priority" id="n">{surfer[id].priority}</div>
+ <div class="priority" id="n" on:click={() => ChangePriority(id)}>{$surfers[id].priority}</div>
{/if}
- <div class="color" style:background-color={surfer[id].color}>
+ <div class="color" style:background-color={$surfers[id].color}>
</div>
</li>
{/each}
</ul>
<div class="footer" style="--height:{footer_height}vh">
- <Button label="STOP" handleClick={() => {start = false;}} />
+ <button class="button" on:click={StopHeat}>STOP</button>
</div>
{:else}
<ul>
- {#each Array(surfers) as _, id}
+ {#each Array($surfersCount) 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>
- <!-- <span>{footer_height} - {setup_height}</span> -->
- {:else}
- <div class="priority" id="n">{surfer[id].priority}</div>
- {/if}
- <div class="color" style:background-color={surfer[id].color}></div>
+ <div class="priority" id="color">
+ <select name="color{id}" id="{id}" bind:value={$surfers[id].color} style="background-color: {$surfers[id].color};">
+ {#each $colors as color}
+ <option value="{color}" style="background-color: {color}"></option>
+ {/each}
+ </select>
+ </div>
+ <div class="color" style:background-color={$surfers[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 < 6) surfers += 1;}} />
- <Button label={surfers} />
- <Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
- {#each Array(surfers) as _, id}
- <span style:padding-left="1vmin"></span>
- <Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
- {/each}
- <span style:padding-left="1vmin"></span>
- <Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
- <span style:padding-left="1vmin"></span>
- <Button label="START" handleClick={() => {start = true;}} />
+ <div class="control">
+ <button class="button" on:click={AddSurfer}>+</button>
+ <button class="display">{$surfersCount}</button>
+ <button class="button" on:click={RemSurfer}>-</button>
+ </div>
+ <div class="command">
+ <button class="button" on:click={ResetSurfer}>Reset</button>
+ <button class="button" on:click={StartHeat}>START</button>
+ </div>
</div>
{/if}
@@ -142,16 +255,56 @@
height: 100%;
}
+ .priority#color {
+ background-color: lightgrey;
+ margin: 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .priority#color select {
+ width: 100%;
+ /* margin-top: 40%; */
+ font-size: 6vmin;
+ }
+
.color {
width: 100vw;
}
.footer {
- display: fixed;
+ display: inline-flex;
bottom: 0;
background-color: darkgrey;
/* border: 2px solid black; */
width: 100%;
height: var(--height);
+ justify-content: center;
+ align-items: center;
+ }
+
+ .control {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ .command {
+ margin-left: auto;
+ margin-right: 0;
+ }
+
+ .display {
+ margin-left: 2vmin;
+ margin-right: 2vmin;
+ font-size: 2.5vmin;
+ }
+
+ .button {
+ margin-left: 2vmin;
+ margin-right: 2vmin;
+ border-radius: 4px;
+ border-style: inset;
+ font-size: 2.5vmin;
}
</style>