117 lines
4.0 KiB
Svelte
117 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
|
|
import { formatUkTime, estClass, calculateDelay } from '$lib/utils/time';
|
|
|
|
let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
|
|
|
|
const getRowKey = (s: ApiStationsBoard.BoardService) =>
|
|
`${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>
|
|
<th scope="col"><abbr title="Origin">Orig</abbr></th>
|
|
<th scope="col"><abbr title="Destination">Dest</abbr></th>
|
|
<th scope="col"><abbr title="Platform">Plt</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="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}>
|
|
<td class="id-cell">{service.h}</td>
|
|
<td class="orig-cell">{service.og.t}</td>
|
|
<td class="dest-cell">{service.dt.t}</td>
|
|
<td class="plt-cell" class:platSup={service.ps} class:platChange={service.pc}>{service.p}</td>
|
|
|
|
<!-- Handle different display for a passing train -->
|
|
{#if service.wtp}
|
|
<td 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>
|
|
{: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">{formatUkTime(service.std)}</td>
|
|
<td class="time-cell {estClass(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>
|
|
</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;
|
|
}
|
|
.serviceCancelled {
|
|
text-decoration: line-through;
|
|
}
|
|
.id-cell{
|
|
font-family:'Courier New', Courier, monospace;
|
|
text-align: center;
|
|
}
|
|
.orig-cell, .dest-cell {
|
|
color: var(--location-yellow);
|
|
}
|
|
.orig-cell {
|
|
text-align: left;
|
|
}
|
|
.dest-cell {
|
|
text-align: right;
|
|
}
|
|
.plt-cell {
|
|
text-align: center;
|
|
}
|
|
.platChange {
|
|
animation: 2s fast-pulse ease-in-out infinite;
|
|
}
|
|
.platSup {
|
|
filter: opacity(0.5);
|
|
}
|
|
.time-cell {
|
|
text-align: center;
|
|
}
|
|
.delay-cell {
|
|
text-align: center;
|
|
}
|
|
.delay-late {
|
|
color: var(--delay-orange);
|
|
}
|
|
.delay-early {
|
|
color: var(--early-blue);
|
|
}
|
|
</style> |