public-ldb is nearing completion
This commit is contained in:
parent
c2bc1ad1e5
commit
9b13c14527
@ -1,71 +1,115 @@
|
|||||||
<script>
|
<script>
|
||||||
export let station = "";
|
export let station = "";
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
|
||||||
let requestedStation;
|
let requestedStation;
|
||||||
$: requestedStation = station;
|
$: requestedStation = station;
|
||||||
|
|
||||||
let jsonData = null;
|
let jsonData = null;
|
||||||
let services = [];
|
let services = [];
|
||||||
|
let dataAge = "";
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (jsonData === null && requestedStation) {
|
if (jsonData === null && requestedStation) {
|
||||||
fetchData();
|
fetchData();
|
||||||
}
|
|
||||||
|
|
||||||
if (jsonData?.GetStationBoardResult?.trainServices?.service ?? []) {
|
|
||||||
services = [...jsonData.GetStationBoardResult.trainServices.service];
|
|
||||||
} else {
|
|
||||||
services = ["No train services available"];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchData() {
|
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
|
||||||
console.log(`Requested Station: ${requestedStation}`);
|
dataAge = [...jsonData.GetStationBoardResult.generatedAt];
|
||||||
const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
|
|
||||||
jsonData = await data.json();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
|
||||||
if (requestedStation && jsonData === null) {
|
services = [...jsonData.GetStationBoardResult.trainServices.service];
|
||||||
fetchData();
|
} else {
|
||||||
}
|
services = [];
|
||||||
});
|
}
|
||||||
</script>
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
<p>{requestedStation.toUpperCase()}</p>
|
{#if dataAge}
|
||||||
|
<!-- dataAge needs parsing to be human-readable -->
|
||||||
<p>
|
<p id="timestamp">Data From: {dataAge}</p>
|
||||||
{#each services as service}
|
{/if}
|
||||||
<span>{service.origin?.location?.locationName || 'Unknown'}</span>
|
|
||||||
{/each}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<table>
|
<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>
|
<tr>
|
||||||
<th>From</th>
|
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||||
<th>To</th>
|
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
||||||
<th>Plat.</th>
|
<td class="plat">{service.platform || '-'}</td>
|
||||||
<th>Sch Arr.</th>
|
<td class="time">{service.sta || '-'}</td>
|
||||||
<th>Exp Arr.</th>
|
<td class="time">{service.eta || '-'}</td>
|
||||||
<th>Sch Dep.</th>
|
<td class="time">{service.std || '-'}</td>
|
||||||
<th>Exp Dep.</th>
|
<td class="time">{service.etd || '-'}</td>
|
||||||
</tr>
|
</tr>
|
||||||
{#each services as service}
|
<!-- service-detail elements are currently contained within the 'From' column
|
||||||
<tr>
|
It should be underneath the row. I will need to look at the vanilla interface
|
||||||
<td>{service.origin?.location?.locationName || ''}</td>
|
to establish what I did differently there. -->
|
||||||
<td>{service.destination?.location?.locationName || ''}</td>
|
<p class="service-detail">
|
||||||
<td>{service.platform || '-'}</td>
|
A {service.operator || 'Unknown'} service
|
||||||
</tr>
|
{#if service['length']}
|
||||||
{/each}
|
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>
|
</table>
|
||||||
|
<!--
|
||||||
|
<p>{JSON.stringify(jsonData)}</p>
|
||||||
|
-->
|
||||||
<style>
|
<style>
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
color: white;
|
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>
|
</style>
|
Loading…
Reference in New Issue
Block a user