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>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
<div style="display: grid">%sveltekit.body%</div>
</body>
</html>
</html>

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

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

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

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