Begin adapting TableGeneratorDev for new API response

This commit is contained in:
Fred Boniface 2023-08-15 21:50:32 +01:00
parent eac9d2bff7
commit f5a73f20e5
2 changed files with 68 additions and 266 deletions

View File

@ -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>;

View File

@ -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>