Add initial logic for 'boards'

src/app.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="manifest" href="/manifest.webmanifest" />
-		<meta name="title" content="OwlBoard | Your fasted route to live and reference data" />
+		<meta name="title" content="OwlBoard | Your fastest route to live and reference data" />
 		<meta
 			name="description"
 			content="Live station departures, Live train tracking, PIS Codes & more"

src/lib/locations-object.svelte.ts

@@ -9,11 +9,11 @@ class LocationStore {
     data = $state<LocationRecord[]>([]);
     loaded = $state(false);
 
-    async init() {
+    async init(fetcher = fetch) {
         if (this.loaded) return;
 
         try {
-            const res = await fetch('/api/tiplocs');
+            const res = await fetcher('/api/tiplocs');
             this.data = await res.json();
             this.loaded = true;
         } catch (err) {
@@ -21,6 +21,18 @@ class LocationStore {
         }
     }
 
+    find(id: string | null): LocationRecord | undefined {
+        if (!id) return undefined;
+
+        const query = id.toUpperCase().trim();
+
+        console.log(query);
+
+        return this.data.find((loc) => {
+            return loc.t === query || loc.c === query;
+        });
+    }
+
 }
 
 export const LOCATIONS = new LocationStore();

src/routes/+error.svelte

@@ -59,12 +59,14 @@
 		color: var(--color-title);
 		max-width: 300px;
 		margin-top: 5px;
-		margin-bottom: 30px;
+		margin-bottom: 20px;
 	}
 
 	.debug-info {
 		background: rgba(255, 255, 255, 0.05);
-		padding: 5px 12px;
+		padding: 5px 15px;
+		margin-top: 0;
+		margin-bottom: 20px;
 		border-radius: 4px;
 		font-size: 0.8rem;
 		opacity: 0.6;

src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 
 	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
 
-	onMount(() => LOCATIONS.init());
+	onMount(() => LOCATIONS.init(fetch));
 
 	let { children } = $props();
 
@@ -23,9 +23,9 @@
 
 	const navItems = [
 		{ label: 'Home', path: '/', icon: IconHome },
-		{ label: 'PIS', path: '/pis', icon: IconDialpad },
-		{ label: 'Options', path: '/preferences', icon: IconSettings },
-		{ label: 'About', path: '/about', icon: IconHelp }
+		{ label: 'PIS', path: '/pis/', icon: IconDialpad },
+		{ label: 'Options', path: '/preferences/', icon: IconSettings },
+		{ label: 'About', path: '/about/', icon: IconHelp }
 	];
 
 	let navWidth = $state(0);
@@ -83,7 +83,7 @@
 <nav bind:clientWidth={navWidth}>
 	<!-- Dynamic Nav Elements Here! -->
 	{#each visibleItems as item}
-		{@const isActive = activePath === item.path}
+		{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
 		<a
 			href={item.path}
 			class="nav-item"
@@ -115,7 +115,7 @@
 			></div>
 			<div class="menu-popover" transition:slide={{ axis: 'y', duration: 250 }}>
 				{#each hiddenItems as item}
-					{@const isActive = activePath === item.path}
+					{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
 					<a
 						href={item.path}
 						class="menu-popover-item"

src/routes/+layout.ts

@@ -1,3 +1,4 @@
 export const prerender = true;
 export const trailingSlash = 'always';
 export const csr = true;
+export const ssr = false;

src/routes/board/+page.svelte

@@ -0,0 +1,15 @@
+<section>
+    Live board are not yet implemented on the server
+</section>
+
+<style>
+    section {
+        font-family: 'URW Gothic', sans-serif;
+        text-align: center;
+        font-size: 2rem;
+        width: 90%;
+        margin: auto;
+        padding-top: 25px;
+        max-width: 500px;
+    }
+</style>

src/routes/board/+page.ts

@@ -0,0 +1,37 @@
+import { LOCATIONS } from '$lib/locations-object.svelte';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ url }) => {
+    const locId = url.searchParams.get('loc');
+
+    if (!LOCATIONS.loaded) {
+        await LOCATIONS.init(fetch);
+    }
+
+    let title: string = "";
+
+    if (!locId) {
+        error(400, {
+            message: 'Location not provided',
+            owlCode: 'NO_LOCATION_IN_PATH',
+        });
+    }
+
+    if (locId) {
+        const location = LOCATIONS.find(locId);
+
+        if (location) {
+            title = location.n || location.t;
+        } else {
+            error(404, {
+                message: `Location (${locId}) not found`,
+                owlCode: 'INVALID_LOCATION_CODE',
+            });
+        }
+    }
+	return {
+		title,
+        location,
+	};
+};

static/api/tiplocs

@@ -99,5 +99,6 @@
   {"n":"Luton Airport Sidings","t":"LUTSID","c":"","s":"luton airport sidings lutsid"},
   {"n":"Stevenage Hitchin Junction","t":"STHJC","c":"","s":"stevenage hitchin junction sthjc"},
   {"n":"Chelmsford New Hall Junction","t":"CHNJCT","c":"","s":"chelmsford new hall junction chnjct"},
+  {"n":"","t":"BPWY532","c":"","s":"bpwy532"},
   {"n":"Ipswich Derby Road Depot","t":"IPDRDP","c":"","s":"ipswich derby road depot ipdrdp"}
 ]