+start & stop

This commit is contained in:
Miki 2024-01-09 15:03:52 +01:00
parent 9324d2a367
commit f4d8320817

View file

@ -4,7 +4,7 @@
import Color from '$lib/color.svelte';
let saved = false;
let start = false;
$: start = false;
$: surfer = [
{ color: 'gray', priority: '2' },
@ -18,6 +18,7 @@
$: 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)}`);
}
@ -29,6 +30,7 @@
if (ses) {
surfer = JSON.parse(ses);
surfers = JSON.parse(window.sessionStorage.getItem('surfers'));
start = JSON.parse(window.sessionStorage.getItem('status'));
console.log(`loaded: ${JSON.stringify(surfer)}`);
}
saved = true;
@ -36,38 +38,55 @@
</script>
<ul>
{#each Array(surfers) 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>
{:else}
<div class="priority" id="n">{surfer[id].priority}</div>
{/if}
<div class="color" style:background-color={surfer[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 < 5) surfers += 1;}} />
<span class="surfers">{surfers}</span>
<Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
{#each Array(surfers) as _, id}
{#if start}
<ul>
{#each Array(surfers) 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>
{:else}
<div class="priority" id="n">{surfer[id].priority}</div>
{/if}
<div class="color" style:background-color={surfer[id].color}></div>
</li>
{/each}
</ul>
<div class="footer" style="--height:{footer_height}vh">
<Button label="STOP" handleClick={() => {start = false;}} />
</div>
{:else}
<ul>
{#each Array(surfers) 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>
{:else}
<div class="priority" id="n">{surfer[id].priority}</div>
{/if}
<div class="color" style:background-color={surfer[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 < 5) surfers += 1;}} />
<span class="surfers">{surfers}</span>
<Button label="-" handleClick={() => {if (surfers > 2) surfers -= 1;}} />
{#each Array(surfers) as _, id}
<span style:padding-left="16px"></span>
<Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
{/each}
<span style:padding-left="16px"></span>
<Color id="color{id}" label="Color-{id+1}" bind:value={surfer[id].color} />
{/each}
<span style:padding-left="16px"></span>
<Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
<span style:padding-left="16px"></span>
<Button label="START" handleClick={() => {start = true;}} />
</div>
<Button label="Reset" handleClick={() => {saved = false; window.sessionStorage.clear(); location.reload();}} />
<span style:padding-left="16px"></span>
<Button label="START" handleClick={() => {start = true;}} />
</div>
{/if}
<style>
:global(body) {