Add PIS code search components

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+@owlboard:registry=https://git.fjla.uk/api/packages/OwlBoard/npm/

src/lib/components/ui/LocationSearchBox.svelte

@@ -6,8 +6,6 @@
 
 	import { LOCATIONS } from '$lib/locations-object.svelte.ts';
 
-
-
 	let { value = $bindable() } = $props();
 
 	let showResults = $state(false);
@@ -15,7 +13,6 @@
 
 	const MAX_RESULTS = 5;
 
-
 	function tokenize(query: string) {
 		return query.toLowerCase().trim().split(/\s+/).filter(Boolean);
 	}
@@ -41,12 +38,11 @@
 				return a.n.localeCompare(b.n);
 			})
 			.slice(0, MAX_RESULTS);
-	})
-
+	});
 
 	$effect(() => {
-        if (results) selectedIndex = -1;
-    });
+		if (results) selectedIndex = -1;
+	});
 
 	// Hide results when click outside of container
 	$effect(() => {
@@ -68,7 +64,7 @@
 		selectedIndex = -1;
 		value = '';
 		console.log('Selected Location: ', JSON.stringify(loc));
-        const queryString = loc.c || loc.t
+		const queryString = loc.c || loc.t;
 		goto(`/board?loc=${queryString.toLowerCase()}`);
 	}
 

src/lib/components/ui/cards/pis/PisCode.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+import Textbox from '$lib/components/ui/Textbox.svelte';
+import Button from '$lib/components/ui/Button.svelte';
+
+let codeValue = $state('');
+
+function resetValues(): void {
+    codeValue = '';
+}
+</script>
+
+<BaseCard header={'Find by Code'}>
+	<div class="card-content">
+        <div class="textbox-container">
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"Code"} uppercase={true} type={'number'} max={9999} bind:value={codeValue} />
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <Button>Search</Button>
+            <Button onclick={resetValues}>Reset</Button>
+        </div>
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+    .textbox-container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        gap: 4rem;
+    }
+
+    .textbox-item-wrapper {
+        width: 30%;
+    }
+
+    .button-wrapper {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 15px;
+    }
+</style>

src/lib/components/ui/cards/pis/PisStartEndCard.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+import Textbox from '$lib/components/ui/Textbox.svelte';
+import Button from '$lib/components/ui/Button.svelte';
+
+let startValue = $state('');
+let endValue = $state('');
+
+function resetValues(): void {
+    startValue = '';
+    endValue = '';
+}
+</script>
+
+<BaseCard header={'Find by Start/End CRS'}>
+	<div class="card-content">
+        <div class="textbox-container">
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"Start"} uppercase={true} maxLength={3} bind:value={startValue} />
+            </div>
+            <div class="textbox-item-wrapper">
+                <Textbox placeholder={"End"} uppercase={true} maxLength={3} bind:value={endValue} />
+            </div>
+        </div>
+        <div class="button-wrapper">
+            <Button>Search</Button>
+            <Button onclick={resetValues}>Reset</Button>
+        </div>
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+
+    .textbox-container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        gap: 4rem;
+    }
+
+    .textbox-item-wrapper {
+        width: 30%;
+    }
+
+    .button-wrapper {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
+        margin-top: 15px;
+    }
+</style>

src/lib/locations-object.svelte.ts

@@ -1,38 +1,37 @@
-	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;
-        });
-    }
-
+interface LocationRecord {
+	n: string; // name
+	t: string; // tiploc
+	c?: string; // crs
+	s: string; // search string
 }
 
-export const LOCATIONS = new LocationStore();
+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/+layout.svelte

@@ -162,6 +162,7 @@
 	.page-title {
 		font-family: 'URW Gothic', sans-serif;
 		font-weight: 600;
+		font-size: clamp(0.9rem, 2.5vw + 0.8rem, 2rem);
 		font-style: normal;
 		margin-left: 5px;
 		padding-bottom: 2px;

src/routes/board/+page.svelte

@@ -1,15 +1,13 @@
-<section>
-    Live board are not yet implemented on the server
-</section>
+<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>
+	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

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

src/routes/pis/+page.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
+    import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
+</script>
+
+<div class="card-container">
+    <PisStartEndCard />
+    <PisCode />
+</div>
+
+<div class="result-container">
+
+</div>
+
+<style>
+	.card-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+
+    .result-container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        gap: 5px;
+        justify-content: center;
+        background: var(--color-accent);
+    }
+</style>

src/routes/pis/+page.ts

@@ -0,0 +1,5 @@
+export const load = () => {
+	return {
+		title: 'PIS Codes'
+	};
+};

static/api/tiplocs

@@ -100,5 +100,7 @@
   {"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"}
+  {"n":"Ipswich Derby Road Depot","t":"IPDRDP","c":"","s":"ipswich derby road depot ipdrdp"},
+  {"n":"Rhoose Cardiff International Airport","c":"RIA","t":"RHOOSE","s":"rhoose cardiff international airport ria"},
+  {"n":"Southampton Airport Parkway","c":"SOA","t":"SOTAPT","s":"southampton airport parkway soa sotapt"}
 ]