Upgrading StaffLDB Display

This commit is contained in:
Fred Boniface 2023-09-12 21:50:52 +01:00
parent 15b07b6d58
commit 677fac6ca8
4 changed files with 94 additions and 17 deletions

View File

@ -0,0 +1,10 @@
// Fetches StaffLDB Data, correctly formats DATE fields and returns the data
import { getApiUrl } from "$lib/scripts/upstream";
import type { ApiResponse, StaffLdb } from "@owlboard/ts-types";
// Fetch StaffLDB Data, and returns the data after hydration (convert date types etc.)
export async function fetchStaffLdb(station: string, auth: string): Promise<ApiResponse<StaffLdb>> {
const url = `${getApiUrl()}//api/v2/live/station/${station}/staff`;
}

View File

@ -1,16 +1,30 @@
<script lang="ts">
import { uuid } from '$lib/stores/uuid';
import { getApiUrl } from '$lib/scripts/upstream';
import TableGenerator from './table/table-generator.svelte';
import Loading from '$lib/navigation/loading.svelte';
import type { ApiResponse, StaffLdb } from '@owlboard/ts-types';
import { detailInit, defineDetail } from './train-detail';
import TrainDetail from './train-detail.svelte';
export let station: string;
export let title: string | undefined = 'Loading...';
export let error = {
state: false,
name: 'none',
name: 'none'
};
let detail = detailInit();
function hideDetail() {
detail = detailInit();
}
function showDetail(rid: string, uid: string, tid: string) {
detail = defineDetail(rid, uid, tid);
}
async function fetchStaffLdb(station: string) {
console.log(`Station: ${station}`);
async function fetchStaffLdb(station: string) { // Move this function to ./fetch.ts and correctly handle the required date formatting
const url = `${getApiUrl()}/api/v2/live/station/${station}/staff`;
const options = {
method: 'GET',
@ -22,29 +36,51 @@
let jsonData: ApiResponse<StaffLdb>;
if (res.status === 200) {
jsonData = await res.json();
title = jsonData.data?.locationName;
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',
}
name: 'unauthorized'
};
}
}
</script>
{#key detail}
{#if detail.show}
<TrainDetail {detail} close={hideDetail} />
{/if}
{/key}
{#await fetchStaffLdb(station)}
Loading
<!--<Loading /> Loading already appears, but I don't know where it is being imported from!!!-->
{:then data}
Loaded {JSON.stringify(data)}
{#if data}
<p class="generatedTime">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
{#if data.trainServices?.length}
<TableGenerator services={data.trainServices} click={showDetail} />
{/if}
{#if data.busServices?.length}
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
<span class="table-head-text">Bus Services</span>
<TableGenerator services={data.busServices} click={showDetail} />
{/if}
{#if data.ferryServices?.length}
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Ferry services" /><br />
<span class="table-head-text">Ferry Services</span>
<TableGenerator services={data.ferryServices} click={showDetail} />
{/if}
{/if}
{:catch}
Error Loading
Error Loading Data
{/await}
{#if error.state}
{#if error.name === 'unauthorized'}
<p>Error: {error.name.toLocaleUpperCase()}</p>
{/if}
{#if error.name === 'unauthorized'}
<p>Error: {error.name.toLocaleUpperCase()}</p>
{/if}
{/if}

View File

@ -5,7 +5,7 @@
import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
export let services: TrainServices[];
export let click: any; // Not sure of the type here!
export let click: Function;
function detail(event: any, rid: string, uid: string, tid: string) {
const target = event.target;
@ -17,10 +17,14 @@
for (const location of locations) {
tiplocs.push(location.tiploc);
}
return tiplocs.join(' & ');
let location = tiplocs.join(' & ');
if (locations[0]['via']) {
location = `${location} ${locations[0]['via']}` // Maybe this should be converted to TIPLOC server-side?
}
return location
}
async function classGenerator(service: TrainServices) {
async function classGenerator(service: TrainServices) { // This function needs updating next
let otherArr: string[] = [];
let arrArr: string[] = [];
let depArr: string[] = [];
@ -88,6 +92,7 @@
</script>
<p class="smallScreen">Your display is too small to view this data</p>
<p class="smallScreen">Try rotating your device</p>
<table>
<tr>
<th class="id">ID</th>
@ -112,10 +117,10 @@
>
{#await classGenerator(service) then classes}
<td class="id {classes.other}">{service.trainid}</td>
<td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
<td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/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="plat">{service.platform || '-'}</td>
<td class="time schTime {classes.other}">{service.sta || '-'}</td>
<td class="time schTime {classes.other}">{service?.sta || '-'}</td>
<!-- All time need to be displayed appropriately -->
<td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
<!-- All time need to be displayed appropriately -->

View File

@ -0,0 +1,26 @@
export interface Detail {
show: boolean;
headcode: string;
rid: string;
uid: string;
}
export function detailInit(): Detail {
const detail: Detail = {
show: false,
headcode: '',
rid: '',
uid: ''
};
return detail;
}
export function defineDetail(rid: string, uid: string, tid: string) {
const detail: Detail = {
rid: rid,
uid: uid,
headcode: tid,
show: true
};
return detail;
}