Adjust button minimum sizing to improve presentation of quick-links, while ensuring adequate touch target. Number of displayed quicklinks reduced from 9 to six, for improved presentation.

Reorganise colouring of schedule times, add 'delay' column (E, RT, D). Including reusable function to assist.
Tidy up train service component, add loading state, convert tiploc to name... etc.
2026-05-03 20:59:03 +01:00 · 2026-05-03 20:58:22 +01:00 · 2026-05-03 11:45:07 +01:00 · 2026-05-03 09:03:45 +01:00
16 changed files with 636 additions and 340 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
 			"name": "web-pwa",
 			"version": "0.0.1",
 			"dependencies": {
-				"@owlboard/owlboard-ts": "^3.0.0-dev.20260503T0051",
+				"@owlboard/owlboard-ts": "^3.0.0-dev.20260503t0947",
 				"@tabler/icons-svelte": "^3.40.0"
 			},
 			"devDependencies": {
@@ -786,12 +786,12 @@
 			"license": "MIT"
 		},
 		"node_modules/@owlboard/owlboard-ts": {
-			"version": "3.0.0-dev.20260503T0051",
-			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fowlboard-ts/-/3.0.0-dev.20260503T0051/owlboard-ts-3.0.0-dev.20260503t0051.tgz",
-			"integrity": "sha512-YPW89izHnbQLX2rfLaPM1t8x77ajGW61Up/m4NDkEjRyMV1z/mAGj40wj7yfkwoXr8AEgVWlqfpWeR5JDxqrBQ==",
+			"version": "3.0.0-dev.20260503t0947",
+			"resolved": "https://git.fjla.uk/api/packages/OwlBoard/npm/%40owlboard%2Fowlboard-ts/-/3.0.0-dev.20260503t0947/owlboard-ts-3.0.0-dev.20260503t0947.tgz",
+			"integrity": "sha512-t6wcsq53ZM9hKphn9QClN4fUjIF53RbQ/oOh1pRQ6vpxhGVuh3xf46wPR8h67lLh0UWUEolYyDCA4TTz3a56fw==",
 			"license": "GPL-3.0",
 			"dependencies": {
-				"@owlboard/api-schema-types": "^3.0.3-alpha8",
+				"@owlboard/api-schema-types": "^3.0.3-alpha10",
 				"install": "^0.13.0",
 				"latlon-geohash": "^2.0.0",
 				"npm": "^11.13.0"
@@ -1827,6 +1827,7 @@
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"color-convert": "^2.0.1"
@@ -1877,12 +1878,14 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.13",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
 			"integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"balanced-match": "^1.0.0",
@@ -1913,6 +1916,7 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
 			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"ansi-styles": "^4.1.0",
@@ -1954,6 +1958,7 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"color-name": "~1.1.4"
@@ -1966,12 +1971,14 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/cookie": {
@@ -2515,6 +2522,7 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
@@ -2602,6 +2610,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/js-yaml": {
@@ -2737,6 +2746,7 @@
 			"version": "3.1.5",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
 			"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+			"dev": true,
 			"license": "ISC",
 			"dependencies": {
 				"brace-expansion": "^1.1.7"
@@ -2769,6 +2779,7 @@
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
@@ -5006,6 +5017,7 @@
 			"version": "7.7.4",
 			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
 			"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+			"dev": true,
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
@@ -5107,6 +5119,7 @@
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"has-flag": "^4.0.0"
@@ -5547,6 +5560,7 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
 			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+			"dev": true,
 			"license": "ISC",
 			"dependencies": {
 				"isexe": "^2.0.0"
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
 		"vitest-browser-svelte": "^2.0.2"
 	},
 	"dependencies": {
-		"@owlboard/owlboard-ts": "^3.0.0-dev.20260503T0051",
+		"@owlboard/owlboard-ts": "^3.0.0-dev.20260503t0947",
 		"@tabler/icons-svelte": "^3.40.0"
 	}
 }
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -39,7 +39,7 @@
 		align-items: center;
 		justify-content: center;
 		min-height: 48px;
-		min-width: 98px;
+		min-width: 48px;
 		appearance: none;
 		background: transparent;
 		border: none;
@@ -55,7 +55,7 @@
 		width: fit-content;
 		flex-shrink: 0;
 		padding: 0 1.2rem;
-		min-width: 90px;
+		min-width: 40px;
 		height: 36px;
 		border-radius: 20px;
 		border: none;
--- a/src/lib/components/ui/Loading.svelte
+++ b/src/lib/components/ui/Loading.svelte
@@ -1,59 +1,66 @@
 <script lang="ts">
-    let {
-        message = "Loading..."
-    } = $props();
+	let { message = 'Loading...' } = $props();
 </script>

 <div class="loading-state">
-    <div class="track">
-        <div class="shuttle"></div>
-    </div>
-    <p>{message}</p>
+	<div class="track">
+		<div class="shuttle"></div>
+	</div>
+	<p>{message}</p>
 </div>

 <style>
-    .loading-state {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 4rem 2rem;
-        width: 75%;
-        margin: auto;
-    }
+	.loading-state {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 4rem 2rem;
+		width: 75%;
+		margin: auto;
+	}

-    .track {
-        width: 160px;
-        height: 3px;
-        background-color: var(--color-title);
-        border-radius: 4px;
-        position: relative;
-        overflow: hidden;
-    }
+	.track {
+		width: 160px;
+		height: 3px;
+		background-color: var(--color-title);
+		border-radius: 4px;
+		position: relative;
+		overflow: hidden;
+	}

-    .shuttle {
-        position: absolute;
-        width: 50%;
-        height: 100%;
-        border-radius: 4px;
-        background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
-        animation: data-travel 1.6s infinite ease-in-out;
-    }
+	.shuttle {
+		position: absolute;
+		width: 50%;
+		height: 100%;
+		border-radius: 4px;
+		background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
+		animation: data-travel 1.6s infinite ease-in-out;
+	}

-    p {
-        font-family: 'URW Gothic', sans-serif;
-        letter-spacing: 0.15em;
-        color: var(--color-title);
-        animation: pulse 2s infinite ease-in-out;
-    }
+	p {
+		font-family: 'URW Gothic', sans-serif;
+		letter-spacing: 0.15em;
+		color: var(--color-title);
+		animation: pulse 2s infinite ease-in-out;
+	}

-    @keyframes data-travel {
-        0% { left: -50%; }
-        100% { left: 100%; }
-    }
+	@keyframes data-travel {
+		0% {
+			left: -50%;
+		}
+		100% {
+			left: 100%;
+		}
+	}

-    @keyframes pulse {
-        0%, 100% {opacity: 1;}
-        50% {opacity: 0.4;}
-    }
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.4;
+		}
+	}
 </style>
