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/components/ui/LocationSearchBox.svelte

@@ -4,44 +4,29 @@
 	import { fade } from 'svelte/transition';
 	import { goto } from '$app/navigation';
 
-	interface LocationRecord {
+	import { LOCATIONS } from '$lib/locations-object.svelte.ts';
-		n: string; // name
+
-		t: string; // tiploc
+
-		c?: string; // crs
-		s: string; // search string
-	}
 
 	let { value = $bindable() } = $props();
 
-	let results = $state<LocationRecord[]>([]);
-	let locations: LocationRecord[] = [];
-
 	let showResults = $state(false);
 	let selectedIndex = $state(-1);
 
 	const MAX_RESULTS = 5;
 
-	async function loadLocations() {
-		const res = await fetch('/api/tiplocs');
-		locations = await res.json();
-	}
-
-	onMount(loadLocations);
 
 	function tokenize(query: string) {
 		return query.toLowerCase().trim().split(/\s+/).filter(Boolean);
 	}
 
-	function search(query: string) {
+	let results = $derived.by(() => {
-		if (query.length < 3) {
+		if (value.length < 3) return [];
-			results = [];
-			return;
-		}
 
-		const tokens = tokenize(query);
+		const tokens = tokenize(value);
-		const lowerQuery = query.toLowerCase().trim();
+		const lowerQuery = value.toLowerCase().trim();
 
-		results = locations
+		return LOCATIONS.data
 			.filter((r) => tokens.every((t) => r.s.includes(t)))
 			.sort((a, b) => {
 				// Check if query matches CRS
@@ -56,11 +41,12 @@
 				return a.n.localeCompare(b.n);
 			})
 			.slice(0, MAX_RESULTS);
-	}
+	})
+
 
 	$effect(() => {
-		search(value);
+        if (results) selectedIndex = -1;
-	});
+    });
 
 	// Hide results when click outside of container
 	$effect(() => {

src/lib/locations-object.svelte.ts

@@ -0,0 +1,38 @@
+	interface LocationRecord {
+		n: string; // name
+		t: string; // tiploc
+		c?: string; // crs
+		s: string; // search string
+	}
+
+class LocationStore {
+    data = $state<LocationRecord[]>([]);
+    loaded = $state(false);
+
+    async init(fetcher = fetch) {
+        if (this.loaded) return;
+
+        try {
+            const res = await fetcher('/api/tiplocs');
+            this.data = await res.json();
+            this.loaded = true;
+        } catch (err) {
+            console.error('Failed to load locations', err);
+        }
+    }
+
+    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

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { slide, fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
+
+	import { LOCATIONS } from '$lib/locations-object.svelte.ts';
 
 	import '$lib/global.css';
 
@@ -10,6 +13,8 @@
 
 	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
 
+	onMount(() => LOCATIONS.init(fetch));
+
 	let { children } = $props();
 
 	// Navigation State
@@ -18,9 +23,9 @@
 
 	const navItems = [
 		{ label: 'Home', path: '/', icon: IconHome },
-		{ label: 'PIS', path: '/pis', icon: IconDialpad },
+		{ label: 'PIS', path: '/pis/', icon: IconDialpad },
-		{ label: 'Options', path: '/preferences', icon: IconSettings },
+		{ label: 'Options', path: '/preferences/', icon: IconSettings },
-		{ label: 'About', path: '/about', icon: IconHelp }
+		{ label: 'About', path: '/about/', icon: IconHelp }
 	];
 
 	let navWidth = $state(0);
@@ -78,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"
@@ -110,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"}
 ]