Add parsing for StationAlerts, and fetch function for Boards.

This commit is contained in:
2026-05-10 00:15:53 +01:00
parent f3d633e719
commit 909e36ebc2
14 changed files with 979 additions and 623 deletions

View File

@@ -1,8 +1,19 @@
<script lang="ts">
import { untrack } from 'svelte';
import { onMount, untrack } from 'svelte';
import { quickLinks } from '$lib/quick-links.svelte';
import StationAlertCard from '$lib/components/ui/cards/StationAlertCard.svelte';
import { formatUkDateTime, formatUkTime } from '$lib/utils/time';
let { data } = $props();
let now = $state(new Date());
onMount(() => {
const interval = setInterval(() => {
now = new Date();
}, 1000);
return () => clearInterval(interval);
})
// Update 'QuickLinks'
$effect(() => {
@@ -17,12 +28,60 @@
}
}
});
</script>
<section>Live board are not yet implemented on the server</section>
// Wake Lock API Handling
// Load Data Invalidation Handling
// Refresh countdown logic
</script>
<section class="board-wrapper">
{#if data.boardData.data.m?.length}
<StationAlertCard messages={data.boardData.data.m} />
<div class="time-data">
<span class="time-loaded">Fetched: {formatUkDateTime(data.boardData.producedAt, true)}</span>
<span class="time-now">{formatUkTime(now, true)}</span>
</div>
{/if}
</section>
<section class="section-t">Live boards are not yet fully implemented on the server</section>
<pre class="json-dump">{JSON.stringify(data.boardData.data.s, null, 2)}</pre>
<style>
section {
.board-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0 auto;
gap: 0;
}
.time-data {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 700px;
margin: 0 auto;
font-family: 'URW Gothic', sans-serif;
}
.time-loaded, .time-now {
font-variant-numeric: tabular-nums;
}
.time-loaded {
font-size: 0.9rem;
}
.time-now {
font-weight: 600;
font-size: 1rem;
}
.section-t {
font-family: 'URW Gothic', sans-serif;
text-align: center;
font-size: 2rem;
@@ -31,4 +90,13 @@
padding-top: 25px;
max-width: 500px;
}
.json-dump {
background: #222;
color: #0f0;
padding: 1rem;
border-radius: 4px;
font-size: 0.9rem;
width: 95%;
margin: 1rem auto; }
</style>