Public-LDB Nearly complete

This commit is contained in:
Fred Boniface 2023-06-17 15:12:30 +01:00
parent 3ece971d5f
commit 6e6e655a19

View File

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