Update PIS Finder to use Cards rather than Islands

This commit is contained in:
Fred Boniface 2024-11-13 12:40:25 +00:00
parent 2bc6efc677
commit c9262d64c8
5 changed files with 88 additions and 43 deletions

18
package-lock.json generated
View File

@ -7,14 +7,12 @@
"": { "": {
"name": "owlboard-svelte", "name": "owlboard-svelte",
"version": "2024.03.2", "version": "2024.03.2",
"dependencies": {
"@tabler/icons-svelte": "^3.2.0"
},
"devDependencies": { "devDependencies": {
"@owlboard/ts-types": "^1.2.0", "@owlboard/ts-types": "^1.2.1",
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.2", "@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.5.0", "@sveltejs/kit": "^1.5.0",
"@tabler/icons-svelte": "^3.2.0",
"eslint": "^8.28.0", "eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.26.0", "eslint-plugin-svelte": "^2.26.0",
@ -589,10 +587,11 @@
} }
}, },
"node_modules/@owlboard/ts-types": { "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": { "node_modules/@polka/url": {
"version": "1.0.0-next.25", "version": "1.0.0-next.25",
@ -696,6 +695,7 @@
"version": "3.7.0", "version": "3.7.0",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.7.0.tgz", "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.7.0.tgz",
"integrity": "sha512-lJGIZLSWrPO6VygRUbaVvQjWgL2EaiBMD8e6leCYUQ8ZPO4LIzKMq358C8KlhXJcyNiRz1Io3YWoc/DNTcWqSg==", "integrity": "sha512-lJGIZLSWrPO6VygRUbaVvQjWgL2EaiBMD8e6leCYUQ8ZPO4LIzKMq358C8KlhXJcyNiRz1Io3YWoc/DNTcWqSg==",
"dev": true,
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/codecalm" "url": "https://github.com/sponsors/codecalm"
@ -705,6 +705,7 @@
"version": "3.7.0", "version": "3.7.0",
"resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.7.0.tgz", "resolved": "https://registry.npmjs.org/@tabler/icons-svelte/-/icons-svelte-3.7.0.tgz",
"integrity": "sha512-G8/SINJ4sRxICHJMbQaLH2FWJZPFns4N383wvw2LQ7lQUT8NhhsKjK/i6LxyLZtyEjmVyGaEKpBLdz3SWldgBA==", "integrity": "sha512-G8/SINJ4sRxICHJMbQaLH2FWJZPFns4N383wvw2LQ7lQUT8NhhsKjK/i6LxyLZtyEjmVyGaEKpBLdz3SWldgBA==",
"dev": true,
"dependencies": { "dependencies": {
"@tabler/icons": "3.7.0" "@tabler/icons": "3.7.0"
}, },
@ -2435,6 +2436,7 @@
"version": "3.59.2", "version": "3.59.2",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
"integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==", "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
"dev": true,
"engines": { "engines": {
"node": ">= 8" "node": ">= 8"
} }

View File

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

View File

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

View File

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

View File

@ -1,19 +1,20 @@
<script lang="ts"> <script lang="ts">
import Header from "$lib/navigation/header.svelte"; import Header from "$lib/navigation/header.svelte";
import Nav from "$lib/navigation/nav.svelte"; import Nav from "$lib/navigation/nav.svelte";
import Island from "$lib/islands/island.svelte";
import { uuid } from "$lib/stores/uuid"; import { uuid } from "$lib/stores/uuid";
import StylesToc from "$lib/train/styles-toc.svelte"; import StylesToc from "$lib/train/styles-toc.svelte";
import { getApiUrl } from "$lib/scripts/upstream"; import { getApiUrl } from "$lib/scripts/upstream";
import toast from "svelte-french-toast"; import toast from "svelte-french-toast";
import { onMount } from "svelte"; 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 title = "PIS Finder";
const variables = { title: "Results" };
let entryPIS = ""; let entryPIS = "";
let entryStartCRS = ""; let entryStartCRS = "";
let entryEndCRS = ""; let entryEndCRS = "";
let data = []; let data: OB_Pis_FullObject[] = [];
let error = false; let error = false;
let errMsg = "Unknown Error"; let errMsg = "Unknown Error";
@ -69,7 +70,6 @@
entryPIS = ""; entryPIS = "";
entryStartCRS = ""; entryStartCRS = "";
entryEndCRS = ""; entryEndCRS = "";
toast.success("Form reset");
} }
onMount(() => { onMount(() => {
@ -77,16 +77,57 @@
duration: 3000, 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> </script>
<Header {title} /> <Header {title} />
{#if error} {#if error}
<Island {variables}> <Card config={errorCard}>
<p class="error">{errMsg}</p> <p class="error">{errMsg}</p>
</Island> </Card>
{:else if data.length} {:else if data.length}
<Island {variables}> <Card config={resultsCard}>
<table> <table>
<tr> <tr>
<th class="toc">TOC</th> <th class="toc">TOC</th>
@ -101,27 +142,30 @@
</tr> </tr>
{/each} {/each}
</table> </table>
</Island> </Card>
<button id="reset" type="reset" on:click={reset}>Reset</button>
{:else} {: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}> <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 /> <br />
<button type="submit">Search</button> <button type="submit">Search</button>
<button type="reset">Clear</button>
</form> </form>
</Card>
<p class="label">Find By PIS Code:</p> <Card config={findByPisCodeCard}>
<form on:submit={findByPis}> <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 /> <br />
<button type="submit">Search</button> <button type="submit">Search</button>
</form> <button type="reset" >Clear</button>
</form>
</Card>
{/if} {/if}
<button id="reset" type="reset" on:click={reset}>Reset</button>
<Nav /> <Nav />
<style> <style>
@ -129,24 +173,20 @@
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
.important {
font-weight: 600;
}
.label {
font-weight: 600;
color: var(--main-text-color);
}
input { input {
border: none; border: none;
border-radius: 50px; border-radius: 50px;
font-family: urwgothic, sans-serif; font-family: urwgothic, sans-serif;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
width: 30%; width: 25%;
max-width: 250px; max-width: 250px;
height: 30px; height: 30px;
font-size: 16px; font-size: 16px;
margin-top: 10px;
margin-bottom: 15px; margin-bottom: 15px;
margin-left: 10px;
margin-right: 10px;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
} }
button { button {
@ -158,8 +198,9 @@
margin: 0px; margin: 0px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 15px;
height: 30px; height: 30px;
background-color: var(--island-bg-color); background-color: var(--island-button-color);
color: white; color: white;
font-size: 16px; font-size: 16px;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);