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,8 +38,7 @@
 				return a.n.localeCompare(b.n);
 			})
 			.slice(0, MAX_RESULTS);
-	})
+	});
-
 
 	$effect(() => {
 		if (results) selectedIndex = -1;
@@ -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

@@ -32,7 +32,6 @@ class LocationStore {
 			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,6 +1,4 @@
-<section>
+<section>Live board are not yet implemented on the server</section>
-    Live board are not yet implemented on the server
-</section>
 
 <style>
 	section {

src/routes/board/+page.ts

@@ -9,12 +9,12 @@ export const load: PageLoad = async ({ url }) => {
 		await LOCATIONS.init(fetch);
 	}
 
-    let title: string = "";
+	let title: string = '';
 
 	if (!locId) {
 		error(400, {
 			message: 'Location not provided',
-            owlCode: 'NO_LOCATION_IN_PATH',
+			owlCode: 'NO_LOCATION_IN_PATH'
 		});
 	}
 
@@ -25,13 +25,13 @@ export const load: PageLoad = async ({ url }) => {
 			title = location.n || location.t;
 		} else {
 			error(404, {
-                message: `Location (${locId}) not found`,
+				message: `Location (${locId.toUpperCase()}) not found`,
-                owlCode: 'INVALID_LOCATION_CODE',
+				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"}
 ]