streaming/Priority
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

=Select options

Browse source 
=priority layout
This commit is contained in:
Miki 2024-01-02 11:58:43 +00:00
parent 2bb01aa45a
commit aa1a4a6b4d
3 changed files with 67 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app.html
View file

@ -1,12 +1,15 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: grid">%sveltekit.body%</div>
</body> </body>
</html>
</html>

9
frontend/src/lib/select.svelte
View file

@ -5,6 +5,7 @@
export let value; export let value;
export let handleSelect; export let handleSelect;
export let element; export let element;
export let option_label;
console.log(`options: ${JSON.stringify(options)}`); console.log(`options: ${JSON.stringify(options)}`);
</script> </script>
@ -13,7 +14,13 @@
<select name={id} {id} bind:value on:change={handleSelect}> <select name={id} {id} bind:value on:change={handleSelect}>
{#each options as option} {#each options as option}
{#if element} {#if element}
<option value={option[element]}>{option[element]}</option> {#if option_label}
<option value={option[element]}>{option[option_label]}</option>
{:else}
<option value={option[element]}>{option[element]}</option>
{/if}
{:else if option_label}
<option value={option}>{option[option_label]}</option>
{:else} {:else}
<option value={option}>{option}</option> <option value={option}>{option}</option>
{/if} {/if}

101
frontend/src/routes/priority/+page.svelte
View file

@ -3,6 +3,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import { priority } from '$lib/stores/priority.js'; import { priority } from '$lib/stores/priority.js';
import Select from '$lib/select.svelte';
import Button from '../../lib/button.svelte';
if (dev) { if (dev) {
console.log('Dev mode'); console.log('Dev mode');
@ -18,8 +20,8 @@
} }
let width; let width;
let heat_number = 0; let heat;
let heats = []; $: heats = [];
$: surfers = []; $: surfers = [];
$: min = 0; $: min = 0;
@ -27,8 +29,16 @@
$: end = false; $: end = false;
$: start = false; $: start = false;
// let end = false; function resetHeat() {
// let start = false; heat = {
name: '',
number: 0,
round: '',
category: '',
timer: 0,
surfers: []
};
}
onMount(async () => { onMount(async () => {
let ses = window.sessionStorage.getItem('priority'); let ses = window.sessionStorage.getItem('priority');
@ -47,10 +57,13 @@
} }
async function loadHeats() { async function loadHeats() {
resetHeat();
const res = await fetch(`/api/loadheats`); const res = await fetch(`/api/loadheats`);
const data = await res.json(); const data = await res.json();
for (let i in data) { for (let i in data) {
heats[i] = data[i]; heats[i] = data[i];
heats[i].name = `${data[i].round} ${data[i].number} ${data[i].category}`;
heats = heats;
console.log(`${i} retval: ${JSON.stringify(data[i])}`); console.log(`${i} retval: ${JSON.stringify(data[i])}`);
} }
} }
@ -116,15 +129,10 @@
end = false; end = false;
} }
function setHeat(id) { function setHeat(h) {
console.log(`setHeat: ${id}`); console.log(`setHeat: ${h}`);
if (id === '99') { min = heat.timer;
min = 0; surfers = heat.surfers;
surfers = [];
return;
}
min = heats[id].timer;
surfers = heats[id].surfers;
$priority.surfers = surfers; $priority.surfers = surfers;
$priority.min = min; $priority.min = min;
} }
@ -207,23 +215,41 @@
<div class="header"> <div class="header">
<!-- <button class="button" on:click={() => loadHeats()} disabled={start}>Load</button> --> <!-- <button class="button" on:click={() => loadHeats()} disabled={start}>Load</button> -->
<select name="heats" id="heats" bind:value={heat_number} on:change={() => setHeat(heat_number)}> <Select
<option value="99">Select Heat</option> options={heats}
{#each heats as heat, id} option_label="name"
<option value={id}>{heat.name} {heat.number} {heat.category}</option> bind:value={heat}
{/each} handleSelect={() => setHeat(heat)}
</select> label="Heats"
id="heats"
/>
{#if !end} {#if !end}
<div class="timer">{pad2(min)}:{pad2(sec)}</div> <div class="timer">{pad2(min)}:{pad2(sec)}</div>
{:else} {:else}
<div class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</div> <div class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</div>
{/if} {/if}
<button class="button" on:click={() => startHeat()} disabled={start}>Start</button> {#if start}
<Button handleClick={() => startHeat()} label="STOP" />
{:else}
<Button handleClick={() => startHeat()} label="START" />
{/if}
<!-- <button class="button" on:click={() => startHeat()} disabled={start}>Start</button> -->
</div> </div>
<div class="container"> <div class="container">
{#each surfers as surfer, id} {#each surfers || [] as surfer, id}
<div class="box"> <div class="box">
{#if surfer.priority != ''}
{#if surfer.priority === 'P'}
{#if surfer.color === 'white'}
<span class="priority_white">{surfer.priority}</span>
{:else}
<span class="priority">{surfer.priority}</span>
{/if}
{:else}
<span class="priority_small">{surfer.priority}</span>
{/if}
{/if}
<div <div
class="square" class="square"
{id} {id}
@ -236,19 +262,7 @@
on:keypress={console.log('keypress')} on:keypress={console.log('keypress')}
role="button" role="button"
tabindex={id} tabindex={id}
> ></div>
{#if surfer.priority != ''}
{#if surfer.priority === 'P'}
{#if surfer.color === 'white'}
<span class="priority_white">{surfer.priority}</span>
{:else}
<span class="priority">{surfer.priority}</span>
{/if}
{:else}
<span class="priority_small">{surfer.priority}</span>
{/if}
{/if}
</div>
<div class="score">{surfer.score}</div> <div class="score">{surfer.score}</div>
</div> </div>
{/each} {/each}
@ -263,7 +277,7 @@
.header { .header {
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: repeat(4, 1fr);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* height: 10vh; */ /* height: 10vh; */
@ -282,6 +296,7 @@
} }
.header .timer { .header .timer {
grid-column: 3 / 4;
font-size: 13vh; font-size: 13vh;
padding-left: 10px; padding-left: 10px;
padding-right: 20px; padding-right: 20px;
@ -291,13 +306,6 @@
text-align: center; text-align: center;
} }
.header .button {
height: 40%;
align-items: center;
background-color: yellow;
border-radius: 10%;
}
.container { .container {
height: 85vh; height: 85vh;
background-color: var(--backColor); background-color: var(--backColor);
@ -310,13 +318,15 @@
.box { .box {
width: 100%; width: 100%;
display: flex; display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: center; align-items: center;
padding: 1px; padding: 1px;
margin-bottom: 1px; margin-bottom: 1px;
} }
.priority { .priority {
grid-column: 1/1;
width: 15%; width: 15%;
height: 100%; height: 100%;
border-radius: 20%; border-radius: 20%;
@ -325,7 +335,6 @@
margin-right: auto; margin-right: auto;
background-color: white; background-color: white;
color: black; color: black;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
@ -340,7 +349,6 @@
margin-right: auto; margin-right: auto;
background-color: black; background-color: black;
color: white; color: white;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
@ -357,18 +365,17 @@
margin-left: 30px; margin-left: 30px;
background-color: #ccc; background-color: #ccc;
color: black; color: black;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: bold; font-weight: bold;
} }
.square { .square {
grid-column: 2/6;
width: 100%; width: 100%;
height: 16vh; height: 16vh;
border-radius: 5px; border-radius: 5px;
margin-right: 15px; margin-right: 15px;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-bottom: 2px; padding-bottom: 2px;