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/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/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.ts

@@ -25,7 +25,7 @@ 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'
 			});
 		}

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"}
 ]