priority setup - OK
todo: add SSE
This commit is contained in:
parent
b50f1f061e
commit
84ef5dd5d6
2 changed files with 238 additions and 56 deletions
29
frontend/src/lib/stores/surfers.js
Normal file
29
frontend/src/lib/stores/surfers.js
Normal file
|
|
@ -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)
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue