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

118 lines
3.0 KiB
Svelte

<script>
export let station = "";
export let title = "Loading...";
import { onMount } from 'svelte'
import Loading from '$lib/navigation/loading.svelte';
import Nav from '$lib/navigation/nav.svelte';
import { uuid } from '$lib/stores/uuid';
let requestedStation;
$: requestedStation = station;
let jsonData = {};
let services = [];
let dataAge = null;
let isLoading = true;
$: {
if (jsonData?.GetBoardResult?.generatedAt) {
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
}
if (jsonData?.GetBoardResult?.trainServices?.service) {
services = jsonData.GetBoardResult.trainServices.service;
} else {
services = [];
}
if (jsonData?.GetBoardResult?.locationName) {
title = jsonData.GetBoardResult.locationName
} else {
title = "Loading Board"
}
}
async function fetchData() {
isLoading = true; // Set loading state
try {
console.log(`Requested Station: ${requestedStation}`);
const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
const opt = {
method: "GET",
headers: {
"uuid": $uuid
}
}
const data = await fetch(url, opt);
jsonData = await data.json();
} catch (error) {
console.error("Error fetching data:", error);
} finally {
isLoading = false; // Clear loading state
}
}
function parseTime(string = ""){
let output
let change
switch (string) {
case 'Delayed':
output = 'LATE'
change = "changed"
break
case 'Cancelled':
output = 'CANC'
change = "cancelled"
break
case 'On time':
output = 'RT'
change = ""
break
case '':
output = '-'
change = ""
break
case undefined:
output = '-'
change = ""
break
case 'No report':
output = '-'
change = ""
break
case 'undefined':
output = false
change = ""
break
default:
output = string
change = "changed"
}
return {data: output, changed: change}
}
onMount(() => {
fetchData();
});
</script>
<p>Staff Boards not yet implemented</p>
{#if isLoading}
<Loading />
{:else}
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
<p>Staff LDB for {station}</p>
{#each services as service}
<div class="service">
<p class="service-operator">{service.operatorCode}</p>
<p class="service-headcode">{service.trainid}</p>
<p class="service-origin">{service.origin.location.tiploc}</p>
<p class="service-dest">{service.destination.location.tiploc}</p>
<p class="service-plat">{service.platform}</p>
<p class="service-expArr">{new Date(service.sta).toLocaleTimeString() || '-'}</p>
</div>
{/each}
{/if}
<Nav />