OwlBoard/owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Modulisation and additions to StaffLDB

Browse Source
This commit is contained in:
Fred Boniface 2023-07-07 21:59:06 +01:00
parent cb8aff5788
commit 5a6fe0f3f5
7 changed files with 505 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/islands/overlay-island.svelte
View File

@ -23,7 +23,7 @@
transform: translateY(-50%) translateX(-50%);
width: 85%;
height: auto;
max-height: 75vh;
max-height: 85vh;
overflow-y: auto;
max-width: 400px;
margin: auto;

142
src/lib/ldb/staff-train-detail.svelte
View File

@ -1,142 +0,0 @@
<script>
import OverlayIsland from "$lib/islands/overlay-island.svelte";
import Loading from "$lib/navigation/loading.svelte";
import { uuid } from "$lib/stores/uuid";
export let detail = {
uid: '',
rid: '',
headcode: '',
show: true,
};
export let close;
function handleClick() {
close();
}
async function getTrain(rid) {
try {
console.log(`Requested Station: ${rid}`);
const url = `https://owlboard.info/api/v2/live/train/rid/${rid}`;
const opt = {
method: 'GET',
headers: {
uuid: $uuid
}
};
const data = await fetch(url, opt);
return await data.json();
} catch (error) {
console.error('Error fetching data:', error);
}
}
async function parseDelay(location) {
let string, state;
if (location?.lateness) {
try {
const result = Math.floor(location.lateness / 60)
if (result === 0) {string = "RT", state = ''}
else if (result < 0) {string = -result + 'E', state = "early"}
else if (result > 0) {string = result + 'L', state = "late"};
} catch {
string = '-', state = '';
}
} else if (location.arrivalType === "Delayed") {
string = "LATE", state = "late";
}
return {
string: string,
state: state
};
}
</script>
<OverlayIsland>
<div id="detailBox">
{#await getTrain(detail.rid)}
<h6>{detail.headcode}</h6>
<Loading />
{:then train}
<h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
<p>Locations in grey are not scheduled stops
<br>
Some stops may be operational stops, not passenger stops.
</p>
<button type="button" id="closeService" on:click={handleClick}>X</button>
<table id="detailTable">
<tr>
<th>Location</th>
<th>Plat.</th>
<th>Sch Arr</th>
<th>Sch Dep</th>
<th>Delay</th>
</tr>
{#each train.GetServiceDetailsResult.locations.location as location}
<tr>
<td class="{location?.isPass === 'true' ? 'pass' : ''}">{location.tiploc}</td>
<td class="{location?.isPass === 'true' ? 'pass' : ''}">{location.platform || ''}</td>
<td class="{location?.isPass === 'true' ? 'pass' : ''}">AR</td>
<td class="{location?.isPass === 'true' ? 'pass' : ''}">DP</td>
{#await parseDelay(location)}
<td>-</td>
{:then delay}
<td class="{delay.state}">{delay.string}</td>
{/await}
</tr>
{/each}
</table>
{:catch}
<h6>Error loading data</h6>
{/await}
</div>
</OverlayIsland>
<style>
#detailBox {
width: 100%;
min-height: 100px;
overflow-x: hidden;
overflow-y: auto;
}
h6 {
position: absolute;
top: -25px;
left: 20px;
font-size: 18px;
}
p {
margin-top: 45px;
}
#closeService {
position: absolute;
top: 10px;
right: 10px;
border: none;
border-radius: 60px;
width: 35px;
height: 35px;
background-color: var(--main-bg-color);
color: white;
font-weight: 700;
font-size: 16px;
}
#detailTable {
width: 100%;
margin-top: 40px;
color: white;
font-size: 15px;
}
.thisStop {
color: yellow;
}
.pass {
opacity: 0.45
}
.early {
color: blue;
}
.late {
color: red;
}
</style>

158
src/lib/ldb/staff/service-row.svelte Normal file
View File

