Update PIS Finder to use Cards rather than Islands

package-lock.json

@@ -7,14 +7,12 @@
         "": {
             "name": "owlboard-svelte",
             "version": "2024.03.2",
-            "dependencies": {
-                "@tabler/icons-svelte": "^3.2.0"
-            },
             "devDependencies": {
-                "@owlboard/ts-types": "^1.2.0",
+                "@owlboard/ts-types": "^1.2.1",
                 "@sveltejs/adapter-auto": "^2.0.0",
                 "@sveltejs/adapter-static": "^2.0.2",
                 "@sveltejs/kit": "^1.5.0",
+                "@tabler/icons-svelte": "^3.2.0",
                 "eslint": "^8.28.0",
                 "eslint-config-prettier": "^8.5.0",
                 "eslint-plugin-svelte": "^2.26.0",
@@ -589,10 +587,11 @@
             }
         },
         "node_modules/@owlboard/ts-types": {
-            "version": "1.2.0",
+            "version": "1.2.1",
-            "resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fts-types/-/1.2.0/ts-types-1.2.0.tgz",
+            "resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fts-types/-/1.2.1/ts-types-1.2.1.tgz",
-            "integrity": "sha512-9xu7WJ+6eIiz6frd1O3/LGLrD4wAr16tI1Xd2WTkke8VONEm28f8T5M5J68pXPddHXOygXVkHUUFjAbTYrS+7Q==",
+            "integrity": "sha512-3iLFBPmLblQiksvGciPxmnZ+1kvywYDH0Qb8BIY33tZqmkY+/IccqoaxLICRrVPzDo87YkiMwsjorHloxlXJog==",
-            "dev": true
+            "dev": true,
+            "license": "GPL-3.0-or-later"
         },
         "node_modules/@polka/url": {
             "version": "1.0.0-next.25",
@@ -696,6 +695,7 @@
             "version": "3.7.0",
             "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.7.0.tgz",
             "integrity": "sha512-lJGIZLSWrPO6VygRUbaVvQjWgL2EaiBMD8e6leCYUQ8ZPO4LIzKMq358C8KlhXJcyNiRz1Io3YWoc/DNTcWqSg==",
+            "dev": true,
             "funding": {
                 "type": "github",
                 "url": "https://github.com/sponsors/codecalm"
@@ -705,6 +705,7 @@
             "version": "3.7.0",
             "resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.7.0.tgz",
             "integrity": "sha512-G8/SINJ4sRxICHJMbQaLH2FWJZPFns4N383wvw2LQ7lQUT8NhhsKjK/i6LxyLZtyEjmVyGaEKpBLdz3SWldgBA==",
+            "dev": true,
             "dependencies": {
                 "@tabler/icons": "3.7.0"
             },
@@ -2435,6 +2436,7 @@
             "version": "3.59.2",
             "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
             "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
+            "dev": true,
             "engines": {
                 "node": ">= 8"
             }

package.json

@@ -13,7 +13,7 @@
         "format": "prettier --plugin-search-dir . --write ."
     },
     "devDependencies": {
-        "@owlboard/ts-types": "^1.2.0",
+        "@owlboard/ts-types": "^1.2.1",
         "@sveltejs/adapter-auto": "^2.0.0",
         "@sveltejs/adapter-static": "^2.0.2",
         "@sveltejs/kit": "^1.5.0",

src/lib/cards/Card.types.ts

@@ -1,4 +1,4 @@
-export interface CardConfig {
+interface CardConfig {
     title: string;
     showHelp: boolean;
     showRefresh: boolean;
@@ -7,7 +7,7 @@ export interface CardConfig {
     refreshing: boolean;
 }
 
-export interface LookupCardConfig {
+interface LookupCardConfig {
     title: string;
     formAction: string;
     maxLen: number;
@@ -15,3 +15,5 @@ export interface LookupCardConfig {
     helpText: string;
     fieldName: string;
 }
+
+export type {CardConfig, LookupCardConfig}

src/lib/stores/version.ts

@@ -1,2 +1,2 @@
-export const version: string = "2024.11.1";
+export const version: string = "2024.11.2";
 export const versionTag: string = "";

src/routes/pis/+page.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
     import Header from "$lib/navigation/header.svelte";
     import Nav from "$lib/navigation/nav.svelte";
-    import Island from "$lib/islands/island.svelte";
     import { uuid } from "$lib/stores/uuid";
     import StylesToc from "$lib/train/styles-toc.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
     import toast from "svelte-french-toast";
     import { onMount } from "svelte";
+    import type { OB_Pis_FullObject } from "@owlboard/ts-types";
+    import Card from "$lib/cards/Card.svelte";
+    import type { CardConfig } from "$lib/cards/Card.types";
 
     const title = "PIS Finder";
-    const variables = { title: "Results" };
     let entryPIS = "";
     let entryStartCRS = "";
     let entryEndCRS = "";
-    let data = [];
+    let data: OB_Pis_FullObject[] = [];
     let error = false;
     let errMsg = "Unknown Error";
 
@@ -69,7 +70,6 @@
         entryPIS = "";
         entryStartCRS = "";
         entryEndCRS = "";
-        toast.success("Form reset");
     }
 
     onMount(() => {
@@ -77,16 +77,57 @@
             duration: 3000,
         });
     });
+
+    const resultsCard: CardConfig = {
+        title: "Results",
+        showHelp: false,
+        helpText: "",
+        showRefresh: false,
+        onRefresh: ()=>{},
+        refreshing: false
+    }
+    const errorCard: CardConfig = {
+        title: "Error",
+        showHelp: true,
+        helpText: "There was an error searching for PIS Codes",
+        showRefresh: false,
+        onRefresh: () => {},
+        refreshing: false,
+    }
+    const findByHeadcodeCard: CardConfig = {
+        title: "Find by Headcode",
+        showHelp: true,
+        helpText: "Find by Headcode can be found on the homepage",
+        showRefresh: false,
+        onRefresh: () => {},
+        refreshing: false,
+    }
+    const findByStartEndCard: CardConfig = {
+        title: "Find by Start/End CRS",
+        showHelp: true,
+        helpText: "Enter a start and end CRS Code",
+        showRefresh: false,
+        onRefresh: () => {},
+        refreshing: false,
+    }
+    const findByPisCodeCard: CardConfig = {
+        title: "Find by PIS Code",
+        showHelp: true,
+        helpText: "Enter a PIS Code to see its details. (Four digits)",
+        showRefresh: false,
+        onRefresh: () => {},
+        refreshing: false,
+    }
 </script>
 
 <Header {title} />
 
 {#if error}
-    <Island {variables}>
+    <Card config={errorCard}>
         <p class="error">{errMsg}</p>
-    </Island>
+    </Card>
 {:else if data.length}
-    <Island {variables}>
+    <Card config={resultsCard}>
         <table>
             <tr>
                 <th class="toc">TOC</th>
@@ -101,27 +142,30 @@
                 </tr>
             {/each}
         </table>
-    </Island>
+    </Card>
+    <button id="reset" type="reset" on:click={reset}>Reset</button>
 {:else}
-    <p class="important">To search by headcode use the Train Finder on the homepage</p>
+    <Card config={findByHeadcodeCard}>
-    <p>This feature now supports all GWR Services</p>
+        Find by Headcode from the homepage
-    <p class="label">Find By Start/End CRS:</p>
+    </Card>
+    <Card config={findByStartEndCard}>
     <form on:submit={findByStartEnd}>
-        <input type="text" maxlength="3" autocomplete="off" placeholder="Start" bind:value={entryStartCRS} />
+        <input type="text" maxlength="3" pattern="^[A-Za-z]+$" autocomplete="off" placeholder="Start" required bind:value={entryStartCRS} />
-        <input type="text" maxlength="3" autocomplete="off" placeholder="End" bind:value={entryEndCRS} />
+        <input type="text" maxlength="3" pattern="^[A-Za-z]+$" autocomplete="off" placeholder="End" required bind:value={entryEndCRS} />
         <br />
         <button type="submit">Search</button>
+        <button type="reset">Clear</button>
     </form>
-
+    </Card>
-  <p class="label">Find By PIS Code:</p>
+    <Card config={findByPisCodeCard}>
       <form on:submit={findByPis}>
-    <input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />
+        <input type="text" maxlength="4" pattern="^\d+$" autocomplete="off" placeholder="PIS" required bind:value={entryPIS} />
         <br />
         <button type="submit">Search</button>
+        <button type="reset" >Clear</button>
       </form>
-
+    </Card>
 {/if}
-<button id="reset" type="reset" on:click={reset}>Reset</button>
 <Nav />
 
 <style>
@@ -129,24 +173,20 @@
         margin-left: 10px;
         margin-right: 10px;
     }
-    .important {
-        font-weight: 600;
-    }
-    .label {
-        font-weight: 600;
-        color: var(--main-text-color);
-    }
     input {
         border: none;
         border-radius: 50px;
         font-family: urwgothic, sans-serif;
         text-align: center;
         text-transform: uppercase;
-        width: 30%;
+        width: 25%;
         max-width: 250px;
         height: 30px;
         font-size: 16px;
+        margin-top: 10px;
         margin-bottom: 15px;
+        margin-left: 10px;
+        margin-right: 10px;
         box-shadow: var(--box-shadow);
     }
     button {
@@ -158,8 +198,9 @@
         margin: 0px;
         margin-left: 10px;
         margin-right: 10px;
+        margin-bottom: 15px;
         height: 30px;
-        background-color: var(--island-bg-color);
+        background-color: var(--island-button-color);
         color: white;
         font-size: 16px;
         box-shadow: var(--box-shadow);