--- a/src/lib/components/ui/NoResults.svelte
+++ b/src/lib/components/ui/NoResults.svelte
@@ -1,55 +1,55 @@
 <script lang="ts">
 	import noResult from '$lib/assets/img/no-data.svg';
-    import Button from '$lib/components/ui/Button.svelte';
-    let { title = "No results", message = "Try checking your search term"} = $props();
+	import Button from '$lib/components/ui/Button.svelte';
+	let { title = 'No results', message = 'Try checking your search term' } = $props();
 </script>

 <div class="no-results-state">
-    <img src={noResult} class="image" height="200" width="200" alt="" role="presentation">
-    <h3>{title}</h3>
-    <p>{message}</p>
-    <div class="btn-container">
-    <Button
-        type="button"
-        onclick={() => history.length > 1 ? history.back() : window.location.href = '/'}
-        color="accent"
-    >
-        Go back
-    </Button>
-    </div>
+	<img src={noResult} class="image" height="200" width="200" alt="" role="presentation" />
+	<h3>{title}</h3>
+	<p>{message}</p>
+	<div class="btn-container">
+		<Button
+			type="button"
+			onclick={() => (history.length > 1 ? history.back() : (window.location.href = '/'))}
+			color="accent"
+		>
+			Go back
+		</Button>
+	</div>
 </div>

 <style>
-    .no-results-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        min-height: 400px;
-        padding: 5rem;
-        text-align: center;
-        box-sizing: border-box;
-        font-family: 'URW-Gothic', sans-serif;
-    }
+	.no-results-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		min-height: 400px;
+		padding: 5rem;
+		text-align: center;
+		box-sizing: border-box;
+		font-family: 'URW-Gothic', sans-serif;
+	}

