Prettier formatting
This commit is contained in:
Fred Boniface
@@ -1,116 +1,132 @@
|
||||
<script>
|
||||
import { fly } from "svelte/transition";
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let alerts = [];
|
||||
$: uniqueAlerts = [...new Set(alerts)];
|
||||
export let alerts = [];
|
||||
$: uniqueAlerts = [...new Set(alerts)];
|
||||
|
||||
let displayAlerts = false;
|
||||
let displayAlerts = false;
|
||||
|
||||
async function alertsToggle() {
|
||||
displayAlerts = !displayAlerts
|
||||
}
|
||||
|
||||
function numberAsWord(number) {
|
||||
const words = ['zero', 'one', 'two','three','four','five','six','seven','eight'];
|
||||
let word = words[number];
|
||||
if (word) {
|
||||
return word;
|
||||
}
|
||||
return number;
|
||||
async function alertsToggle() {
|
||||
displayAlerts = !displayAlerts;
|
||||
}
|
||||
|
||||
function numberAsWord(number) {
|
||||
const words = [
|
||||
'zero',
|
||||
'one',
|
||||
'two',
|
||||
'three',
|
||||
'four',
|
||||
'five',
|
||||
'six',
|
||||
'seven',
|
||||
'eight'
|
||||
];
|
||||
let word = words[number];
|
||||
if (word) {
|
||||
return word;
|
||||
}
|
||||
return number;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="block"><!--Prevent content slipping underneath the bar--></div>
|
||||
<div id="bar" on:click={alertsToggle} on:keypress={alertsToggle}>
|
||||
<img src="/images/navigation/alert.svg" alt="">
|
||||
{#if uniqueAlerts.length == 1}
|
||||
<p id="bartext">There is one active alert</p>
|
||||
{:else if uniqueAlerts.length > 1}
|
||||
<p id="bartext">There are {numberAsWord(uniqueAlerts.length)} active alerts</p>
|
||||
{:else}
|
||||
<p id="bartext">There are no active alerts</p>
|
||||
{/if}
|
||||
<p id="arrow" class:displayAlerts>V</p>
|
||||
<img src="/images/navigation/alert.svg" alt="" />
|
||||
{#if uniqueAlerts.length == 1}
|
||||
<p id="bartext">There is one active alert</p>
|
||||
{:else if uniqueAlerts.length > 1}
|
||||
<p id="bartext">
|
||||
There are {numberAsWord(uniqueAlerts.length)} active alerts
|
||||
</p>
|
||||
{:else}
|
||||
<p id="bartext">There are no active alerts</p>
|
||||
{/if}
|
||||
<p id="arrow" class:displayAlerts>V</p>
|
||||
</div>
|
||||
{#if displayAlerts}
|
||||
<div id="alerts" in:fly={{ y:-200, duration: 500}} out:fly={{ y: -200, duration: 800 }}>
|
||||
{#each uniqueAlerts as msg}
|
||||
<p class="alert">{@html msg}</p>
|
||||
{/each}
|
||||
</div>
|
||||
<div
|
||||
id="alerts"
|
||||
in:fly={{ y: -200, duration: 500 }}
|
||||
out:fly={{ y: -200, duration: 800 }}
|
||||
>
|
||||
{#each uniqueAlerts as msg}
|
||||
<p class="alert">{@html msg}</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#block {
|
||||
height: 40px;
|
||||
}
|
||||
#bar {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#bartext {
|
||||
color: white;
|
||||
margin: auto;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#arrow{
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
right: 15px;
|
||||
top: 11px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 00ms;
|
||||
}
|
||||
#arrow:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
#alerts {
|
||||
position: fixed;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: clip;
|
||||
left: 0;
|
||||
top: 89px;
|
||||
}
|
||||
.alert {
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin:auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.displayAlerts {
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 400ms;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
#block {
|
||||
height: 40px;
|
||||
}
|
||||
#bar {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#bartext {
|
||||
color: white;
|
||||
margin: auto;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#arrow {
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
right: 15px;
|
||||
top: 11px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 00ms;
|
||||
}
|
||||
#arrow:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
#alerts {
|
||||
position: fixed;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: clip;
|
||||
left: 0;
|
||||
top: 89px;
|
||||
}
|
||||
.alert {
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.displayAlerts {
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 400ms;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script>
|
||||
export let station = "";
|
||||
export let title = "Loading...";
|
||||
import { onMount } from 'svelte'
|
||||
export let station = '';
|
||||
export let title = 'Loading...';
|
||||
import { onMount } from 'svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
|
||||
let requestedStation;
|
||||
$: requestedStation = station;
|
||||
@@ -20,96 +20,98 @@
|
||||
let serviceDetail;
|
||||
|
||||
$: {
|
||||
if (jsonData === null && requestedStation) {
|
||||
fetchData();
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetStationBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.busServices?.service) {
|
||||
busServices = jsonData.GetStationBoardResult.busServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.ferryServices?.service) {
|
||||
ferryServices = jsonData.GetStationBoardResult.ferryServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.locationName) {
|
||||
title = jsonData.GetStationBoardResult.locationName
|
||||
} else {
|
||||
title = requestedStation.toUpperCase()
|
||||
}
|
||||
if (jsonData === null && requestedStation) {
|
||||
fetchData();
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetStationBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.busServices?.service) {
|
||||
busServices = jsonData.GetStationBoardResult.busServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.ferryServices?.service) {
|
||||
ferryServices = jsonData.GetStationBoardResult.ferryServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.locationName) {
|
||||
title = jsonData.GetStationBoardResult.locationName;
|
||||
} else {
|
||||
title = requestedStation.toUpperCase();
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
dataExists = true;
|
||||
isLoading = true; // Set loading state
|
||||
try {
|
||||
console.log(`Requested Station: ${requestedStation}`);
|
||||
const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
|
||||
const data = await fetch(
|
||||
`https://owlboard.info/api/v1/ldb/${requestedStation}`
|
||||
);
|
||||
jsonData = await data.json();
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
console.error('Error fetching data:', error);
|
||||
dataExists = false;
|
||||
title = "Not Found";
|
||||
title = 'Not Found';
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
prepareNrcc()
|
||||
prepareNrcc();
|
||||
}
|
||||
|
||||
function parseTime(string){
|
||||
let output
|
||||
let change
|
||||
function parseTime(string) {
|
||||
let output;
|
||||
let change;
|
||||
switch (string) {
|
||||
case 'Delayed':
|
||||
output = 'LATE'
|
||||
change = "changed"
|
||||
break
|
||||
case 'Cancelled':
|
||||
output = 'CANC'
|
||||
change = "cancelled"
|
||||
break
|
||||
case 'On Time':
|
||||
case 'On time':
|
||||
output = 'RT'
|
||||
change = ""
|
||||
break
|
||||
case '':
|
||||
output = '-'
|
||||
change = ""
|
||||
break
|
||||
case undefined:
|
||||
output = '-'
|
||||
change = ""
|
||||
break
|
||||
case 'No report':
|
||||
output = '-'
|
||||
change = ""
|
||||
break
|
||||
case 'undefined':
|
||||
output = false
|
||||
change = ""
|
||||
break
|
||||
default:
|
||||
output = string
|
||||
change = "changed"
|
||||
case 'Delayed':
|
||||
output = 'LATE';
|
||||
change = 'changed';
|
||||
break;
|
||||
case 'Cancelled':
|
||||
output = 'CANC';
|
||||
change = 'cancelled';
|
||||
break;
|
||||
case 'On Time':
|
||||
case 'On time':
|
||||
output = 'RT';
|
||||
change = '';
|
||||
break;
|
||||
case '':
|
||||
output = '-';
|
||||
change = '';
|
||||
break;
|
||||
case undefined:
|
||||
output = '-';
|
||||
change = '';
|
||||
break;
|
||||
case 'No report':
|
||||
output = '-';
|
||||
change = '';
|
||||
break;
|
||||
case 'undefined':
|
||||
output = false;
|
||||
change = '';
|
||||
break;
|
||||
default:
|
||||
output = string;
|
||||
change = 'changed';
|
||||
}
|
||||
return {data: output, changed: change}
|
||||
return { data: output, changed: change };
|
||||
}
|
||||
|
||||
async function loadService(sid) {
|
||||
for (const service of services) {
|
||||
if (service.serviceID == sid) {
|
||||
serviceDetail = service
|
||||
serviceDetail = service;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -117,7 +119,7 @@
|
||||
async function loadBusService(sid) {
|
||||
for (const service of busServices) {
|
||||
if (service.serviceID == sid) {
|
||||
serviceDetail = service
|
||||
serviceDetail = service;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -130,7 +132,7 @@
|
||||
if (jsonData?.GetStationBoardResult?.nrccMessages?.message) {
|
||||
const nrcc = jsonData.GetStationBoardResult.nrccMessages.message;
|
||||
if (Array.isArray(nrcc)) {
|
||||
alerts = nrcc
|
||||
alerts = nrcc;
|
||||
return;
|
||||
}
|
||||
alerts.push(nrcc);
|
||||
@@ -146,53 +148,65 @@
|
||||
</script>
|
||||
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts}/>
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
{#if dataAge}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table class="ldbTable">
|
||||
{:else if dataAge}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table class="ldbTable">
|
||||
<tr>
|
||||
<th class="from">From</th>
|
||||
<th class="to">To</th>
|
||||
<th class="plat">Plat.</th>
|
||||
<th class="time">Sch Arr.</th>
|
||||
<th class="time">Exp Arr.</th>
|
||||
<th class="time">Sch Dep.</th>
|
||||
<th class="time">Exp Dep.</th>
|
||||
</tr>
|
||||
{#each services as service}
|
||||
<tr>
|
||||
<th class="from">From</th>
|
||||
<th class="to">To</th>
|
||||
<th class="plat">Plat.</th>
|
||||
<th class="time">Sch Arr.</th>
|
||||
<th class="time">Exp Arr.</th>
|
||||
<th class="time">Sch Dep.</th>
|
||||
<th class="time">Exp Dep.</th>
|
||||
<td
|
||||
class="origdest from"
|
||||
on:click={loadService(service.serviceID)}
|
||||
on:keypress={loadService(service.serviceID)}
|
||||
>
|
||||
{#if Array.isArray(service.origin?.location)}
|
||||
{service.origin.location[0]['locationName'] +
|
||||
' & ' +
|
||||
service.origin.location[1]['locationName']}
|
||||
{:else}
|
||||
{service.origin?.location?.locationName || ''}
|
||||
{/if}
|
||||
</td>
|
||||
<td
|
||||
class="origdest to"
|
||||
on:click={loadService(service.serviceID)}
|
||||
on:keypress={loadService(service.serviceID)}
|
||||
>
|
||||
{#if Array.isArray(service.destination?.location)}
|
||||
{service.destination.location[0]['locationName'] +
|
||||
' & ' +
|
||||
service.destination.location[0]['locationName']}
|
||||
{:else}
|
||||
{service.destination?.location?.locationName || ''}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="plat">{service.platform || '-'}</td>
|
||||
<td class="time">{parseTime(service.sta).data}</td>
|
||||
<td class="time {parseTime(service.eta).changed}"
|
||||
>{parseTime(service.eta).data}</td
|
||||
>
|
||||
<td class="time">{parseTime(service.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}"
|
||||
>{parseTime(service.etd).data}</td
|
||||
>
|
||||
</tr>
|
||||
{#each services as service}
|
||||
<tr>
|
||||
<td class="origdest from" on:click={loadService(service.serviceID)} on:keypress={loadService(service.serviceID)}>
|
||||
{#if Array.isArray(service.origin?.location)}
|
||||
{service.origin.location[0]['locationName'] +
|
||||
" & " +
|
||||
service.origin.location[1]['locationName']}
|
||||
{:else}
|
||||
{service.origin?.location?.locationName || ''}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="origdest to" on:click={loadService(service.serviceID)} on:keypress={loadService(service.serviceID)}>
|
||||
{#if Array.isArray(service.destination?.location)}
|
||||
{service.destination.location[0]['locationName'] +
|
||||
" & " +
|
||||
service.destination.location[0]['locationName']}
|
||||
{:else}
|
||||
{service.destination?.location?.locationName || ''}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="plat">{service.platform || '-'}</td>
|
||||
<td class="time">{parseTime(service.sta).data}</td>
|
||||
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
||||
<td class="time">{parseTime(service.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
||||
</tr>
|
||||
|
||||
<tr><td colspan="7">
|
||||
<tr
|
||||
><td colspan="7">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
{#if service['length']}
|
||||
@@ -205,36 +219,56 @@
|
||||
{#if service.cancelReason}
|
||||
<p class="service-detail">{service.cancelReason}</p>
|
||||
{/if}
|
||||
</td></tr>
|
||||
{/each}
|
||||
</table>
|
||||
{:else}
|
||||
<p class="table-head-text">No Scheduled Train Services</p>
|
||||
{/if}
|
||||
{#if busServices.length}
|
||||
<br>
|
||||
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br>
|
||||
<span class="table-head-text">Bus Services</span>
|
||||
<table class="ldbTable">
|
||||
</td></tr
|
||||
>
|
||||
{/each}
|
||||
</table>
|
||||
{:else}
|
||||
<p class="table-head-text">No Scheduled Train Services</p>
|
||||
{/if}
|
||||
{#if busServices.length}
|
||||
<br />
|
||||
<img
|
||||
class="transport-mode"
|
||||
src="/images/transport-modes/bus.svg"
|
||||
alt="Bus services"
|
||||
/><br />
|
||||
<span class="table-head-text">Bus Services</span>
|
||||
<table class="ldbTable">
|
||||
<tr>
|
||||
<th class="from">From</th>
|
||||
<th class="to">To</th>
|
||||
<th class="time">Sch Arr.</th>
|
||||
<th class="time">Exp Arr.</th>
|
||||
<th class="time">Sch Dep.</th>
|
||||
<th class="time">Exp Dep.</th>
|
||||
</tr>
|
||||
{#each busServices as service}
|
||||
<tr>
|
||||
<th class="from">From</th>
|
||||
<th class="to">To</th>
|
||||
<th class="time">Sch Arr.</th>
|
||||
<th class="time">Exp Arr.</th>
|
||||
<th class="time">Sch Dep.</th>
|
||||
<th class="time">Exp Dep.</th>
|
||||
<td
|
||||
class="origdest from"
|
||||
on:click={loadBusService(service.serviceID)}
|
||||
on:keypress={loadBusService(service.serviceID)}
|
||||
>{service.origin?.location?.locationName || ''}</td
|
||||
>
|
||||
<td
|
||||
class="origdest to"
|
||||
on:click={loadBusService(service.serviceID)}
|
||||
on:keypress={loadBusService(service.serviceID)}
|
||||
>{service.destination?.location?.locationName || ''}</td
|
||||
>
|
||||
<td class="time">{parseTime(service.sta).data}</td>
|
||||
<td class="time {parseTime(service.eta).changed}"
|
||||
>{parseTime(service.eta).data}</td
|
||||
>
|
||||
<td class="time">{parseTime(service.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}"
|
||||
>{parseTime(service.etd).data}</td
|
||||
>
|
||||
</tr>
|
||||
{#each busServices as service}
|
||||
<tr>
|
||||
<td class="origdest from" on:click={loadBusService(service.serviceID)} on:keypress={loadBusService(service.serviceID)}>{service.origin?.location?.locationName || ''}</td>
|
||||
<td class="origdest to" on:click={loadBusService(service.serviceID)} on:keypress={loadBusService(service.serviceID)}>{service.destination?.location?.locationName || ''}</td>
|
||||
<td class="time">{parseTime(service.sta).data}</td>
|
||||
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
||||
<td class="time">{parseTime(service.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
||||
</tr>
|
||||
|
||||
<tr><td colspan="7">
|
||||
<tr
|
||||
><td colspan="7">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
</p>
|
||||
@@ -244,47 +278,61 @@
|
||||
{#if service.cancelReason}
|
||||
<p class="service-detail">{service.cancelReason}</p>
|
||||
{/if}
|
||||
</td></tr>
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
{#if ferryServices.length}
|
||||
<br>
|
||||
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br>
|
||||
<span class="table-head-text">Ferry Services</span>
|
||||
<table class="ldbTable">
|
||||
</td></tr
|
||||
>
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
{#if ferryServices.length}
|
||||
<br />
|
||||
<img
|
||||
class="transport-mode"
|
||||
src="/images/transport-modes/ferry.svg"
|
||||
alt="Bus services"
|
||||
/><br />
|
||||
<span class="table-head-text">Ferry Services</span>
|
||||
<table class="ldbTable">
|
||||
<tr>
|
||||
<th class="from">From</th>
|
||||
<th class="to">To</th>
|
||||
<th class="time">Sch Arr.</th>
|
||||
<th class="time">Exp Arr.</th>
|
||||
<th class="time">Sch Dep.</th>
|
||||
<th class="time">Exp Dep.</th>
|
||||
</tr>
|
||||
{#each ferryServices as service}
|
||||
<tr>
|
||||
<th class="from">From</th>
|
||||
<th class="to">To</th>
|
||||
<th class="time">Sch Arr.</th>
|
||||
<th class="time">Exp Arr.</th>
|
||||
<th class="time">Sch Dep.</th>
|
||||
<th class="time">Exp Dep.</th>
|
||||
<td class="origdest from"
|
||||
>{service.origin?.location?.locationName || ''}</td
|
||||
>
|
||||
<td class="origdest to"
|
||||
>{service.destination?.location?.locationName || ''}</td
|
||||
>
|
||||
<td class="time">{parseTime(service.sta).data}</td>
|
||||
<td class="time {parseTime(service.eta).changed}"
|
||||
>{parseTime(service.eta).data}</td
|
||||
>
|
||||
<td class="time">{parseTime(service.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}"
|
||||
>{parseTime(service.etd).data}</td
|
||||
>
|
||||
</tr>
|
||||
{#each ferryServices as service}
|
||||
<tr>
|
||||
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
||||
<td class="time">{parseTime(service.sta).data}</td>
|
||||
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
||||
<td class="time">{parseTime(service.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
||||
</tr>
|
||||
|
||||
<tr><td colspan="7">
|
||||
<tr
|
||||
><td colspan="7">
|
||||
{#if service.delayReason}
|
||||
<p class="service-detail">{service.delayReason}</p>
|
||||
{/if}
|
||||
{#if service.cancelReason}
|
||||
<p class="service-detail">{service.cancelReason}</p>
|
||||
{/if}
|
||||
</td></tr>
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
{:else}
|
||||
<p>Unable to find this station</p>
|
||||
</td></tr
|
||||
>
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
{:else}
|
||||
<p>Unable to find this station</p>
|
||||
{/if}
|
||||
|
||||
{#if serviceDetail}
|
||||
@@ -304,21 +352,47 @@
|
||||
<tr>
|
||||
<td>{prevPoint.locationName}</td>
|
||||
<td>{prevPoint.st}</td>
|
||||
<td class="time {parseTime(prevPoint.at || prevPoint.et).changed}">{parseTime(prevPoint.at || prevPoint.et).data}</td>
|
||||
<td
|
||||
class="time {parseTime(prevPoint.at || prevPoint.et).changed}"
|
||||
>{parseTime(prevPoint.at || prevPoint.et).data}</td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
{:else}
|
||||
<tr>
|
||||
<td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.locationName}</td>
|
||||
<td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.st}</td>
|
||||
<td class="time {parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).changed}">{parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).data}</td>
|
||||
<td
|
||||
>{serviceDetail.previousCallingPoints.callingPointList
|
||||
.callingPoint.locationName}</td
|
||||
>
|
||||
<td
|
||||
>{serviceDetail.previousCallingPoints.callingPointList
|
||||
.callingPoint.st}</td
|
||||
>
|
||||
<td
|
||||
class="time {parseTime(
|
||||
serviceDetail.previousCallingPoints.callingPointList
|
||||
.callingPoint.at ||
|
||||
serviceDetail.previousCallingPoints.callingPointList
|
||||
.callingPoint.et
|
||||
).changed}"
|
||||
>{parseTime(
|
||||
serviceDetail.previousCallingPoints.callingPointList
|
||||
.callingPoint.at ||
|
||||
serviceDetail.previousCallingPoints.callingPointList
|
||||
.callingPoint.et
|
||||
).data}</td
|
||||
>
|
||||
</tr>
|
||||
{/if}
|
||||
{/if}
|
||||
<tr class="thisStop">
|
||||
<td>{title}</td>
|
||||
<td>{serviceDetail.std || serviceDetail.sta}</td>
|
||||
<td class="time {parseTime(serviceDetail.etd || serviceDetail.eta).changed}">{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td>
|
||||
<td
|
||||
class="time {parseTime(serviceDetail.etd || serviceDetail.eta)
|
||||
.changed}"
|
||||
>{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td
|
||||
>
|
||||
</tr>
|
||||
{#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint}
|
||||
{#if Array.isArray(serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint)}
|
||||
@@ -326,14 +400,31 @@
|
||||
<tr>
|
||||
<td>{nextPoint.locationName}</td>
|
||||
<td>{nextPoint.st}</td>
|
||||
<td class="time {parseTime(nextPoint.et).changed}">{parseTime(nextPoint.et).data}</td>
|
||||
<td class="time {parseTime(nextPoint.et).changed}"
|
||||
>{parseTime(nextPoint.et).data}</td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
{:else}
|
||||
<tr class="detailRow">
|
||||
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.locationName}</td>
|
||||
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.st}</td>
|
||||
<td class="time {parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).changed}">{parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).data}</td>
|
||||
<td
|
||||
>{serviceDetail.subsequentCallingPoints.callingPointList
|
||||
.callingPoint.locationName}</td
|
||||
>
|
||||
<td
|
||||
>{serviceDetail.subsequentCallingPoints.callingPointList
|
||||
.callingPoint.st}</td
|
||||
>
|
||||
<td
|
||||
class="time {parseTime(
|
||||
serviceDetail.subsequentCallingPoints.callingPointList
|
||||
.callingPoint.et
|
||||
).changed}"
|
||||
>{parseTime(
|
||||
serviceDetail.subsequentCallingPoints.callingPointList
|
||||
.callingPoint.et
|
||||
).data}</td
|
||||
>
|
||||
</tr>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -371,21 +462,40 @@
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
table {font-size: 15px; max-width: 850px;}
|
||||
.service-detail {font-size: 14px;}
|
||||
.transport-mode {width: 50px;}
|
||||
#timestamp {font-size: 16px;}
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
table {font-size: 17px;}
|
||||
.service-detail{font-size: 16px;}
|
||||
.table-head-text {font-size: 16px;}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
table {font-size: 19px;}
|
||||
.service-detail {font-size: 18px;}
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
table {
|
||||
font-size: 15px;
|
||||
max-width: 850px;
|
||||
}
|
||||
.service-detail {
|
||||
font-size: 14px;
|
||||
}
|
||||
.transport-mode {
|
||||
width: 50px;
|
||||
}
|
||||
#timestamp {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
table {
|
||||
font-size: 17px;
|
||||
}
|
||||
.service-detail {
|
||||
font-size: 16px;
|
||||
}
|
||||
.table-head-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
table {
|
||||
font-size: 19px;
|
||||
}
|
||||
.service-detail {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.origdest {
|
||||
color: yellow;
|
||||
}
|
||||
@@ -398,58 +508,58 @@
|
||||
text-align: left;
|
||||
}
|
||||
.plat {
|
||||
width: 10%
|
||||
width: 10%;
|
||||
}
|
||||
.time {
|
||||
width: 10%;
|
||||
}
|
||||
.changed{
|
||||
.changed {
|
||||
animation: pulse-change 1.5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.cancelled {
|
||||
.cancelled {
|
||||
animation: pulse-cancel 1.5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-change {
|
||||
@keyframes pulse-change {
|
||||
50% {
|
||||
color: var(--main-warning-color);
|
||||
color: var(--main-warning-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-cancel {
|
||||
@keyframes pulse-cancel {
|
||||
50% {
|
||||
color: var(--main-alert-color);
|
||||
color: var(--main-alert-color);
|
||||
}
|
||||
}
|
||||
#detailBox {
|
||||
width: 100%;
|
||||
}
|
||||
h6 {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#closeService {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border: none;
|
||||
border-radius: 60px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: var(--main-bg-color);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
#detailTable {
|
||||
margin-top: 40px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
.thisStop {
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
#detailBox {
|
||||
width: 100%;
|
||||
}
|
||||
h6 {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#closeService {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border: none;
|
||||
border-radius: 60px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: var(--main-bg-color);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
#detailTable {
|
||||
margin-top: 40px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
.thisStop {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,290 +1,327 @@
|
||||
<script>
|
||||
export let station = "";
|
||||
export let title = "Loading...";
|
||||
import { onMount } from 'svelte'
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
import StaffTrainDetail from '$lib/ldb/staff-train-detail.svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import Nav from '$lib/navigation/nav.svelte';
|
||||
import { uuid } from '$lib/stores/uuid';
|
||||
|
||||
let requestedStation;
|
||||
$: requestedStation = station;
|
||||
|
||||
let jsonData = {};
|
||||
let services = [];
|
||||
let dataAge = null;
|
||||
let isLoading = true;
|
||||
let alerts = [];
|
||||
|
||||
$: {
|
||||
if (jsonData?.GetBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
export let station = '';
|
||||
export let title = 'Loading...';
|
||||
import { onMount } from 'svelte';
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
import StaffTrainDetail from '$lib/ldb/staff-train-detail.svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import Nav from '$lib/navigation/nav.svelte';
|
||||
import { uuid } from '$lib/stores/uuid';
|
||||
|
||||
if (jsonData?.GetBoardResult?.locationName) {
|
||||
title = jsonData.GetBoardResult.locationName
|
||||
} else {
|
||||
title = "Loading Board"
|
||||
}
|
||||
let requestedStation;
|
||||
$: requestedStation = station;
|
||||
|
||||
if (jsonData?.GetBoardResult?.nrccMessages) {
|
||||
alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message)
|
||||
}
|
||||
let jsonData = {};
|
||||
let services = [];
|
||||
let dataAge = null;
|
||||
let isLoading = true;
|
||||
let alerts = [];
|
||||
|
||||
$: {
|
||||
if (jsonData?.GetBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.locationName) {
|
||||
title = jsonData.GetBoardResult.locationName;
|
||||
} else {
|
||||
title = 'Loading Board';
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.nrccMessages) {
|
||||
alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message);
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
jsonData = await data.json();
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
};
|
||||
const data = await fetch(url, opt);
|
||||
jsonData = await data.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
|
||||
async function getReasonCodeData(code) {
|
||||
const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
return json
|
||||
}
|
||||
|
||||
async function generateServiceData(service) {
|
||||
const timeDetails = await parseTimes(service);
|
||||
let serviceData = {
|
||||
from: await parseLocation(service.origin),
|
||||
to: await parseLocation(service.destination),
|
||||
length: await getTrainLength(service),
|
||||
platform: await parsePlatform(service?.platform || "undefined"),
|
||||
platformHidden: service?.platformIsHidden === "true",
|
||||
schArr: timeDetails.schArr,
|
||||
expArr: timeDetails.expArr,
|
||||
schDep: timeDetails.schDep,
|
||||
expDep: timeDetails.expDep,
|
||||
isEarlyArr: timeDetails.earArr,
|
||||
isLateArr: timeDetails.delArr,
|
||||
isEarlyDep: timeDetails.earDep,
|
||||
isLateDep: timeDetails.delDep,
|
||||
isCancelledDep: false,
|
||||
isCancelled: Boolean(service?.isCancelled),
|
||||
isDelayed: service?.arrivalType === "Delayed",
|
||||
isArrDelayed: service?.arrivalType === "Delayed",
|
||||
isDepDelayed: service?.departureType === "Delayed",
|
||||
isEarly: false,
|
||||
isNonPublic: 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)) {
|
||||
//console.log(location.location?.tiploc)
|
||||
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
|
||||
let isEarlyDep = false, isDelayedDep = false, isDep = 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 {
|
||||
parsedExpArr = '-';
|
||||
}
|
||||
|
||||
let parsedExpDep;
|
||||
if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
if (!isEarlyDep && !isDelayedDep) {
|
||||
parsedExpDep = 'RT';
|
||||
} else {
|
||||
parsedExpDep = parseIndividualTime(expDep);
|
||||
async function getReasonCodeData(code) {
|
||||
const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`;
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
return json;
|
||||
}
|
||||
} else {
|
||||
parsedExpDep = '-';
|
||||
}
|
||||
return {
|
||||
schArr: parseIndividualTime(schArr),
|
||||
expArr: parsedExpArr,
|
||||
schDep: parseIndividualTime(schDep),
|
||||
expDep: parsedExpDep,
|
||||
earArr: isEarlyArr,
|
||||
delArr: isDelayedArr,
|
||||
earDep: isEarlyDep,
|
||||
delDep: isDelayedDep
|
||||
}
|
||||
|
||||
async function generateServiceData(service) {
|
||||
const timeDetails = await parseTimes(service);
|
||||
let serviceData = {
|
||||
from: await parseLocation(service.origin),
|
||||
to: await parseLocation(service.destination),
|
||||
length: await getTrainLength(service),
|
||||
platform: await parsePlatform(service?.platform || 'undefined'),
|
||||
platformHidden: service?.platformIsHidden === 'true',
|
||||
schArr: timeDetails.schArr,
|
||||
expArr: timeDetails.expArr,
|
||||
schDep: timeDetails.schDep,
|
||||
expDep: timeDetails.expDep,
|
||||
isEarlyArr: timeDetails.earArr,
|
||||
isLateArr: timeDetails.delArr,
|
||||
isEarlyDep: timeDetails.earDep,
|
||||
isLateDep: timeDetails.delDep,
|
||||
isCancelledDep: false,
|
||||
isCancelled: Boolean(service?.isCancelled),
|
||||
isDelayed: service?.arrivalType === 'Delayed',
|
||||
isArrDelayed: service?.arrivalType === 'Delayed',
|
||||
isDepDelayed: service?.departureType === 'Delayed',
|
||||
isEarly: false,
|
||||
isNonPublic: 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)) {
|
||||
//console.log(location.location?.tiploc)
|
||||
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;
|
||||
let isEarlyDep = false,
|
||||
isDelayedDep = false,
|
||||
isDep = 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;
|
||||
}
|
||||
|
||||
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 '-'
|
||||
if (expDep - schDep < -timeDifferenceThreshold) {
|
||||
isEarlyDep = true;
|
||||
isDep = true;
|
||||
} else if (expDep - schDep > timeDifferenceThreshold) {
|
||||
isDelayedDep = true;
|
||||
isDep = true;
|
||||
}
|
||||
|
||||
function processNrcc(messages) { // Remove newlines and then <p> tags from input and append to array
|
||||
let arrMessages;
|
||||
if (!Array.isArray(messages)) {
|
||||
arrMessages = [messages];
|
||||
let parsedExpArr;
|
||||
if (expArr instanceof Date && !isNaN(expArr)) {
|
||||
if (!isEarlyArr && !isDelayedArr) {
|
||||
parsedExpArr = 'RT';
|
||||
} else {
|
||||
arrMessages = messages;
|
||||
parsedExpArr = parseIndividualTime(expArr);
|
||||
}
|
||||
let processedMessages = [];
|
||||
for (const message of arrMessages) {
|
||||
const msgText = message.xhtmlMessage
|
||||
processedMessages.push(msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, ''));
|
||||
}
|
||||
return processedMessages;
|
||||
} else {
|
||||
parsedExpArr = '-';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
<table>
|
||||
<tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></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 Arr</th>
|
||||
<th class="time">Exp Arr</th>
|
||||
<th class="time">Sch Dep</th>
|
||||
<th class="time">Exp Dep</th>
|
||||
</tr>
|
||||
{#each services as service}
|
||||
{#await generateServiceData(service)}
|
||||
<tr>
|
||||
<td colspan="8">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
{:then serviceStats}
|
||||
|
||||
<!-- Await a 'Generate Stats' function here which can evaluate the data and provide
|
||||
let parsedExpDep;
|
||||
if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
if (!isEarlyDep && !isDelayedDep) {
|
||||
parsedExpDep = 'RT';
|
||||
} else {
|
||||
parsedExpDep = parseIndividualTime(expDep);
|
||||
}
|
||||
} else {
|
||||
parsedExpDep = '-';
|
||||
}
|
||||
return {
|
||||
schArr: parseIndividualTime(schArr),
|
||||
expArr: parsedExpArr,
|
||||
schDep: parseIndividualTime(schDep),
|
||||
expDep: parsedExpDep,
|
||||
earArr: isEarlyArr,
|
||||
delArr: isDelayedArr,
|
||||
earDep: isEarlyDep,
|
||||
delDep: isDelayedDep
|
||||
};
|
||||
}
|
||||
|
||||
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) {
|
||||
// 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;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
<table>
|
||||
<tr
|
||||
><td colspan="8" id="timestamp"
|
||||
>Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td
|
||||
></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 Arr</th>
|
||||
<th class="time">Exp Arr</th>
|
||||
<th class="time">Sch Dep</th>
|
||||
<th class="time">Exp Dep</th>
|
||||
</tr>
|
||||
{#each services as service}
|
||||
{#await generateServiceData(service)}
|
||||
<tr>
|
||||
<td colspan="8"> Loading... </td>
|
||||
</tr>
|
||||
{:then serviceStats}
|
||||
<!-- Await a 'Generate Stats' function here which can evaluate the data and provide
|
||||
relevant BOOLs like isCancelled, isEarly, isLate, isNonPassenger and calculate train length
|
||||
where 'length' is not provided but 'formation' is. -->
|
||||
<tr>
|
||||
<td class="id id-data data">{service.trainid}</td>
|
||||
<td class="from from-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.from}</td>
|
||||
<td class="to to-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.to}</td>
|
||||
<td class="plat plat-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
|
||||
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schArr}</td>
|
||||
<td class="time time-data data {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.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.isCancelled}
|
||||
{#await getReasonCodeData(service.cancelReason)}
|
||||
This train has been cancelled
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].cancReason}
|
||||
<br>
|
||||
{/await}
|
||||
{/if}
|
||||
{#if service?.delayReason}
|
||||
{#await getReasonCodeData(service.delayReason)}
|
||||
This train has been delayed
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].lateReason}
|
||||
<br>
|
||||
{/await}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{:catch}
|
||||
<tr>
|
||||
<td colspan="8">Unable to load service</td>
|
||||
</tr>
|
||||
{/await}
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
<tr>
|
||||
<td class="id id-data data">{service.trainid}</td>
|
||||
<td
|
||||
class="from from-data data {serviceStats.isCancelled && 'can-dat'}"
|
||||
>{serviceStats.from}</td
|
||||
>
|
||||
<td class="to to-data data {serviceStats.isCancelled && 'can-dat'}"
|
||||
>{serviceStats.to}</td
|
||||
>
|
||||
<td
|
||||
class="plat plat-data data {serviceStats.isCancelled &&
|
||||
'can-dat'} {serviceStats.platformHidden && 'hidden'}"
|
||||
>{serviceStats.platform.number || '-'}</td
|
||||
>
|
||||
<td
|
||||
class="time time-data data {serviceStats.isCancelled && 'can-dat'}"
|
||||
>{serviceStats.schArr}</td
|
||||
>
|
||||
<td
|
||||
class="time time-data data {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.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.isCancelled}
|
||||
{#await getReasonCodeData(service.cancelReason)}
|
||||
This train has been cancelled
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].cancReason}
|
||||
<br />
|
||||
{/await}
|
||||
{/if}
|
||||
{#if service?.delayReason}
|
||||
{#await getReasonCodeData(service.delayReason)}
|
||||
This train has been delayed
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].lateReason}
|
||||
<br />
|
||||
{/await}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{:catch}
|
||||
<tr>
|
||||
<td colspan="8">Unable to load service</td>
|
||||
</tr>
|
||||
{/await}
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
<Nav />
|
||||
<Nav />
|
||||
|
||||
<style>
|
||||
<style>
|
||||
#timestamp {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
@@ -306,7 +343,8 @@ if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.from-data, .to-data {
|
||||
.from-data,
|
||||
.to-data {
|
||||
color: yellow;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
@@ -323,42 +361,42 @@ if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.can-dat {
|
||||
color: grey;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.can-dat {
|
||||
color: grey;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
color: grey;
|
||||
}
|
||||
.hidden {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.can-time {
|
||||
.can-time {
|
||||
animation: pulse-cancel 1.5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.early {
|
||||
animation: pulse-early 1.5s linear infinite;
|
||||
}
|
||||
.early {
|
||||
animation: pulse-early 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.late {
|
||||
animation: pulse-late 1.5s linear infinite;
|
||||
}
|
||||
.late {
|
||||
animation: pulse-late 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-late {
|
||||
@keyframes pulse-late {
|
||||
50% {
|
||||
color: var(--main-warning-color);
|
||||
color: var(--main-warning-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-cancel {
|
||||
@keyframes pulse-cancel {
|
||||
50% {
|
||||
color: var(--main-alert-color);
|
||||
color: var(--main-alert-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-early {
|
||||
@keyframes pulse-early {
|
||||
50% {
|
||||
color: rgb(136, 164, 255);
|
||||
color: rgb(136, 164, 255);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user