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

Extend data in the schedule box

Browse Source
This commit is contained in:
Fred Boniface
2026-05-04 21:49:59 +01:00
parent 1c4c7ccabc
commit 6a857c2d64
3 changed files with 407 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts'; import type { ApiPisObject, 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';
@@ -46,6 +46,51 @@
} }
const estClass = (act, est) => (!act && est ? 'est' : 'act'); const estClass = (act, est) => (!act && est ? 'est' : 'act');
const activityMap: Record<string, string> = {
'-D': 'Vehicles detatched',
'-T': 'Vehicles attached & detached',
'-U': 'Vehicles attached',
AE: 'Assist locomotive attached',
C: 'Traincrew change only',
D: 'Set down only',
E: 'Stops for examination',
K: 'Passenger count point',
KC: 'Ticket collection point',
KE: 'Ticket examination point',
KF: 'First class ticket examination point',
KS: 'Selective ticket examination point',
L: 'Locomotive changed',
N: 'Unadvertised stop',
OP: 'Operational stop only',
OR: 'Locomotive attached on rear',
R: 'Request stop only',
RM: 'Train changes direction',
RR: 'Locomotive run round',
S: 'Staff only stop',
TW: 'Stops for token/staff/tablet only',
U: 'Pick up only',
W: 'Watering coaches',
X: 'Passes another train'
};
const activityRegex = new RegExp(
Object.keys(activityMap)
.sort((a, b) => b.length - a.length) // Longest codes first
.map((key) => key.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')) // Escape special chars
.join('|'),
'g'
);
const getRelevantActivities = (act: string) => {
if (!act) return [];
// Find all matches in the string
const matches = act.match(activityRegex) || [];
// Map to labels and remove duplicates
return [...new Set(matches)].map((code) => activityMap[code]);
};
</script> </script>
<div class="train-service"> <div class="train-service">
@@ -68,7 +113,7 @@
{service.dt} {service.dt}
</div> </div>
<div class="arrow" class:expanded={isExpanded}> <div class="arrow" class:expanded={isExpanded}>
<IconChevronDownFilled color={"var(--color-title)"} size={25} /> <IconChevronDownFilled color={'var(--color-title)'} size={25} />
</div> </div>
</div> </div>
</button> </button>
@@ -86,7 +131,6 @@
{#if details.header.cl} {#if details.header.cl}
{details.header.cn ? ' near ' : ' at '} {details.header.cn ? ' near ' : ' at '}
<TiplocConverter code={details.header.cl} /> <TiplocConverter code={details.header.cl} />
<!-- CONSIDER WRAPPING IN A COMPONENT THAT CONVERTS TO THE LOCATION NAME RATHER THAN TIPLOC -->
{/if} {/if}
</span> </span>
{/if} {/if}
@@ -101,9 +145,14 @@
{/if} {/if}
</span> </span>
{/if} {/if}
<div class="pis-detail"> {#if details.pis}
<!-- PIS Data Here --> <div class="pis-detail">
</div> {details.pis.code}
</div>
{/if}
</div>
<div class="color-key">
<p class="tpl-stop">Times in yellow are estimates</p>
</div> </div>
<div class="schedule-table-container"> <div class="schedule-table-container">
<table class="schedule-table"> <table class="schedule-table">
@@ -117,40 +166,54 @@
<th>Location</th> <th>Location</th>
<th>Plat</th> <th>Plat</th>
<th>Sch</th> <th>Sch</th>
<th><span class="est">Est</span>/Act</th> <th>Act</th>
<th>Sch</th> <th>Sch</th>
<th><span class="est">Est</span>/Act</th> <th>Act</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> {#each details.locations as loc}
{#each details.locations as loc} <tbody class="location-group">
<tr class:pass-loc={loc.r === 'PASS'} class:can-loc={loc.can}> <tr class:pass-loc={loc.r === 'PASS'} class:can-loc={loc.can}>
<td class="tpl-cell" class:tpl-stop={loc.r != 'PASS'}>{loc.t}</td> <td class="tpl-cell" class:tpl-stop={loc.r != 'PASS'}>
<td class="plat-cell" class:plat-change={loc.pc}>{loc.p}</td> {loc.t}
</td>
<td class="plat-cell cell-divider-right" class:plat-change={loc.pc}>{loc.p}</td>
{#if loc.r == 'PASS'} {#if loc.r == 'PASS'}
<td class="time-cell" colspan="2">Pass</td> <td class="time-cell cell-divider-right" colspan="2">Pass</td>
<td class="time-cell">{formatUkTime(loc.wtp)}</td> <td class="time-cell">{formatUkTime(loc.wtp)}</td>
<td class="time-cell {estClass(loc.atp, loc.etp)}" <td class="time-cell {estClass(loc.atp, loc.etp)}"
>{formatUkTime(loc.atp || loc.etp || '--')}</td >{formatUkTime(loc.atp || loc.etp || '--')}</td
> >
{:else} {:else}
<td class="time-cell">{formatUkTime(loc.pta || loc.wta || '--')}</td> <td class="time-cell">{formatUkTime(loc.pta || loc.wta || '--')}</td>
<td class="time-cell {estClass(loc.ata, loc.eta)}" <td class="time-cell cell-divider-right {estClass(loc.ata, loc.eta)}"
>{formatUkTime(loc.ata || loc.eta || '--')}</td >{formatUkTime(loc.ata || loc.eta || '--')}</td
> >
<td class="time-cell">{formatUkTime(loc.ptd || loc.wtd || '--')}</td> <td class="time-cell">{formatUkTime(loc.ptd || loc.wtd || '--')}</td>
<td class="time-cell {estClass(loc.atd, loc.etd)}" <td class="time-cell cell-divider-right {estClass(loc.atd, loc.etd)}"
>{formatUkTime(loc.atd || loc.etd || '--')}</td >{formatUkTime(loc.atd || loc.etd || '--')}</td
> >
{/if} {/if}
{#if loc} {#if loc}
{@const delay = calculateDelay(loc)} {@const delay = calculateDelay(loc)}
<td class="delay-{delay.type}">{delay.val}</td> <td class="delay-{delay.type}">{delay.val}</td>
{/if} {/if}
</tr> </tr>
{/each} {#if loc.act && getRelevantActivities(loc.act).length > 0}
</tbody> <tr class="activity-row">
<td colspan="7">
<div class="activity-container">
{#each getRelevantActivities(loc.act) as note}
<span class="activity-tag">{note}</span>
{/each}
</div>
</td>
</tr>
{/if}
</tbody>{/each}
</table> </table>
</div> </div>
</div> </div>
@@ -158,163 +221,202 @@
</div> </div>
<style> <style>
/* /*
Main container Main container
*/ */
.train-service { .train-service {
background-color: var(--color-accent); background-color: var(--color-accent);
width: 100%; width: 100%;
max-width: 460px; max-width: 460px;
border-radius: 12px; border-radius: 12px;
box-shadow: var(--shadow-std); box-shadow: var(--shadow-std);
overflow: hidden; overflow: visible;
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);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.train-service:active { .train-service:active {
filter: brightness(1.2); filter: brightness(1.2);
} }
@media (hover: hover) { @media (hover: hover) {
.train-service:hover { .train-service:hover {
filter: brightness(1.2); filter: brightness(1.2);
} }
} }
/* /*
Summary Header Summary Header
*/ */
.summary { .summary {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 1rem; padding: 0 1rem;
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: 0.75rem; font-size: 0.75rem;
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: 0.75rem; font-size: 0.75rem;
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;
} }
.arrow { .arrow {
padding: 0; padding: 0;
margin: 0 0 0 auto; margin: 0 0 0 auto;
height: 25px; height: 25px;
transition: all 0.9s; transition: all 0.9s;
} }
.expanded { .expanded {
transform: rotateX(180deg); transform: rotateX(180deg);
} }
.can-all { .can-all {
color: red; color: red;
} }
/* /*
Box Extention Box Extention
*/ */
.box-ext { .box-ext {
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%;
} }
.detail-head { .detail-head {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.cancel-reason, .cancel-reason,
.delay-reason { .delay-reason {
display: block; display: block;
padding: 4px 8px; padding: 4px 8px;
width: 95%; width: 95%;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
animation: cancel-pulse 2s ease-in-out infinite; animation: cancel-pulse 2s ease-in-out infinite;
} }
.cancel-reason { .cancel-reason {
color: var(--cancel-red); color: var(--cancel-red);
} }
.delay-reason { .delay-reason {
color: rgb(255, 119, 0); color: rgb(255, 119, 0);
} }
/* /*
Schedule Table Schedule Table
*/ */
.schedule-table-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.schedule-table { .color-key,
width: 95%; .color-key p {
text-align: center;
width: 100%;
padding: 0 0 0.2rem 0;
margin: 0;
}
.schedule-table-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: 0.1rem;
}
.schedule-table {
width: 95%;
border-collapse: collapse;
font-family: 'URW Gothic', 'Inter', sans-serif; font-family: 'URW Gothic', 'Inter', sans-serif;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
padding-bottom: 1rem; font-size: 0.8rem;
font-size: 0.8rem;
letter-spacing: -0.02ch; letter-spacing: -0.02ch;
transition: all 0.5s; transition: all 0.5s;
font-weight: 500; font-weight: 500;
} }
th, .location-group:nth-of-type(even) {
td { background-color: rgba(255, 255, 255, 0.04);
text-align: center; }
} .cell-divider-right {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.tpl-cell { th,
color: var(--color-title); td {
text-align: left; text-align: center;
} padding: 6px 4px;
}
.activity-row td {
padding: 0 0 10px 0;
text-align: left;
font-size: 0.75rem;
letter-spacing: 0.01em;
}
.activity-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 12px;
}
.activity-tag {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 4px;
}
.tpl-cell {
color: var(--color-title);
text-align: left;
}
.tpl-stop { .tpl-stop {
color: var(--location-yellow); color: var(--location-yellow);
@@ -324,106 +426,109 @@
animation: fast-pulse 2s ease-out infinite; animation: fast-pulse 2s ease-out infinite;
} }
.pass-loc { .pass-loc td {
color: var(--color-title); color: var(--color-title);
font-style: oblique; font-style: oblique;
} opacity: 0.5;
}
.can-loc {
text-decoration: line-through;
}
.can-loc { .est {
text-decoration: line-through; color: var(--location-yellow);
} font-style: oblique;
}
.est { td.delay-late {
color: var(--location-yellow); color: var(--delay-orange);
opacity: 0.5;
font-style: italic;
}
.act {
color: white;
}
.delay-late {
color: var(--delay-orange);
font-weight: 600; font-weight: 600;
animation: pulse 2s ease-out infinite; animation: pulse 2s ease-out infinite;
} }
.delay-early { td.delay-early {
color: var(--early-blue); color: var(--early-blue);
font-weight: 600; font-weight: 600;
animation: pulse 2s ease-out infinite; animation: pulse 2s ease-out infinite;
} }
/* /*
Loading State Loading State
*/ */
.loading-state { .loading-state {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 2; z-index: 2;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: 'URW Gothic', sans-serif; font-family: 'URW Gothic', sans-serif;
font-size: 1rem; font-size: 1rem;
color: var(--color-title); color: var(--color-title);
} }
.loading-spinner { .loading-spinner {
width: 16px; width: 16px;
height: 16px; height: 16px;
border: 2px solid rgba(0, 0, 0, 0.1); border: 2px solid rgba(0, 0, 0, 0.1);
border-top-color: #fff; border-top-color: #fff;
border-radius: 50%; border-radius: 50%;
animation: load-spin 0.8s linear infinite; animation: load-spin 0.8s linear infinite;
z-index: 3; z-index: 3;
} }
/* /*
Responsivity Responsivity
*/ */
@media (min-width: 330px) { @media (min-width: 330px) {
.time-summary, .time-summary,
.location-summary { .location-summary {
font-size: 0.9rem; font-size: 0.9rem;
} }
} .activity-row td {
font-size: 0.8rem;
}
}
@media (min-width: 340px) { @media (min-width: 340px) {
.schedule-table { .schedule-table {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
@media (min-width: 360px) { @media (min-width: 360px) {
.time-summary { .time-summary {
font-size: 1.1rem; font-size: 1.1rem;
} }
.location-summary { .location-summary {
font-size: 1rem; font-size: 1rem;
} }
.schedule-table { .schedule-table {
font-size: 0.99rem; font-size: 0.99rem;
} }
} .activity-row td {
font-size: 0.9rem;
}
}
@media (min-width: 420px) { @media (min-width: 420px) {
.schedule-table { .schedule-table {
font-size: 1.1rem; font-size: 1.1rem;
} }
} }
/* /*
KEYFRAMES KEYFRAMES
*/ */
@keyframes load-spin { @keyframes load-spin {
to { transform: rotate(360deg); } to {
} transform: rotate(360deg);
}
}
</style> </style>

111
src/lib/global.css
View File

@@ -46,88 +46,88 @@
/* 100: Thin */ /* 100: Thin */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Thin.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-Thin.woff2') format('woff2');
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-ThinItalic.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-ThinItalic.woff2') format('woff2');
font-weight: 100; font-weight: 100;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
/* 200: ExtraLight */ /* 200: ExtraLight */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-ExtraLight.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-ExtraLight.woff2') format('woff2');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
/* 300: Light */ /* 300: Light */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Light.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-Light.woff2') format('woff2');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
/* 400: Regular / Italic */ /* 400: Regular / Italic */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
/* 500: Medium */ /* 500: Medium */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-Medium.woff2') format('woff2');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
/* 600: SemiBold */ /* 600: SemiBold */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-SemiBold.woff2') format('woff2');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
/* 700: Bold */ /* 700: Bold */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
/* 800: ExtraBold */ /* 800: ExtraBold */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/type/jetbrains-mono/JetBrainsMono-ExtraBold.woff2') format('woff2'); src: url('/type/jetbrains-mono/JetBrainsMono-ExtraBold.woff2') format('woff2');
font-weight: 800; font-weight: 800;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
:root { :root {
/* Brand Colours */ /* Brand Colours */
@@ -153,7 +153,8 @@
/* Pulse Animations */ /* Pulse Animations */
@keyframes pulse { @keyframes pulse {
0%, 100% { 0%,
100% {
opacity: 1; opacity: 1;
} }
50% { 50% {
@@ -162,15 +163,17 @@
} }
@keyframes fast-pulse { @keyframes fast-pulse {
0%, 50%, 100% { 0%,
50%,
100% {
opacity: 1; opacity: 1;
} }
25%, 75% { 25%,
75% {
opacity: 0; opacity: 0;
} }
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;

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

@@ -23,27 +23,28 @@ export function formatUkTime(dateStr: string | Date | undefined): string {
* @param 'Schedule Location' object * @param 'Schedule Location' object
* @returns Delay string for departure boards * @returns Delay string for departure boards
*/ */
export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {val: string, type: string} { export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {
const pairs = [ val: string;
{ actual: loc.atd, sched: loc.ptd ?? loc.wtd }, type: string;
{ actual: loc.ata, sched: loc.pta ?? loc.wta }, } {
{ actual: loc.atp, sched: loc.wtp } 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); const match = pairs.find((p) => p.actual && p.sched);
if (!match || !match.actual || !match.sched) return {val: '', type: 'none'}; if (!match || !match.actual || !match.sched) return { val: '', type: 'none' };
const diffMinutes = Math.round( const diffMinutes = Math.round((Date.parse(match.actual) - Date.parse(match.sched)) / 60000);
(Date.parse(match.actual) - Date.parse(match.sched)) / 60000
);
if (diffMinutes === 0) return {val: 'RT', type: 'ontime'}; if (diffMinutes === 0) return { val: 'RT', type: 'ontime' };
const absDiff = Math.abs(diffMinutes); const absDiff = Math.abs(diffMinutes);
if (diffMinutes > 0) { if (diffMinutes > 0) {
return { val: `${absDiff}L`, type: 'late' }; return { val: `${absDiff}L`, type: 'late' };
} else { } else {
return { val: `${absDiff}E`, type: 'early' }; return { val: `${absDiff}E`, type: 'early' };
} }
} }