60 lines
1.4 KiB
Svelte
60 lines
1.4 KiB
Svelte
|
<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>
|