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

Work on staff train detail

Browse Source
This commit is contained in:
Fred Boniface 2023-07-07 13:53:49 +01:00
parent e3f47dc43a
commit cb8aff5788
3 changed files with 173 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,7 @@
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 75%;
width: 85%;
height: auto;
max-height: 75vh;
overflow-y: auto;

35
src/lib/ldb/staff-ldb.svelte
View File

@ -16,6 +16,7 @@
let dataAge = null;
let isLoading = true;
let alerts = [];
let detail = {show: false, rid:'',uid:'', headcode:''}
$: {
if (jsonData?.GetBoardResult?.generatedAt) {
@ -213,11 +214,35 @@
return processedMessages;
}
async function showDetails(rid, uid, tid) {
detail = {
rid: rid,
uid: uid,
headcode: tid,
show: true
};
}
function hideDetails() {
detail = {
rid: '',
uid: '',
headcode: '',
show: false
};
}
onMount(() => {
fetchData();
});
</script>
{#key detail}
{#if detail.show}
<StaffTrainDetail {detail} close={hideDetails} />
{/if}
{/key}
{#if isLoading}
<Loading />
{:else}
@ -242,10 +267,10 @@
<td colspan="8"> Loading... </td>
</tr>
{:then serviceStats}
<tr class="{serviceStats.isCancelled && 'can-dat'}">
<td class="id id-data data">{service.trainid}</td>
<td class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">{serviceStats.from}</td>
<td class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">{serviceStats.to}</td>
<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.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
@ -336,7 +361,7 @@
}
.hidden {
color: grey;
opacity: 0.5;
}
.ecs {

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

@ -0,0 +1,142 @@
<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>