Add PIS fetch logic

Add styling to UI Components

package-lock.json

@@ -13,6 +13,7 @@
 			"devDependencies": {
 				"@eslint/compat": "^2.0.2",
 				"@eslint/js": "^9.39.2",
+				"@owlboard/owlboard-ts": "^3.0.0-dev.20260319T2004",
 				"@playwright/test": "^1.58.1",
 				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.50.2",
@@ -778,6 +779,23 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@owlboard/api-schema-types": {
+			"version": "3.0.1-alpha3",
+			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fapi-schema-types/-/3.0.1-alpha3/api-schema-types-3.0.1-alpha3.tgz",
+			"integrity": "sha512-5CVm1k/C++/VrtAw4NkvclDunH+RmYLnDZZMSWTM1mm+WlEVnmD+MVnTgC/FhcsAmsNHV8swm66RCqkCuhbOnA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@owlboard/owlboard-ts": {
+			"version": "3.0.0-dev.20260319T2004",
+			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fowlboard-ts/-/3.0.0-dev.20260319T2004/owlboard-ts-3.0.0-dev.20260319t2004.tgz",
+			"integrity": "sha512-pphq1/l/8eOH4C0O7ocwBOUzt0HkCWGUlhy1itzKnQbmog7oPUEdyaxzS4Evw8onLsxZwkyqsLAyK7okYi+4XA==",
+			"dev": true,
+			"license": "GPL-3.0",
+			"dependencies": {
+				"@owlboard/api-schema-types": "^3.0.1-alpha3"
+			}
+		},
 		"node_modules/@playwright/test": {
 			"version": "1.58.2",
 			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
@@ -2452,9 +2470,9 @@
 			}
 		},
 		"node_modules/flatted": {
-			"version": "3.4.1",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-			"integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+			"version": "3.4.2",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+			"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
 			"dev": true,
 			"license": "ISC"
 		},

package.json

@@ -19,6 +19,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^9.39.2",
+		"@owlboard/owlboard-ts": "^3.0.0-dev.20260319T2004",
 		"@playwright/test": "^1.58.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",

src/lib/components/ui/Textbox.svelte

@@ -72,6 +72,7 @@
 		transition: all 0.2s ease-in-out;
 		outline: none;
 		text-align: center;
