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

Update table display on board page, in preparation for offering different 'table' styles.

Browse Source
This commit is contained in:
Fred Boniface
2026-05-11 12:04:40 +01:00
parent 13d22d7b73
commit 7edccf294b
6 changed files with 97 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/lib/components/ui/station-board/StaffServicesTable.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
import { formatUkTime, estClass, calculateDelay } from '$lib/utils/time';
import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
@@ -8,14 +8,12 @@
`${s.r}${s.sta ?? ''}${s.std ?? ''}${s.wtp ?? ''}`;
</script>
<div class="table-container">
<table class="departure-board">
<thead>
<tr>
<th colspan="4" aria-hidden="true"></th>
<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Arrival">Arr</abbr></th>
<th scope="colgroup" colspan="2" class="upper-head"><abbr title="Departure">Dep</abbr></th>
<th aria-hidden="true"></th>
</tr>
<tr>
<th scope="col"><abbr title="Headcode">ID</abbr></th>
@@ -26,13 +24,12 @@
<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
<th scope="col"><abbr title="Scheduled">Sch</abbr></th>
<th scope="col"><abbr title="Actual/Expected">Act</abbr></th>
<th scope="col"><abbr title="+/- Time">+/-</abbr></th>
</tr>
</thead>
{#each services as service (getRowKey(service))}
<tbody>
<tr class="service-row" class:serviceCancelled={service.c}>
<tr class="service-row" class:serviceCancelled={service.c} class:servicePass={service.wtp}>
<td class="id-cell">{service.h}</td>
<td class="orig-cell">{service.og.t}</td>
<td class="dest-cell">{service.dt.t}</td>
@@ -40,46 +37,67 @@
<!-- Handle different display for a passing train -->
{#if service.wtp}
<td colspan="2">Pass</td>
<td class="pass-cell" colspan="2">Pass</td>
<td class="time-cell">{formatUkTime(service.wtp)}</td>
<td class="time-cell {estClass(service.atp, service.etp)}">{formatUkTime(service.atp || service.etp)}</td>
<td class="time-cell {estClass(service.atp, service.etp)} {delayClassFromTimePair(service.wtp, service.atp || service.etp)}">{formatUkTime(service.atp || service.etp)}</td>
{:else}
<td class="time-cell">{formatUkTime(service.sta)}</td>
<td class="time-cell {estClass(service.ata, service.eta)}">{formatUkTime(service.ata || service.eta)}</td>
<td class="time-cell {estClass(service.ata, service.eta)} {delayClassFromTimePair(service.sta, service.ata || service.eta)}">{formatUkTime(service.ata || service.eta)}</td>
<td class="time-cell">{formatUkTime(service.std)}</td>
<td class="time-cell {estClass(service.atd, service.etd)}">{formatUkTime(service.atd || service.etd)}</td>
<td class="time-cell {estClass(service.atd, service.etd)} {delayClassFromTimePair(service.std, service.atd || service.etd)}">{formatUkTime(service.atd || service.etd)}</td>
{/if}
{#if service}
{@const delay = calculateDelay(service)}
<td class="delay-cell delay-{delay.type}">{delay.val}</td>
{/if}
</tr>
{#if service.c && service.cr?.r}
<tr>
<td colspan="9">{service.cr.r}</td>
<td aria-hidden="true"></td>
<td colspan="8">
{service.cr.r}
{#if service.cr.l}
{service.cr.n ? "near" : "at"}
{service.cr.l}
{/if}
</td>
</tr>
{/if}
{#if service.dr?.r}
<tr>
<td aria-hidden="true"></td>
<td colspan="8">
{service.dr.r}
{#if service.dr.l}
{service.dr.n ? "near" : "at"}
{service.dr.l}
{/if}
</td>
</tr>
{/if}
</tbody>
{/each}
</table>
</div>
<style>
.table-container {
width: 100%;
}
.departure-board {
width: 100%;
margin: 0 auto;
font-family: 'URW Gothic', sans-serif;
font-variant-numeric: tabular-nums;
border-collapse: collapse;
}
thead {
position: sticky;
top: 0;
z-index: 2;
background: var(--color-bg-dark);
}
.serviceCancelled {
text-decoration: line-through;
}
.servicePass {
font-style: italic;
opacity: 0.5;
}
.id-cell{
font-family:'Courier New', Courier, monospace;
text-align: center;
@@ -102,16 +120,29 @@
.platSup {
filter: opacity(0.5);
}
.pass-cell {
text-align: center;
}
.time-cell {
text-align: center;
}
.est {
font-style: oblique;
opacity: 0.75;
}
.act {
font-weight: 600;
color: green;
}
.delay-cell {
text-align: center;
}
.delay-late {
color: var(--delay-orange);
animation: 2s fast-pulse ease-in-out infinite;
}
.delay-early {
color: var(--early-blue);
animation: 2s fast-pulse ease-in-out infinite;
}
</style>

2
src/lib/components/ui/station-board/StationAlertCard.svelte
View File

@@ -41,7 +41,7 @@
<style>
.alert-card {
margin: 1rem 0;
margin: 0;
border-radius: 8px;
background: transparent;
position: relative;