Add PIS Logic

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/pis/+page.svelte

@@ -3,13 +3,28 @@
     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: message} | null>(null);
 
-    function handleStartEndSearch(start: string, end: string) {
+    async function handleStartEndSearch(start: string, end: string): Promise<void> {
         console.log(`PIS Search: ${start}-${end}`);
-        // Fetch API Results Here
+        errorState = null;
+
+        try {
+            results = await OwlClient.pis.getByStartEndCrs(start, end);
+        } catch (e) {
+            if (e instanceof ValidationError) {
+                errorState = { status: 400, message: e.message };
+            } else if (e instanceof ApiError) {
+                errorState = { status: 500, message: e.message };
+            } else {
+                errorState = { status: 0, message: `Unknown Error: ${e.message}` };
+            }
+        }
+
         resultsLoaded = true;
     }
 
@@ -33,11 +48,15 @@
     </div>
 {:else}
     <div class="result-container">
+        {#if errorState}
+            <span class="errCode">{errorState.status}</span>
+            <span class="errMsg">{errorState.message}</span>
+        {:else}
         {#if !results.length}
             <p class="no-results">No results found</p>
         {:else}
-            <p class="no-results">Unable to load results</p>
-        {/if}
+            <p class="no-results">Results Loaded - Display logic not present</p>
+        {/if}{/if}
         <Button onclick={clearResults}>Reset</Button>
     </div>
 {/if}