Priority/frontend.light/src/routes/mobile/+page.svelte

<script>
	// import { page } from '$app/stores';
	import { onMount } from 'svelte';
	import { dev } from '$app/environment';
	import { priority } from '$lib/stores/priority.js';

	let base;

	if (dev) {		
		console.log('Dev mode');
		base = 'http://10.39.253.16:8080';
	} else {
		console.log('Not dev mode');
		base = '';
	}

	const events = ['priority'];

	let width;

	let header_height = 8;
	$: setup_height = (100 - header_height) / $priority.surfersCount - 12 / $priority.surfersCount;

	LoadPriority();

	// $: if ($surfers || $surfersCount || $round) {
	// 	SaveSession();
	// }

	function StartSSE() {
		let url = base + '/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.onmessage = (e) => {
			let Msg = JSON.parse(e.data);
			console.log(JSON.stringify(Msg));
			console.log(`surfers: ${Msg.data.priority}`);
			$priority.surfers = Msg.data.surfers;
			$priority.round = Msg.data.round;
			$priority.surfersCount = Msg.data.surfersCount;
		};

		sse.addEventListener('priority', (e) => {
			let Msg = JSON.parse(e.data);
			console.log(JSON.stringify(Msg));
			console.log(`surfers: ${Msg.data.priority}`);
			$priority.surfers = Msg.data.surfers;
			$priority.round = Msg.data.round;
			$priority.surfersCount = Msg.data.surfersCount;
//			SaveSession();
		});

		return () => {
			sse.close();
			console.log(`sse closing ${Date.now()}`);
		};
	}

	// function SaveSession() {
	// 	window.sessionStorage.setItem('status', true);
	// 	window.sessionStorage.setItem('priority', JSON.stringify($priority));
	// 	console.log(`saved: ${JSON.stringify($priority)}`);
	// }

	async function LoadPriority() {
		const res = await fetch(`${base}/api/priority`);
		const data = await res.json();
		console.log(`load priority: ${JSON.stringify(data)}`);
		$priority.surfers = data.surfers;
		$priority.round = data.round;
		$priority.surfersCount = data.surfersCount;
	}

	onMount(async () => {
		const sse = StartSSE();

		let pri = window.sessionStorage.getItem('priority')
		if (pri) {
			$priority = JSON.parse(pri);
			console.log(`loaded: ${JSON.stringify($priority)}`);
		}

		return sse;
	});
</script>

<svelte:window bind:innerWidth={width} />

<div class="header" style="--height:{header_height}vh">
	<span class="title">{$priority.round.name}</span>
	<span class="title">{$priority.round.category}</span>
	<span class="heat">Heat {$priority.round.heat}</span>
</div>

<div class="container">
	{#each Array($priority.surfersCount) as _, id}
		<div class="box">
			<div
				class="square"
				style="background-color: {$priority.surfers[id].color}; --height:{setup_height}vh"
			>
				{#if $priority.surfers[id].priority != ''}
					<span class="priority">{$priority.surfers[id].priority}</span>
				{/if}
			</div>
			<div class="text">{$priority.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>