-    .image {
-        margin-bottom: 1.95rem;
-        max-width: 90%;
-        height: auto;
-    }
+	.image {
+		margin-bottom: 1.95rem;
+		max-width: 90%;
+		height: auto;
+	}

-    h3 {
-        margin: 0 0 0.5rem 0;
-    }
+	h3 {
+		margin: 0 0 0.5rem 0;
+	}

-    p {
-        margin: 0;
-        opacity: 0.8;
-    }
+	p {
+		margin: 0;
+		opacity: 0.8;
+	}

-    .btn-container {
-        margin-top: 20px;
-    }
+	.btn-container {
+		margin-top: 20px;
+	}
 </style>
--- a/src/lib/components/ui/TiplocConverter.svelte
+++ b/src/lib/components/ui/TiplocConverter.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { LOCATIONS } from '$lib/locations-object.svelte';
+
+	let { code } = $props<{ code: string | null | undefined }>();
+
+	const location = $derived(LOCATIONS.getName(code));
+	const displayName = $derived(location?.n ?? code ?? '');
+</script>
+
+{displayName}
--- a/src/lib/components/ui/TocStyle.svelte
+++ b/src/lib/components/ui/TocStyle.svelte
@@ -8,7 +8,6 @@
 	let code = $derived(toc.toUpperCase());
 </script>

-
 <!-- SPACE MONO for the font? -->
 <div class="toc-container {code}">
 	{code}
@@ -25,7 +24,7 @@
 		font-size: 1.1rem;
 		background-color: #333;
 		color: #fff;
-		font-family:'Courier New', Courier, monospace;
+		font-family: 'Courier New', Courier, monospace;
 	}

 	.AW {
--- a/src/lib/components/ui/TrainService.svelte
+++ b/src/lib/components/ui/TrainService.svelte
@@ -1,140 +1,372 @@
 <script lang="ts">
-    import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
-    	import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
-import { slide } from 'svelte/transition';
-import { quintOut} from 'svelte/easing';
-import { formatUkTime } from '$lib/utils/time';
-    import TocStyle from '$lib/components/ui/TocStyle.svelte';
+	import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
+	import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import { formatUkTime, calculateDelay } from '$lib/utils/time';
+	import TocStyle from '$lib/components/ui/TocStyle.svelte';
+	import TiplocConverter from '$lib/components/ui/TiplocConverter.svelte';
+	import { IconCircleArrowDownFilled } from '@tabler/icons-svelte';
+	let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
+	let isExpanded = $state(false);
+	let loadingDetails = $state(false);
+	let loadingDetailsError = $state(false);
+	let loadingDetailsErrorMsg = $state('');
+	let details = $state(null);

-    let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse} = $props();
-    let isExpanded = $state(false);
-    let loadingDetails = $state(false)
-    let details = $state(null);
+	const toggleExpand = async (rid: string) => {
+		if (isExpanded) {
+			isExpanded = false;
+			return;
+		}

-    const toggleExpand = async (rid: string) => {
-        if (isExpanded) {
-            isExpanded = false;
-            return;
-        }
+		loadingDetails = true;
+		try {
+			const result = await OwlClient.trains.getByRid(service.r);
+			details = result.data;
+			isExpanded = true;
+		} catch (e) {
+			console.Error('Failed to load train details');
+			loadingDetailsError = true;
+			loadingDetailsErrorMsg = e.message;
+		} finally {
+			loadingDetails = false;
+		}
+	};

-        if (details) {
-            isExpanded = true;
-            return;
-        }
+	let OriginDepartureSummary = $derived(formatUkTime(service.od));

-        loadingDetails = true;
-        try {
-            const result = await OwlClient.trains.getByRid(service.r)
-            details = result.data;
-            isExpanded = true;
-        } catch (e) {
-            console.Error("Failde to load train details")
-        } finally {
-            loading = false;
-        }
+	async function loadDetails(rid: string) {
+		if (details) return;
+		loadingDetails = true;

-    }
+		const result = await OwlClient.trains.getByRid(service.r);
+		details = result.data;
+		loadingDetails = false;
+	}

