Add parsing for StationAlerts, and fetch function for Boards.

src/routes/+error.svelte

@@ -10,6 +10,9 @@
 	{#if page.status == 404}
 		<!-- Warning no data image -->
 		<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
+	{:else if page.status == 499}
+		<!-- Change to a GSM-R X Sign?? -->
+		<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
 	{:else}
 		<!-- STOP Error image -->
 		<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
@@ -26,7 +29,11 @@
 		</div>
 	{/if}
 
-	<Button href={'/'} color={'accent'}>Return to Home</Button>
+	{#if $page.error?.owlCode === 'NETWORK_DISCONNECTED'}
+		<Button onclick={() => window.location.reload()} color={'accent'}>Retry</Button>
+	{:else}
+		<Button href={'/'} color={'accent'}>Return to Home</Button>
+	{/if}
 </div>
 
 <style>

src/routes/board/+page.svelte

@@ -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>

src/routes/board/+page.ts

@@ -1,16 +1,14 @@
 import { LOCATIONS } from '$lib/locations-object.svelte';
+import { ApiError, OwlClient, ValidationError } from '$lib/owlClient';
 import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';
 
-export const load: PageLoad = async ({ url }) => {
+export const load: PageLoad = async ({ url, fetch }) => {
 	const locId = url.searchParams.get('loc');
 
 	if (!LOCATIONS.loaded) {
 		await LOCATIONS.init();
 	}
-
-	let title: string = '';
-
 	if (!locId) {
 		error(400, {
 			message: 'Location not provided',
@@ -18,22 +16,49 @@ export const load: PageLoad = async ({ url }) => {
 		});
 	}
 
-	let BoardLocation;
+	const BoardLocation = LOCATIONS.find(locId);
 
-	if (locId) {
-		BoardLocation = LOCATIONS.find(locId);
+	if (!BoardLocation) {
+		error(404, {
+			message: `Location (${locId.toUpperCase()}) not found`,
+			owlCode: 'INVALID_LOCATION_CODE'
+		});
+	}
+	const title = BoardLocation.n || BoardLocation.t || 'Live Arr/Dep';
 
-		if (BoardLocation) {
-			title = BoardLocation.n || BoardLocation.t || 'Live Arr/Dep';
-		} else {
-			error(404, {
-				message: `Location (${locId.toUpperCase()}) not found`,
-				owlCode: 'INVALID_LOCATION_CODE'
+	try {
+		const boardData = await OwlClient.board.getByLocation(locId, fetch);
+
+		return {
+			title,
+			BoardLocation,
+			boardData
+		};
+	} catch (e: unknown) {
+		if (
+			e instanceof TypeError &&
+			(e.message == 'Failed to fetch' || e.message.includes('network'))
+		) {
+			throw error(503, {
+				message: 'Network error: Please check your connection',
+				owlCode: 'NETWORK_DISCONNECTED'
 			});
 		}
+		if (e instanceof ValidationError) {
+			throw error(400, { message: e.message, owlCode: 'VALIDATION_ERROR' });
+		} else if (e instanceof ApiError) {
+			// If the API returns 404, it means the backend doesn't recognize this CRS/TIPLOC
+			if (e.code === 'NOT_FOUND') {
+				throw error(404, {
+					message: `Location (${locId.toUpperCase()}) is not recognized by the server.`,
+					owlCode: 'LOCATION_NOT_IN_BACKEND'
+				});
+			}
+			throw error(e.status, { message: e.message, owlCode: 'API_ERROR' });
+		} else if (e instanceof Error) {
+			throw error(500, { message: e.message, owlCode: 'GEN_ERROR' });
+		}
+
+		throw error(500, { message: 'Unexpected error', owlCode: 'UNKNOWN_ERR' });
 	}
-	return {
-		title,
-		BoardLocation
-	};
 };

src/routes/trains/+page.ts

@@ -3,7 +3,7 @@ import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
 import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';
 
-export const load: PageLoad = async ({ url }) => {
+export const load: PageLoad = async ({ fetch, url }) => {
 	const headcode = url.searchParams.get('h');
 	let dateParam = url.searchParams.get('d');
 	const toc = url.searchParams.get('t') || '';
@@ -21,7 +21,7 @@ export const load: PageLoad = async ({ url }) => {
 	let results: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse[];
 
 	try {
-		const response = await OwlClient.trains.getByHeadcode(headcode, date, toc);
+		const response = await OwlClient.trains.getByHeadcode(headcode, date, toc, fetch);
 
 		results = response.data;
 		return {