Add OwlBoard API Library

Add styling to UI Components

package-lock.json

@@ -8,11 +8,13 @@
 			"name": "web-pwa",
 			"version": "0.0.1",
 			"dependencies": {
+				"@owlboard/owlboard-ts": "^3.0.0",
 				"@tabler/icons-svelte": "^3.40.0"
 			},
 			"devDependencies": {
 				"@eslint/compat": "^2.0.2",
 				"@eslint/js": "^9.39.2",
+				"@owlboard/owlboard-ts": "^3.0.0",
 				"@playwright/test": "^1.58.1",
 				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.50.2",
@@ -778,6 +780,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",
+			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fowlboard-ts/-/3.0.0/owlboard-ts-3.0.0.tgz",
+			"integrity": "sha512-ycmBQ8JEwSFDLeRg7pb+g+umljHQ/vqrZ+BIs7qmwZyOVyuCjzny6keiHdhMALiNBDD9yU9DzJpqxry78rCIYg==",
+			"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",

package.json

@@ -19,6 +19,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^9.39.2",
+		"@owlboard/owlboard-ts": "^3.0.0",
 		"@playwright/test": "^1.58.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",
@@ -41,6 +42,7 @@
 		"vitest-browser-svelte": "^2.0.2"
 	},
 	"dependencies": {
-		"@tabler/icons-svelte": "^3.40.0"
+		"@tabler/icons-svelte": "^3.40.0",
+		"@owlboard/owlboard-ts": "^3.0.0"
 	}
 }

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/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
+		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, representing the 'Minerva Owl' sculpture trail in the city, with
+		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,46 @@
 <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';
+
+    let results = $state<PisObjects[]>([]);
+    let resultsLoaded = $state<boolean>(false);
+
+    function handleStartEndSearch(start: string, end: string) {
+        console.log(`PIS Search: ${start}-${end}`);
+        // Fetch API Results Here
+        resultsLoaded = true;
+    }
+
+    function handleCodeSearch(code: string) {
+        console.log(`PIS Search: ${code}`);
+        // Fetch API Results Here
+        resultsLoaded = true;
+    }
+
+    function clearResults() {
+        console.log('Clearing Results');
+        resultsLoaded = false;
+        results = [];
+    }
 </script>
 
-<div class="card-container">
+{#if !resultsLoaded}
-    <PisStartEndCard />
+    <div class="card-container">
-    <PisCode />
+        <PisStartEndCard onsearch={handleStartEndSearch} />
-</div>
+        <PisCode onsearch={handleCodeSearch} />
-
+    </div>
-<div class="result-container">
+{:else}
-
+    <div class="result-container">
-</div>
+        {#if !results.length}
+            <p class="no-results">No results found</p>
+        {:else}
+            <p class="no-results">Unable to load results</p>
+        {/if}
+        <Button onclick={clearResults}>Reset</Button>
+    </div>
+{/if}
 
 <style>
 	.card-container {
@@ -23,11 +53,21 @@
 	}
 
     .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: 0 0 20px 0;
+        margin: auto;
+        margin-top: 25px;
+        width: 90%;
+        max-width: 1000px;
+		box-shadow: var(--shadow-std);
     }
 </style>