Preparatory work for update StaffLdb API Response
This commit is contained in:
parent
33e383296e
commit
eac9d2bff7
133
src/lib/ldb/staff/staff-ldb-dev.svelte
Normal file
133
src/lib/ldb/staff/staff-ldb-dev.svelte
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let station = '';
|
||||||
|
export let title = 'Loading...';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
|
||||||
|
import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
|
||||||
|
import Loading from '$lib/navigation/loading.svelte';
|
||||||
|
import { uuid } from '$lib/stores/uuid';
|
||||||
|
import Island from '$lib/islands/island.svelte';
|
||||||
|
import TableGeneratorDev from './table/table-generator_dev.svelte';
|
||||||
|
|
||||||
|
import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
|
||||||
|
|
||||||
|
let jsonData: ApiResponse<StaffLdb>;
|
||||||
|
let isLoading = true;
|
||||||
|
let isErr = false;
|
||||||
|
let errMsg: string;
|
||||||
|
let alerts: NrccMessage[];
|
||||||
|
let detail = { show: false, rid: '', uid: '', headcode: '' };
|
||||||
|
|
||||||
|
$: {
|
||||||
|
if (isLoading) {
|
||||||
|
title = "Loading..."
|
||||||
|
} else {
|
||||||
|
title = station
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
const json = await data.json();
|
||||||
|
if (json.ERROR === 'NOT_FOUND') {
|
||||||
|
isErr = true;
|
||||||
|
errMsg = 'Unable to find this station';
|
||||||
|
} else {
|
||||||
|
jsonData = json;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
isLoading = false;
|
||||||
|
isErr = true;
|
||||||
|
errMsg = 'Connection error, try again later';
|
||||||
|
} finally {
|
||||||
|
isLoading = false; // Clear loading state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDetail(rid = '', uid = '', tid = '') {
|
||||||
|
detail = {
|
||||||
|
rid: rid,
|
||||||
|
uid: uid,
|
||||||
|
headcode: tid,
|
||||||
|
show: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideDetails() {
|
||||||
|
detail = {
|
||||||
|
rid: '',
|
||||||
|
uid: '',
|
||||||
|
headcode: '',
|
||||||
|
show: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#key detail}
|
||||||
|
{#if detail.show}
|
||||||
|
<StaffTrainDetail {detail} close={hideDetails} />
|
||||||
|
{/if}
|
||||||
|
{/key}
|
||||||
|
|
||||||
|
{#if isLoading}
|
||||||
|
<Loading />
|
||||||
|
{:else if isErr}
|
||||||
|
<Island>
|
||||||
|
<p><strong>{errMsg}</strong></p>
|
||||||
|
</Island>
|
||||||
|
{:else}
|
||||||
|
{#if alerts.length}
|
||||||
|
<AlertBar {alerts} />
|
||||||
|
{/if}
|
||||||
|
<p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
|
||||||
|
{#if trainServices && trainServices.length}
|
||||||
|
<TableGenerator services={trainServices} click={showDetail} />
|
||||||
|
{:else}
|
||||||
|
<p id="noservices">There are no scheduled train services in the next two hours</p>
|
||||||
|
{/if}
|
||||||
|
{#if busServices && busServices.length}
|
||||||
|
<img class="transport-mode-image" src="/images/transport-modes/bus.svg" alt="" />
|
||||||
|
<br />
|
||||||
|
<span class="transport-mode-text">Bus Services</span>
|
||||||
|
<TableGenerator services={busServices} click={showDetail} />
|
||||||
|
{/if}
|
||||||
|
{#if ferryServices && ferryServices.length}
|
||||||
|
<img class="transport-mode-image" src="/images/transport-modes/ferry.svg" alt="" />
|
||||||
|
<br />
|
||||||
|
<span class="transport-mode-text">Ferry Services</span>
|
||||||
|
<TableGenerator services={ferryServices} click={showDetail} />
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
p.dataTime {
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
#noservices {
|
||||||
|
margin: 20px;
|
||||||
|
padding-top: 20px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transport-mode-image {
|
||||||
|
width: 30px;
|
||||||
|
margin: auto;
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
.transport-mode-text {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
@ -2,8 +2,7 @@
|
|||||||
import Reason from '$lib/raw-fetchers/reason.svelte';
|
import Reason from '$lib/raw-fetchers/reason.svelte';
|
||||||
import { tocs as tocMap } from '$lib/stores/tocMap';
|
import { tocs as tocMap } from '$lib/stores/tocMap';
|
||||||
|
|
||||||
import type { StaffLdb, NrccMessage, TrainServices,
|
import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
|
||||||
ServiceLocation } from '@owlboard/ts-types';
|
|
||||||
|
|
||||||
export let services;
|
export let services;
|
||||||
export let click;
|
export let click;
|
||||||
|
Loading…
Reference in New Issue
Block a user