Add train details to train endpoint. Formatting and styling incomplete
This commit is contained in:
@@ -1,140 +1,293 @@
|
||||
<script lang="ts">
|
||||
import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
|
||||
import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { quintOut} from 'svelte/easing';
|
||||
import { formatUkTime } from '$lib/utils/time';
|
||||
import TocStyle from '$lib/components/ui/TocStyle.svelte';
|
||||
|
||||
let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse} = $props();
|
||||
let isExpanded = $state(false);
|
||||
let loadingDetails = $state(false)
|
||||
let details = $state(null);
|
||||
import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
|
||||
import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { formatUkTime } from '$lib/utils/time';
|
||||
import TocStyle from '$lib/components/ui/TocStyle.svelte';
|
||||
|
||||
const toggleExpand = async (rid: string) => {
|
||||
if (isExpanded) {
|
||||
isExpanded = false;
|
||||
return;
|
||||
}
|
||||
let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse } = $props();
|
||||
let isExpanded = $state(false);
|
||||
let loadingDetails = $state(false);
|
||||
let loadingDetailsError = $state(false);
|
||||
let loadingDetailsErrorMsg = $state("");
|
||||
let details = $state(null);
|
||||
|
||||
if (details) {
|
||||
isExpanded = true;
|
||||
return;
|
||||
}
|
||||
const toggleExpand = async (rid: string) => {
|
||||
if (isExpanded) {
|
||||
isExpanded = false;
|
||||
return;
|
||||
}
|
||||
|
||||
loadingDetails = true;
|
||||
try {
|
||||
const result = await OwlClient.trains.getByRid(service.r)
|
||||
details = result.data;
|
||||
isExpanded = true;
|
||||
} catch (e) {
|
||||
console.Error("Failde to load train details")
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
if (details) {
|
||||
isExpanded = true;
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
loadingDetails = true;
|
||||
try {
|
||||
const result = await OwlClient.trains.getByRid(service.r);
|
||||
details = result.data;
|
||||
isExpanded = true;
|
||||
} catch (e) {
|
||||
console.Error('Failed to load train details');
|
||||
loadingDetailsError = true;
|
||||
loadingDetailsErrorMsg = e.message;
|
||||
} finally {
|
||||
loadingDetails = false;
|
||||
}
|
||||
};
|
||||
|
||||
let OriginDepartureSummary = $derived(formatUkTime(service.od));
|
||||
|
||||
let OriginDepartureSummary = $derived(formatUkTime(service.od));
|
||||
async function loadDetails(rid: string) {
|
||||
if (details) return;
|
||||
loadingDetails = true;
|
||||
|
||||
async function loadDetails(rid: string) {
|
||||
if (details) return;
|
||||
loadingDetails = true;
|
||||
const result = await OwlClient.trains.getByRid(service.r);
|
||||
details = result.data;
|
||||
loadingDetails = false;
|
||||
}
|
||||
|
||||
const result = await OwlClient.trains.getByRid(service.r)
|
||||
details = result.data;
|
||||
loadingDetails = false;
|
||||
}
|
||||
const estClass = (act, est) => (!act && est) ? 'est' : 'act';
|
||||
</script>
|
||||
|
||||
<div class="train-service">
|
||||
<button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}>
|
||||
<div class="operator-summary">
|
||||
<TocStyle toc={service.o} />
|
||||
</div>
|
||||
<div class="main-text-summary">
|
||||
<div class="time-summary">
|
||||
{OriginDepartureSummary}
|
||||
</div>
|
||||
<div class="location-summary">
|
||||
{service.ot}
|
||||
</div>
|
||||
<div class="location-summary to-summary">
|
||||
to
|
||||
</div>
|
||||
<div class="location-summary">
|
||||
{service.dt}
|
||||
</div>
|
||||
<!-- Add arrow icon to signify drop-down -->
|
||||
<!-- ADD LOADING STATE -->
|
||||
</div>
|
||||
</button>
|
||||
{#if isExpanded && details}
|
||||
<div transition:slide={{duration: 800, easing: quintOut}} class="detauls-content">
|
||||
<!-- Here goes the data formatting! -->
|
||||
{JSON.stringify(details)}
|
||||
</div>
|
||||
{/if}
|
||||
<button class="summary" onclick={toggleExpand} type="button" aria-expanded={isExpanded}>
|
||||
<div class="operator-summary">
|
||||
<TocStyle toc={service.o} />
|
||||
</div>
|
||||
<div class="main-text-summary">
|
||||
<div class="time-summary">
|
||||
{OriginDepartureSummary}
|
||||
</div>
|
||||
<div class="location-summary">
|
||||
{service.ot}
|
||||
</div>
|
||||
<div class="location-summary to-summary">to</div>
|
||||
<div class="location-summary">
|
||||
{service.dt}
|
||||
</div>
|
||||
<!-- Add arrow icon to signify drop-down -->
|
||||
<!-- ADD LOADING STATE -->
|
||||
</div>
|
||||
</button>
|
||||
{#if isExpanded && details}
|
||||
<div class="box-ext" transition:slide={{ duration: 800, easing: quintOut }}>
|
||||
<!-- Here goes the data formatting! -->
|
||||
<div class="detail-head">
|
||||
<!-- Cancellation Section -->
|
||||
{#if details.header.cr}
|
||||
<span class="cancel-reason">
|
||||
{details.header.cr}
|
||||
{#if details.header.cl}
|
||||
{details.header.cn ? ' near ' : ' at '}
|
||||
{details.header.cl}
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<!-- Delay Section -->
|
||||
{#if details.header.dr}
|
||||
<span class="delay-reason">
|
||||
{details.header.dr}
|
||||
{#if details.header.dl}
|
||||
{details.header.dn ? ' near ' : ' at '}
|
||||
{details.header.dl}
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
<div class="pis-detail">
|
||||
<!-- PIS Data Here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="schedule-table-container">
|
||||
<table class="schedule-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2"></th>
|
||||
<th colspan="2">Arr</th>
|
||||
<th colspan="2">Dep</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Location</th>
|
||||
<th>Plat</th>
|
||||
<th>Sch</th>
|
||||
<th>Act</th>
|
||||
<th>Sch</th>
|
||||
<th>Act</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each details.locations as loc}
|
||||
<tr class:pass-loc={loc.r === "PASS"} class:can-loc={loc.can}>
|
||||
<td class="tpl-cell">{loc.t}</td>
|
||||
<td class="plat-cell">{loc.p}</td>
|
||||
{#if loc.r == "PASS"}
|
||||
<td class="time-cell" 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)}">{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)}">{formatUkTime(loc.atd || loc.etd || "--")}</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.train-service {
|
||||
background-color: var(--color-accent);
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--shadow-std);
|
||||
overflow: hidden;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
transition: 0.2s all;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.train-service {
|
||||
background-color: var(--color-accent);
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--shadow-std);
|
||||
overflow: hidden;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
transition: 0.2s all;
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.train-service:hover {
|
||||
filter:brightness(1.5);
|
||||
}
|
||||
.summary:hover {
|
||||
filter:invert();
|
||||
}
|
||||
|
||||
.summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
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: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
.time-summary {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
.location-summary {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-title);
|
||||
}
|
||||
.location-summary {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color-title);
|
||||
}
|
||||
|
||||
.to-summary {
|
||||
font-size: 0.8rem;
|
||||
font-style: oblique;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
</style>
|
||||
.to-summary {
|
||||
font-size: 0.8rem;
|
||||
font-style: oblique;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.cancel-reason, .delay-reason {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.cancel-reason {
|
||||
color:rgb(255, 0, 0);
|
||||
font-weight: 500;
|
||||
animation: cancel-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.delay-reason {
|
||||
color:rgb(255, 119, 0);
|
||||
font-weight: 500;
|
||||
animation: cancel-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes cancel-pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 0px rgb(255, 0, 0);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
text-shadow: 0 0 5px rgba(255,0,0,0.2)
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 0px rgb(255, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-table-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.schedule-table {
|
||||
width: 95%;
|
||||
max-width: 375px;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
th, td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tpl-cell {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.pass-loc {
|
||||
color: var(--color-title);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.can-loc {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.est {
|
||||
font-style: oblique;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.act {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user