117 lines
3.0 KiB
Svelte
117 lines
3.0 KiB
Svelte
<script>
|
|
export let station = "";
|
|
import { onMount } from 'svelte'
|
|
|
|
let requestedStation;
|
|
$: requestedStation = station;
|
|
|
|
let jsonData = null;
|
|
let services = [];
|
|
let dataAge = "";
|
|
|
|
$: {
|
|
if (jsonData === null && requestedStation) {
|
|
fetchData();
|
|
}
|
|
|
|
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
|
|
dataAge = [...jsonData.GetStationBoardResult.generatedAt];
|
|
}
|
|
|
|
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
|
|
services = [...jsonData.GetStationBoardResult.trainServices.service];
|
|
} else {
|
|
services = [];
|
|
}
|
|
}
|
|
|
|
async function fetchData() {
|
|
console.log(`Requested Station: ${requestedStation}`);
|
|
const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
|
|
jsonData = await data.json();
|
|
}
|
|
|
|
onMount(() => {
|
|
if (requestedStation && jsonData === null) {
|
|
fetchData();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if dataAge}
|
|
<!-- dataAge needs parsing to be human-readable -->
|
|
<p id="timestamp">Data From: {dataAge}</p>
|
|
{/if}
|
|
|
|
<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}
|
|
<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">{service.sta || '-'}</td>
|
|
<td class="time">{service.eta || '-'}</td>
|
|
<td class="time">{service.std || '-'}</td>
|
|
<td class="time">{service.etd || '-'}</td>
|
|
</tr>
|
|
<!-- 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
|
|
to establish what I did differently there. Or, I can insert a new row
|
|
with colspan="7" to add a row spanning all columns.-->
|
|
<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}
|
|
{#if service.cancelReason}
|
|
<p class="service-detail">{service.cancelReason}</p>
|
|
{/if}
|
|
{/each}
|
|
</table>
|
|
<!--
|
|
<p>{JSON.stringify(jsonData)}</p>
|
|
-->
|
|
<style>
|
|
table {
|
|
width: 100%;
|
|
margin: auto;
|
|
color: white;
|
|
}
|
|
.origdest {
|
|
color: yellow;
|
|
text-align: left;
|
|
}
|
|
.from {
|
|
width: 25%;
|
|
}
|
|
.to {
|
|
width: 25%;
|
|
}
|
|
.plat {
|
|
width: 10%
|
|
}
|
|
.time {
|
|
width: 10%;
|
|
}
|
|
.service-detail {
|
|
color: cyan;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
</style>
|