+		box-shadow: var(--shadow-std);
 	}
 
 	.all-caps {

src/lib/components/ui/cards/BaseCard.svelte

@@ -60,6 +60,7 @@
 		font-family: 'URW Gothic', sans-serif;
 		color: var(--color-brand);
 		padding: 10px 0;
+		box-shadow: var(--shadow-std);
 	}
 
 	.header-content {

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

@@ -3,6 +3,8 @@ 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 { onsearch }: { onsearch: (c: string) => void } = $props();
+
 let codeValue = $state('');
 
 function resetValues(): void {
@@ -18,7 +20,7 @@ function resetValues(): void {
             </div>
         </div>
         <div class="button-wrapper">
-            <Button>Search</Button>
+            <Button onclick={() => onsearch(codeValue.toString())}>Search</Button>
             <Button onclick={resetValues}>Reset</Button>
         </div>
 	</div>

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

@@ -3,6 +3,9 @@ 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 { onsearch }: { onsearch: (s: string, e: string) => void } = $props();
+
+
 let startValue = $state('');
 let endValue = $state('');
 
@@ -23,7 +26,7 @@ function resetValues(): void {
             </div>
         </div>
         <div class="button-wrapper">
-            <Button>Search</Button>
+            <Button onclick={() => onsearch(startValue, endValue)}>Search</Button>
             <Button onclick={resetValues}>Reset</Button>
         </div>
 	</div>

src/lib/owlClient.ts

@@ -0,0 +1,21 @@
+import { OwlBoardClient, ValidationError, ApiError } from "@owlboard/owlboard-ts";
+import { browser, dev } from "$app/environment";
+
+// Import the runes containing the API Key config Here...
+
+const baseUrl: string = browser ? window.location.origin : '';
+
+const getBaseUrl = () => {
+    if (!browser) return '';
+
+    if (dev) return 'https://test.owlboard.info';
+
+    return window.location.origin;
+}
+
+export const OwlClient = new OwlBoardClient(
+    getBaseUrl(),
+    // API Key Here when ready!!!
+)
+
+export { ValidationError, ApiError };

src/routes/about/+page.svelte

@@ -30,8 +30,8 @@
 	</p>
 	<p class="amble">
 		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
-		associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
-		app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
+		associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links to Bath, where the
+		app has been built and is run, relating to the 'Minerva Owl' sculpture trail in the city, with
 		many of the sculptures still in the area.
 	</p>
 	<p class="opensource">

src/routes/pis/+page.svelte

@@ -1,16 +1,87 @@
 <script lang="ts">
     import PisStartEndCard from '$lib/components/ui/cards/pis/PisStartEndCard.svelte';
     import PisCode from '$lib/components/ui/cards/pis/PisCode.svelte';
+    import Button from '$lib/components/ui/Button.svelte';
+    import type { PisObjects } from '@owlboard/api-schema-types';
+    import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
+
+
+    let results = $state<PisObjects[]>([]);
+    let resultsLoaded = $state<boolean>(false);
+    let errorState = $state<{status: number, message: string} | null>(null);
+
+    async function handleStartEndSearch(start: string, end: string): Promise<void> {
+        console.log(`PIS Search: ${start}-${end}`);
+        errorState = null;
+
+        try {
+            const response = await OwlClient.pis.getByStartEndCrs(start, end);
+            results = await response.data || [];
+        } catch (e) {
+            if (e instanceof ValidationError) {
+                errorState = { status: 400, message: e.message };
+            } else if (e instanceof ApiError) {
+                console.log(e)
+                errorState = { status: 20, message: e.message };
+            } else {
+                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
+            }
+        } finally {
+            resultsLoaded = true;
+        }
+    }
+
+    async function handleCodeSearch(code: string) {
+        console.log(`PIS Search: ${code}`);
+        errorState = null;
+        try {
+            const response = await OwlClient.pis.getByCode(code);
+            results = response.data || []
+        } catch (e) {
+            if (e instanceof ValidationError) {
+                errorState = { status: 400, message: e.message };
+            } else if (e instanceof ApiError) {
+                console.log(e)
+                errorState = { status: 20, message: e.message };
+            } else {
+                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
+            }
+        } finally {
+            resultsLoaded = true;
+        }
+    }
+
+    function clearResults() {
+        console.log('Clearing Results');
+        resultsLoaded = false;
+        results = [];
+    }
 </script>
 
-<div class="card-container">
-    <PisStartEndCard />
-    <PisCode />
-</div>
-
-<div class="result-container">
-
-</div>
+{#if !resultsLoaded}
+    <div class="card-container">
+        <PisStartEndCard onsearch={handleStartEndSearch} />
+        <PisCode onsearch={handleCodeSearch} />
+    </div>
+{:else}
+    <div class="result-container">
+        {#if errorState}
+            <span class="errCode">Error: {errorState.status}</span>
+            <span class="errMsg">{errorState.message}</span>
+        {:else}
+            {#if results.length}
+                <h2 class="result-title">{results.length} Result{#if results.length > 1}s{/if} found:</h2>
+                {#each results as result}
+                    <p>{JSON.stringify(result)}</p>
+                {/each}
+            {:else}
+                <p class="no-results">No matching results</p>
+            {/if}
+        {/if}
+        <div class="reset-button-container">
+        <Button onclick={clearResults}>Reset</Button>
+</div>    </div>
+{/if}
 
 <style>
 	.card-container {
@@ -23,11 +94,31 @@
 	}
 
     .result-container {
+        font-family: 'URW Gothic', sans-serif;
+        font-size: 1.2rem;
+        font-weight: 600;
         display: flex;
         align-items: center;
         flex-direction: column;
         gap: 5px;
         justify-content: center;
         background: var(--color-accent);
+        border-radius: 15px;
+        padding: 20px 0 20px 0;
+        margin: auto;
+        margin-top: 25px;
+        width: 90%;
+        max-width: 1000px;
+		box-shadow: var(--shadow-std);
+    }
+
+    .errCode {
+        color: rgb(255, 54, 54);
+        font-weight: 600;
+        font-size: 2rem;
+    }
+
+    .reset-button-container {
+        padding: 20px 0 3px 0;
     }
 </style>