Update PIS Finder to use Cards rather than Islands
This commit is contained in:
parent
2bc6efc677
commit
c9262d64c8
18
package-lock.json
generated
18
package-lock.json
generated
@ -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",
|
||||
"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fts-types/-/1.2.0/ts-types-1.2.0.tgz",
|
||||
"integrity": "sha512-9xu7WJ+6eIiz6frd1O3/LGLrD4wAr16tI1Xd2WTkke8VONEm28f8T5M5J68pXPddHXOygXVkHUUFjAbTYrS+7Q==",
|
||||
"dev": true
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fts-types/-/1.2.1/ts-types-1.2.1.tgz",
|
||||
"integrity": "sha512-3iLFBPmLblQiksvGciPxmnZ+1kvywYDH0Qb8BIY33tZqmkY+/IccqoaxLICRrVPzDo87YkiMwsjorHloxlXJog==",
|
||||
"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"
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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}
|
||||
@ -1,2 +1,2 @@
|
||||
export const version: string = "2024.11.1";
|
||||
export const version: string = "2024.11.2";
|
||||
export const versionTag: string = "";
|
||||
|
||||
@ -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>
|
||||
<p>This feature now supports all GWR Services</p>
|
||||
<p class="label">Find By Start/End CRS:</p>
|
||||
<Card config={findByHeadcodeCard}>
|
||||
Find by Headcode from the homepage
|
||||
</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" autocomplete="off" placeholder="End" bind:value={entryEndCRS} />
|
||||
<input type="text" maxlength="3" pattern="^[A-Za-z]+$" autocomplete="off" placeholder="Start" required bind:value={entryStartCRS} />
|
||||
<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>
|
||||
|
||||
<p class="label">Find By PIS Code:</p>
|
||||
<form on:submit={findByPis}>
|
||||
<input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />
|
||||
<br />
|
||||
<button type="submit">Search</button>
|
||||
</form>
|
||||
|
||||
</Card>
|
||||
<Card config={findByPisCodeCard}>
|
||||
<form on:submit={findByPis}>
|
||||
<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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user