Public-LDB Nearly complete
This commit is contained in:
parent
3ece971d5f
commit
6e6e655a19
@ -7,7 +7,8 @@
|
|||||||
|
|
||||||
let jsonData = null;
|
let jsonData = null;
|
||||||
let services = [];
|
let services = [];
|
||||||
let dataAge = "";
|
let dataAge = null;
|
||||||
|
let isLoading = true;
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (jsonData === null && requestedStation) {
|
if (jsonData === null && requestedStation) {
|
||||||
@ -15,20 +16,66 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
|
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
|
||||||
dataAge = [...jsonData.GetStationBoardResult.generatedAt];
|
dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
|
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
|
||||||
services = [...jsonData.GetStationBoardResult.trainServices.service];
|
services = jsonData.GetStationBoardResult.trainServices.service;
|
||||||
} else {
|
} else {
|
||||||
services = [];
|
services = [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
|
isLoading = true; // Set loading state
|
||||||
|
try {
|
||||||
console.log(`Requested Station: ${requestedStation}`);
|
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();
|
jsonData = await data.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching data:", error);
|
||||||
|
} finally {
|
||||||
|
isLoading = false; // Clear loading state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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':
|
||||||
|
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}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
@ -38,12 +85,12 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if dataAge}
|
{#if isLoading}
|
||||||
<!-- dataAge needs parsing to be human-readable -->
|
<p id="timestamp">Loading...</p>
|
||||||
<p id="timestamp">Data From: {dataAge}</p>
|
{:else}
|
||||||
{/if}
|
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="from">From</th>
|
<th class="from">From</th>
|
||||||
<th class="to">To</th>
|
<th class="to">To</th>
|
||||||
@ -58,15 +105,16 @@
|
|||||||
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||||
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
||||||
<td class="plat">{service.platform || '-'}</td>
|
<td class="plat">{service.platform || '-'}</td>
|
||||||
<td class="time">{service.sta || '-'}</td>
|
<td class="time">{parseTime(service.sta).data}</td>
|
||||||
<td class="time">{service.eta || '-'}</td>
|
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
||||||
<td class="time">{service.std || '-'}</td>
|
<td class="time">{parseTime(service.std).data}</td>
|
||||||
<td class="time">{service.etd || '-'}</td>
|
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
||||||
</tr>
|
</tr>
|
||||||
<!-- service-detail elements are currently contained within the 'From' column
|
<!-- service-detail elements are currently contained within the 'From' column
|
||||||
It should be underneath the row. I will need to look at the vanilla interface
|
It should be underneath the row. I will need to look at the vanilla interface
|
||||||
to establish what I did differently there. Or, I can insert a new row
|
to establish what I did differently there. Or, I can insert a new row
|
||||||
with colspan="7" to add a row spanning all columns.-->
|
with colspan="7" to add a row spanning all columns.-->
|
||||||
|
<tr><td colspan="7">
|
||||||
<p class="service-detail">
|
<p class="service-detail">
|
||||||
A {service.operator || 'Unknown'} service
|
A {service.operator || 'Unknown'} service
|
||||||
{#if service['length']}
|
{#if service['length']}
|
||||||
@ -79,17 +127,40 @@
|
|||||||
{#if service.cancelReason}
|
{#if service.cancelReason}
|
||||||
<p class="service-detail">{service.cancelReason}</p>
|
<p class="service-detail">{service.cancelReason}</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
</td></tr>
|
||||||
{/each}
|
{/each}
|
||||||
</table>
|
</table>
|
||||||
<!--
|
{/if}
|
||||||
<p>{JSON.stringify(jsonData)}</p>
|
|
||||||
-->
|
|
||||||
<style>
|
<style>
|
||||||
|
#timestamp {
|
||||||
|
margin: auto;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
color: white;
|
color: white;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
.service-detail {
|
||||||
|
color: cyan;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
table {font-size: 15px;}
|
||||||
|
.service-detail {font-size: 14px;}
|
||||||
|
}
|
||||||
|
@media (min-width: 1000px) {
|
||||||
|
table {font-size: 17px;}
|
||||||
|
.service-detail{font-size: 16px;}
|
||||||
|
}
|
||||||
|
@media (min-width: 1600px) {
|
||||||
|
table {font-size: 19px;}
|
||||||
|
.service-detail {font-size: 18px;}
|
||||||
|
}
|
||||||
.origdest {
|
.origdest {
|
||||||
color: yellow;
|
color: yellow;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -106,11 +177,23 @@
|
|||||||
.time {
|
.time {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
.service-detail {
|
.changed{
|
||||||
color: cyan;
|
animation: pulse-change 1.5s linear infinite;
|
||||||
text-align: left;
|
}
|
||||||
font-size: 12px;
|
|
||||||
padding: 0;
|
.cancelled {
|
||||||
margin: 0;
|
animation: pulse-cancel 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-change {
|
||||||
|
50% {
|
||||||
|
color: var(--main-warning-color);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-cancel {
|
||||||
|
50% {
|
||||||
|
color: var(--main-alert-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user