owlboard-svelte/src/lib/ldb/public-ldb.svelte

60 lines
1.4 KiB
Svelte
Raw Normal View History

2023-06-16 22:55:18 +01:00
<script>
export let station = "";
import {onMount} from 'svelte'
let requestedStation = "";
$: requestedStation = station;
let jsonData = {};
/**
* @type {any[]}
*/
let services = [];
$: {
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
services = [...jsonData.GetStationBoardResult.trainServices.service];
} else {
services = ["No train services available"];
}
}
onMount(async () => {
const data = await fetch(`https://owlboard.info/api/v1/ldb/${station}`);
jsonData = await data.json();
})
</script>
<p>{requestedStation.toUpperCase()}</p>
<p>
{#each services as service}
<span>{service.origin?.location?.locationName || 'Unknown'}</span>
{/each}
</p>
<table>
<tr>
<th>From</th>
<th>To</th>
<th>Plat.</th>
<th>Sch Arr.</th>
<th>Exp Arr.</th>
<th>Sch Dep.</th>
<th>Exp Dep.</th>
</tr>
{#each services as service}
<tr>
<td>{service.origin?.location?.locationName || ''}</td>
<td>{service.destination?.location?.locationName || ''}</td>
<td>{service.platform || ''}</td>
</tr>
{/each}
</table>
<style>
table {
width: 100%;
margin: auto;
}
</style>