Add PIS fetch logic

src/routes/pis/+page.svelte

@@ -5,33 +5,50 @@
     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);
+    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 {
-            results = await OwlClient.pis.getByStartEndCrs(start, end);
+            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) {
-                errorState = { status: 500, message: e.message };
+                console.log(e)
+                errorState = { status: 20, message: e.message };
             } else {
                 errorState = { status: 0, message: `Unknown Error: ${e.message}` };
             }
+        } finally {
+            resultsLoaded = true;
         }
-
-        resultsLoaded = true;
     }
 
-    function handleCodeSearch(code: string) {
+    async function handleCodeSearch(code: string) {
         console.log(`PIS Search: ${code}`);
-        // Fetch API Results Here
+        errorState = null;
-        resultsLoaded = true;
+        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() {
@@ -49,16 +66,21 @@
 {:else}
     <div class="result-container">
         {#if errorState}
-            <span class="errCode">{errorState.status}</span>
+            <span class="errCode">Error: {errorState.status}</span>
             <span class="errMsg">{errorState.message}</span>
         {:else}
-        {#if !results.length}
+            {#if results.length}
-            <p class="no-results">No results found</p>
+                <h2 class="result-title">{results.length} Result{#if results.length > 1}s{/if} found:</h2>
-        {:else}
+                {#each results as result}
-            <p class="no-results">Results Loaded - Display logic not present</p>
+                    <p>{JSON.stringify(result)}</p>
-        {/if}{/if}
+                {/each}
+            {:else}
+                <p class="no-results">No matching results</p>
+            {/if}
+        {/if}
+        <div class="reset-button-container">
         <Button onclick={clearResults}>Reset</Button>
-    </div>
+</div>    </div>
 {/if}
 
 <style>
@@ -82,11 +104,21 @@
         justify-content: center;
         background: var(--color-accent);
         border-radius: 15px;
-        padding: 0 0 20px 0;
+        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>