Compare commits
7 Commits
677fac6ca8
...
b173410dd6
Author | SHA1 | Date |
---|---|---|
Fred Boniface | b173410dd6 | |
Fred Boniface | 09abfd4436 | |
Fred Boniface | 6ea0af1c26 | |
Fred Boniface | c0724d94f0 | |
Fred Boniface | 767801b328 | |
Fred Boniface | 6f55ac372d | |
Fred Boniface | cccc9f5bbf |
File diff suppressed because it is too large
Load Diff
|
@ -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 type { ApiResponse, StaffLdb } from "@owlboard/ts-types";
|
import { uuid } from '$lib/stores/uuid';
|
||||||
|
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;
|
||||||
|
});
|
||||||
}
|
}
|
|
@ -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}
|
||||||
|
|
|
@ -17,14 +17,11 @@
|
||||||
for (const location of locations) {
|
for (const location of locations) {
|
||||||
tiplocs.push(location.tiploc);
|
tiplocs.push(location.tiploc);
|
||||||
}
|
}
|
||||||
let location = tiplocs.join(' & ');
|
return 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) { // This function needs updating next
|
async function classGenerator(service: TrainServices) {
|
||||||
|
// This function needs updating next
|
||||||
let otherArr: string[] = [];
|
let otherArr: string[] = [];
|
||||||
let arrArr: string[] = [];
|
let arrArr: string[] = [];
|
||||||
let depArr: string[] = [];
|
let depArr: string[] = [];
|
||||||
|
@ -89,6 +86,17 @@
|
||||||
plat: platArr.join(' ')
|
plat: platArr.join(' ')
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function fmtTime(date: Date | string | undefined): string | false {
|
||||||
|
if (date === 'RT' || date === "CANC" || date === "LATE") return date;
|
||||||
|
if (date instanceof Date) {
|
||||||
|
const hours = date.getHours().toString().padStart(2, '0');
|
||||||
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||||
|
return `${hours}:${minutes}`;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
</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>
|
||||||
|
@ -99,10 +107,10 @@
|
||||||
<th class="from">From</th>
|
<th class="from">From</th>
|
||||||
<th class="to">To</th>
|
<th class="to">To</th>
|
||||||
<th class="plat">Plat</th>
|
<th class="plat">Plat</th>
|
||||||
<th class="time">Sch</th>
|
<th class="time arrsch">Sch</th>
|
||||||
<th class="time">Exp</th>
|
<th class="time arrexp">Exp</th>
|
||||||
<th class="time">Sch</th>
|
<th class="time depsch">Sch</th>
|
||||||
<th class="time">Exp</th>
|
<th class="time depexp">Exp</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="other" colspan="4" />
|
<th class="other" colspan="4" />
|
||||||
|
@ -116,37 +124,44 @@
|
||||||
on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
|
||||||
>
|
>
|
||||||
{#await classGenerator(service) then classes}
|
{#await classGenerator(service) then classes}
|
||||||
<td class="id {classes.other}">{service.trainid}</td>
|
<!-- HEADCODE -->
|
||||||
<td class="from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
|
<td class="id">{service.trainid}</td>
|
||||||
<td class="to {classes.other}">{#await formatLocations(service.destination) then dest}{dest}{/await}</td>
|
<!-- ORIGIN -->
|
||||||
<td class="plat">{service.platform || '-'}</td>
|
<td class="loc from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
|
||||||
<td class="time schTime {classes.other}">{service?.sta || '-'}</td>
|
<!-- DESTINATION -->
|
||||||
<!-- All time need to be displayed appropriately -->
|
<td class="loc to {classes.other}">{#await formatLocations(service.destination) then dest}<span class="locName">{dest}</span>{/await}</td>
|
||||||
<td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
|
<!-- PLATFORM -->
|
||||||
<!-- All time need to be displayed appropriately -->
|
<td class="plat {classes.other} {classes.plat}">{service.platform || '-'}</td>
|
||||||
<td class="time schTime {classes.other}">{service.std || '-'}</td>
|
<!-- SCHEDULED ARR -->
|
||||||
<!-- All time need to be displayed appropriately -->
|
<td class="time schTime {classes.other}">{fmtTime(service?.sta) || '-'}</td>
|
||||||
<td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td>
|
<!-- EXPECTED/ACTUAL ARR -->
|
||||||
<!-- All time need to be displayed appropriately -->
|
<td class="time {classes.other} {classes.arr}">{fmtTime(service.eta) || fmtTime(service.ata) || '-'}</td>
|
||||||
|
<!-- SCHEDULED DEP -->
|
||||||
|
<td class="time schTime {classes.other}">{fmtTime(service.std) || '-'}</td>
|
||||||
|
<!-- EXPECTED/ACTUAL DEP -->
|
||||||
|
<td class="time {classes.other} {classes.dep}">{fmtTime(service.etd) || fmtTime(service.atd) || '-'}</td>
|
||||||
{/await}
|
{/await}
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="tableTxt" colspan="8">
|
<td colspan="1" />
|
||||||
|
<td class="tableTxt" colspan="7">
|
||||||
|
{#if service.destination?.[0] && service.destination[0].via}<span class="via">{service.destination[0].via}</span><br />{/if}
|
||||||
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
|
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
|
||||||
{#if service.length} | {service.length} carriages{/if}
|
{#if service.length} | {service.length} carriages{/if}
|
||||||
{#if service.delayReason}
|
{#if service.delayReason}
|
||||||
<br />
|
<br />
|
||||||
|
<span class="delayTxt">
|
||||||
<Reason type={'delay'} code={service.delayReason} />
|
<Reason type={'delay'} code={service.delayReason} />
|
||||||
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
{#if service.cancelReason}
|
{#if service.cancelReason}
|
||||||
<br />
|
<br />
|
||||||
|
<span class="cancTxt">
|
||||||
<Reason type={'cancel'} code={service.cancelReason} />
|
<Reason type={'cancel'} code={service.cancelReason} />
|
||||||
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
|
||||||
<td colspan="8">Unable to display service</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
{/each}
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
@ -167,9 +182,12 @@
|
||||||
|
|
||||||
.dataRow {
|
.dataRow {
|
||||||
font-family: ubuntu, monospace;
|
font-family: ubuntu, monospace;
|
||||||
vertical-align: bottom;
|
vertical-align: top;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table Columns */
|
/* Table Columns */
|
||||||
|
@ -199,8 +217,7 @@
|
||||||
color: yellow;
|
color: yellow;
|
||||||
}
|
}
|
||||||
|
|
||||||
td.to,
|
td.to {
|
||||||
th.to {
|
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
td.from,
|
td.from,
|
||||||
|
@ -209,7 +226,7 @@
|
||||||
}
|
}
|
||||||
td.time {
|
td.time {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
vertical-align: middle;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.tableTxt {
|
.tableTxt {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -217,8 +234,18 @@
|
||||||
color: var(--second-text-color);
|
color: var(--second-text-color);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.delayTxt {
|
||||||
|
color: var(--main-warning-color);
|
||||||
|
}
|
||||||
|
.cancTxt {
|
||||||
|
color: var(--main-alert-color);
|
||||||
|
}
|
||||||
|
.via {
|
||||||
|
color: yellow;
|
||||||
|
padding-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Handle small screens */
|
/* Handle small screens */
|
||||||
.smallScreen {
|
.smallScreen {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -275,21 +302,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Conditional Classes */
|
/* Conditional Classes */
|
||||||
.cancTxt {
|
.loc.canc,
|
||||||
color: grey !important;
|
.canc {
|
||||||
|
color: grey;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nonPass {
|
.nonPass {
|
||||||
opacity: 0.6;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.late {
|
.late {
|
||||||
animation: pulse-late 1.5s linear infinite;
|
animation: pulse-late 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canc {
|
.canc.time {
|
||||||
animation: pulse-cancel 1.5s linear infinite;
|
animation: pulse-cancel 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue