Begin adapting TableGeneratorDev for new API response
This commit is contained in:
parent
eac9d2bff7
commit
f5a73f20e5
@ -9,6 +9,8 @@
|
|||||||
import Island from '$lib/islands/island.svelte';
|
import Island from '$lib/islands/island.svelte';
|
||||||
import TableGeneratorDev from './table/table-generator_dev.svelte';
|
import TableGeneratorDev from './table/table-generator_dev.svelte';
|
||||||
|
|
||||||
|
const TableGenerator = TableGeneratorDev
|
||||||
|
|
||||||
import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
|
import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
|
||||||
|
|
||||||
let jsonData: ApiResponse<StaffLdb>;
|
let jsonData: ApiResponse<StaffLdb>;
|
||||||
|
|||||||
@ -4,154 +4,65 @@
|
|||||||
|
|
||||||
import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
|
import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
|
||||||
|
|
||||||
export let services;
|
export let services: TrainServices[];
|
||||||
export let click;
|
export let click: any; // Not sure of the type here!
|
||||||
|
|
||||||
async function generateServiceData(service) {
|
function detail(event: any, rid: string, uid: string, tid: string) {
|
||||||
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;
|
const target = event.target;
|
||||||
click(rid, uid, tid);
|
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>
|
</script>
|
||||||
|
|
||||||
<p class="smallScreen">Your display is too small to view this data</p>
|
<p class="smallScreen">Your display is too small to view this data</p>
|
||||||
@ -172,36 +83,26 @@
|
|||||||
<th class="timepair" colspan="2">Departure</th>
|
<th class="timepair" colspan="2">Departure</th>
|
||||||
</tr>
|
</tr>
|
||||||
{#each services as service}
|
{#each services as service}
|
||||||
{#await generateServiceData(service)}
|
|
||||||
<tr><td colspan="8">Loading Service Data...</td></tr>
|
|
||||||
{:then serviceData}
|
|
||||||
<tr
|
<tr
|
||||||
class="dataRow"
|
class="dataRow"
|
||||||
on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
||||||
on:keypress={(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>
|
{#await classGenerator(service) then classes}
|
||||||
<td class="from {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.from}</td>
|
<td class="id {classes.other}">{service.trainid}</td>
|
||||||
<td class="to {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.to}</td>
|
<td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
|
||||||
<td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'} {serviceData.platformHidden && 'nonPass'}"
|
<td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td>
|
||||||
>{serviceData.platform.number || '-'}</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 schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
|
<td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td> <!-- All time need to be displayed appropriately -->
|
||||||
<td
|
<td class="time schTime {classes.other}">{service.std || '-'}</td> <!-- All time need to be displayed appropriately -->
|
||||||
class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled &&
|
<td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td> <!-- All time need to be displayed appropriately -->
|
||||||
'canc'} {serviceData.isEarlyArr && 'early'}">{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
|
{/await}
|
||||||
>
|
|
||||||
<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>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="tableTxt" colspan="8">
|
<td class="tableTxt" colspan="8">
|
||||||
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
|
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
|
||||||
{#if service.isCharter}charter{/if}
|
{#if service.length} | {service.length} carriages{/if}
|
||||||
{#if serviceData.length} | {serviceData.length} carriages{/if}
|
|
||||||
{#if service.delayReason}
|
{#if service.delayReason}
|
||||||
<br />
|
<br />
|
||||||
<Reason type={'delay'} code={service.delayReason} />
|
<Reason type={'delay'} code={service.delayReason} />
|
||||||
@ -212,11 +113,9 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{:catch}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="8">Unable to display service</td>
|
<td colspan="8">Unable to display service</td>
|
||||||
</tr>
|
</tr>
|
||||||
{/await}
|
|
||||||
{/each}
|
{/each}
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
@ -385,103 +284,4 @@
|
|||||||
color: rgb(136, 164, 255);
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user