OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

public-ldb is nearing completion

Browse Source
This commit is contained in:
Fred Boniface 2023-06-17 12:04:59 +01:00
parent c2bc1ad1e5
commit 9b13c14527
1 changed files with 106 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
src/lib/ldb/public-ldb.svelte
View File

@ -1,71 +1,115 @@
<script> <script>
export let station = ""; export let station = "";
import { onMount } from 'svelte' import { onMount } from 'svelte'
let requestedStation;
$: requestedStation = station;
let jsonData = null;
let services = [];
$: {
if (jsonData === null && requestedStation) {
fetchData();
}
if (jsonData?.GetStationBoardResult?.trainServices?.service ?? []) {
services = [...jsonData.GetStationBoardResult.trainServices.service];
} else {
services = ["No train services available"];
}
}
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> let requestedStation;
$: requestedStation = station;
<p> let jsonData = null;
{#each services as service} let services = [];
<span>{service.origin?.location?.locationName || 'Unknown'}</span> let dataAge = "";
{/each}
</p> $: {
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> <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;
} }
</style> .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>