StaffLDB-Minify #1

Merged
fred.boniface merged 27 commits from StaffLDB-Minify into main 2023-10-03 21:37:00 +01:00
3 changed files with 49 additions and 34 deletions
Showing only changes of commit cccc9f5bbf - Show all commits

View File

@ -1,10 +1,38 @@
// Fetches StaffLDB Data, correctly formats DATE fields and returns the data // Fetches StaffLDB Data, correctly formats DATE fields and returns the data
import { getApiUrl } from "$lib/scripts/upstream"; import { getApiUrl } from "$lib/scripts/upstream";
import { uuid } from "$lib/stores/uuid";
import type { ApiResponse, StaffLdb } from "@owlboard/ts-types"; import type { ApiResponse, StaffLdb } from "@owlboard/ts-types";
// Fetch StaffLDB Data, and returns the data after hydration (convert date types etc.) // Fetch StaffLDB Data, and returns the data after hydration (convert date types etc.)
export async function fetchStaffLdb(station: string, auth: string): Promise<ApiResponse<StaffLdb>> { export async function fetchStaffLdb(station: string): Promise<ApiResponse<StaffLdb>> {
const url = `${getApiUrl()}//api/v2/live/station/${station}/staff`; const url = `${getApiUrl()}/api/v2/live/station/${station}/staff`;
let uuid_value: string = '';
const unsubscribe = uuid.subscribe((value) => {
uuid_value = value;
});
const fetchOpts = {
method: 'GET',
headers: {
uuid: uuid_value,
},
};
const res = await fetch(url, fetchOpts)
unsubscribe();
const resJs = await res.json()
return parseFormat(JSON.stringify(resJs))
}
function parseFormat(jsonString: any): ApiResponse<StaffLdb> {
return JSON.parse(jsonString, (key, value) => {
if (typeof value === 'string') {
const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
if (dateRegex.test(value)) {
return new Date(value);
}
}
return value
});
} }

View File

@ -1,11 +1,10 @@
<script lang="ts"> <script lang="ts">
import { uuid } from '$lib/stores/uuid';
import { getApiUrl } from '$lib/scripts/upstream';
import TableGenerator from './table/table-generator.svelte'; import TableGenerator from './table/table-generator.svelte';
import Loading from '$lib/navigation/loading.svelte'; import Loading from '$lib/navigation/loading.svelte';
import type { ApiResponse, StaffLdb } from '@owlboard/ts-types'; import type { ApiResponse, StaffLdb } from '@owlboard/ts-types';
import { detailInit, defineDetail } from './train-detail'; import { detailInit, defineDetail } from './train-detail';
import TrainDetail from './train-detail.svelte'; import TrainDetail from './train-detail.svelte';
import { fetchStaffLdb } from './fetch';
export let station: string; export let station: string;
export let title: string | undefined = 'Loading...'; export let title: string | undefined = 'Loading...';
@ -24,29 +23,13 @@
console.log(`Station: ${station}`); console.log(`Station: ${station}`);
async function fetchStaffLdb(station: string) { // Move this function to ./fetch.ts and correctly handle the required date formatting async function callFetch(station: string): Promise<StaffLdb> {
const url = `${getApiUrl()}/api/v2/live/station/${station}/staff`; const data = await fetchStaffLdb(station);
const options = { if (data.data) {
method: 'GET', title = data.data.locationName;
headers: { return data.data;
uuid: $uuid
}
};
const res = await fetch(url, options);
let jsonData: ApiResponse<StaffLdb>;
if (res.status === 200) {
jsonData = await res.json();
title = jsonData.data?.locationName || 'Not Found';
error.state = false;
return jsonData?.data;
} else if (res.status === 401) {
console.log(`Request Status: ${res.status}`);
title = 'Unauthorised';
error = {
state: true,
name: 'unauthorized'
};
} }
throw new Error("Unable to Fetch Data")
} }
</script> </script>
@ -56,7 +39,7 @@
{/if} {/if}
{/key} {/key}
{#await fetchStaffLdb(station)} {#await callFetch(station)}
<!--<Loading /> Loading already appears, but I don't know where it is being imported from!!!--> <!--<Loading /> Loading already appears, but I don't know where it is being imported from!!!-->
{:then data} {:then data}
{#if data} {#if data}

View File

@ -89,6 +89,13 @@
plat: platArr.join(' ') plat: platArr.join(' ')
}; };
} }
function fmtTime(date: Date | undefined): string | false {
if (!date) return false; // Handle null or undefined dates
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${hours}:${minutes}`;
}
</script> </script>
<p class="smallScreen">Your display is too small to view this data</p> <p class="smallScreen">Your display is too small to view this data</p>
@ -120,13 +127,13 @@
<td class="from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td> <td class="from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
<td class="to {classes.other}">{#await formatLocations(service.destination) then dest}{dest}{/await}</td> <td class="to {classes.other}">{#await formatLocations(service.destination) then dest}{dest}{/await}</td>
<td class="plat">{service.platform || '-'}</td> <td class="plat">{service.platform || '-'}</td>
<td class="time schTime {classes.other}">{service?.sta || '-'}</td> <td class="time schTime {classes.other}">{fmtTime(service?.sta) || '-'}</td>
<!-- All time need to be displayed appropriately --> <!-- All time need to be displayed appropriately -->
<td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td> <td class="time {classes.other} {classes.arr}">{fmtTime(service.eta) || fmtTime(service.ata) || '-'}</td>
<!-- All time need to be displayed appropriately --> <!-- All time need to be displayed appropriately -->
<td class="time schTime {classes.other}">{service.std || '-'}</td> <td class="time schTime {classes.other}">{fmtTime(service.std) || '-'}</td>
<!-- All time need to be displayed appropriately --> <!-- All time need to be displayed appropriately -->
<td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td> <td class="time {classes.other} {classes.dep}">{fmtTime(service.etd) || fmtTime(service.atd) || '-'}</td>
<!-- All time need to be displayed appropriately --> <!-- All time need to be displayed appropriately -->
{/await} {/await}
</tr> </tr>
@ -144,9 +151,6 @@
{/if} {/if}
</td> </td>
</tr> </tr>
<tr>
<td colspan="8">Unable to display service</td>
</tr>
{/each} {/each}
</table> </table>