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

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

@@ -1,5 +1,5 @@
<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 { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
@@ -46,6 +46,51 @@
}
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>
<div class="train-service">
@@ -68,7 +113,7 @@
{service.dt}
</div>
<div class="arrow" class:expanded={isExpanded}>
<IconChevronDownFilled color={"var(--color-title)"} size={25} />
<IconChevronDownFilled color={'var(--color-title)'} size={25} />
</div>
</div>
</button>
@@ -86,7 +131,6 @@
{#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}
@@ -101,9 +145,14 @@
{/if}
</span>
{/if}
{#if details.pis}
<div class="pis-detail">
<!-- PIS Data Here -->
{details.pis.code}
</div>
{/if}
</div>
<div class="color-key">
<p class="tpl-stop">Times in yellow are estimates</p>
</div>
<div class="schedule-table-container">
<table class="schedule-table">
@@ -117,30 +166,33 @@
<th>Location</th>
<th>Plat</th>
<th>Sch</th>
<th><span class="est">Est</span>/Act</th>
<th>Act</th>
<th>Sch</th>
<th><span class="est">Est</span>/Act</th>
<th>Act</th>
<th></th>
</tr>
</thead>
<tbody>
{#each details.locations as loc}
<tbody class="location-group">
<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="plat-cell" class:plat-change={loc.pc}>{loc.p}</td>
<td class="tpl-cell" class:tpl-stop={loc.r != 'PASS'}>
{loc.t}
</td>
<td class="plat-cell cell-divider-right" class:plat-change={loc.pc}>{loc.p}</td>
{#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 {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)}"
<td class="time-cell cell-divider-right {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)}"
<td class="time-cell cell-divider-right {estClass(loc.atd, loc.etd)}"
>{formatUkTime(loc.atd || loc.etd || '--')}</td
>
{/if}
@@ -149,8 +201,19 @@
<td class="delay-{delay.type}">{delay.val}</td>
{/if}
</tr>
{#if loc.act && getRelevantActivities(loc.act).length > 0}
<tr class="activity-row">
<td colspan="7">
<div class="activity-container">
{#each getRelevantActivities(loc.act) as note}
<span class="activity-tag">{note}</span>
{/each}
</tbody>
</div>
</td>
</tr>
{/if}
</tbody>{/each}
</table>
</div>
</div>
@@ -167,7 +230,7 @@
max-width: 460px;
border-radius: 12px;
box-shadow: var(--shadow-std);
overflow: hidden;
overflow: visible;
font-family: 'URW Gothic', sans-serif;
transition: 0.2s all;
filter: brightness(1.1);
@@ -288,27 +351,66 @@
/*
Schedule Table
*/
.color-key,
.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-variant-numeric: tabular-nums;
padding-bottom: 1rem;
font-size: 0.8rem;
letter-spacing: -0.02ch;
transition: all 0.5s;
font-weight: 500;
}
.location-group:nth-of-type(even) {
background-color: rgba(255, 255, 255, 0.04);
}
.cell-divider-right {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
th,
td {
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 {
@@ -324,33 +426,28 @@
animation: fast-pulse 2s ease-out infinite;
}
.pass-loc {
.pass-loc td {
color: var(--color-title);
font-style: oblique;
opacity: 0.5;
}
.can-loc {
text-decoration: line-through;
}
.est {
color: var(--location-yellow);
opacity: 0.5;
font-style: italic;
font-style: oblique;
}
.act {
color: white;
}
.delay-late {
td.delay-late {
color: var(--delay-orange);
font-weight: 600;
animation: pulse 2s ease-out infinite;
}
.delay-early {
td.delay-early {
color: var(--early-blue);
font-weight: 600;
animation: pulse 2s ease-out infinite;
@@ -394,6 +491,9 @@
.location-summary {
font-size: 0.9rem;
}
.activity-row td {
font-size: 0.8rem;
}
}
@media (min-width: 340px) {
@@ -412,6 +512,9 @@
.schedule-table {
font-size: 0.99rem;
}
.activity-row td {
font-size: 0.9rem;
}
}
@media (min-width: 420px) {
@@ -424,6 +527,8 @@
KEYFRAMES
*/
@keyframes load-spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
</style>

11
src/lib/global.css
View File

@@ -153,7 +153,8 @@
/* Pulse Animations */
@keyframes pulse {
0%, 100% {
0%,
100% {
opacity: 1;
}
50% {
@@ -162,15 +163,17 @@
}
@keyframes fast-pulse {
0%, 50%, 100% {
0%,
50%,
100% {
opacity: 1;
}
25%, 75% {
25%,
75% {
opacity: 0;
}
}
body {
margin: 0;
padding: 0;

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

@@ -23,22 +23,23 @@ export function formatUkTime(dateStr: string | Date | undefined): string {
* @param 'Schedule Location' object
* @returns Delay string for departure boards
*/
export function calculateDelay(loc: ApiTrainsTrainDetails.ServiceLocation): {val: string, type: string} {
const pairs = [
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);
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(
(Date.parse(match.actual) - Date.parse(match.sched)) / 60000
);
const diffMinutes = Math.round((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);
if (diffMinutes > 0) {