Work on staff train detail
This commit is contained in:
parent
e3f47dc43a
commit
cb8aff5788
@ -21,7 +21,7 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateY(-50%) translateX(-50%);
|
transform: translateY(-50%) translateX(-50%);
|
||||||
width: 75%;
|
width: 85%;
|
||||||
height: auto;
|
height: auto;
|
||||||
max-height: 75vh;
|
max-height: 75vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
let dataAge = null;
|
let dataAge = null;
|
||||||
let isLoading = true;
|
let isLoading = true;
|
||||||
let alerts = [];
|
let alerts = [];
|
||||||
|
let detail = {show: false, rid:'',uid:'', headcode:''}
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (jsonData?.GetBoardResult?.generatedAt) {
|
if (jsonData?.GetBoardResult?.generatedAt) {
|
||||||
@ -213,11 +214,35 @@
|
|||||||
return processedMessages;
|
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(() => {
|
onMount(() => {
|
||||||
fetchData();
|
fetchData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#key detail}
|
||||||
|
{#if detail.show}
|
||||||
|
<StaffTrainDetail {detail} close={hideDetails} />
|
||||||
|
{/if}
|
||||||
|
{/key}
|
||||||
|
|
||||||
{#if isLoading}
|
{#if isLoading}
|
||||||
<Loading />
|
<Loading />
|
||||||
{:else}
|
{:else}
|
||||||
@ -242,10 +267,10 @@
|
|||||||
<td colspan="8"> Loading... </td>
|
<td colspan="8"> Loading... </td>
|
||||||
</tr>
|
</tr>
|
||||||
{:then serviceStats}
|
{:then serviceStats}
|
||||||
<tr class="{serviceStats.isCancelled && 'can-dat'}">
|
<tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
|
||||||
<td class="id id-data data">{service.trainid}</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'}">{serviceStats.from}</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'}">{serviceStats.to}</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="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.schArr}</td>
|
||||||
<td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
|
<td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
|
||||||
@ -336,7 +361,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
color: grey;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ecs {
|
.ecs {
|
||||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user