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

Add train details to train endpoint. Formatting and styling incomplete

Browse Source
This commit is contained in:
Fred Boniface
2026-05-03 09:03:45 +01:00
parent 91cb119b7d
commit 24960707e2
10 changed files with 473 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/lib/components/ui/Loading.svelte
View File

@@ -1,59 +1,66 @@
<script lang="ts"> <script lang="ts">
let { let { message = 'Loading...' } = $props();
message = "Loading..."
} = $props();
</script> </script>
<div class="loading-state"> <div class="loading-state">
<div class="track"> <div class="track">
<div class="shuttle"></div> <div class="shuttle"></div>
</div> </div>
<p>{message}</p> <p>{message}</p>
</div> </div>
<style> <style>
.loading-state { .loading-state {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 4rem 2rem; padding: 4rem 2rem;
width: 75%; width: 75%;
margin: auto; margin: auto;
} }
.track { .track {
width: 160px; width: 160px;
height: 3px; height: 3px;
background-color: var(--color-title); background-color: var(--color-title);
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.shuttle { .shuttle {
position: absolute; position: absolute;
width: 50%; width: 50%;
height: 100%; height: 100%;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%); background: linear-gradient(90deg, #1abc9c 0%, #3498db 100%);
animation: data-travel 1.6s infinite ease-in-out; animation: data-travel 1.6s infinite ease-in-out;
} }
p { p {
font-family: 'URW Gothic', sans-serif; font-family: 'URW Gothic', sans-serif;
letter-spacing: 0.15em; letter-spacing: 0.15em;
color: var(--color-title); color: var(--color-title);
animation: pulse 2s infinite ease-in-out; animation: pulse 2s infinite ease-in-out;
} }
@keyframes data-travel { @keyframes data-travel {
0% { left: -50%; } 0% {
100% { left: 100%; } left: -50%;
} }
100% {
left: 100%;
}
}
@keyframes pulse { @keyframes pulse {
0%, 100% {opacity: 1;} 0%,
50% {opacity: 0.4;} 100% {
} opacity: 1;
}
50% {
opacity: 0.4;
}
}
</style> </style>

84
src/lib/components/ui/NoResults.svelte
View File

@@ -1,55 +1,55 @@
<script lang="ts"> <script lang="ts">
import noResult from '$lib/assets/img/no-data.svg'; import noResult from '$lib/assets/img/no-data.svg';
import Button from '$lib/components/ui/Button.svelte'; import Button from '$lib/components/ui/Button.svelte';
let { title = "No results", message = "Try checking your search term"} = $props(); let { title = 'No results', message = 'Try checking your search term' } = $props();
</script> </script>
<div class="no-results-state"> <div class="no-results-state">
<img src={noResult} class="image" height="200" width="200" alt="" role="presentation"> <img src={noResult} class="image" height="200" width="200" alt="" role="presentation" />
<h3>{title}</h3> <h3>{title}</h3>
<p>{message}</p> <p>{message}</p>
<div class="btn-container"> <div class="btn-container">
<Button <Button
type="button" type="button"
onclick={() => history.length > 1 ? history.back() : window.location.href = '/'} onclick={() => (history.length > 1 ? history.back() : (window.location.href = '/'))}
color="accent" color="accent"
> >
Go back Go back
</Button> </Button>
</div> </div>
</div> </div>
<style> <style>
.no-results-state { .no-results-state {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 400px; min-height: 400px;
padding: 5rem; padding: 5rem;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
font-family: 'URW-Gothic', sans-serif; font-family: 'URW-Gothic', sans-serif;
} }
.image { .image {
margin-bottom: 1.95rem; margin-bottom: 1.95rem;
max-width: 90%; max-width: 90%;
height: auto; height: auto;
} }
h3 { h3 {
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem 0;
} }
p { p {
margin: 0; margin: 0;
opacity: 0.8; opacity: 0.8;
} }
.btn-container { .btn-container {
margin-top: 20px; margin-top: 20px;
} }
</style> </style>

3
src/lib/components/ui/TocStyle.svelte
View File

@@ -8,7 +8,6 @@
let code = $derived(toc.toUpperCase()); let code = $derived(toc.toUpperCase());
</script> </script>
<!-- SPACE MONO for the font? --> <!-- SPACE MONO for the font? -->
<div class="toc-container {code}"> <div class="toc-container {code}">
{code} {code}
@@ -25,7 +24,7 @@
font-size: 1.1rem; font-size: 1.1rem;
background-color: #333; background-color: #333;
color: #fff; color: #fff;
font-family:'Courier New', Courier, monospace; font-family: 'Courier New', Courier, monospace;
} }
.AW { .AW {

389
src/lib/components/ui/TrainService.svelte
View File

@@ -1,140 +1,293 @@
<script lang="ts"> <script lang="ts">
import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts'; import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
import { OwlClient, ApiError, ValidationError } from '$lib/owlClient'; import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { quintOut} from 'svelte/easing'; import { quintOut } from 'svelte/easing';
import { formatUkTime } from '$lib/utils/time'; import { formatUkTime } from '$lib/utils/time';
import TocStyle from '$lib/components/ui/TocStyle.svelte'; import TocStyle from '$lib/components/ui/TocStyle.svelte';
let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse} = $props(); let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
let isExpanded = $state(false); let isExpanded = $state(false);
let loadingDetails = $state(false) let loadingDetails = $state(false);
let details = $state(null); let loadingDetailsError = $state(false);
let loadingDetailsErrorMsg = $state("");
let details = $state(null);
const toggleExpand = async (rid: string) => { const toggleExpand = async (rid: string) => {
if (isExpanded) { if (isExpanded) {
isExpanded = false; isExpanded = false;
return; return;
} }
if (details) { if (details) {
isExpanded = true; isExpanded = true;
return; return;
} }
loadingDetails = true; loadingDetails = true;
try { try {
const result = await OwlClient.trains.getByRid(service.r) const result = await OwlClient.trains.getByRid(service.r);
details = result.data; details = result.data;
isExpanded = true; isExpanded = true;
} catch (e) { } catch (e) {
console.Error("Failde to load train details") console.Error('Failed to load train details');
} finally { loadingDetailsError = true;
loading = false; loadingDetailsErrorMsg = e.message;
} } finally {
loadingDetails = false;
}
};
} let OriginDepartureSummary = $derived(formatUkTime(service.od));
async function loadDetails(rid: string) {
if (details) return;
loadingDetails = true;
let OriginDepartureSummary = $derived(formatUkTime(service.od)); const result = await OwlClient.trains.getByRid(service.r);
details = result.data;
loadingDetails = false;
}
async function loadDetails(rid: string) { const estClass = (act, est) => (!act && est) ? 'est' : 'act';
if (details) return;
loadingDetails = true;
const result = await OwlClient.trains.getByRid(service.r)
details = result.data;
loadingDetails = false;
}
</script> </script>
<div class="train-service"> <div class="train-service">
<button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}> <button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}>
<div class="operator-summary"> <div class="operator-summary">
<TocStyle toc={service.o} /> <TocStyle toc={service.o} />
</div> </div>
<div class="main-text-summary"> <div class="main-text-summary">
<div class="time-summary"> <div class="time-summary">
{OriginDepartureSummary} {OriginDepartureSummary}
</div> </div>
<div class="location-summary"> <div class="location-summary">
{service.ot} {service.ot}
</div> </div>
<div class="location-summary to-summary"> <div class="location-summary to-summary">to</div>
to <div class="location-summary">
</div> {service.dt}
<div class="location-summary"> </div>
{service.dt} <!-- Add arrow icon to signify drop-down -->
</div> <!-- ADD LOADING STATE -->
<!-- Add arrow icon to signify drop-down --> </div>
<!-- ADD LOADING STATE --> </button>
</div> {#if isExpanded && details}
</button> <div class="box-ext" transition:slide={{ duration: 800, easing: quintOut }}>
{#if isExpanded && details} <!-- Here goes the data formatting! -->
<div transition:slide={{duration: 800, easing: quintOut}} class="detauls-content"> <div class="detail-head">
<!-- Here goes the data formatting! --> <!-- Cancellation Section -->
{JSON.stringify(details)} {#if details.header.cr}
</div> <span class="cancel-reason">
{/if} {details.header.cr}
{#if details.header.cl}
{details.header.cn ? ' near ' : ' at '}
{details.header.cl}
{/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>Act</th>
<th>Sch</th>
<th>Act</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}
</tr>
{/each}
</tbody>
</table>
</div>
</div>
{/if}
</div> </div>
<style> <style>
.train-service { .train-service {
background-color: var(--color-accent); background-color: var(--color-accent);
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
box-shadow: var(--shadow-std); box-shadow: var(--shadow-std);
overflow: hidden; overflow: hidden;
font-family: 'URW Gothic', sans-serif; font-family: 'URW Gothic', sans-serif;
transition: 0.2s all; transition: 0.2s all;
filter: brightness(1.1); filter: brightness(1.1);
} }
.train-service:hover { .summary:hover {
filter:brightness(1.5); filter:invert();
} }
.summary { .summary {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
min-height: 48px; min-height: 48px;
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
gap: 0.5rem; gap: 0.5rem;
} }
.operator-summary { .operator-summary {
flex-shrink: 0; flex-shrink: 0;
} }
.main-text-summary { .main-text-summary {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
} }
.time-summary { .time-summary {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
color: var(--color-brand); color: var(--color-brand);
} }
.location-summary { .location-summary {
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
font-size: 1.1rem; font-size: 1.1rem;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: var(--color-title); color: var(--color-title);
} }
.to-summary { .to-summary {
font-size: 0.8rem; font-size: 0.8rem;
font-style: oblique; font-style: oblique;
text-transform: lowercase; text-transform: lowercase;
} }
</style>
.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;
}
.pass-loc {
color: var(--color-title);
opacity: 0.75;
}
.can-loc {
text-decoration: line-through;
}
.est {
font-style: oblique;
opacity: 0.5;
}
.act {
color: yellow;
}
</style>

38
src/lib/components/ui/cards/HeadcodeSearchCard.svelte
View File

@@ -1,35 +1,27 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte'; import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
import Textbox from '$lib/components/ui/Textbox.svelte'; import Textbox from '$lib/components/ui/Textbox.svelte';
import Button from '$lib/components/ui/Button.svelte'; import Button from '$lib/components/ui/Button.svelte';
let headcode = $state(''); let headcode = $state('');
function handleSearch(e: SubmitEvent) { function handleSearch(e: SubmitEvent) {
e.preventDefault(); e.preventDefault();
if (!headcode.trim()) return; if (!headcode.trim()) return;
const searchParams = new URLSearchParams(); const searchParams = new URLSearchParams();
searchParams.append('h', headcode.trim().toUpperCase()); searchParams.append('h', headcode.trim().toUpperCase());
goto(`/trains?${searchParams.toString()}`) goto(`/trains?${searchParams.toString()}`);
} }
</script> </script>
<BaseCard header={'Search Train & PIS'}> <BaseCard header={'Search Train & PIS'}>
<form onsubmit={handleSearch} class="card-content">
<form onsubmit={handleSearch} class="card-content"> <Textbox placeholder="Enter Headcode" bind:value={headcode} maxLength={4} />
<Textbox <Button type="submit" disabled={!headcode}>Search</Button>
placeholder="Enter Headcode" </form>
bind:value={headcode}
maxLength={4}
/>
<Button
type="submit"
disabled={!headcode}
>Search</Button>
</form>
</BaseCard> </BaseCard>
<style> <style>
@@ -38,8 +30,8 @@
width: 90%; width: 90%;
margin: auto; margin: auto;
padding: 10px 0 0 0; padding: 10px 0 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
} }
</style> </style>

6
src/lib/geohash.svelte.ts
View File

@@ -10,13 +10,13 @@ class NearestStationsState {
private initGeoConfig: PositionOptions = { private initGeoConfig: PositionOptions = {
enableHighAccuracy: false, enableHighAccuracy: false,
timeout: 500, timeout: 500,
maximumAge: Infinity, maximumAge: Infinity
} };
private geoConfig: PositionOptions = { private geoConfig: PositionOptions = {
enableHighAccuracy: false, enableHighAccuracy: false,
timeout: 20000, timeout: 20000,
maximumAge: 30000, maximumAge: 30000
}; };
constructor() { constructor() {

18
src/lib/utils/time.ts
View File

@@ -3,15 +3,15 @@
* Ensures Europe/London timezone irrespective of browser timezone. * Ensures Europe/London timezone irrespective of browser timezone.
*/ */
export function formatUkTime(dateStr: string | Date | undefined): string { export function formatUkTime(dateStr: string | Date | undefined): string {
if (!dateStr) return '--:--'; if (!dateStr) return '--:--';
const date = typeof dateStr === 'string' ? new Date(dateStr): dateStr; const date = typeof dateStr === 'string' ? new Date(dateStr) : dateStr;
if (isNaN(date.getTime())) return '--:--'; if (isNaN(date.getTime())) return '--:--';
return date.toLocaleTimeString('en-GB', { return date.toLocaleTimeString('en-GB', {
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
hour12: false, hour12: false,
timeZone: 'Europe/London', timeZone: 'Europe/London'
}); });
} }

10
src/routes/+error.svelte
View File

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

43
src/routes/trains/+page.svelte
View File

@@ -1,34 +1,29 @@
<script lang="ts"> <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'; import TrainService from '$lib/components/ui/TrainService.svelte';
let { data } = $props(); let { data } = $props();
</script> </script>
{#if data.results.length === 0} {#if data.results.length === 0}
<NoResults <NoResults message={'No trains found on this date with this headcode.'} />
message={"No trains found on this date with this headcode."}
/>
{:else} {:else}
<div class="result-boxes"> <div class="result-boxes">
{#each data.results as service (service.r)} {#each data.results as service (service.r)}
<TrainService {service} /> <TrainService {service} />
{/each} {/each}
</div> </div>
{/if} {/if}
<style> <style>
.result-boxes { .result-boxes {
width: 95%; width: 95%;
margin: auto; margin: auto;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
</style> </style>

104
src/routes/trains/+page.ts
View File

@@ -4,61 +4,59 @@ import type { PageLoad } from './$types';
import { error } from '@sveltejs/kit'; import { error } from '@sveltejs/kit';
export const load: PageLoad = async ({ url }) => { export const load: PageLoad = async ({ url }) => {
const headcode = url.searchParams.get('h'); const headcode = url.searchParams.get('h');
let dateParam = url.searchParams.get('d'); let dateParam = url.searchParams.get('d');
const toc = url.searchParams.get('t') || ""; const toc = url.searchParams.get('t') || '';
const date: string | Date = (dateParam === "" || dateParam === null) const date: string | Date = dateParam === '' || dateParam === null ? new Date() : dateParam;
? new Date()
: dateParam;
if (!headcode) { if (!headcode) {
throw error(400, { throw error(400, {
message: 'Headcode not provided', message: 'Headcode not provided',
owlCode: 'INVALID_DATA' owlCode: 'INVALID_DATA'
}); });
} }
// Declared outside of the try so that it can be used in both the try and catch blocks // Declared outside of the try so that it can be used in both the try and catch blocks
let results: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse[] let results: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse[];
try { try {
const response = await OwlClient.trains.getByHeadcode(headcode, date, toc); const response = await OwlClient.trains.getByHeadcode(headcode, date, toc);
results = (response.data); results = response.data;
return { return {
title: headcode.toUpperCase(), title: headcode.toUpperCase(),
results: results, results: results
} };
} catch (e: unknown) { } catch (e: unknown) {
if (e instanceof ValidationError) { if (e instanceof ValidationError) {
throw error(400, { throw error(400, {
message: e.message, message: e.message,
owlCode: 'VALIDATION_ERROR', owlCode: 'VALIDATION_ERROR'
}); });
} else if (e instanceof ApiError) { } else if (e instanceof ApiError) {
// Check if NO_RESULTS error, and return empty array if that is the case // Check if NO_RESULTS error, and return empty array if that is the case
if (e.code === "NOT_FOUND") { if (e.code === 'NOT_FOUND') {
return { return {
title: headcode.toUpperCase(), title: headcode.toUpperCase(),
results: [] results: []
} };
} else { } else {
throw error(e.status, { throw error(e.status, {
message: e.message, message: e.message,
owlCode: 'API_ERROR', owlCode: 'API_ERROR'
}); });
} }
} else if (e instanceof Error) { } else if (e instanceof Error) {
throw error(500, { throw error(500, {
message: e.message, message: e.message,
owlCode: 'GEN_ERROR', owlCode: 'GEN_ERROR'
}) });
} else { } else {
throw error(500, { throw error(500, {
message: "Unexpected error", message: 'Unexpected error',
owlCode: "UNKNOWN_ERR", owlCode: 'UNKNOWN_ERR'
}) });
} }
} }
} };