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

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

@ -1,28 +1,60 @@
<script> <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> </script>
<ul> <ul>
<li> {#each Array($surfersCount) as _, id}
<div class="priority" id="n">2</div> <li>
<div class="color" id="black"></div> {#if $surfers[id].priority == 'P'}
</li> <div class="priority" id="p">{$surfers[id].priority}</div>
<li> {:else}
<div class="priority" id="p"><a href="/">P</a></div> <div class="priority" id="n">{$surfers[id].priority}</div>
<div class="color" id="red"></div> {/if}
</li> <div class="color" style="background-color: {$surfers[id].color}"></div>
<li> </li>
<div class="priority" id="n">4</div> {/each}
<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>
</li>
</ul> </ul>
<style> <style>
@ -83,19 +115,4 @@
width: 100vw; 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> </style>

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

@ -1,28 +1,59 @@
<script> <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> </script>
<div class="wall"> <div class="wall">
<div class="column"> {#each Array($surfersCount) as _, id}
<div class="priority" id="n">2</div> <div class="column">
<div class="color" id="black"></div> {#if $surfers[id].priority == 'P'}
</div> <div class="priority" id="p">{$surfers[id].priority}</div>
<div class="column"> {:else}
<div class="priority" id="p"><a href="/">P</a></div> <div class="priority" id="n">{$surfers[id].priority}</div>
<div class="color" id="red"></div> {/if}
</div> <div class="color" style="background-color: {$surfers[id].color}"></div>
<div class="column"> </div>
<div class="priority" id="n">4</div> {/each}
<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>
</div>
</div> </div>
<style> <style>
@ -30,14 +61,6 @@
overflow-y: hidden; overflow-y: hidden;
} }
a:link,
a:hover,
a:visited,
a:active {
text-decoration: none;
color: black;
}
.wall { .wall {
display: flex; display: flex;
margin: 0; margin: 0;
@ -86,24 +109,8 @@
margin-bottom: 0.1vh; margin-bottom: 0.1vh;
} }
.color#black { .color {
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;
flex-grow: 1; flex-grow: 1;
} }
</style> </style>