StaffLDB-Minify #1
|
|
@ -1,135 +0,0 @@
|
|||
<script lang="ts">
|
||||
export let station = '';
|
||||
export let title = 'Loading...';
|
||||
import { onMount } from 'svelte';
|
||||
import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
|
||||
import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import { uuid } from '$lib/stores/uuid';
|
||||
import Island from '$lib/islands/island.svelte';
|
||||
import TableGeneratorDev from './table/table-generator_dev.svelte';
|
||||
|
||||
const TableGenerator = TableGeneratorDev;
|
||||
|
||||
import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
|
||||
|
||||
let jsonData: ApiResponse<StaffLdb>;
|
||||
let isLoading = true;
|
||||
let isErr = false;
|
||||
let errMsg: string;
|
||||
let alerts: NrccMessage[];
|
||||
let detail = { show: false, rid: '', uid: '', headcode: '' };
|
||||
|
||||
$: {
|
||||
if (isLoading) {
|
||||
title = 'Loading...';
|
||||
} else {
|
||||
title = station;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
isLoading = true; // Set loading state
|
||||
try {
|
||||
console.log(`Requested Station: ${requestedStation}`);
|
||||
const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
|
||||
const opt = {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
uuid: $uuid
|
||||
}
|
||||
};
|
||||
const data = await fetch(url, opt);
|
||||
const json = await data.json();
|
||||
if (json.ERROR === 'NOT_FOUND') {
|
||||
isErr = true;
|
||||
errMsg = 'Unable to find this station';
|
||||
} else {
|
||||
jsonData = json;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
isLoading = false;
|
||||
isErr = true;
|
||||
errMsg = 'Connection error, try again later';
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
}
|
||||
|
||||
function showDetail(rid = '', uid = '', tid = '') {
|
||||
detail = {
|
||||
rid: rid,
|
||||
uid: uid,
|
||||
headcode: tid,
|
||||
show: true
|
||||
};
|
||||
}
|
||||
|
||||
function hideDetails() {
|
||||
detail = {
|
||||
rid: '',
|
||||
uid: '',
|
||||
headcode: '',
|
||||
show: false
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#key detail}
|
||||
{#if detail.show}
|
||||
<StaffTrainDetail {detail} close={hideDetails} />
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else if isErr}
|
||||
<Island>
|
||||
<p><strong>{errMsg}</strong></p>
|
||||
</Island>
|
||||
{:else}
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
<p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
|
||||
{#if trainServices && trainServices.length}
|
||||
<TableGenerator services={trainServices} click={showDetail} />
|
||||
{:else}
|
||||
<p id="noservices">There are no scheduled train services in the next two hours</p>
|
||||
{/if}
|
||||
{#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}
|
||||
{#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>
|
||||
p.dataTime {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
#noservices {
|
||||
margin: 20px;
|
||||
padding-top: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.transport-mode-image {
|
||||
width: 30px;
|
||||
margin: auto;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.transport-mode-text {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,220 +1,5 @@
|
|||
<script>
|
||||
export let station = '';
|
||||
export let title = 'Loading...';
|
||||
import { onMount } from 'svelte';
|
||||
import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
|
||||
import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import { uuid } from '$lib/stores/uuid';
|
||||
import Island from '$lib/islands/island.svelte';
|
||||
import TableGenerator from './table/table-generator.svelte';
|
||||
<script lang="ts">
|
||||
|
||||
let requestedStation = '';
|
||||
$: requestedStation = station;
|
||||
|
||||
let jsonData = {};
|
||||
/**
|
||||
* @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 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) {
|
||||
// @ts-ignore
|
||||
trainServices = ensureArray((trainServices = jsonData.GetBoardResult.trainServices.service));
|
||||
} else {
|
||||
trainServices = [];
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
if (jsonData?.GetBoardResult?.busServices?.service) {
|
||||
// @ts-ignore
|
||||
busServices = ensureArray((busServices = jsonData.GetBoardResult.busServices.service));
|
||||
} else {
|
||||
busServices = [];
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
if (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 {
|
||||
console.log(`Requested Station: ${requestedStation}`);
|
||||
const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
|
||||
const opt = {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
uuid: $uuid
|
||||
}
|
||||
};
|
||||
const data = await fetch(url, opt);
|
||||
const json = await data.json();
|
||||
if (json.ERROR === 'NOT_FOUND') {
|
||||
isErr = true;
|
||||
errMsg = 'Unable to find this station';
|
||||
} else {
|
||||
jsonData = json;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
isLoading = false;
|
||||
isErr = true;
|
||||
errMsg = 'Connection error, try again later';
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} messages
|
||||
*/
|
||||
function processNrcc(messages) {
|
||||
// Remove newlines and then <p> tags from input and append to array
|
||||
let arrMessages;
|
||||
if (!Array.isArray(messages)) {
|
||||
arrMessages = [messages];
|
||||
} else {
|
||||
arrMessages = messages;
|
||||
}
|
||||
let processedMessages = [];
|
||||
for (const message of arrMessages) {
|
||||
const msgText = message.xhtmlMessage;
|
||||
processedMessages.push(msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, ''));
|
||||
}
|
||||
return processedMessages;
|
||||
}
|
||||
|
||||
function showDetail(rid = '', uid = '', tid = '') {
|
||||
detail = {
|
||||
rid: rid,
|
||||
uid: uid,
|
||||
headcode: tid,
|
||||
show: true
|
||||
};
|
||||
}
|
||||
|
||||
function hideDetails() {
|
||||
detail = {
|
||||
rid: '',
|
||||
uid: '',
|
||||
headcode: '',
|
||||
show: false
|
||||
};
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#key detail}
|
||||
{#if detail.show}
|
||||
<StaffTrainDetail {detail} close={hideDetails} />
|
||||
{/if}
|
||||
{/key}
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else if isErr}
|
||||
<Island>
|
||||
<p><strong>{errMsg}</strong></p>
|
||||
</Island>
|
||||
{:else}
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
<p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
|
||||
{#if trainServices && trainServices.length}
|
||||
<TableGenerator services={trainServices} click={showDetail} />
|
||||
{:else}
|
||||
<p id="noservices">There are no scheduled train services in the next two hours</p>
|
||||
{/if}
|
||||
{#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}
|
||||
{#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>
|
||||
p.dataTime {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
}
|
||||
#noservices {
|
||||
margin: 20px;
|
||||
padding-top: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.transport-mode-image {
|
||||
width: 30px;
|
||||
margin: auto;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.transport-mode-text {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,155 +1,90 @@
|
|||
<script>
|
||||
<script lang="ts">
|
||||
import Reason from '$lib/raw-fetchers/reason.svelte';
|
||||
import { tocs as tocMap } from '$lib/stores/tocMap';
|
||||
|
||||
export let services;
|
||||
export let click;
|
||||
import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
|
||||
|
||||
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;
|
||||
}
|
||||
export let services: TrainServices[];
|
||||
export let click: any; // Not sure of the type here!
|
||||
|
||||
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) {
|
||||
function detail(event: any, rid: string, uid: string, tid: string) {
|
||||
const target = event.target;
|
||||
click(rid, uid, tid);
|
||||
}
|
||||
|
||||
async function formatLocations(locations: ServiceLocation[]): Promise<string> {
|
||||
let tiplocs: string[] = [];
|
||||
for (const location of locations) {
|
||||
tiplocs.push(location.tiploc);
|
||||
}
|
||||
return tiplocs.join(' & ');
|
||||
}
|
||||
|
||||
async function classGenerator(service: TrainServices) {
|
||||
let otherArr: string[] = [];
|
||||
let arrArr: string[] = [];
|
||||
let depArr: string[] = [];
|
||||
let platArr: string[] = [];
|
||||
|
||||
if (service.isCancelled) {
|
||||
otherArr.push('canc');
|
||||
}
|
||||
if (service.serviceIsSupressed) {
|
||||
otherArr.push('nonPass');
|
||||
}
|
||||
if (service.platformIsHidden) {
|
||||
platArr.push('nonPass');
|
||||
}
|
||||
|
||||
if (service.sta !== undefined) {
|
||||
if (service.eta !== undefined) {
|
||||
if (service.sta < service.eta) {
|
||||
arrArr.push('late');
|
||||
}
|
||||
} else if (service.ata !== undefined) {
|
||||
if (service.sta < service.ata) {
|
||||
arrArr.push('late');
|
||||
}
|
||||
}
|
||||
if (service.eta !== undefined) {
|
||||
if (service.sta > service.eta) {
|
||||
arrArr.push('early');
|
||||
}
|
||||
} else if (service.ata !== undefined) {
|
||||
if (service.sta > service.ata) {
|
||||
arrArr.push('early');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (service.std !== undefined) {
|
||||
if (service.etd !== undefined) {
|
||||
if (service.std < service.etd) {
|
||||
depArr.push('late');
|
||||
}
|
||||
} else if (service.atd !== undefined) {
|
||||
if (service.std < service.atd) {
|
||||
depArr.push('late');
|
||||
}
|
||||
}
|
||||
if (service.etd !== undefined) {
|
||||
if (service.std > service.etd) {
|
||||
depArr.push('early');
|
||||
}
|
||||
} else if (service.atd !== undefined) {
|
||||
if (service.std > service.atd) {
|
||||
depArr.push('early');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
other: otherArr.join(' '),
|
||||
arr: arrArr.join(' '),
|
||||
dep: depArr.join(' '),
|
||||
plat: platArr.join(' ')
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<p class="smallScreen">Your display is too small to view this data</p>
|
||||
|
|
@ -170,51 +105,43 @@
|
|||
<th class="timepair" colspan="2">Departure</th>
|
||||
</tr>
|
||||
{#each services as service}
|
||||
{#await generateServiceData(service)}
|
||||
<tr><td colspan="8">Loading Service Data...</td></tr>
|
||||
{:then serviceData}
|
||||
<tr
|
||||
class="dataRow"
|
||||
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.platformHidden && 'nonPass'}"
|
||||
>{serviceData.platform.number || '-'}</td
|
||||
>
|
||||
<td class="time schTime {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.isEarlyArr && 'early'}">{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
|
||||
>
|
||||
<td class="time schTime {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.isEarlyDep && 'early'}">{serviceData.isDepDelayed ? 'LATE' : serviceData.expDep}</td
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tableTxt" colspan="8">
|
||||
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
|
||||
{#if service.isCharter}charter{/if}
|
||||
{#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}
|
||||
<tr
|
||||
class="dataRow"
|
||||
on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
||||
on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
||||
>
|
||||
{#await classGenerator(service) then classes}
|
||||
<td class="id {classes.other}">{service.trainid}</td>
|
||||
<td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
|
||||
<td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td>
|
||||
<td class="plat">{service.platform || '-'}</td>
|
||||
<td class="time schTime {classes.other}">{service.sta || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
<td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
<td class="time schTime {classes.other}">{service.std || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
<td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
{/await}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tableTxt" colspan="8">
|
||||
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
|
||||
{#if service.length} | {service.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>
|
||||
<tr>
|
||||
<td colspan="8">Unable to display service</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
|
||||
|
|
@ -383,103 +310,4 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -1,313 +0,0 @@
|
|||
<script lang="ts">
|
||||
import Reason from '$lib/raw-fetchers/reason.svelte';
|
||||
import { tocs as tocMap } from '$lib/stores/tocMap';
|
||||
|
||||
import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
|
||||
|
||||
export let services: TrainServices[];
|
||||
export let click: any; // Not sure of the type here!
|
||||
|
||||
function detail(event: any, rid: string, uid: string, tid: string) {
|
||||
const target = event.target;
|
||||
click(rid, uid, tid);
|
||||
}
|
||||
|
||||
async function formatLocations(locations: ServiceLocation[]): Promise<string> {
|
||||
let tiplocs: string[] = [];
|
||||
for (const location of locations) {
|
||||
tiplocs.push(location.tiploc);
|
||||
}
|
||||
return tiplocs.join(' & ');
|
||||
}
|
||||
|
||||
async function classGenerator(service: TrainServices) {
|
||||
let otherArr: string[] = [];
|
||||
let arrArr: string[] = [];
|
||||
let depArr: string[] = [];
|
||||
let platArr: string[] = [];
|
||||
|
||||
if (service.isCancelled) {
|
||||
otherArr.push('canc');
|
||||
}
|
||||
if (service.serviceIsSupressed) {
|
||||
otherArr.push('nonPass');
|
||||
}
|
||||
if (service.platformIsHidden) {
|
||||
platArr.push('nonPass');
|
||||
}
|
||||
|
||||
if (service.sta !== undefined) {
|
||||
if (service.eta !== undefined) {
|
||||
if (service.sta < service.eta) {
|
||||
arrArr.push('late');
|
||||
}
|
||||
} else if (service.ata !== undefined) {
|
||||
if (service.sta < service.ata) {
|
||||
arrArr.push('late');
|
||||
}
|
||||
}
|
||||
if (service.eta !== undefined) {
|
||||
if (service.sta > service.eta) {
|
||||
arrArr.push('early');
|
||||
}
|
||||
} else if (service.ata !== undefined) {
|
||||
if (service.sta > service.ata) {
|
||||
arrArr.push('early');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (service.std !== undefined) {
|
||||
if (service.etd !== undefined) {
|
||||
if (service.std < service.etd) {
|
||||
depArr.push('late');
|
||||
}
|
||||
} else if (service.atd !== undefined) {
|
||||
if (service.std < service.atd) {
|
||||
depArr.push('late');
|
||||
}
|
||||
}
|
||||
if (service.etd !== undefined) {
|
||||
if (service.std > service.etd) {
|
||||
depArr.push('early');
|
||||
}
|
||||
} else if (service.atd !== undefined) {
|
||||
if (service.std > service.atd) {
|
||||
depArr.push('early');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
other: otherArr.join(' '),
|
||||
arr: arrArr.join(' '),
|
||||
dep: depArr.join(' '),
|
||||
plat: platArr.join(' ')
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<p class="smallScreen">Your display is too small to view this data</p>
|
||||
<table>
|
||||
<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>
|
||||
<tr>
|
||||
<th class="other" colspan="4" />
|
||||
<th class="timepair" colspan="2">Arrival</th>
|
||||
<th class="timepair" colspan="2">Departure</th>
|
||||
</tr>
|
||||
{#each services as service}
|
||||
<tr
|
||||
class="dataRow"
|
||||
on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
||||
on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
||||
>
|
||||
{#await classGenerator(service) then classes}
|
||||
<td class="id {classes.other}">{service.trainid}</td>
|
||||
<td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
|
||||
<td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td>
|
||||
<td class="plat">{service.platform || '-'}</td>
|
||||
<td class="time schTime {classes.other}">{service.sta || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
<td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
<td class="time schTime {classes.other}">{service.std || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
<td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td>
|
||||
<!-- All time need to be displayed appropriately -->
|
||||
{/await}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tableTxt" colspan="8">
|
||||
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
|
||||
{#if service.length} | {service.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>
|
||||
<tr>
|
||||
<td colspan="8">Unable to display service</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
|
||||
<style>
|
||||
table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
max-width: 875px;
|
||||
margin: auto;
|
||||
padding: 0px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 12px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.dataRow {
|
||||
font-family: ubuntu, monospace;
|
||||
vertical-align: bottom;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Table Columns */
|
||||
.id {
|
||||
width: 8%;
|
||||
}
|
||||
.from {
|
||||
width: 14%;
|
||||
}
|
||||
.to {
|
||||
width: 14%;
|
||||
}
|
||||
.plat {
|
||||
width: 6%;
|
||||
}
|
||||
.time {
|
||||
width: 9%;
|
||||
}
|
||||
|
||||
td.id {
|
||||
color: lightblue;
|
||||
text-align: left;
|
||||
padding-left: 2px;
|
||||
}
|
||||
td.from,
|
||||
td.to {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
td.to,
|
||||
th.to {
|
||||
text-align: right;
|
||||
}
|
||||
td.from,
|
||||
th.from {
|
||||
text-align: left;
|
||||
}
|
||||
td.time {
|
||||
font-size: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tableTxt {
|
||||
text-align: left;
|
||||
padding-left: 2px;
|
||||
color: var(--second-text-color);
|
||||
vertical-align: top;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Handle small screens */
|
||||
.smallScreen {
|
||||
display: none;
|
||||
margin: 20px;
|
||||
}
|
||||
@media screen and (max-width: 335px) {
|
||||
th {
|
||||
font-size: 10px;
|
||||
}
|
||||
.dataRow {
|
||||
font-size: 12px;
|
||||
}
|
||||
td.time {
|
||||
font-size: 12px;
|
||||
}
|
||||
.tableTxt {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 279px) {
|
||||
table {
|
||||
display: none;
|
||||
}
|
||||
.smallScreen {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Handle Large Screens */
|
||||
@media screen and (min-width: 375px) {
|
||||
.dataRow {
|
||||
font-size: 18px;
|
||||
}
|
||||
td.time {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 450px) {
|
||||
.dataRow {
|
||||
font-size: 20px;
|
||||
}
|
||||
td.time {
|
||||
font-size: 19px;
|
||||
}
|
||||
.tableTxt {
|
||||
font-size: 14px;
|
||||
}
|
||||
td.to,
|
||||
td.from,
|
||||
th.to,
|
||||
th.from {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue