Componentised staffLdb - currently fighting with table styling

This commit is contained in:
Fred Boniface 2023-07-09 23:25:59 +01:00
parent dc4906b060
commit a83c8d3ed5
5 changed files with 491 additions and 500 deletions

View File

@ -3,63 +3,93 @@
export let title = 'Loading...';
import { onMount } from 'svelte';
import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
//import ServiceRow from './service-row.svelte';
import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
import Reason from '$lib/raw-fetchers/reason.svelte';
import Loading from '$lib/navigation/loading.svelte';
import Nav from '$lib/navigation/nav.svelte';
import { uuid } from '$lib/stores/uuid';
import Error from '../../../routes/+error.svelte';
import Island from '$lib/islands/island.svelte';
import TableGenerator from './table/table-generator.svelte';
let requestedStation;
let requestedStation = '';
$: requestedStation = station;
let jsonData = {};
let services = [],
busServices = [],
ferryServices = [];
let dataAge = null;
/**
* @type {string | any[]}
*/
let trainServices = [];
/**
* @type {string | any[]}
*/
let busServices = [];
/**
* @type {string | any[]}
*/
let ferryServices = [];
let dataAge = new Date(0);
let isLoading = true;
let isErr = false;
let errMsg;
let alerts = [];
let errMsg = '';
let alerts = [''];
let detail = { show: false, rid: '', uid: '', headcode: '' };
$: {
// @ts-ignore
if (jsonData?.GetBoardResult?.generatedAt) {
// @ts-ignore
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
}
// @ts-ignore
if (jsonData?.GetBoardResult?.trainServices?.service) {
services = jsonData.GetBoardResult.trainServices.service;
// @ts-ignore
trainServices = ensureArray((trainServices = jsonData.GetBoardResult.trainServices.service));
} else {
services = [];
trainServices = [];
}
// @ts-ignore
if (jsonData?.GetBoardResult?.busServices?.service) {
busServices = jsonData.GetBoardResult.busServices.service;
// @ts-ignore
busServices = ensureArray((busServices = jsonData.GetBoardResult.busServices.service));
} else {
busServices = [];
}
// @ts-ignore
if (jsonData?.GetBoardResult?.ferryServices?.service) {
ferryServices = jsonData.GetBoardResult.ferryServices.service;
// @ts-ignore
ensureArray((ferryServices = jsonData.GetBoardResult.ferryServices.service));
} else {
ferryServices = [];
}
// @ts-ignore
if (jsonData?.GetBoardResult?.locationName) {
// @ts-ignore
title = jsonData.GetBoardResult.locationName;
} else {
title = 'Loading Board';
}
// @ts-ignore
if (jsonData?.GetBoardResult?.nrccMessages) {
// @ts-ignore
alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message);
} else {
alerts = [];
}
}
/**
* @param {any} item
*/
function ensureArray(item) {
if (Array.isArray(item)) {
return item;
}
return [item];
}
async function fetchData() {
isLoading = true; // Set loading state
try {
@ -89,148 +119,9 @@
}
}
async function generateServiceData(service) {
const timeDetails = await parseTimes(service);
let serviceData = {
from: await parseLocation(service.origin),
to: await parseLocation(service.destination),
length: await getTrainLength(service),
platform: await parsePlatform(service?.platform || 'undefined'),
platformHidden: service?.platformIsHidden === 'true',
schArr: timeDetails.schArr,
expArr: timeDetails.expArr,
schDep: timeDetails.schDep,
expDep: timeDetails.expDep,
isEarlyArr: timeDetails.earArr,
isLateArr: timeDetails.delArr,
isEarlyDep: timeDetails.earDep,
isLateDep: timeDetails.delDep,
isCancelledDep: false,
isCancelled: Boolean(service?.isCancelled),
canArr: timeDetails.canArr,
canDep: timeDetails.canDep,
isDelayed: service?.arrivalType === 'Delayed',
isArrDelayed: service?.arrivalType === 'Delayed',
isDepDelayed: service?.departureType === 'Delayed',
isNonPublic: service?.isPassengerService === 'false' ? true : false
};
return serviceData;
}
async function getTrainLength(service) {
if (service?.length) {
return parseInt(service?.length);
} else if (service?.formation?.coaches) {
return service.formation.coaches.coach.length;
}
return null;
}
async function parseLocation(location) {
if (!Array.isArray(location.location)) {
return location.location?.tiploc;
}
let locations = [];
for (const singleLocation of location?.location) {
locations.push(singleLocation?.tiploc);
}
return locations.join(' & ');
}
async function parsePlatform(platform) {
if (!platform) {
return '-';
}
if (platform === 'TBC' || platform == 'undefined') {
return '-';
}
return {
number: platform
};
}
function parseTimes(service) {
let schArr = new Date(service?.sta);
let expArr = new Date(service?.eta || service?.ata);
let schDep = new Date(service?.std);
let expDep = new Date(service?.etd || service?.atd);
let isEarlyArr = false,
isDelayedArr = false,
isArr = false,
canArr = false;
let isEarlyDep = false,
isDelayedDep = false,
isDep = false,
canDep = false;
const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
if (expArr - schArr < -timeDifferenceThreshold) {
isEarlyArr = true;
isArr = true;
} else if (expArr - schArr > timeDifferenceThreshold) {
isDelayedArr = true;
isArr = true;
}
if (expDep - schDep < -timeDifferenceThreshold) {
isEarlyDep = true;
isDep = true;
} else if (expDep - schDep > timeDifferenceThreshold) {
isDelayedDep = true;
isDep = true;
}
let parsedExpArr;
if (expArr instanceof Date && !isNaN(expArr)) {
if (!isEarlyArr && !isDelayedArr) {
parsedExpArr = 'RT';
} else {
parsedExpArr = parseIndividualTime(expArr);
}
} else if (service.isCancelled === 'true') {
parsedExpArr = 'CANC';
canArr = true;
} else {
parsedExpArr = '-';
}
let parsedExpDep;
if (expDep instanceof Date && !isNaN(expDep)) {
if (!isEarlyDep && !isDelayedDep) {
parsedExpDep = 'RT';
} else {
parsedExpDep = parseIndividualTime(expDep);
}
} else if (service.isCancelled === 'true') {
parsedExpDep = 'CANC';
canDep = true;
} else {
parsedExpDep = '-';
}
return {
schArr: parseIndividualTime(schArr),
expArr: parsedExpArr,
schDep: parseIndividualTime(schDep),
expDep: parsedExpDep,
earArr: isEarlyArr,
delArr: isDelayedArr,
earDep: isEarlyDep,
delDep: isDelayedDep,
canArr: canArr,
canDep: canDep
};
}
function parseIndividualTime(input) {
const dt = new Date(input);
const output = dt.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
});
if (output !== 'Invalid Date') {
return output;
}
return '-';
}
/**
* @param {any} messages
*/
function processNrcc(messages) {
// Remove newlines and then <p> tags from input and append to array
let arrMessages;
@ -247,7 +138,7 @@
return processedMessages;
}
async function showDetails(rid, uid, tid) {
function showDetail(rid='', uid='', tid='') {
detail = {
rid: rid,
uid: uid,
@ -286,339 +177,45 @@
{#if alerts.length}
<AlertBar {alerts} />
{/if}
<table class="dataTable">
<tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
<tr>
<th colspan="4" />
<th class="timePair" colspan="2">Arrival</th>
<th class="timePair" colspan="2">Departure</th>
</tr>
<tr>
<th class="id">ID</th>
<th class="from">From</th>
<th class="to">To</th>
<th class="plat">Plat</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
</tr>
{#if !services.length}
<tr><td colspan="8">No Scheduled Train Services</td></tr>
<p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
{#if trainServices && trainServices.length}
<TableGenerator services={trainServices} click={showDetail} />
{:else}
{#each services as service}
{#await generateServiceData(service)}
<tr>
<td colspan="8"> Loading... </td>
</tr>
{:then serviceStats}
<tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
<td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}
>{service.trainid}</td
>
<td
class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td
>
<td
class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td
>
<td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
<td class="time time-data data">{serviceStats.schArr}</td>
<td
class="time time-data data {serviceStats.canArr && 'can-time'} {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr &&
'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
>
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
<td
class="time time-data data {serviceStats.canDep && 'can-time'} {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep &&
'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
>
</tr>
<tr class="text-row">
<td colspan="8" class="text-data">
{service.operator}
{#if serviceStats.length} | {serviceStats.length} carriages{/if}
<br />
{#if service.cancelReason}
<Reason type="cancel" code={service.cancelReason} />
<br />
<p id="noservices">There are no scheduled train services in the next two hours</p>
{/if}
{#if service?.delayReason && !service.isCancelled}
<Reason type="delay" code={service.delayReason} />
{#if busServices && busServices.length}
<img class="transport-mode-image"src="/images/transport-modes/bus.svg" alt="">
<br>
<span class="transport-mode-text">Bus Services</span>
<TableGenerator services={busServices} click={showDetail} />
{/if}
</td>
</tr>
{:catch}
<tr>
<td colspan="8">Unable to load service</td>
</tr>
{/await}
{/each}
{/if}
</table>
{#if busServices.length}
<br />
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
<table class="dataTable">
<tr>
<th colspan="4" />
<th class="timePair" colspan="2">Arrival</th>
<th class="timePair" colspan="2">Departure</th>
</tr>
<tr>
<th class="id">ID</th>
<th class="from">From</th>
<th class="to">To</th>
<th class="plat">Plat</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
</tr>
{#each busServices as service}
{#await generateServiceData(service)}
<tr>
<td colspan="8"> Loading... </td>
</tr>
{:then serviceStats}
<tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
<td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}
>{service.trainid}</td
>
<td
class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td
>
<td
class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td
>
<td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
<td class="time time-data data">{serviceStats.schArr}</td>
<td
class="time time-data data {serviceStats.canArr && 'can-time'} {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr &&
'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
>
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
<td
class="time time-data data {serviceStats.canDep && 'can-time'} {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep &&
'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
>
</tr>
<tr class="text-row">
<td colspan="8" class="text-data">
{service.operator}
{#if serviceStats.length} | {serviceStats.length} carriages{/if}
<br />
{#if service.cancelReason}
<Reason type="cancel" code={service.cancelReason} />
{/if}
{#if service?.delayReason && !service.isCancelled}
<Reason type="delay" code={service.delayReason} />
{/if}
</td>
</tr>
{:catch}
<tr>
<td colspan="8">Unable to load service</td>
</tr>
{/await}
{/each}
</table>
{/if}
{#if ferryServices.length}
<br />
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services" /><br />
<table class="dataTable">
<tr>
<th colspan="4" />
<th class="timePair" colspan="2">Arrival</th>
<th class="timePair" colspan="2">Departure</th>
</tr>
<tr>
<th class="id">ID</th>
<th class="from">From</th>
<th class="to">To</th>
<th class="plat">Plat</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
</tr>
{#each ferryServices as service}
{#await generateServiceData(service)}
<tr>
<td colspan="8"> Loading... </td>
</tr>
{:then serviceStats}
<tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
<td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}
>{service.trainid}</td
>
<td
class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td
>
<td
class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td
>
<td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
<td class="time time-data data">{serviceStats.schArr}</td>
<td
class="time time-data data {serviceStats.canArr && 'can-time'} {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr &&
'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
>
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
<td
class="time time-data data {serviceStats.canDep && 'can-time'} {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep &&
'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
>
</tr>
<tr class="text-row">
<td colspan="8" class="text-data">
{service.operator}
{#if serviceStats.length} | {serviceStats.length} carriages{/if}
<br />
{#if service.cancelReason}
<Reason type="cancel" code={service.cancelReason} />
{/if}
{#if service?.delayReason && !service.isCancelled}
<Reason type="delay" code={service.delayReason} />
{/if}
</td>
</tr>
{:catch}
<tr>
<td colspan="8">Unable to load service</td>
</tr>
{/await}
{/each}
</table>
{#if ferryServices && ferryServices.length}
<img class="transport-mode-image"src="/images/transport-modes/ferry.svg" alt="">
<br>
<span class="transport-mode-text">Ferry Services</span>
<TableGenerator services={ferryServices} click={showDetail} />
{/if}
{/if}
<Nav />
<style>
#timestamp {
color: var(--second-text-color);
p.dataTime {
margin-top: 5px;
margin-bottom: 0px;
font-size: 14px;
}
#noservices {
margin: 20px;
padding-top: 20px;
color: white;
}
.transport-mode {
.transport-mode-image {
width: 30px;
margin: auto;
padding-top: 25px;
}
.dataTable {
.transport-mode-text {
color: white;
font-weight: normal;
width: 100%;
margin: 0px, 0px;
padding-left: 8px;
padding-right: 8px;
}
.id {
width: 12%;
}
.from {
width: 20%;
}
.to {
width: 20%;
}
.plat {
width: 8%;
}
.timePair {
width: 20%;
}
.time {
width: 10%;
}
.data {
font-weight: normal;
}
.id-data {
color: lightgray;
text-align: left;
}
.from-data,
.to-data {
color: yellow;
text-decoration: none;
text-align: left;
}
.text-row {
margin-top: 0px;
padding-bottom: 5px;
width: 100%;
}
.text-data {
text-align: left;
color: cyan;
font-size: smaller;
}
.can-dat {
color: grey;
text-decoration: line-through;
}
.hidden {
opacity: 0.5;
}
.ecs {
opacity: 0.75;
}
.can-time {
animation: pulse-cancel 1.5s linear infinite;
}
.early {
animation: pulse-early 1.5s linear infinite;
}
.late {
animation: pulse-late 1.5s linear infinite;
}
@keyframes pulse-late {
50% {
color: var(--main-warning-color);
}
}
@keyframes pulse-cancel {
50% {
color: var(--main-alert-color);
}
}
@keyframes pulse-early {
50% {
color: rgb(136, 164, 255);
}
}
</style>

View File

@ -1,12 +0,0 @@
<script>
</script>
<table>
</table>
<style>
table {
width: 100%;
}
</style>

View File

@ -0,0 +1,407 @@
<script>
import Reason from '$lib/raw-fetchers/reason.svelte';
export let services;
export let click;
async function generateServiceData(service) {
const timeDetails = parseTimes(service);
let serviceData = {
from: await parseLocation(service.origin),
to: await parseLocation(service.destination),
length: await getTrainLength(service),
platform: await parsePlatform(service?.platform || 'undefined'),
platformHidden: service?.platformIsHidden === 'true',
schArr: timeDetails.schArr,
expArr: timeDetails.expArr,
schDep: timeDetails.schDep,
expDep: timeDetails.expDep,
isEarlyArr: timeDetails.earArr,
isLateArr: timeDetails.delArr,
isEarlyDep: timeDetails.earDep,
isLateDep: timeDetails.delDep,
isCancelled: Boolean(service?.isCancelled),
canArr: timeDetails.canArr,
canDep: timeDetails.canDep,
isDelayed: service?.arrivalType === 'Delayed',
isArrDelayed: service?.arrivalType === 'Delayed',
isDepDelayed: service?.departureType === 'Delayed',
isNonPublic: service?.isPassengerService === 'false' ? true : false
};
return serviceData;
}
async function getTrainLength(service) {
if (service?.length) {
return parseInt(service?.length);
} else if (service?.formation?.coaches) {
return service.formation.coaches.coach.length;
}
return null;
}
async function parseLocation(location) {
if (!Array.isArray(location.location)) {
return location.location?.tiploc;
}
let locations = [];
for (const singleLocation of location?.location) {
locations.push(singleLocation?.tiploc);
}
return locations.join(' & ');
}
function parseTimes(service) {
let schArr = new Date(service?.sta);
let expArr = new Date(service?.eta || service?.ata);
let schDep = new Date(service?.std);
let expDep = new Date(service?.etd || service?.atd);
let isEarlyArr = false,
isDelayedArr = false,
isArr = false,
canArr = false;
let isEarlyDep = false,
isDelayedDep = false,
isDep = false,
canDep = false;
const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
if (expArr - schArr < -timeDifferenceThreshold) {
isEarlyArr = true;
isArr = true;
} else if (expArr - schArr > timeDifferenceThreshold) {
isDelayedArr = true;
isArr = true;
}
if (expDep - schDep < -timeDifferenceThreshold) {
isEarlyDep = true;
isDep = true;
} else if (expDep - schDep > timeDifferenceThreshold) {
isDelayedDep = true;
isDep = true;
}
let parsedExpArr;
if (expArr instanceof Date && !isNaN(expArr)) {
if (!isEarlyArr && !isDelayedArr) {
parsedExpArr = 'RT';
} else {
parsedExpArr = parseIndividualTime(expArr);
}
} else if (service.isCancelled === 'true') {
parsedExpArr = 'CANC';
canArr = true;
} else {
parsedExpArr = '-';
}
let parsedExpDep;
if (expDep instanceof Date && !isNaN(expDep)) {
if (!isEarlyDep && !isDelayedDep) {
parsedExpDep = 'RT';
} else {
parsedExpDep = parseIndividualTime(expDep);
}
} else if (service.isCancelled === 'true') {
parsedExpDep = 'CANC';
canDep = true;
} else {
parsedExpDep = '-';
}
return {
schArr: parseIndividualTime(schArr),
expArr: parsedExpArr,
schDep: parseIndividualTime(schDep),
expDep: parsedExpDep,
earArr: isEarlyArr,
delArr: isDelayedArr,
earDep: isEarlyDep,
delDep: isDelayedDep,
canArr: canArr,
canDep: canDep
};
}
function parseIndividualTime(input) {
const dt = new Date(input);
const output = dt.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
});
if (output !== 'Invalid Date') {
return output;
}
return '-';
}
async function parsePlatform(platform) {
if (!platform) {
return '-';
}
if (platform === 'TBC' || platform == 'undefined') {
return '-';
}
return {
number: platform
};
}
function detail(event,rid,uid,tid) {
const target = event.target;
click(rid,uid,tid)
}
</script>
<div>
<table>
<tr>
<th class="other" colspan="4" />
<th class="timepair" colspan="2">Arrival</th>
<th class="timepair" colspan="2">Departure</th>
</tr>
<tr>
<th class="id">ID</th>
<th class="from">From</th>
<th class="to">To</th>
<th class="plat">Plat</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
<th class="time">Sch</th>
<th class="time">Exp</th>
</tr>
{#each services as service}
{#await generateServiceData(service)}
<tr><td colspan="8">Loading Service Data...</td></tr>
{:then serviceData}
<tr on:click={(event) => detail(event, service.rid, service.uid, service.trainid)} on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}>
<td class="id">{service.trainid}</td>
<td class="from {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.from}</td>
<td class="to {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.to}</td>
<td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.platform.number || '-'}</td>
<td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
<td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled && 'canc'}"
>{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
>
<td class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schDep}</td>
<td
class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateDep && 'late'} {serviceData.isDepDelayed && 'late'}
{serviceData.isCancelled && 'canc'}">{serviceData.isDepDelayed ? 'LATE' : serviceData.expDep}</td
>
</tr>
<tr>
<td class="tableTxt" colspan="8">
{service.operator}
{#if serviceData.length} | {serviceData.length} carriages{/if}
{#if service.delayReason}
<br />
<Reason type={'delay'} code={service.delayReason} />
{/if}
{#if service.cancelReason}
<br>
<Reason type={'cancel'} code={service.cancelReason} />
{/if}
</td>
</tr>
{:catch}
<tr>
<td colspan="8">Unable to display service</td>
</tr>
{/await}
{/each}
</table>
</div>
<style>
div {
width: auto;
margin: auto;
}
table {
table-layout: auto;
text-align: center;
min-width: 100%;
font-size: 14px;
margin: 0px;
padding: 0px;
color: white;
}
/* Table Columns */
.other {
width: 30%;
}
.id {
width: 5%;
}
.from {
width: 10%;
}
.to {
width: 10%;
}
.plat {
width: 5%;
}
.timepair {
width: 70%;
}
.time {
width: 5%;
}
td.id {
color: lightblue;
text-align: left;
padding-left: 2px;
}
td.from,
td.to {
color: yellow;
text-align: left;
}
.tableTxt {
text-align: left;
padding-left: 2px;
color: var(--second-text-color);
}
/* Conditional Classes */
.cancTxt {
color: grey !important;
text-decoration: line-through;
opacity: 0.8;
}
.nonPass {
opacity: 0.6;
}
.late {
animation: pulse-late 1.5s linear infinite;
}
.canc {
animation: pulse-cancel 1.5s linear infinite;
}
.early {
animation: pulse-early 1.5s linear infinite;
}
/* Animation Definitions */
@keyframes pulse-late {
50% {
color: var(--main-warning-color);
}
}
@keyframes pulse-cancel {
50% {
color: var(--main-alert-color);
}
}
@keyframes pulse-early {
50% {
color: rgb(136, 164, 255);
}
}
/* CARRIED OVER FROM OLD COMPONENT:
#timestamp {
color: var(--second-text-color);
}
.transport-mode {
width: 30px;
margin: auto;
}
.dataTable {
color: white;
font-weight: normal;
width: 100%;
margin: 0px, 0px;
padding-left: 8px;
padding-right: 8px;
}
.id {
width: 12%;
}
.from {
width: 20%;
}
.to {
width: 20%;
}
.plat {
width: 8%;
}
.timePair {
width: 20%;
}
.time {
width: 10%;
}
.data {
font-weight: normal;
}
.id-data {
color: lightgray;
text-align: left;
}
.from-data,
.to-data {
color: yellow;
text-decoration: none;
text-align: left;
}
.text-row {
margin-top: 0px;
padding-bottom: 5px;
width: 100%;
}
.text-data {
text-align: left;
color: cyan;
font-size: smaller;
}
.can-dat {
color: grey;
text-decoration: line-through;
}
.hidden {
opacity: 0.5;
}
.ecs {
opacity: 0.75;
}
.can-time {
animation: pulse-cancel 1.5s linear infinite;
}
.early {
animation: pulse-early 1.5s linear infinite;
}
.late {
animation: pulse-late 1.5s linear infinite;
}
*/
</style>

View File

@ -195,16 +195,16 @@
background-color: var(--main-bg-color);
color: white;
font-weight: 700;
font-size: 16px;
font-size: 14px;
}
#detailTable {
width: 100%;
margin-top: 10px;
margin:auto;
color: white;
font-size: 16px;
}
.tableLocation {
width: 25%;
width: 20%;
}
.tablePlatform {
width: 8%;
@ -213,14 +213,13 @@
width: 15%;
}
.tableDelay {
width: 7%;
width: 5%;
}
.estimate {
color: rgb(255, 255, 50);
}
.pass {
opacity: 0.45;
font-size: 16px;
}
.canc {
animation: pulse-cancel 1.5s linear infinite;

View File

@ -34,7 +34,7 @@
'<h3>Everything Else</h3>' +
"<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details." +
'<br>' +
"<p>You will only see this welcome page again when there are new updates</p>"
'<p>You will only see this welcome page again when there are new updates</p>'
];
</script>