Extend data in the schedule box
This commit is contained in:
@@ -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}
|
||||
<div class="pis-detail">
|
||||
<!-- PIS Data Here -->
|
||||
</div>
|
||||
{#if details.pis}
|
||||
<div class="pis-detail">
|
||||
{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,40 +166,54 @@
|
||||
<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}
|
||||
{#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}
|
||||
{#if loc}
|
||||
{@const delay = calculateDelay(loc)}
|
||||
<td class="delay-{delay.type}">{delay.val}</td>
|
||||
{@const delay = calculateDelay(loc)}
|
||||
<td class="delay-{delay.type}">{delay.val}</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
{#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}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
|
||||
</tbody>{/each}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -158,163 +221,202 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
/*
|
||||
Main container
|
||||
*/
|
||||
.train-service {
|
||||
background-color: var(--color-accent);
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-std);
|
||||
overflow: hidden;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
transition: 0.2s all;
|
||||
filter: brightness(1.1);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.train-service {
|
||||
background-color: var(--color-accent);
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow-std);
|
||||
overflow: visible;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
transition: 0.2s all;
|
||||
filter: brightness(1.1);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.train-service:active {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.train-service:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
.train-service:active {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
/*
|
||||
@media (hover: hover) {
|
||||
.train-service:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Summary Header
|
||||
*/
|
||||
.summary {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.summary {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.operator-summary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.operator-summary {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.main-text-summary {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.main-text-summary {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.time-summary {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
.time-summary {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.location-summary {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-title);
|
||||
}
|
||||
.location-summary {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
.to-summary {
|
||||
font-size: 0.8rem;
|
||||
font-style: oblique;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.to-summary {
|
||||
font-size: 0.8rem;
|
||||
font-style: oblique;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
padding: 0;
|
||||
margin: 0 0 0 auto;
|
||||
height: 25px;
|
||||
transition: all 0.9s;
|
||||
}
|
||||
.arrow {
|
||||
padding: 0;
|
||||
margin: 0 0 0 auto;
|
||||
height: 25px;
|
||||
transition: all 0.9s;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.expanded {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.can-all {
|
||||
color: red;
|
||||
}
|
||||
.can-all {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
Box Extention
|
||||
*/
|
||||
.box-ext {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.box-ext {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detail-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.detail-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cancel-reason,
|
||||
.delay-reason {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
width: 95%;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
animation: cancel-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
.cancel-reason,
|
||||
.delay-reason {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
width: 95%;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
animation: cancel-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cancel-reason {
|
||||
color: var(--cancel-red);
|
||||
}
|
||||
.cancel-reason {
|
||||
color: var(--cancel-red);
|
||||
}
|
||||
|
||||
.delay-reason {
|
||||
color: rgb(255, 119, 0);
|
||||
}
|
||||
.delay-reason {
|
||||
color: rgb(255, 119, 0);
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
Schedule Table
|
||||
*/
|
||||
.schedule-table-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-table {
|
||||
width: 95%;
|
||||
.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;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: -0.02ch;
|
||||
transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
.tpl-cell {
|
||||
color: var(--color-title);
|
||||
text-align: left;
|
||||
}
|
||||
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 {
|
||||
color: var(--color-title);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tpl-stop {
|
||||
color: var(--location-yellow);
|
||||
@@ -324,106 +426,109 @@
|
||||
animation: fast-pulse 2s ease-out infinite;
|
||||
}
|
||||
|
||||
.pass-loc {
|
||||
color: var(--color-title);
|
||||
.pass-loc td {
|
||||
color: var(--color-title);
|
||||
font-style: oblique;
|
||||
}
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.can-loc {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.can-loc {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.est {
|
||||
color: var(--location-yellow);
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
.est {
|
||||
color: var(--location-yellow);
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.act {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.delay-late {
|
||||
color: var(--delay-orange);
|
||||
td.delay-late {
|
||||
color: var(--delay-orange);
|
||||
font-weight: 600;
|
||||
animation: pulse 2s ease-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.delay-early {
|
||||
color: var(--early-blue);
|
||||
td.delay-early {
|
||||
color: var(--early-blue);
|
||||
font-weight: 600;
|
||||
animation: pulse 2s ease-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
Loading State
|
||||
*/
|
||||
.loading-state {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--color-title);
|
||||
}
|
||||
.loading-state {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
font-size: 1rem;
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: load-spin 0.8s linear infinite;
|
||||
z-index: 3;
|
||||
}
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(0, 0, 0, 0.1);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: load-spin 0.8s linear infinite;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
Responsivity
|
||||
*/
|
||||
@media (min-width: 330px) {
|
||||
.time-summary,
|
||||
.location-summary {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 330px) {
|
||||
.time-summary,
|
||||
.location-summary {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.activity-row td {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 340px) {
|
||||
.schedule-table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 340px) {
|
||||
.schedule-table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 360px) {
|
||||
.time-summary {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.location-summary {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.schedule-table {
|
||||
font-size: 0.99rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 360px) {
|
||||
.time-summary {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.location-summary {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.schedule-table {
|
||||
font-size: 0.99rem;
|
||||
}
|
||||
.activity-row td {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 420px) {
|
||||
.schedule-table {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 420px) {
|
||||
.schedule-table {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
KEYFRAMES
|
||||
*/
|
||||
@keyframes load-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
@keyframes load-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user