409 lines
10 KiB
Svelte
409 lines
10 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { priority } 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;
|
|
};
|
|
|
|
$: start = false;
|
|
|
|
let footer_height = 8;
|
|
$: setup_height = (100 - footer_height) / $priority.surfersCount - 2.2 / $priority.surfersCount;
|
|
|
|
$: if ($priority.surfers) {
|
|
SaveToLocalCahe();
|
|
}
|
|
|
|
onMount(async () => {
|
|
let status = window.sessionStorage.getItem('status');
|
|
if (status) {
|
|
LoadFromLocalCache();
|
|
// console.log(`loaded: ${JSON.stringify($priority.surfers)}`);
|
|
}
|
|
});
|
|
|
|
function hasDuplicateColors() {
|
|
const colors = [];
|
|
|
|
console.log(JSON.stringify($priority.surfers));
|
|
|
|
for (let i = 0; i < $priority.surfersCount; i++) {
|
|
const color = $priority.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 < $priority.surfersCount; i++) {
|
|
$priority.surfers[i].priority = '';
|
|
}
|
|
}
|
|
|
|
function StartHeat() {
|
|
if (hasDuplicateColors()) {
|
|
alert('Duplicate colors');
|
|
return;
|
|
}
|
|
ResetPriority();
|
|
start = true;
|
|
SendPriority();
|
|
}
|
|
|
|
function StopHeat() {
|
|
ResetLocalCache();
|
|
start = false;
|
|
ResetPriority();
|
|
SendPriority();
|
|
}
|
|
|
|
function AddSurfer() {
|
|
if ($priority.surfersCount < 6) {
|
|
$priority.surfersCount += 1;
|
|
}
|
|
}
|
|
|
|
function RemSurfer() {
|
|
if ($priority.surfersCount > 2) {
|
|
$priority.surfersCount -= 1;
|
|
}
|
|
}
|
|
|
|
function ResetLocalCache() {
|
|
console.log('ResetLocalCache');
|
|
window.sessionStorage.clear();
|
|
window.sessionStorage.setItem('status', false);
|
|
console.log(`reset cache: ${JSON.parse(window.sessionStorage.getItem('priority'))}`);
|
|
priority.reset();
|
|
SendPriority();
|
|
}
|
|
|
|
function SaveToLocalCahe() {
|
|
window.sessionStorage.setItem('status', true);
|
|
window.sessionStorage.setItem('priority', JSON.stringify($priority));
|
|
window.sessionStorage.setItem('start', JSON.stringify(start));
|
|
console.log(`update cache: ${JSON.stringify($priority)}`);
|
|
}
|
|
|
|
function LoadFromLocalCache() {
|
|
$priority = JSON.parse(window.sessionStorage.getItem('priority'));
|
|
start = JSON.parse(window.sessionStorage.getItem('start'));
|
|
console.log(`load cache: ${JSON.stringify($priority)}`);
|
|
}
|
|
|
|
async function ChangePriority(id) {
|
|
console.log($priority.surfers[id]);
|
|
if ($priority.surfers[id].priority === 'P') {
|
|
for (let i = 0; i < $priority.surfersCount; i++) {
|
|
if (i != id) {
|
|
let pos = parseInt($priority.surfers[i].priority) - 1;
|
|
if (pos === 1) {
|
|
$priority.surfers[i].priority = 'P';
|
|
} else {
|
|
$priority.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}`);
|
|
if (i != id) {
|
|
if ($priority.surfers[i].priority === '') {
|
|
console.log(`empty: [${i}] ${$priority.surfers[i].priority}`);
|
|
continue;
|
|
} else {
|
|
console.log(`not empty: [${i}] ${$priority.surfers[i].priority}`);
|
|
let pos = parseInt($priority.surfers[i].priority) - 1;
|
|
if (pos === 1) {
|
|
$priority.surfers[i].priority = 'P';
|
|
} else {
|
|
$priority.surfers[i].priority = pos.toString();
|
|
}
|
|
}
|
|
}
|
|
$priority.surfers[id].priority = $priority.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++) {
|
|
if (i != id) {
|
|
console.log(
|
|
`pos: [${i}] ${$priority.surfers[i].priority} ${$priority.surfers[i].priority > oldpos}`
|
|
);
|
|
if ($priority.surfers[i].priority != 'P') {
|
|
let pos = parseInt($priority.surfers[i].priority);
|
|
if (pos > oldpos) {
|
|
console.log(`newpos: ${$priority.surfers[i].priority}`);
|
|
$priority.surfers[i].priority = (pos - 1).toString();
|
|
}
|
|
}
|
|
} else {
|
|
$priority.surfers[i].priority = $priority.surfersCount.toString();
|
|
console.log(`last: [${i}] ${$priority.surfers[i].priority}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
SendPriority();
|
|
}
|
|
|
|
async function SendPriority() {
|
|
if (dev) {
|
|
return;
|
|
}
|
|
const res = await fetch(`/api/priority`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
piority: $priority
|
|
}),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
console.log(`SendPriority: ${JSON.stringify($priority)}`);
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
</svelte:head>
|
|
|
|
{#if start}
|
|
<div class="container-fluid text-center mb-1">
|
|
<div class="row bg-secondary p-1">
|
|
<div class="col align-items-center">
|
|
<button class="button" on:click={StopHeat}>STOP</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ul>
|
|
{#each Array($priority.surfersCount) as _, id}
|
|
<li style="--height:{setup_height}vh">
|
|
{#if $priority.surfers[id].priority == 'P'}
|
|
<div
|
|
class="priority"
|
|
id="p"
|
|
on:click={() => ChangePriority(id)}
|
|
on:keypress={() => ChangePriority(id)}
|
|
role="button"
|
|
tabindex="-1"
|
|
>
|
|
{$priority.surfers[id].priority}
|
|
</div>
|
|
{:else}
|
|
<div
|
|
class="priority"
|
|
id="n"
|
|
on:click={() => ChangePriority(id)}
|
|
on:keypress={() => ChangePriority(id)}
|
|
role="button"
|
|
tabindex="-1"
|
|
>
|
|
{$priority.surfers[id].priority}
|
|
</div>
|
|
{/if}
|
|
<div class="color" style:background-color={$priority.surfers[id].color}>
|
|
{$priority.surfers[id].name}
|
|
</div>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<div class="container-fluid text-center mb-1">
|
|
<div class="row bg-secondary p-1">
|
|
<div class="col align-items-center">
|
|
<button class="btn btn-success btn-sm" on:click={StartHeat}>START</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="container-fluid text-center"></div> -->
|
|
|
|
<div class="container-fluid text-center">
|
|
<div class="row row-cols-auto justify-content-between align-content-center bg-light mb-1">
|
|
<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-primary" on:click={RemSurfer}>-</button>
|
|
</div>
|
|
</div>
|
|
<div class="col align-self-center mt-1">
|
|
<div class="row row-cols-auto justify-content- align-content-center bg-light mb-1">
|
|
<div class="col align-self-center">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-info">Round</span>
|
|
<select
|
|
class="form-select form-select-sm"
|
|
name="round"
|
|
id="round"
|
|
bind:value={$priority.round.name}
|
|
>
|
|
{#each $rounds as round}
|
|
<option value={round}>{round}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col align-self-center">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-info">Category</span>
|
|
<select
|
|
class="form-select form-select-sm"
|
|
name="cetegory"
|
|
id="category"
|
|
bind:value={$priority.round.category}
|
|
>
|
|
{#each $categories as category}
|
|
<option value={category}>{category}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col align-self-center">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-info">Heat</span>
|
|
<input
|
|
type="number"
|
|
class="form-control"
|
|
min="1"
|
|
max="999"
|
|
size="3"
|
|
bind:value={$priority.round.heat}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col align-self-center">
|
|
<button class="btn btn-danger btn-sm" on:click={ResetLocalCache}>Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table table-striped table-borderless table-sm">
|
|
<thead>
|
|
<tr class="table-primary">
|
|
<td> Name </td>
|
|
<td> Color </td>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-group-divider">
|
|
{#each Array($priority.surfersCount) as _, id}
|
|
<tr class="table-light">
|
|
<td
|
|
><input
|
|
class="input"
|
|
type="text"
|
|
size="30"
|
|
bind:value={$priority.surfers[id].name}
|
|
/></td
|
|
>
|
|
<td>
|
|
<div class="select">
|
|
<select
|
|
name="color{id}"
|
|
{id}
|
|
bind:value={$priority.surfers[id].color}
|
|
style="background-color: {$priority.surfers[id].color};"
|
|
>
|
|
{#each $colors as color}
|
|
<option value={color} style="background-color: {color}">{color}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{:else}
|
|
<tr>
|
|
<th />
|
|
<td />
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
{/if}
|
|
|
|
<style>
|
|
:global(body) {
|
|
/* overflow-y: hidden; */
|
|
overflow-x: hidden;
|
|
margin: 0.2vmin;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 0.2vh;
|
|
margin-bottom: 0.2vh;
|
|
overflow: hidden;
|
|
height: var(--height);
|
|
}
|
|
|
|
.priority {
|
|
text-align: center;
|
|
align-self: center;
|
|
min-height: var(--height);
|
|
min-width: var(--height);
|
|
margin-right: 0.2vw;
|
|
background-color: gray;
|
|
}
|
|
|
|
.priority#p {
|
|
font-size: 16vmin;
|
|
background-color: lightgray;
|
|
height: 100%;
|
|
}
|
|
|
|
.priority#n {
|
|
font-size: 14vmin;
|
|
height: 100%;
|
|
}
|
|
|
|
.color {
|
|
display: flex;
|
|
width: 100vw;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
</style>
|