Add initial departure board table 'skeleton', very basic at present
This commit is contained in:
117
src/lib/components/ui/station-board/StaffServicesTable.svelte
Normal file
117
src/lib/components/ui/station-board/StaffServicesTable.svelte
Normal file
@@ -0,0 +1,117 @@
|
||||
<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>
|
||||
138
src/lib/components/ui/station-board/StationAlertCard.svelte
Normal file
138
src/lib/components/ui/station-board/StationAlertCard.svelte
Normal file
@@ -0,0 +1,138 @@
|
||||
<script lang="ts">
|
||||
import { slide } from 'svelte/transition';
|
||||
import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
|
||||
import { IconAlertOctagonFilled, IconChevronDownFilled } from '@tabler/icons-svelte';
|
||||
|
||||
let { messages = [] }: { messages: ApiStationsBoard.BoardMsgs[] } = $props();
|
||||
let isOpen = $state(false);
|
||||
</script>
|
||||
|
||||
{#if messages.length > 0}
|
||||
<aside class="alert-card">
|
||||
<button onclick={() => (isOpen = !isOpen)} class="trigger" class:active={isOpen}>
|
||||
<span class="warning-icon">
|
||||
<IconAlertOctagonFilled />
|
||||
</span>
|
||||
<span class="summary">
|
||||
{messages.length}
|
||||
{messages.length === 1 ? 'active alert' : 'active alerts'}
|
||||
</span>
|
||||
<span class="chevron" class:rotated={isOpen}><IconChevronDownFilled /></span>
|
||||
</button>
|
||||
|
||||
{#if isOpen}
|
||||
<div transition:slide={{ duration: 450 }} class="content">
|
||||
{#each messages as msg}
|
||||
<div class="message-item">
|
||||
<p class="message-text">
|
||||
{msg.t}
|
||||
{#if msg.l && msg.lt}
|
||||
<a href={msg.l} target="_blank" rel="noopener noreferrer" class="alert-link">
|
||||
{msg.lt}
|
||||
</a>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.alert-card {
|
||||
margin: 1rem 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-bottom: 0;
|
||||
width: 95%;
|
||||
max-width: 750px;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
align-items: center;
|
||||
padding: 0.4rem 1rem;
|
||||
background: var(--alert-orange);
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 46px;
|
||||
transition: all 0.65s 0.2s;
|
||||
}
|
||||
|
||||
.trigger.active {
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: all 0.1s 0s;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
flex: 1;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
transition: transform 0.5s ease;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chevron.rotated {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--alert-orange);
|
||||
filter: brightness(1.2);
|
||||
color: var(--color-title);
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin: 10px;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.message-item p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-item a {
|
||||
color: #f2ff00;
|
||||
}
|
||||
|
||||
.message-item:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user