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>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
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 Button from '$lib/button.svelte';
|
||||||
import Color from '$lib/color.svelte';
|
|
||||||
|
|
||||||
let saved = false;
|
|
||||||
$: start = false;
|
$: start = false;
|
||||||
|
// $: surfers_tot = 6;
|
||||||
$: 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)}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
let footer_height = 8;
|
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 () => {
|
onMount(async () => {
|
||||||
let ses = window.sessionStorage.getItem('priority');
|
let ses = window.sessionStorage.getItem('priority');
|
||||||
if (ses) {
|
if (ses) {
|
||||||
surfer = JSON.parse(ses);
|
$surfers = JSON.parse(ses);
|
||||||
surfers = JSON.parse(window.sessionStorage.getItem('surfers'));
|
$surfersCount = JSON.parse(window.sessionStorage.getItem('surfers'));
|
||||||
start = JSON.parse(window.sessionStorage.getItem('status'));
|
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>
|
</script>
|
||||||
|
|
||||||
{#if start}
|
{#if start}
|
||||||
<ul>
|
<ul>
|
||||||
{#each Array(surfers) as _, id}
|
{#each Array($surfersCount) as _, id}
|
||||||
<li style="--height:{setup_height}vh">
|
<li style="--height:{setup_height}vh">
|
||||||
{#if surfer[id].priority == 'P'}
|
{#if $surfers[id].priority == 'P'}
|
||||||
<div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
|
<div class="priority" id="p" on:click={() => ChangePriority(id)}>{$surfers[id].priority}</div>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="priority" id="n">{surfer[id].priority}</div>
|
<div class="priority" id="n" on:click={() => ChangePriority(id)}>{$surfers[id].priority}</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="color" style:background-color={surfer[id].color}>
|
<div class="color" style:background-color={$surfers[id].color}>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
<div class="footer" style="--height:{footer_height}vh">
|
<div class="footer" style="--height:{footer_height}vh">
|
||||||
<Button label="STOP" handleClick={() => {start = false;}} />
|
<button class="button" on:click={StopHeat}>STOP</button>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<ul>
|
<ul>
|
||||||
{#each Array(surfers) as _, id}
|
{#each Array($surfersCount) as _, id}
|
||||||
<li style="--height:{setup_height}vh">
|
<li style="--height:{setup_height}vh">
|
||||||
{#if surfer[id].priority == 'P'}
|
<div class="priority" id="color">
|
||||||
<div class="priority" id="p"><a href="/">{surfer[id].priority}</a></div>
|
<select name="color{id}" id="{id}" bind:value={$surfers[id].color} style="background-color: {$surfers[id].color};">
|
||||||
<!-- <span>{footer_height} - {setup_height}</span> -->
|
{#each $colors as color}
|
||||||
{:else}
|
<option value="{color}" style="background-color: {color}"></option>
|
||||||
<div class="priority" id="n">{surfer[id].priority}</div>
|
{/each}
|
||||||
{/if}
|
</select>
|
||||||
<div class="color" style:background-color={surfer[id].color}></div>
|
</div>
|
||||||
|
<div class="color" style:background-color={$surfers[id].color}></div>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
<div class="footer" style="--height:{footer_height}vh">
|
<div class="footer" style="--height:{footer_height}vh">
|
||||||
<!-- <span>{footer_height} - {setup_height}</span>
|
<div class="control">
|
||||||
<span style:padding-left="20px"></span>
|
<button class="button" on:click={AddSurfer}>+</button>
|
||||||
{#each Array(surfers) as _, id}
|
<button class="display">{$surfersCount}</button>
|
||||||
<span style:padding-left="20px"></span><span>{surfer[id].color}</span>
|
<button class="button" on:click={RemSurfer}>-</button>
|
||||||
{/each}
|
</div>
|
||||||
<br> -->
|
<div class="command">
|
||||||
<Button label="+" handleClick={() => {if (surfers < 6) surfers += 1;}} />
|
<button class="button" on:click={ResetSurfer}>Reset</button>
|
||||||
<Button label={surfers} />
|
<button class="button" on:click={StartHeat}>START</button>
|
||||||
<Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
|
</div>
|
||||||
{#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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
@ -142,16 +255,56 @@
|
||||||
height: 100%;
|
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 {
|
.color {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
display: fixed;
|
display: inline-flex;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: darkgrey;
|
background-color: darkgrey;
|
||||||
/* border: 2px solid black; */
|
/* border: 2px solid black; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: var(--height);
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue