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

add store to v and h

Browse source
This commit is contained in:
Miki 2024-01-10 13:28:17 +01:00
parent 27aeb4c343
commit 4f18d6448f
2 changed files with 106 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
frontend/src/routes/light/h/+page.svelte
View file

@ -1,28 +1,60 @@
<script>
import { dev } from '$app/environment';
import { onMount } from 'svelte';
import { surfers, surfersCount } from '$lib/stores/surfers.js';
if (dev) {
console.log('Dev mode');
} else {
console.log('Not dev mode');
}
onMount(async () => {
if (!dev) {
const sse = StartSSE();
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 ${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()}`);
};
}
</script>
<ul>
{#each Array($surfersCount) as _, id}
<li>
<div class="priority" id="n">2</div>
<div class="color" id="black"></div>
</li>
<li>
<div class="priority" id="p"><a href="/">P</a></div>
<div class="color" id="red"></div>
</li>
<li>
<div class="priority" id="n">4</div>
<div class="color" id="blue"></div>
</li>
<li>
<div class="priority" id="n">3</div>
<div class="color" id="green"></div>
</li>
<li>
<div class="priority" id="n">5</div>
<div class="color" id="yellow"></div>
{#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>
<style>
@ -83,19 +115,4 @@
width: 100vw;
}
.color#black {
background-color: black;
}
.color#red {
background-color: red;
}
.color#blue {
background-color: blue;
}
.color#green {
background-color: green;
}
.color#yellow {
background-color: yellow;
}
</style>

95
frontend/src/routes/light/v/+page.svelte
View file

@ -1,28 +1,59 @@
<script>
import { dev } from '$app/environment';
import { onMount } from 'svelte';
import { surfers, surfersCount } from '$lib/stores/surfers.js';
if (dev) {
console.log('Dev mode');
} else {
console.log('Not dev mode');
}
onMount(async () => {
if (!dev) {
const sse = StartSSE();
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 ${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()}`);
};
}
</script>
<div class="wall">
{#each Array($surfersCount) as _, id}
<div class="column">
<div class="priority" id="n">2</div>
<div class="color" id="black"></div>
</div>
<div class="column">
<div class="priority" id="p"><a href="/">P</a></div>
<div class="color" id="red"></div>
</div>
<div class="column">
<div class="priority" id="n">4</div>
<div class="color" id="blue"></div>
</div>
<div class="column">
<div class="priority" id="n">3</div>
<div class="color" id="green"></div>
</div>
<div class="column">
<div class="priority" id="n">5</div>
<div class="color" id="yellow"></div>
{#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>
</div>
{/each}
</div>
<style>
@ -30,14 +61,6 @@
overflow-y: hidden;
}
a:link,
a:hover,
a:visited,
a:active {
text-decoration: none;
color: black;
}
.wall {
display: flex;
margin: 0;
@ -86,24 +109,8 @@
margin-bottom: 0.1vh;
}
.color#black {
background-color: black;
flex-grow: 1;
}
.color#red {
background-color: red;
flex-grow: 1;
}
.color#blue {
background-color: blue;
flex-grow: 1;
}
.color#green {
background-color: green;
flex-grow: 1;
}
.color#yellow {
background-color: yellow;
.color {
flex-grow: 1;
}
</style>