@ -0,0 +1,158 @@
<script>
export let service;
import Reason from "$lib/raw-fetchers/reason.svelte";
function parseTimes(service) {
const sta = new Date(service.sta),
eta = new Date(service.eta),
ata = new Date(service.ata);
const std = new Date(service.std),
etd = new Date(service.etd),
atd = new Date(service.atd);
let parsedSta = parseTime(sta),
parsedEta = parseTime(eta),
parsedAta = parseTime(ata);
let parsedStd = parseTime(std),
parsedEtd = parseTime(etd),
parsedAtd = parseTime(atd);
if (service.isCancelled) {
(parsedEta = 'CANC'), (parsedEtd = 'CANC');
}
let times = {
sta: parsedSta || '-',
eata: parsedEta || parsedAta || '-',
aEst: parsedEta ? 'estimate' : '',
std: parsedStd || '-',
eatd: parsedEtd || parsedAtd || '-',
dEst: parsedEtd ? 'estimate' : ''
};
if (service.isCancelled) {
(parsedEta = 'CANC'), (parsedEtd = 'CANC');
(times.aEst = 'canc'), (times.dEst = 'canc');
}
return times;
}
async function generateServiceData(service) {
const timeDetails = await parseTimes(service);
let serviceData = {
from: await parseLocation(service.origin),
to: await parseLocation(service.destination),
length: await getTrainLength(service),
platform: await parsePlatform(service?.platform || 'undefined'),
platformHidden: service?.platformIsHidden === 'true',
schArr: timeDetails.schArr,
expArr: timeDetails.expArr,
schDep: timeDetails.schDep,
expDep: timeDetails.expDep,
isEarlyArr: timeDetails.earArr,
isLateArr: timeDetails.delArr,
isEarlyDep: timeDetails.earDep,
isLateDep: timeDetails.delDep,
isCancelledDep: false,
isCancelled: Boolean(service?.isCancelled),
canArr: timeDetails.canArr,
canDep: timeDetails.canDep,
isDelayed: service?.arrivalType === 'Delayed',
isArrDelayed: service?.arrivalType === 'Delayed',
isDepDelayed: service?.departureType === 'Delayed',
isNonPublic: service?.isPassengerService === 'false' ? true : false
};
return serviceData;
}
async function getTrainLength(service) {
if (service?.length) {
return parseInt(service?.length);
} else if (service?.formation?.coaches) {
return service.formation.coaches.coach.length;
}
return null;
}
async function parseLocation(location) {
if (!Array.isArray(location.location)) {
return location.location?.tiploc;
}
let locations = [];
for (const singleLocation of location?.location) {
locations.push(singleLocation?.tiploc);
}
return locations.join(' & ');
}
async function parsePlatform(platform) {
if (!platform) {
return '-';
}
if (platform === 'TBC' || platform == 'undefined') {
return '-';
}
return {
number: platform
};
}
function parseIndividualTime(input) {
const dt = new Date(input);
const output = dt.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
});
if (output !== 'Invalid Date') {
return output;
}
return '-';
}
</script>
{#await generateServiceData(service)}
<tr>
<td colspan="8"> Loading... </td>
</tr>
{:then serviceStats}
<tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
<td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}
>{service.trainid}</td
>
<td
class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td
>
<td
class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td
>
<td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
<td class="time time-data data">{serviceStats.schArr}</td>
<td
class="time time-data data {serviceStats.canArr && 'can-time'} {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr &&
'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
>
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
<td
class="time time-data data {serviceStats.canDep && 'can-time'} {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep &&
'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
>
</tr>
<tr class="text-row">
<td colspan="8" class="text-data">
{service.operator}
{#if serviceStats.length} | {serviceStats.length} carriages{/if}
<br />
{#if service.cancelReason}
<Reason type="cancel" code={service.cancelReason} />
{/if}
{#if service?.delayReason && !service.isCancelled}
<Reason type="delay" code={service.delayReason} />
{/if}
</td>
</tr>
{:catch}
<tr>
<td colspan="8">Unable to load service</td>
</tr>
{/await}

80
src/lib/ldb/staff-ldb.svelte → src/lib/ldb/staff/staff-ldb.svelte
View File

@ -2,8 +2,10 @@
export let station = '';
export let title = 'Loading...';
import { onMount } from 'svelte';
import AlertBar from './alert-bar.svelte';
import StaffTrainDetail from '$lib/ldb/staff-train-detail.svelte';
import AlertBar from '../alert-bar.svelte';
import ServiceRow from './service-row.svelte';
import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
import Reason from '$lib/raw-fetchers/reason.svelte';
import Loading from '$lib/navigation/loading.svelte';
import Nav from '$lib/navigation/nav.svelte';
import { uuid } from '$lib/stores/uuid';
@ -16,7 +18,7 @@
let dataAge = null;
let isLoading = true;
let alerts = [];
let detail = {show: false, rid:'',uid:'', headcode:''}
let detail = { show: false, rid: '', uid: '', headcode: '' };
$: {
if (jsonData?.GetBoardResult?.generatedAt) {
@ -60,13 +62,6 @@
}
}
async function getReasonCodeData(code) {
const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`;
const res = await fetch(url);
const json = await res.json();
return json;
}
async function generateServiceData(service) {
const timeDetails = await parseTimes(service);
let serviceData = {
@ -85,10 +80,12 @@
isLateDep: timeDetails.delDep,
isCancelledDep: false,
isCancelled: Boolean(service?.isCancelled),
canArr: timeDetails.canArr,
canDep: timeDetails.canDep,
isDelayed: service?.arrivalType === 'Delayed',
isArrDelayed: service?.arrivalType === 'Delayed',
isDepDelayed: service?.departureType === 'Delayed',
isNonPublic: service?.isPassengerService === "false" ? true : false
isNonPublic: service?.isPassengerService === 'false' ? true : false
};
return serviceData;
}
@ -104,7 +101,6 @@
async function parseLocation(location) {
if (!Array.isArray(location.location)) {
//console.log(location.location?.tiploc)
return location.location?.tiploc;
}
let locations = [];
@ -133,10 +129,12 @@
let expDep = new Date(service?.etd || service?.atd);
let isEarlyArr = false,
isDelayedArr = false,
isArr = false;
isArr = false,
canArr = false;
let isEarlyDep = false,
isDelayedDep = false,
isDep = false;
isDep = false,
canDep = false;
const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
if (expArr - schArr < -timeDifferenceThreshold) {
isEarlyArr = true;
@ -160,6 +158,9 @@
} else {
parsedExpArr = parseIndividualTime(expArr);
}
} else if (service.isCancelled === 'true') {
parsedExpArr = 'CANC';
canArr = true;
} else {
parsedExpArr = '-';
}
@ -171,6 +172,9 @@
} else {
parsedExpDep = parseIndividualTime(expDep);
}
} else if (service.isCancelled === 'true') {
parsedExpDep = 'CANC';
canDep = true;
} else {
parsedExpDep = '-';
}
@ -182,7 +186,9 @@
earArr: isEarlyArr,
delArr: isDelayedArr,
earDep: isEarlyDep,
delDep: isDelayedDep
delDep: isDelayedDep,
canArr: canArr,
canDep: canDep
};
}
@ -268,17 +274,29 @@
</tr>
{:then serviceStats}
<tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
<td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{service.trainid}</td>
<td class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td>
<td class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td>
<td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}
>{service.trainid}</td
>
<td
class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td
>
<td
class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
on:click={showDetails(service.rid, service.uid, service.trainid)}
on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td
>
<td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
<td class="time time-data data">{serviceStats.schArr}</td>
<td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
>{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
<td
class="time time-data data {serviceStats.canArr && 'can-time'} {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr &&
'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
>
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
<td class="time time-data data {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep && 'late'}"
>{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
<td
class="time time-data data {serviceStats.canDep && 'can-time'} {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep &&
'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
>
</tr>
<tr class="text-row">
@ -286,21 +304,11 @@
{service.operator}
{#if serviceStats.length} | {serviceStats.length} carriages{/if}
<br />
{#if service.isCancelled}
{#await getReasonCodeData(service.cancelReason)}
This train has been cancelled
{:then reasonCode}
{reasonCode[0].cancReason}
<br />
{/await}
{#if service.cancelReason}
<Reason type="cancel" code={service.cancelReason} />
{/if}
{#if service?.delayReason}
{#await getReasonCodeData(service.delayReason)}
This train has been delayed
{:then reasonCode}
{reasonCode[0].lateReason}
<br />
{/await}
{#if service?.delayReason && !service.isCancelled}
<Reason type="delay" code={service.delayReason} />
{/if}
</td>
</tr>

251
src/lib/ldb/staff/train-detail.svelte Normal file
View File

@ -0,0 +1,251 @@
<script>
import OverlayIsland from '$lib/islands/overlay-island.svelte';
import Loading from '$lib/navigation/loading.svelte';
import Reason from '$lib/raw-fetchers/reason.svelte';
import { uuid } from '$lib/stores/uuid';
export let detail = {
uid: '',
rid: '',
headcode: '',
show: true
};
export let close;
function handleClick() {
close();
}
async function getTrain(rid) {
try {
console.log(`Requested Station: ${rid}`);
const url = `https://owlboard.info/api/v2/live/train/rid/${rid}`;
const opt = {
method: 'GET',
headers: {
uuid: $uuid
}
};
const data = await fetch(url, opt);
return await data.json();
} catch (error) {
console.error('Error fetching data:', error);
}
}
async function parseDelay(location) {
let string, state;
if (location?.lateness) {
try {
const result = Math.floor(location.lateness / 60);
if (result === 0) {
(string = 'RT'), (state = '');
} else if (result < 0) {
(string = -result + 'E'), (state = 'early');
} else if (result > 0) {
(string = result + 'L'), (state = 'late');
}
} catch {
(string = ''), (state = '');
}
} else if (location.arrivalType === 'Delayed') {
(string = ''), (state = 'late');
} else {
(string = ''), (state = 'noreport');
}
return {
string: string,
state: state
};
}
function parseTime(date) {
const parsedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
return parsedTime !== 'Invalid Date' ? parsedTime : null;
}
function parseTimes(service) {
const sta = new Date(service.sta),
eta = new Date(service.eta),
ata = new Date(service.ata);
const std = new Date(service.std),
etd = new Date(service.etd),
atd = new Date(service.atd);
let parsedSta = parseTime(sta),
parsedEta = parseTime(eta),
parsedAta = parseTime(ata);
let parsedStd = parseTime(std),
parsedEtd = parseTime(etd),
parsedAtd = parseTime(atd);
if (service.isCancelled) {
(parsedEta = 'CANC'), (parsedEtd = 'CANC');
}
let times = {
sta: parsedSta || '-',
eata: parsedEta || parsedAta || '-',
aEst: parsedEta ? 'estimate' : '',
std: parsedStd || '-',
eatd: parsedEtd || parsedAtd || '-',
dEst: parsedEtd ? 'estimate' : ''
};
if (service.isCancelled) {
(parsedEta = 'CANC'), (parsedEtd = 'CANC');
(times.aEst = 'canc'), (times.dEst = 'canc');
}
return times;
}
</script>
<OverlayIsland>
<div id="detailBox">
{#await getTrain(detail.rid)}
<h6>{detail.headcode}</h6>
<Loading />
{:then train}
<h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
<button type="button" id="closeService" on:click={handleClick}>X</button>
<p>
Locations in grey are not scheduled stops
<br />
Times in <span class="estimate">yellow</span> are estimated times
</p>
<table id="detailTable">
{#if train.GetServiceDetailsResult.delayReason}
<tr><td colspan="7">
<Reason type="delay" code={train.GetServiceDetailsResult.delayReason} />
</td></tr>
{/if}
{#if train.GetServiceDetailsResult.cancelReason}
<tr><td colspan="7">
<Reason type="cancel" code={train.GetServiceDetailsResult.cancelReason} />
</td></tr>
{/if}
<tr>
<th colspan="2" />
<th colspan="2">Arrival</th>
<th colspan="2">Departure</th>
<th />
</tr>
<tr>
<th class="tableLocation">Location</th>
<th class="tablePlatform">Pl.</th>
<th class="tableTime">Sch</th>
<th class="tableTime">Est/Act</th>
<th class="tableTime">Sch</th>
<th class="tableTime">Est/Act</th>
<th class="tableDelay" />
</tr>
{#each train.GetServiceDetailsResult.locations.location as location}
<tr>
<td class={location?.isPass === 'true' ? 'pass' : ''}>{location.tiploc}</td>
<td class={location?.isPass === 'true' ? 'pass' : ''}>{location.platform || ''}</td>
{#await parseTimes(location)}
<td />
<td />
<td />
<td />
{:then times}
<td class={location?.isPass === 'true' ? 'pass' : ''}>{times.sta}</td>
<td class="{location?.isPass === 'true' ? 'pass' : ''} {times.aEst}">{times.eata}</td>
<td class={location?.isPass === 'true' ? 'pass' : ''}>{times.std}</td>
<td class="{location?.isPass === 'true' ? 'pass' : ''} {times.dEst}">{times.eatd}</td>
{/await}
{#await parseDelay(location)}
<td>-</td>
{:then delay}
<td class={delay.state}>{delay.string}</td>
{/await}
</tr>
{/each}
</table>
{:catch}
<h6>Error loading data</h6>
{/await}
</div>
</OverlayIsland>
<style>
#detailBox {
width: 100%;
min-height: 100px;
overflow-x: hidden;
overflow-y: auto;
}
h6 {
position: absolute;
top: -25px;
left: 20px;
font-size: 18px;
}
p {
margin-top: 45px;
margin-bottom: 0px;
}
#closeService {
position: absolute;
top: 10px;
right: 10px;
border: none;
border-radius: 60px;
width: 35px;
height: 35px;
background-color: var(--main-bg-color);
color: white;
font-weight: 700;
font-size: 16px;
}
#detailTable {
width: 100%;
margin-top: 10px;
color: white;
font-size: 16px;
}
.tableLocation {
width: 25%;
}
.tablePlatform {
width: 8%;
}
.tableTime {
width: 15%;
}
.tableDelay {
width: 7%;
}
.estimate {
color: rgb(255, 255, 50);
}
.pass {
opacity: 0.45;
font-size: 16px;
}
.canc {
animation: pulse-cancel 1.5s linear infinite;
}
.early {
animation: pulse-early 1.5s linear infinite;
}
.late {
animation: pulse-late 1.5s linear infinite;
}
@keyframes pulse-late {
50% {
color: var(--main-warning-color);
}
}
@keyframes pulse-cancel {
50% {
color: var(--main-alert-color);
}
}
@keyframes pulse-early {
50% {
color: rgb(136, 164, 255);
}
}
</style>

50
src/lib/raw-fetchers/reason.svelte Normal file
View File

@ -0,0 +1,50 @@
<script>
import { uuid } from "$lib/stores/uuid";
export let code = '';
export let type = '';
async function getDelay(code = '') {
console.log(`Fetching delay reason ${code}`)
const data = await getReason(code);
return data[0].lateReason || 'This train has been delayed';
}
async function getCancel(code = '') {
console.log(`Fetching cancel reason ${code}`)
const data = await getReason(code);
return data[0].cancReason || 'This train has been cancelled';
}
async function getReason(code = '') {
const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`;
const options = {
method: 'GET',
headers: {
uuid: $uuid
}
};
const res = await fetch(url, options);
return await res.json();
}
</script>
{#if type === "cancel"}
{#await getCancel(code)}
This train has been cancelled
{:then reason}
{reason}
{:catch}
This train has been cancelled
{/await}
{:else if type === "delay"}
{#await getDelay(code)}
This train has been delayed
{:then reason}
{reason}
{:catch}
This train has been delayed
{/await}
{/if}

2
src/routes/ldb/+page.svelte
View File

@ -2,7 +2,7 @@
import Header from '$lib/navigation/header.svelte';
import Nav from '$lib/navigation/nav-ldb.svelte';
import PublicLdb from '$lib/ldb/public-ldb.svelte';
import StaffLdb from '$lib/ldb/staff-ldb.svelte';
import StaffLdb from '$lib/ldb/staff/staff-ldb.svelte';
import { uuid } from '$lib/stores/uuid.js';
import { onMount } from 'svelte';