Componentised staffLdb - currently fighting with table styling
This commit is contained in:
parent
dc4906b060
commit
a83c8d3ed5
@ -3,63 +3,93 @@
|
|||||||
export let title = 'Loading...';
|
export let title = 'Loading...';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import AlertBar from '$lib/ldb/nrcc/alert-bar.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 StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
|
||||||
import Reason from '$lib/raw-fetchers/reason.svelte';
|
|
||||||
import Loading from '$lib/navigation/loading.svelte';
|
import Loading from '$lib/navigation/loading.svelte';
|
||||||
import Nav from '$lib/navigation/nav.svelte';
|
|
||||||
import { uuid } from '$lib/stores/uuid';
|
import { uuid } from '$lib/stores/uuid';
|
||||||
import Error from '../../../routes/+error.svelte';
|
|
||||||
import Island from '$lib/islands/island.svelte';
|
import Island from '$lib/islands/island.svelte';
|
||||||
|
import TableGenerator from './table/table-generator.svelte';
|
||||||
|
|
||||||
let requestedStation;
|
let requestedStation = '';
|
||||||
$: requestedStation = station;
|
$: requestedStation = station;
|
||||||
|
|
||||||
let jsonData = {};
|
let jsonData = {};
|
||||||
let services = [],
|
/**
|
||||||
busServices = [],
|
* @type {string | any[]}
|
||||||
ferryServices = [];
|
*/
|
||||||
let dataAge = null;
|
let trainServices = [];
|
||||||
|
/**
|
||||||
|
* @type {string | any[]}
|
||||||
|
*/
|
||||||
|
let busServices = [];
|
||||||
|
/**
|
||||||
|
* @type {string | any[]}
|
||||||
|
*/
|
||||||
|
let ferryServices = [];
|
||||||
|
let dataAge = new Date(0);
|
||||||
let isLoading = true;
|
let isLoading = true;
|
||||||
let isErr = false;
|
let isErr = false;
|
||||||
let errMsg;
|
let errMsg = '';
|
||||||
let alerts = [];
|
let alerts = [''];
|
||||||
let detail = { show: false, rid: '', uid: '', headcode: '' };
|
let detail = { show: false, rid: '', uid: '', headcode: '' };
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
|
// @ts-ignore
|
||||||
if (jsonData?.GetBoardResult?.generatedAt) {
|
if (jsonData?.GetBoardResult?.generatedAt) {
|
||||||
|
// @ts-ignore
|
||||||
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
|
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
if (jsonData?.GetBoardResult?.trainServices?.service) {
|
if (jsonData?.GetBoardResult?.trainServices?.service) {
|
||||||
services = jsonData.GetBoardResult.trainServices.service;
|
// @ts-ignore
|
||||||
|
trainServices = ensureArray((trainServices = jsonData.GetBoardResult.trainServices.service));
|
||||||
} else {
|
} else {
|
||||||
services = [];
|
trainServices = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
if (jsonData?.GetBoardResult?.busServices?.service) {
|
if (jsonData?.GetBoardResult?.busServices?.service) {
|
||||||
busServices = jsonData.GetBoardResult.busServices.service;
|
// @ts-ignore
|
||||||
|
busServices = ensureArray((busServices = jsonData.GetBoardResult.busServices.service));
|
||||||
} else {
|
} else {
|
||||||
busServices = [];
|
busServices = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
if (jsonData?.GetBoardResult?.ferryServices?.service) {
|
if (jsonData?.GetBoardResult?.ferryServices?.service) {
|
||||||
ferryServices = jsonData.GetBoardResult.ferryServices.service;
|
// @ts-ignore
|
||||||
|
ensureArray((ferryServices = jsonData.GetBoardResult.ferryServices.service));
|
||||||
} else {
|
} else {
|
||||||
ferryServices = [];
|
ferryServices = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
if (jsonData?.GetBoardResult?.locationName) {
|
if (jsonData?.GetBoardResult?.locationName) {
|
||||||
|
// @ts-ignore
|
||||||
title = jsonData.GetBoardResult.locationName;
|
title = jsonData.GetBoardResult.locationName;
|
||||||
} else {
|
} else {
|
||||||
title = 'Loading Board';
|
title = 'Loading Board';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
if (jsonData?.GetBoardResult?.nrccMessages) {
|
if (jsonData?.GetBoardResult?.nrccMessages) {
|
||||||
|
// @ts-ignore
|
||||||
alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message);
|
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() {
|
async function fetchData() {
|
||||||
isLoading = true; // Set loading state
|
isLoading = true; // Set loading state
|
||||||
try {
|
try {
|
||||||
@ -89,148 +119,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function generateServiceData(service) {
|
/**
|
||||||
const timeDetails = await parseTimes(service);
|
* @param {any} messages
|
||||||
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 '-';
|
|
||||||
}
|
|
||||||
|
|
||||||
function processNrcc(messages) {
|
function processNrcc(messages) {
|
||||||
// Remove newlines and then <p> tags from input and append to array
|
// Remove newlines and then <p> tags from input and append to array
|
||||||
let arrMessages;
|
let arrMessages;
|
||||||
@ -247,7 +138,7 @@
|
|||||||
return processedMessages;
|
return processedMessages;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function showDetails(rid, uid, tid) {
|
function showDetail(rid='', uid='', tid='') {
|
||||||
detail = {
|
detail = {
|
||||||
rid: rid,
|
rid: rid,
|
||||||
uid: uid,
|
uid: uid,
|
||||||
@ -286,339 +177,45 @@
|
|||||||
{#if alerts.length}
|
{#if alerts.length}
|
||||||
<AlertBar {alerts} />
|
<AlertBar {alerts} />
|
||||||
{/if}
|
{/if}
|
||||||
<table class="dataTable">
|
<p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
|
||||||
<tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
|
{#if trainServices && trainServices.length}
|
||||||
<tr>
|
<TableGenerator services={trainServices} click={showDetail} />
|
||||||
<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>
|
|
||||||
{:else}
|
{:else}
|
||||||
{#each services as service}
|
<p id="noservices">There are no scheduled train services in the next two hours</p>
|
||||||
{#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 />
|
|
||||||
{/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}
|
|
||||||
{/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}
|
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if busServices && busServices.length}
|
||||||
|
|
||||||
<Nav />
|
<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}
|
||||||
|
{#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}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#timestamp {
|
p.dataTime {
|
||||||
color: var(--second-text-color);
|
margin-top: 5px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
#noservices {
|
||||||
|
margin: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transport-mode {
|
.transport-mode-image {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
padding-top: 25px;
|
||||||
}
|
}
|
||||||
|
.transport-mode-text {
|
||||||
.dataTable {
|
|
||||||
color: white;
|
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>
|
</style>
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
<script>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
407
src/lib/ldb/staff/table/table-generator.svelte
Normal file
407
src/lib/ldb/staff/table/table-generator.svelte
Normal 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>
|
||||||
@ -195,16 +195,16 @@
|
|||||||
background-color: var(--main-bg-color);
|
background-color: var(--main-bg-color);
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
#detailTable {
|
#detailTable {
|
||||||
width: 100%;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
margin:auto;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
.tableLocation {
|
.tableLocation {
|
||||||
width: 25%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
.tablePlatform {
|
.tablePlatform {
|
||||||
width: 8%;
|
width: 8%;
|
||||||
@ -213,14 +213,13 @@
|
|||||||
width: 15%;
|
width: 15%;
|
||||||
}
|
}
|
||||||
.tableDelay {
|
.tableDelay {
|
||||||
width: 7%;
|
width: 5%;
|
||||||
}
|
}
|
||||||
.estimate {
|
.estimate {
|
||||||
color: rgb(255, 255, 50);
|
color: rgb(255, 255, 50);
|
||||||
}
|
}
|
||||||
.pass {
|
.pass {
|
||||||
opacity: 0.45;
|
opacity: 0.45;
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
.canc {
|
.canc {
|
||||||
animation: pulse-cancel 1.5s linear infinite;
|
animation: pulse-cancel 1.5s linear infinite;
|
||||||
|
|||||||
@ -34,7 +34,7 @@
|
|||||||
'<h3>Everything Else</h3>' +
|
'<h3>Everything Else</h3>' +
|
||||||
"<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details." +
|
"<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details." +
|
||||||
'<br>' +
|
'<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>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user