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

+mobile

Browse source
This commit is contained in:
Miki 2024-01-12 15:27:29 +01:00
parent aa59f81115
commit 3480ba9d8b
9 changed files with 262 additions and 209 deletions
Download patch file Download diff file Expand all files Collapse all files

12
frontend.light/src/lib/stores/categories.js Normal file
View file

@ -0,0 +1,12 @@
import { readable } from "svelte/store"
export const categories = readable([
"Under 12 Women",
"Under 12 Men",
"Under 14 Women",
"Under 14 Men",
"Under 16 Women",
"Under 16 Men",
"Under 18 Women",
"Under 18 Men",
]);

13
frontend.light/src/lib/stores/rounds.js Normal file
View file

@ -0,0 +1,13 @@
import {readable} from "svelte/store"
export const rounds = readable([
"Qualifying",
"Opening",
"Elimination",
"Round of 48",
"Round of 32",
"Round of 16",
"Quarterfinal",
"Semifinal",
"Final",
]);

8
frontend.light/src/lib/stores/surfers.js
View file

@ -26,4 +26,10 @@ function createSurfers() {
export const surfers = createSurfers()
export const surfersCount = writable(4)
export const surfersCount = writable(4)
export const round = writable({
name: '',
heat: 0,
category: ''
});

163
frontend.light/src/routes/display-m/+page.svelte
View file

@ -1,163 +0,0 @@
<script>
// import { page } from '$app/stores';
import { onMount } from 'svelte';
import { dev } from '$app/environment';
import { surfers, surfersCount } from '$lib/stores/surfers.js';
if (dev) {
console.log('Dev mode');
} else {
console.log('Not dev mode');
}
const events = ['priority'];
window.document.body.oncontextmenu = function () {
return false;
};
onMount(async () => {
if (!dev) {
const sse = StartSSE();
LoadPriority();
return sse;
}
});
function StartSSE() {
let url = '/api/sse?';
for (let e in events) {
url += `event=${events[e]}&`;
}
console.log(`sse url: ${url}`);
const sse = new EventSource(url);
console.log(`subscribe: ${sse}`);
sse.onopen = () => {
console.log(`sse open ${Date.now()}`);
};
sse.addEventListener('priority', (e) => {
let Msg = JSON.parse(e.data);
console.log(JSON.stringify(Msg));
console.log(`surfers: ${Msg.data.surfers}`);
$surfers = Msg.data.surfers;
});
return () => {
sse.close();
console.log(`sse closing ${Date.now()}`);
};
}
async function LoadPriority() {
const res = await fetch(`/api/priority`);
const data = await res.json();
console.log(`load priority: ${JSON.stringify(data)}`);
$surfers = data.surfers;
}
</script>
<!-- <svelte:window bind:innerWidth={width} /> -->
<div class="header">
<!-- <span class="title">{event}</span>
<span class="title">{category}</span>
{#if !end}
<span class="timer">{pad2(min)}:{pad2(sec)}</span>
{:else}
<span class="timer" style="color: red">{pad2(min)}:{pad2(sec)}</span>
{/if}
<span class="heat">{heat}</span> -->
</div>
<ul>
{#each Array($surfersCount) as _, id}
<li>
{#if $surfers[id].priority == 'P'}
<div class="priority" id="p">{$surfers[id].priority}</div>
{:else}
<div class="priority" id="n">{$surfers[id].priority}</div>
{/if}
<div class="color" style="background-color: {$surfers[id].color}"></div>
</li>
{/each}
</ul>
<!-- {#if width < 768}
<div class="footer">
<div>waiting for scores</div> -->
<!-- <div class="score">6.00</div>
<div class="score">6.00</div>
<div class="score">6.00</div>
<div class="score">6.00</div>
<div class="score">6.00</div> -->
<!-- </div>
{/if} -->
<style>
:root {
--backColor: #334;
--textColor: white;
--maxWidth: (100% - 15px);
}
:global(body) {
overflow-y: hidden;
overflow-x: hidden;
margin: 0.2vmin;
align-content: center;
justify-content: center;
}
.header {
background-color: var(--backColor);
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
padding-bottom: 6px;
margin-top: 2px;
margin-bottom: 2px;
width: calc(var(--maxWidth));
color: var(--textColor);
display: flex;
justify-content: space-between;
}
ul {
margin: 0;
padding: 0;
}
li {
display: flex;
flex-direction: row;
margin-top: 0.2vh;
margin-bottom: 0.2vh;
overflow: hidden;
}
.priority {
text-align: center;
align-self: center;
min-height: 19vh;
min-width: 19vh;
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 {
width: 100vw;
}
</style>

205
frontend.light/src/routes/mobile/+page.svelte Normal file
View file

@ -0,0 +1,205 @@
<script>
// import { page } from '$app/stores';
import { onMount } from 'svelte';
import { dev } from '$app/environment';
import { surfers, surfersCount, round } from '$lib/stores/surfers.js';
if (dev) {
console.log('Dev mode');
} else {
console.log('Not dev mode');
}
const events = ['priority'];
let width;
let header_height = 8;
$: setup_height = (100 - header_height) / $surfersCount - 12 / $surfersCount;
// $: if ($surfers || $surfersCount || $round) {
// SaveSession();
// }
function StartSSE() {
let url = '/api/sse?';
for (let e in events) {
url += `event=${events[e]}&`;
}
console.log(`sse url: ${url}`);
const sse = new EventSource(url);
console.log(`subscribe: ${sse}`);
sse.onopen = () => {
console.log(`sse open ${Date.now()}`);
};
sse.addEventListener('priority', (e) => {
let Msg = JSON.parse(e.data);
console.log(JSON.stringify(Msg));
console.log(`surfers: ${Msg.data.surfers}`);
$surfers = Msg.data.surfers;
$surfersCount = Msg.data.count;
$round = Msg.data.round;
SaveSession();
});
return () => {
sse.close();
console.log(`sse closing ${Date.now()}`);
};
}
function SaveSession() {
window.sessionStorage.setItem('priority', JSON.stringify($surfers));
window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount));
window.sessionStorage.setItem('round', JSON.stringify($round));
console.log(`saved: ${JSON.stringify($surfers)}`);
}
async function LoadPriority() {
const res = await fetch(`/api/priority`);
const data = await res.json();
console.log(`load priority: ${JSON.stringify(data)}`);
$surfers = data.surfers;
$surfersCount = data.count;
$round = data.round;
}
onMount(async () => {
if (!dev) {
const sse = StartSSE();
let ses = window.sessionStorage.getItem('priority');
console.log(`session: ${ses}`);
if (ses) {
$surfers = JSON.parse(ses);
$surfersCount = JSON.parse(window.sessionStorage.getItem('surfers'));
$round = JSON.parse(window.sessionStorage.getItem('round'));
console.log(`loaded: ${JSON.stringify($surfers)}`);
} else {
LoadPriority();
}
return sse;
}
});
</script>
<svelte:window bind:innerWidth={width} />
<div class="header" style="--height:{header_height}vh">
<span class="title">{$round.name}</span>
<span class="title">{$round.category}</span>
<span class="heat">Heat {$round.heat}</span>
</div>
<div class="container">
{#each Array($surfersCount) as _, id}
<div class="box">
<div class="square" style="background-color: {$surfers[id].color}; --height:{setup_height}vh">
{#if $surfers[id].priority != ''}
<span class="priority">{$surfers[id].priority}</span>
{/if}
</div>
<div class="text">{$surfers[id].name}</div>
</div>
{/each}
</div>
<style>
:root {
--backColor: #334;
--textColor: white;
--maxWidth: calc(100% - 0);
}
:global(body) {
/* overflow-y: hidden; */
/* overflow-x: hidden; */
margin: 0;
align-content: center;
justify-content: center;
background-color: gray;
}
.header {
height: var(--height);
background-color: var(--backColor);
padding-left: 2vw;
padding-right: 2vw;
/* padding-top: 0.5vmin;
padding-bottom: 0.5vmin; */
/* margin-top: 0.5vmin; */
margin-bottom: 2px;
width: var(--maxWidth);
color: var(--textColor);
display: flex;
justify-content: space-between;
}
.header .title {
font-size: 4vmin;
padding-left: 2vw;
padding-right: 2vw;
font-weight: bold;
flex: 1 1 0;
align-self: center;
}
.header .heat {
font-size: 4vmin;
padding-left: 0;
padding-right: 2vw;
font-weight: bold;
flex: 1 1 auto;
align-self: center;
text-align: right;
}
.container {
background-color: var(--backColor);
padding: 2vmin;
width: var(--maxWidth);
color: var(--textColor);
}
.box {
width: 100%;
display: flex;
align-items: center;
padding: 0.5vmin;
margin-bottom: 0.5vh;
}
.priority {
width: 60%;
height: 60%;
background-color: white;
color: black;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 6vmin;
font-weight: bold;
}
.square {
width: var(--height);
height: var(--height);
border-radius: 5px;
margin-right: 2vw;
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Per il posizionamento del testo */
}
.text {
flex: 1;
font-size: 6vmin;
font-weight: lighter;
}
</style>

59
frontend.light/src/routes/priority/+page.svelte
View file

@ -1,6 +1,6 @@
<script>
import { onMount } from 'svelte';
import { surfers, surfersCount } from '$lib/stores/surfers.js';
import { surfers, surfersCount, round } from '$lib/stores/surfers.js';
import { colors } from '$lib/stores/colors.js';
import { dev } from '$app/environment';
@ -14,10 +14,9 @@
return false;
};
const events = ['priority'];
// const events = ['priority'];
$: start = false;
// $: surfers_tot = 6;
let footer_height = 8;
$: setup_height = (100 - footer_height) / $surfersCount - 2.2 / $surfersCount;
@ -26,6 +25,7 @@
window.sessionStorage.setItem('priority', JSON.stringify($surfers));
window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount));
window.sessionStorage.setItem('status', JSON.stringify(start));
window.sessionStorage.setItem('round', JSON.stringify($round));
console.log(`saved: ${JSON.stringify($surfers)}`);
}
@ -172,40 +172,10 @@
'Content-Type': 'application/json'
}
});
console.log(`SendPriority: ${res.status} ${res.statusText}`);
}
// function StartSSE() {
// let url = '/api/sse?';
// for (let e in events) {
// url += `event=${events[e]}&`;
// }
// console.log(`sse url: ${url}`);
// const sse = new EventSource(url);
// console.log(`subscribe: ${sse}`);
// sse.onopen = () => {
// console.log(`sse open ${now()}`);
// };
// sse.addEventListener('priority', (e) => {
// let Msg = JSON.parse(e.data);
// console.log(JSON.stringify(Msg));
// });
// return () => {
// sse.close();
// console.log(`sse closing ${Date.now()}`);
// };
// }
function DarkMode() {
window.document.body.classList.toggle('dark-mode');
if (window.document.body.style.backgroundColor === 'black') {
window.document.body.style.backgroundColor = 'white';
} else {
window.document.body.style.backgroundColor = 'black';
}
}
</script>
{#if start}
@ -235,7 +205,7 @@
{$surfers[id].priority}
</div>
{/if}
<div class="color" style:background-color={$surfers[id].color}></div>
<div class="color" style:background-color={$surfers[id].color}>{$surfers[id].name}</div>
</li>
{/each}
</ul>
@ -254,23 +224,17 @@
style="background-color: {$surfers[id].color};"
>
{#each $colors as color}
<option value={color} style="background-color: {color}"></option>
<option value={color} style="background-color: {color}">{color}</option>
{/each}
</select>
</div>
<div class="color" style:background-color={$surfers[id].color}></div>
<div class="color" style:background-color={$surfers[id].color}><input type="text" bind:value={$surfers[id].name}></div>
</li>
{/each}
</ul>
<div
class="footer"
style="--height:{footer_height}vh"
on:contextmenu={(e) => {
e.preventDefault();
DarkMode();
}}
role="button"
tabindex="-1"
>
<div class="control">
<button class="button" on:click={AddSurfer}>+</button>
@ -342,7 +306,16 @@
}
.color {
display: flex;
width: 100vw;
justify-content: center;
align-items: center;
text-align: center;
}
.color input {
background-color: lightgray;
font-size: 5vmin;
}
.footer {