-
-    let OriginDepartureSummary = $derived(formatUkTime(service.od));
-
-    async function loadDetails(rid: string) {
-        if (details) return;
-        loadingDetails = true;
-
-        const result = await OwlClient.trains.getByRid(service.r)
-        details = result.data;
-        loadingDetails = false;
-    }
+	const estClass = (act, est) => (!act && est ? 'est' : 'act');
 </script>

 <div class="train-service">
-    <button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}>
-        <div class="operator-summary">
-            <TocStyle toc={service.o} />
-        </div>
-        <div class="main-text-summary">
-        <div class="time-summary">
-            {OriginDepartureSummary}
-        </div>
-        <div class="location-summary">
-            {service.ot}    
-        </div>
-        <div class="location-summary to-summary">
-            to    
-        </div>
-        <div class="location-summary">
-            {service.dt}    
-        </div>
-        <!-- Add arrow icon to signify drop-down -->
-         <!-- ADD LOADING STATE -->
-    </div>
-    </button>
-            {#if isExpanded && details}
-            <div  transition:slide={{duration: 800, easing: quintOut}} class="detauls-content">
-                <!-- Here goes the data formatting! -->
-                {JSON.stringify(details)}
-            </div>
-        {/if}
+	<button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}>
+		{#if loadingDetails}
+			<div class="loading-state"><div class="loading-spinner"></div></div>
+		{/if}
+		<div class="operator-summary">
+			<TocStyle toc={service.o} />
+		</div>
+		<div class="main-text-summary">
+			<div class="time-summary">
+				{OriginDepartureSummary}
+			</div>
+			<div class="location-summary" class:can-all={service.ct}>
+				{service.ot}
+			</div>
+			<div class="location-summary to-summary" class:can-all={service.ct}>to</div>
+			<div class="location-summary" class:can-all={service.ct}>
+				{service.dt}
+			</div>
+			<div class="arrow" class:expanded={isExpanded}>
+				<IconCircleArrowDownFilled color={"var(--color-title)"} size={25} />
+			</div>
+		</div>
+	</button>
+	{#if isExpanded && details}
+		<div class="box-ext" transition:slide={{ duration: 800, easing: quintOut }}>
+			<!-- Here goes the data formatting! -->
+			<div class="detail-head">
+				<!-- Cancellation Section -->
+				{#if service.ct}
+					<span class="cancel-reason"> Cancelled throughout </span>
+				{/if}
+				{#if details.header.cr}
+					<span class="cancel-reason">
+						{details.header.cr}
+						{#if details.header.cl}
+							{details.header.cn ? ' near ' : ' at '}
+							<TiplocConverter code={details.header.cl} />
+							<!-- CONSIDER WRAPPING IN A COMPONENT THAT CONVERTS TO THE LOCATION NAME RATHER THAN TIPLOC -->
+						{/if}
+					</span>
+				{/if}
+
+				<!-- Delay Section -->
+				{#if details.header.dr}
+					<span class="delay-reason">
+						{details.header.dr}
+						{#if details.header.dl}
+							{details.header.dn ? ' near ' : ' at '}
+							{details.header.dl}
+						{/if}
+					</span>
+				{/if}
+				<div class="pis-detail">
+					<!-- PIS Data Here -->
+				</div>
+			</div>
+			<div class="schedule-table-container">
+				<table class="schedule-table">
+					<thead>
+						<tr>
+							<th colspan="2"></th>
+							<th colspan="2">Arr</th>
+							<th colspan="2">Dep</th>
+						</tr>
+						<tr>
+							<th>Location</th>
+							<th>Plat</th>
+							<th>Sch</th>
+							<th><span class="tpl-cell">Est</span>/Act</th>
+							<th>Sch</th>
+							<th><span class="tpl-cell">Est</span>/Act</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each details.locations as loc}
+							<tr class:pass-loc={loc.r === 'PASS'} class:can-loc={loc.can}>
+								<td class="tpl-cell">{loc.t}</td>
+								<td class="plat-cell">{loc.p}</td>
+								{#if loc.r == 'PASS'}
+									<td class="time-cell" colspan="2">Pass</td>
+									<td class="time-cell">{formatUkTime(loc.wtp)}</td>
+									<td class="time-cell {estClass(loc.atp, loc.etp)}"
+										>{formatUkTime(loc.atp || loc.etp || '--')}</td
+									>
+								{:else}
+									<td class="time-cell">{formatUkTime(loc.pta || loc.wta || '--')}</td>
+									<td class="time-cell {estClass(loc.ata, loc.eta)}"
+										>{formatUkTime(loc.ata || loc.eta || '--')}</td
+									>
+									<td class="time-cell">{formatUkTime(loc.ptd || loc.wtd || '--')}</td>
+									<td class="time-cell {estClass(loc.atd, loc.etd)}"
+										>{formatUkTime(loc.atd || loc.etd || '--')}</td
+									>
+								{/if}
+								{#if loc}
+								{@const delay = calculateDelay(loc)}
+								<td class="delay-{delay.type}">{delay.val}</td>
+								{/if}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	{/if}
 </div>

 <style>
-    .train-service {
-        background-color: var(--color-accent);
-        width: 100%;
-        border-radius: 4px;
-        box-shadow: var(--shadow-std);
-        overflow: hidden;
-        font-family: 'URW Gothic', sans-serif;
-        transition: 0.2s all;
-        filter: brightness(1.1);
-    }
+	.train-service {
+		background-color: var(--color-accent);
+		width: 100%;
+		border-radius: 4px;
+		box-shadow: var(--shadow-std);
+		overflow: hidden;
+		font-family: 'URW Gothic', sans-serif;
+		transition: 0.2s all;
+		filter: brightness(1.1);
+	}

-    .train-service:hover {
-        filter:brightness(1.5);
-    }
+	@media (hover: hover) {
+		.train-service:hover {
+			filter: brightness(1.2);
+		}
+	}

-    .summary {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        padding: 0.75rem;
-        min-height: 48px;
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        text-align: left;
-        gap: 0.5rem;
-    }
+	.summary {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 0.75rem;
+		min-height: 48px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		text-align: left;
+		gap: 0.5rem;
+	}

-    .operator-summary {
-        flex-shrink: 0;
-    }
+	.loading-state {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(5px);
+		width: 100%;
+		height: 100%;
+		font-family: 'URW Gothic', sans-serif;
+		font-size: 1rem;
+		color: var(--color-title);
+	}

-    .main-text-summary {
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        gap: 0.5rem;
-    }
+	.loading-spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid rgba(0, 0, 0, 0.1);
+		border-top-color: #fff;
+		border-radius: 50%;
+		animation: load-spin 0.8s linear infinite;
+		z-index: 3;
+	}

-    .time-summary {
-        font-size: 1.1rem;
-        font-weight: 700;
-        color: var(--color-brand);
-    }
+	@keyframes load-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}

-    .location-summary {
-        text-transform: uppercase;
-        font-weight: 500;
-        font-size: 1.1rem;
-        letter-spacing: 0.02em;
-        color: var(--color-title);
-    }
+	.operator-summary {
+		flex-shrink: 0;
+	}

-    .to-summary {
-        font-size: 0.8rem;
-        font-style: oblique;
-        text-transform: lowercase;
-    }
-    </style>
+	.main-text-summary {
+		display: flex;
+		flex-grow: 1;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.time-summary {
+		font-size: 1.1rem;
+		font-weight: 700;
+		color: var(--color-brand);
+	}
+
+	.location-summary {
+		text-transform: uppercase;
+		font-weight: 500;
+		font-size: 1.1rem;
+		letter-spacing: 0.02em;
+		color: var(--color-title);
+	}
+
+	.to-summary {
+		font-size: 0.8rem;
+		font-style: oblique;
+		text-transform: lowercase;
+	}
+
+	.can-all {
+		color: red;
+	}
+
+	.arrow {
+		padding: 0;
+		margin: 0;
+		margin-left: auto;
+		height: 25px;
+		transition: all 0.3s;
+	}
+
+	.expanded {
+		transform: rotateX(180deg);
+	}
+
+	.box-ext {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.detail-head {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+		text-align: center;
+		width: 100%;
+	}
+
+	.cancel-reason,
+	.delay-reason {
+		display: block;
+		padding: 4px 8px;
+		width: 95%;
+	}
+
+	.cancel-reason {
+		color: rgb(255, 0, 0);
+		font-weight: 500;
+		animation: cancel-pulse 2s ease-in-out infinite;
+	}
+
+	.delay-reason {
+		color: rgb(255, 119, 0);
+		font-weight: 500;
+		animation: cancel-pulse 2s ease-in-out infinite;
+	}
+
+	@keyframes cancel-pulse {
+		0% {
+			opacity: 1;
+			text-shadow: 0 0 0px rgb(255, 0, 0);
+		}
+		50% {
+			opacity: 0.8;
+			text-shadow: 0 0 5px rgba(255, 0, 0, 0.2);
+		}
+		100% {
+			opacity: 1;
+			text-shadow: 0 0 0px rgb(255, 0, 0);
+		}
+	}
+
+	.schedule-table-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+	}
+
+	.schedule-table {
+		width: 95%;
+		max-width: 375px;
+		padding-bottom: 1rem;
+	}
+
+	th,
+	td {
+		text-align: center;
+	}
+
+	.tpl-cell {
+		color: yellow;
+		text-align: left;
+	}
+
+	.pass-loc {
+		color: var(--color-title);
+		opacity: 0.75;
+		font-style: oblique;
+	}
+
+	.can-loc {
+		text-decoration: line-through;
+	}
+
+	.est {
+		color: yellow;
+		opacity: 0.5;
+	}
+
+	.act {
+		color: white;
+	}
+
+	.delay-late {
+		color: red;
+	}
+
+	.delay-early {
+		color: blue;
+	}
+</style>
--- a/src/lib/components/ui/cards/HeadcodeSearchCard.svelte
+++ b/src/lib/components/ui/cards/HeadcodeSearchCard.svelte
@@ -1,35 +1,27 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+	import { goto } from '$app/navigation';
 	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 headcode = $state('');

-    function handleSearch(e: SubmitEvent) {
-        e.preventDefault();
-        if (!headcode.trim()) return;
+	function handleSearch(e: SubmitEvent) {
+		e.preventDefault();
+		if (!headcode.trim()) return;

-        const searchParams = new URLSearchParams();
-        searchParams.append('h', headcode.trim().toUpperCase());
+		const searchParams = new URLSearchParams();
+		searchParams.append('h', headcode.trim().toUpperCase());

-        goto(`/trains?${searchParams.toString()}`)
-    }
+		goto(`/trains?${searchParams.toString()}`);
+	}
 </script>

 <BaseCard header={'Search Train & PIS'}>
-
-        <form onsubmit={handleSearch} class="card-content">
-		<Textbox 
-            placeholder="Enter Headcode"
-            bind:value={headcode}
-            maxLength={4}
-        />
-        <Button
-            type="submit"
-            disabled={!headcode}
-        >Search</Button>
-</form>
+	<form onsubmit={handleSearch} class="card-content">
+		<Textbox placeholder="Enter Headcode" bind:value={headcode} maxLength={4} />
+		<Button type="submit" disabled={!headcode}>Search</Button>
+	</form>
 </BaseCard>

 <style>
@@ -38,8 +30,8 @@
 		width: 90%;
 		margin: auto;
 		padding: 10px 0 0 0;
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
 	}
 </style>
--- a/src/lib/geohash.svelte.ts
+++ b/src/lib/geohash.svelte.ts
@@ -10,13 +10,13 @@ class NearestStationsState {
 	private initGeoConfig: PositionOptions = {
 		enableHighAccuracy: false,
 		timeout: 500,
-		maximumAge: Infinity,
-	}
+		maximumAge: Infinity
+	};

 	private geoConfig: PositionOptions = {
 		enableHighAccuracy: false,
 		timeout: 20000,
-		maximumAge: 30000,
+		maximumAge: 30000
 	};

 	constructor() {
--- a/src/lib/locations-object.svelte.ts
+++ b/src/lib/locations-object.svelte.ts
@@ -28,6 +28,20 @@ class LocationStore {
 			return loc.t === query || loc.c === query;
 		});
 	}
+
+	getName(code: string | number | null | undefined): ApiLocationFilter.LocationFilterObject | null {
+		try {
+			if (!code) return null;
+
+			const query = String(code).toUpperCase().trim();
+
+			const match = this.data.find((loc) => loc.t === query || loc.c === query);
+			return match ?? null;
+		} catch (e) {
+			console.error('Error finding location object: ', e);
+			return null;
+		}
+	}
 }

 export const LOCATIONS = new LocationStore();
--- a/src/lib/quick-links.svelte.ts
+++ b/src/lib/quick-links.svelte.ts
@@ -4,7 +4,7 @@ export interface QuickLink {
 	lastAccessed: number;
 }

-const RETURNED_LENGTH: number = 9;
+const RETURNED_LENGTH: number = 6;
 const MAX_SCORE: number = 50;
 const MAX_ENTRIES: number = RETURNED_LENGTH * 4;

--- a/src/lib/utils/time.ts
+++ b/src/lib/utils/time.ts
@@ -1,17 +1,49 @@
+import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
 /**
 * Converts ISO/JSON time to UK-formatted HH:MM string.
 * Ensures Europe/London timezone irrespective of browser timezone.
 */
 export function formatUkTime(dateStr: string | Date | undefined): string {
-    if (!dateStr) return '--:--';
-    const date = typeof dateStr === 'string' ? new Date(dateStr): dateStr;
+	if (!dateStr) return '--:--';
+	const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;

-    if (isNaN(date.getTime())) return '--:--';
+	if (isNaN(date.getTime())) return '--:--';

-    return date.toLocaleTimeString('en-GB', {
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false,
-        timeZone: 'Europe/London',
-    });
+	return date.toLocaleTimeString('en-GB', {
+		hour: '2-digit',
+		minute: '2-digit',
+		hour12: false,
+		timeZone: 'Europe/London'
+	});
+}
+
+/**
+ * Calculates a 'delay' value, in the formats:
+ * RT, 1E, 7L, etc.
+ * @param 'Schedule Location' object
+ * @returns Delay string for departure boards
+ */
+export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {val: string, type: string} {
+const pairs = [
+        { actual: loc.atd, sched: loc.ptd ?? loc.wtd },
+        { actual: loc.ata, sched: loc.pta ?? loc.wta },
+        { actual: loc.atp, sched: loc.wtp }
+    ];
+
+    const match = pairs.find(p => p.actual && p.sched);
+
+    if (!match || !match.actual || !match.sched) return {val: '', type: 'none'};
+
+    const diffMinutes = Math.round(
+        (Date.parse(match.actual) - Date.parse(match.sched)) / 60000
+    );
+
+    if (diffMinutes === 0) return {val: 'RT', type: 'ontime'};
+
+    const absDiff = Math.abs(diffMinutes);
+    if (diffMinutes > 0) {
+        return { val: `${absDiff}L`, type: 'late' };
+    } else {
+        return { val: `${absDiff}E`, type: 'early' };
+    }
 }
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -8,12 +8,12 @@

 <div class="error-wrapper">
 	{#if page.status == 404}
-	<!-- Warning no data image -->
-	<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
+		<!-- Warning no data image -->
+		<img class="err-img" src={noResult} alt="" role="presentation" width="200" height="200" />
 	{:else}
-	<!-- STOP Error image -->
-	<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
-{/if}
+		<!-- STOP Error image -->
+		<img class="err-img" src={stopErr} alt="" role="presentation" width="150" height="210" />
+	{/if}
 	<h2 class="label">{page.status}</h2>

 	<p class="error-message">
--- a/src/routes/trains/+page.svelte
+++ b/src/routes/trains/+page.svelte
@@ -1,34 +1,32 @@
 <script lang="ts">
-    import NoResults from '$lib/components/ui/NoResults.svelte';
+	import NoResults from '$lib/components/ui/NoResults.svelte';
 	import TrainService from '$lib/components/ui/TrainService.svelte';
-    let { data } = $props();
-
+	let { data } = $props();
 </script>

-
-
+<h6 style="text-align:center;width=100%;margin:auto;padding-top:1rem;font-size:1rem;">
+	DateSelector
+</h6>
 {#if data.results.length === 0}
-    <NoResults 
-        message={"No trains found on this date with this headcode."}
-    />
+	<NoResults message={'No trains found on this date with this headcode.'} />
 {:else}
-<div class="result-boxes">
-    {#each data.results as service (service.r)}
-        <TrainService {service} />
-    {/each}
-    </div>
+	<div class="result-boxes">
+		{#each data.results as service (service.r)}
+			<TrainService {service} />
+		{/each}
+	</div>
 {/if}

 <style>
-    .result-boxes {
-        width: 95%;
-        margin: auto;
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 1rem;
-    }
+	.result-boxes {
+		width: 95%;
+		margin: auto;
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		gap: 1rem;
+	}
 </style>
--- a/src/routes/trains/+page.ts
+++ b/src/routes/trains/+page.ts
@@ -4,61 +4,59 @@ import type { PageLoad } from './$types';
 import { error } from '@sveltejs/kit';

 export const load: PageLoad = async ({ url }) => {
-    const headcode = url.searchParams.get('h');
-    let dateParam = url.searchParams.get('d');
-    const toc = url.searchParams.get('t') || "";
+	const headcode = url.searchParams.get('h');
+	let dateParam = url.searchParams.get('d');
+	const toc = url.searchParams.get('t') || '';

-    const date: string | Date = (dateParam === "" || dateParam === null)
-        ? new Date()
-        : dateParam;
+	const date: string | Date = dateParam === '' || dateParam === null ? new Date() : dateParam;

-    if (!headcode) {
-        throw error(400, {
-            message: 'Headcode not provided',
-            owlCode: 'INVALID_DATA'
-        });
-    }
+	if (!headcode) {
+		throw error(400, {
+			message: 'Headcode not provided',
+			owlCode: 'INVALID_DATA'
+		});
+	}

-    // Declared outside of the try so that it can be used in both the try and catch blocks
-    let results: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse[]
+	// Declared outside of the try so that it can be used in both the try and catch blocks
+	let results: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse[];

-    try {
-        const response = await OwlClient.trains.getByHeadcode(headcode, date, toc);
+	try {
+		const response = await OwlClient.trains.getByHeadcode(headcode, date, toc);

-        results = (response.data);
-        return {
-            title: headcode.toUpperCase(),
-            results: results,
-        }
-    } catch (e: unknown) {
-        if (e instanceof ValidationError) {
-            throw error(400, {
-                message: e.message,
-                owlCode: 'VALIDATION_ERROR',
-            });
-        } else if (e instanceof ApiError) {
-            // Check if NO_RESULTS error, and return empty array if that is the case
-            if (e.code === "NOT_FOUND") {
-                return {
-                    title: headcode.toUpperCase(),
-                    results: []
-                }
-            } else {
-                throw error(e.status, {
-                    message: e.message,
-                    owlCode: 'API_ERROR',
-                });
-            }
-        } else if (e instanceof Error) {
-            throw error(500, {
-                message: e.message,
-                owlCode: 'GEN_ERROR',
-            })
-        } else {
-            throw error(500, {
-                message: "Unexpected error",
-                owlCode: "UNKNOWN_ERR",
-            })
-        }
-    }
-}
+		results = response.data;
+		return {
+			title: headcode.toUpperCase(),
+			results: results
+		};
+	} catch (e: unknown) {
+		if (e instanceof ValidationError) {
+			throw error(400, {
+				message: e.message,
+				owlCode: 'VALIDATION_ERROR'
+			});
+		} else if (e instanceof ApiError) {
+			// Check if NO_RESULTS error, and return empty array if that is the case
+			if (e.code === 'NOT_FOUND') {
+				return {
+					title: headcode.toUpperCase(),
+					results: []
+				};
+			} else {
+				throw error(e.status, {
+					message: e.message,
+					owlCode: 'API_ERROR'
+				});
+			}
+		} else if (e instanceof Error) {
+			throw error(500, {
+				message: e.message,
+				owlCode: 'GEN_ERROR'
+			});
+		} else {
+			throw error(500, {
+				message: 'Unexpected error',
+				owlCode: 'UNKNOWN_ERR'
+			});
+		}
+	}
+};
Author	SHA1	Message	Date
Fred Boniface	9ca3662ada	Adjust button minimum sizing to improve presentation of quick-links, while ensuring adequate touch target. Number of displayed quicklinks reduced from 9 to six, for improved presentation.	2026-05-03 20:59:03 +01:00
Fred Boniface	c524fe3c2e	Reorganise colouring of schedule times, add 'delay' column (E, RT, D). Including reusable function to assist.	2026-05-03 20:58:22 +01:00
Fred Boniface	5486795711	Tidy up train service component, add loading state, convert tiploc to name... etc.	2026-05-03 11:45:07 +01:00
Fred Boniface	24960707e2	Add train details to train endpoint. Formatting and styling incomplete	2026-05-03 09:03:45 +01:00