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

Adjust train service table as displayed over departure boards

Browse Source
This commit is contained in:
Fred Boniface
2026-08-09 21:30:28 +01:00
parent dd4f3206be
commit 566f23cb02
3 changed files with 158 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/lib/components/ui/TrainServiceTable.svelte
View File

@@ -101,7 +101,7 @@
<th colspan="2">Dep</th>
</tr>
<tr>
<th>Location</th>
<th class="tiploc-col">Location</th>
<th>Plat</th>
<th>Sch</th>
<th>Act</th>
@@ -113,7 +113,7 @@
{#each trainDetail.locations as loc}
<tbody class="LocGroup">
<tr class:pass={loc.r === 'PASS'} class:canc={loc.can}>
<td class="tpl" class:stop={loc.r !== 'PASS'}>
<td class="tiploc-col tpl" class:stop={loc.r !== 'PASS'}>
{loc.t}
</td>
<td class="plat" class:platchange={loc.pc}>
@@ -121,17 +121,21 @@
</td>
{#if loc.r === 'PASS'}
<td colspan="2">Pass</td>
<td>{formatUkTime(loc.wtp)}</td>
<td>{formatUkTime(loc.atp || loc.etp || '--')}</td>
<td class="actual">{formatUkTime(loc.wtp)}</td>
<td class={estClass(loc.atp, loc.etp)}>{formatUkTime(loc.atp || loc.etp || '--')}</td>
{:else}
<td>{formatUkTime(loc.pta || loc.wta)}</td>
<td>{formatUkTime(loc.ata || loc.eta || '--')}</td>
<td>{formatUkTime(loc.ptd || loc.wtd)}</td>
<td>{formatUkTime(loc.atd || loc.etd || '--')}</td>
<td class="actual">{formatUkTime(loc.pta || loc.wta)}</td>
<td class={estClass(loc.ata, loc.eta)}>{formatUkTime(loc.ata || loc.eta || '--')}</td>
<td class="actual">{formatUkTime(loc.ptd || loc.wtd)}</td>
<td class={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>
{@const arrType = estClass(loc.ata, loc.eta)}
{@const depType = estClass(loc.atd, loc.etd)}
{@const passType = estClass(loc.atp, loc.etp)}
{@const classType = depType || arrType || passType}
<td class="delay-{delay.type} {classType}">{delay.val}</td>
{/if}
</tr>
{#if loc.act && getRelevantActivities(loc.act).length > 0}
@@ -150,3 +154,115 @@
</table>
</div>
</div>
<style>
.trainServiceContainer {
width: 100%;
margin: 0 auto;
display: flex;
justify-items: center;
flex-direction: column;
}
.cancelReason {
color: var(--cancel-red);
text-align: center;
}
.delayReason {
color: var(--delay-orange);
text-align: center;
}
.pisData {
margin: auto;
text-align: center;
font-family: 'URW Gothic', sans-serif;
font-weight: 600;
font-size: 1.25rem;
}
.pis-skip {
font-weight: 200;
font-size: 1rem;
}
.tableContainer {
width: 100%;
margin: 0 auto;
padding-top: 10px;
}
.table {
width: 97%;
margin: 0 auto;
}
tr th {
font-family: 'URW Gothic', sans-serif;
text-align: center;
}
tr td {
font-family: 'Inconsolata Variable', monospace;
font-size: 1.171rem;
font-variant-ligatures: additional-ligatures;
text-align: center;
}
tr.pass td {
opacity: 0.5;
}
tr.canc {
text-decoration: line-through;
color: var(--cancel-red);
}
tr.canc .tpl {
text-decoration: none;
color: var(--cancel-red);
}
.tiploc-col {
text-align: left;
}
.tpl {
color: var(--location-yellow);
}
tr.pass td.pass-text {
font-style: italic;
}
tr td.estimate {
color: rgb(196, 189, 189);
font-style: italic;
font-weight: 350;
}
tr td.actual {
font-weight: 700;
}
tr td.delay-late {
color: var(--delay-orange);
}
tr td.delay-early {
color: var(--early-blue);
}
.activity-container {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding-bottom: 5px;
}
.activity-tag {
background: rgb(0 0 0 / 15%);
font-family: 'URW Gothic', sans-serif;
padding: 0.2rem 0.5rem;
border-radius: 0.25rem;
font-size: 1rem;
}
</style>

38
src/lib/components/ui/station-board/ServiceDetailModal.svelte
View File

@@ -67,9 +67,20 @@
}}
>
<div class="modal-content">
<div class="modal-header">
<h1>
{#if loading}
Loading Train Detail
{:else if error}
Error
{:else if trainDetail}
{trainDetail.header.h}
{/if}
</h1>
<button class="close-btn" onclick={onClose} aria-label="Close modal">
<IconX size={20} />
</button>
</div>
<div class="trainServiceModalWrapper">
{#if loading}
@@ -87,14 +98,14 @@
<style>
dialog {
background: var(--modal-bg, #1e1e1e);
color: var(--modal-text, #fff);
background: var(--color-accent);
color: var(--color-title);
border: none;
border-radius: 12px;
width: 90%;
max-width: 400px;
padding: 1.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
padding: 0 1.5rem 1.5rem 1.5rem;
box-shadow: var(--shadow-std);
opacity: 0;
transform: scale(0.8);
@@ -145,11 +156,17 @@
flex-direction: column;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'URW Gothic', sans-serif;
margin: 0;
padding: 0;
}
.close-btn {
position: absolute;
top: 0;
right: 0;
background: transparent;
background: red;
border: none;
color: inherit;
cursor: pointer;
@@ -162,7 +179,7 @@
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.1);
background: rgb(141, 0, 0);
}
.trainServiceModalWrapper {
@@ -170,10 +187,11 @@
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: 1.5rem;
margin-top: 0;
}
.scrollable-table-container {
margin-top: 0px;
width: 100%;
overflow-y: auto;
}

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

@@ -1,6 +1,7 @@
import type { ApiTrainsTrainDetails } from '@owlboard/owlboard-ts';
export const estClass = (act: any, est: any) => (act ? 'actual' : 'estimate');
export const estClass = (act: any, est: any) =>
act ? 'actual' : est ? 'estimate' : undefined;
/**
* Converts ISO/JSON time to UK-formatted HH:MM string, with optional (default off) seconds