Public board complete
This commit is contained in:
Fred Boniface
@@ -13,6 +13,7 @@
|
||||
let ferryServices = [];
|
||||
let dataAge = null;
|
||||
let isLoading = true;
|
||||
let dataExists = false;
|
||||
|
||||
$: {
|
||||
if (jsonData === null && requestedStation) {
|
||||
@@ -40,11 +41,12 @@
|
||||
if (jsonData?.GetStationBoardResult?.locationName) {
|
||||
title = jsonData.GetStationBoardResult.locationName
|
||||
} else {
|
||||
title = "Loading Board"
|
||||
title = requestedStation.toUpperCase()
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
dataExists = true;
|
||||
isLoading = true; // Set loading state
|
||||
try {
|
||||
console.log(`Requested Station: ${requestedStation}`);
|
||||
@@ -52,6 +54,8 @@
|
||||
jsonData = await data.json();
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
dataExists = false;
|
||||
title = "Not Found";
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
@@ -106,118 +110,122 @@
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table>
|
||||
<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}
|
||||
{#if dataAge}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table>
|
||||
<tr>
|
||||
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||
<td class="origdest to">{service.destination?.location?.locationName || ''}</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>
|
||||
<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>
|
||||
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||
<td class="origdest to">{service.destination?.location?.locationName || ''}</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">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
{#if service['length']}
|
||||
with {service['length'] || 'some'} coaches
|
||||
<tr><td colspan="7">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
{#if service['length']}
|
||||
with {service['length'] || 'some'} coaches
|
||||
{/if}
|
||||
</p>
|
||||
{#if service.delayReason}
|
||||
<p class="service-detail">{service.delayReason}</p>
|
||||
{/if}
|
||||
</p>
|
||||
{#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 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>
|
||||
<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>
|
||||
<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">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
</p>
|
||||
{#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}
|
||||
{#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>
|
||||
<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>
|
||||
<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">
|
||||
{#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 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>
|
||||
<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>
|
||||
<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">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
</p>
|
||||
{#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}
|
||||
{#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>
|
||||
<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>
|
||||
<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">
|
||||
{#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>
|
||||
<p>Unable to find this station</p>
|
||||
{/if}
|
||||
{/if}
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user