Add store for UUID and conditional loading of the LDB page for public/staff boards

This commit is contained in:
Fred Boniface 2023-06-19 13:22:17 +01:00
parent e4f18c389f
commit 847545760b
4 changed files with 137 additions and 2 deletions

View File

@ -90,6 +90,7 @@
<Loading /> <Loading />
{:else} {:else}
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p> <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
<p>Public LDB for {station}</p>
<table> <table>
<tr> <tr>

View File

@ -0,0 +1,100 @@
<script>
export let station = "";
import { onMount } from 'svelte'
import Loading from '$lib/navigation/loading.svelte';
import Nav from '$lib/navigation/nav.svelte';
let requestedStation;
$: requestedStation = station;
let jsonData = null;
let services = [];
let dataAge = null;
let isLoading = true;
$: {
if (jsonData === null && requestedStation) {
fetchData();
}
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
}
if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
services = jsonData.GetStationBoardResult.trainServices.service;
} else {
services = [];
}
}
async function fetchData() {
isLoading = true; // Set loading state
try {
console.log(`Requested Station: ${requestedStation}`);
const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
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(() => {
if (requestedStation && jsonData === null) {
fetchData();
}
});
</script>
{#if isLoading}
<Loading />
{:else}
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
<p>Staff LDB for {station}</p>
<!-- REST OF PAGE HERE -->
{/if}
<Nav />

23
src/lib/stores/uuid.js Normal file
View File

@ -0,0 +1,23 @@
import { writable } from 'svelte/store'
import { browser } from '$app/environment';
export const uuid = writable(fromLocalStorage('uuid', null))
toLocalStorage(uuid, 'uuid');
function fromLocalStorage(storageKey, fallback) {
if (browser) {
const storedValue = localStorage.getItem(storageKey);
if (storedValue !== 'undefined') {
return storedValue
}
}
return fallback
}
function toLocalStorage(store, storageKey) {
if (browser) {
store.subscribe(value => {
localStorage.setItem(storageKey, value)
})
}
}

View File

@ -2,6 +2,8 @@
import Header from '$lib/navigation/header.svelte' import Header from '$lib/navigation/header.svelte'
import Nav from '$lib/navigation/nav.svelte' import Nav from '$lib/navigation/nav.svelte'
import PublicLdb from '$lib/ldb/public-ldb.svelte'; import PublicLdb from '$lib/ldb/public-ldb.svelte';
import StaffLdb from '$lib/ldb/staff-ldb.svelte';
import { uuid } from '$lib/stores/uuid.js';
import {onMount} from 'svelte' import {onMount} from 'svelte'
const title = "Public Board" const title = "Public Board"
@ -11,10 +13,17 @@
let station; let station;
let staff; let staff;
let uuidValue;
$: uuidValue = $uuid;
onMount(async () => { onMount(async () => {
station = await getHeadcode() || ""; station = await getHeadcode() || "";
if (uuidValue !== null) {
staff = true;
} else {
staff = false; staff = false;
}
}) })
</script> </script>
@ -24,6 +33,8 @@
<!-- If 'uuid' exists in store then load StaffLdb else load PublicLdb --> <!-- If 'uuid' exists in store then load StaffLdb else load PublicLdb -->
{#if !staff} {#if !staff}
<PublicLdb {station} /> <PublicLdb {station} />
{:else}
<StaffLdb {station} />
{/if} {/if}
<Nav /> <Nav />