reset store solved

This commit is contained in:
Miki 2024-01-17 12:43:34 +01:00
parent 8fbf2b734f
commit 0920ca3fbd
5 changed files with 142 additions and 139 deletions

View file

@ -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,
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();
export const priorityStore = createPriority();

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>