OwlBoard/owlboard-svelte
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update PIS Finder to use Cards rather than Islands

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/cards/Card.types.ts
View File

@@ -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}

2
src/lib/stores/version.ts
View File

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

103
src/routes/pis/+page.svelte
View File

@@ -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);