Add 'getTrainByUID - and format
This commit is contained in:
parent
6795809098
commit
be7d0106d5
@ -333,7 +333,10 @@
|
|||||||
.tableTxt {
|
.tableTxt {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
td.to,td.from,th.to,th.from {
|
td.to,
|
||||||
|
td.from,
|
||||||
|
th.to,
|
||||||
|
th.from {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
15
src/lib/navigation/loading-text.svelte
Normal file
15
src/lib/navigation/loading-text.svelte
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<p id="load">Loading...</p>
|
||||||
|
<style>
|
||||||
|
#load {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
animation: pulse-loading 2.5s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes pulse-loading {
|
||||||
|
50% {
|
||||||
|
color: rgb(136, 164, 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -1,15 +1,34 @@
|
|||||||
<script>
|
<script>
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
|
import { uuid } from '$lib/stores/uuid';
|
||||||
|
import LoadingText from '$lib/navigation/loading-text.svelte';
|
||||||
|
|
||||||
export let service = '';
|
export let service = '';
|
||||||
|
|
||||||
let isExpanded = false;
|
let isExpanded = false;
|
||||||
|
|
||||||
|
async function getTrainByUID(tuid = '') {
|
||||||
|
const url = `https://owlboard.info/api/v2/timetable/train/byTrainUid/${tuid}`;
|
||||||
|
const options = {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
uuid: $uuid
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const res = await fetch(url, options);
|
||||||
|
if (res.status === 200) {
|
||||||
|
return await res.json();
|
||||||
|
} else {
|
||||||
|
throw new Error('Unable to Fetch');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function expand() {
|
async function expand() {
|
||||||
isExpanded = !isExpanded;
|
isExpanded = !isExpanded;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<!-- The next version of backend will only return a subset of information required to display the container-header
|
|
||||||
|
<!-- The next version of backend will only return a subset of information required to display the container-header
|
||||||
, the container will then be responsible for fetching more data using the trainUid. -->
|
, the container will then be responsible for fetching more data using the trainUid. -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="container-header" on:click={expand} on:keypress={expand}>
|
<div class="container-header" on:click={expand} on:keypress={expand}>
|
||||||
@ -21,19 +40,22 @@
|
|||||||
</div>
|
</div>
|
||||||
{#if isExpanded}
|
{#if isExpanded}
|
||||||
<div class="container-detail" in:fly={{ y: -20, duration: 200 }}>
|
<div class="container-detail" in:fly={{ y: -20, duration: 200 }}>
|
||||||
{#if service.pis}
|
{#await getTrainByUID(service.trainUid)}
|
||||||
<p class="pis">PIS: {service.pis}</p>
|
<LoadingText />
|
||||||
|
{:then serviceDetail}
|
||||||
|
{#if serviceDetail.pis}
|
||||||
|
<p class="pis">PIS: {serviceDetail.pis}</p>
|
||||||
{/if}
|
{/if}
|
||||||
<p class="svc-detail">
|
<p class="svc-detail">
|
||||||
Planned Type: {parseInt(service.planSpeed) || 68}mph {service.powerType || 'Bus'}
|
Planned Type: {parseInt(serviceDetail.planSpeed) || 68}mph {serviceDetail.powerType || 'Bus'}
|
||||||
</p>
|
</p>
|
||||||
<p class="svc-detail">
|
<p class="svc-detail">
|
||||||
Days Run: {service.daysRun.join(', ').toUpperCase()}
|
Days Run: {serviceDetail.daysRun.join(', ').toUpperCase()}
|
||||||
</p>
|
</p>
|
||||||
<p class="svc-detail validity">
|
<p class="svc-detail validity">
|
||||||
Valid From: {new Date(service.scheduleStartDate).toLocaleDateString('en-GB', {
|
Valid From: {new Date(serviceDetail.scheduleStartDate).toLocaleDateString('en-GB', {
|
||||||
timeZone: 'UTC'
|
timeZone: 'UTC'
|
||||||
})} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB', {
|
})} - {new Date(serviceDetail.scheduleEndDate).toLocaleDateString('en-GB', {
|
||||||
timeZone: 'UTC'
|
timeZone: 'UTC'
|
||||||
})}
|
})}
|
||||||
</p>
|
</p>
|
||||||
@ -43,8 +65,8 @@
|
|||||||
<th>Sch Arr.</th>
|
<th>Sch Arr.</th>
|
||||||
<th>Sch Dep.</th>
|
<th>Sch Dep.</th>
|
||||||
</tr>
|
</tr>
|
||||||
{#if service.stops[0]['publicDeparture']}
|
{#if serviceDetail.stops[0]['publicDeparture']}
|
||||||
{#each service.stops as stop}
|
{#each serviceDetail.stops as stop}
|
||||||
{#if stop.publicArrival || stop.publicDeparture}
|
{#if stop.publicArrival || stop.publicDeparture}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{stop.tiploc}</td>
|
<td>{stop.tiploc}</td>
|
||||||
@ -54,7 +76,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
{#each service.stops as stop}
|
{#each serviceDetail.stops as stop}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{stop.tiploc}</td>
|
<td>{stop.tiploc}</td>
|
||||||
<td>{stop.wttArrival || '-'}</td>
|
<td>{stop.wttArrival || '-'}</td>
|
||||||
@ -63,6 +85,9 @@
|
|||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
</table>
|
</table>
|
||||||
|
{:catch}
|
||||||
|
<p>Unable to fetch train data</p>
|
||||||
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user