Public board complete
This commit is contained in:
parent
7f65cbbce1
commit
cda71f1648
|
|
@ -13,6 +13,7 @@
|
||||||
let ferryServices = [];
|
let ferryServices = [];
|
||||||
let dataAge = null;
|
let dataAge = null;
|
||||||
let isLoading = true;
|
let isLoading = true;
|
||||||
|
let dataExists = false;
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (jsonData === null && requestedStation) {
|
if (jsonData === null && requestedStation) {
|
||||||
|
|
@ -40,11 +41,12 @@
|
||||||
if (jsonData?.GetStationBoardResult?.locationName) {
|
if (jsonData?.GetStationBoardResult?.locationName) {
|
||||||
title = jsonData.GetStationBoardResult.locationName
|
title = jsonData.GetStationBoardResult.locationName
|
||||||
} else {
|
} else {
|
||||||
title = "Loading Board"
|
title = requestedStation.toUpperCase()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
|
dataExists = true;
|
||||||
isLoading = true; // Set loading state
|
isLoading = true; // Set loading state
|
||||||
try {
|
try {
|
||||||
console.log(`Requested Station: ${requestedStation}`);
|
console.log(`Requested Station: ${requestedStation}`);
|
||||||
|
|
@ -52,6 +54,8 @@
|
||||||
jsonData = await data.json();
|
jsonData = await data.json();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error fetching data:", error);
|
console.error("Error fetching data:", error);
|
||||||
|
dataExists = false;
|
||||||
|
title = "Not Found";
|
||||||
} finally {
|
} finally {
|
||||||
isLoading = false; // Clear loading state
|
isLoading = false; // Clear loading state
|
||||||
}
|
}
|
||||||
|
|
@ -106,118 +110,122 @@
|
||||||
{#if isLoading}
|
{#if isLoading}
|
||||||
<Loading />
|
<Loading />
|
||||||
{:else}
|
{:else}
|
||||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
{#if dataAge}
|
||||||
{#if services.length}
|
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||||
<table>
|
{#if services.length}
|
||||||
<tr>
|
<table>
|
||||||
<th class="from">From</th>
|
|
||||||
<th class="to">To</th>
|
|
||||||
<th class="plat">Plat.</th>
|
|
||||||
<th class="time">Sch Arr.</th>
|
|
||||||
<th class="time">Exp Arr.</th>
|
|
||||||
<th class="time">Sch Dep.</th>
|
|
||||||
<th class="time">Exp Dep.</th>
|
|
||||||
</tr>
|
|
||||||
{#each services as service}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
<th class="from">From</th>
|
||||||
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
<th class="to">To</th>
|
||||||
<td class="plat">{service.platform || '-'}</td>
|
<th class="plat">Plat.</th>
|
||||||
<td class="time">{parseTime(service.sta).data}</td>
|
<th class="time">Sch Arr.</th>
|
||||||
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
<th class="time">Exp Arr.</th>
|
||||||
<td class="time">{parseTime(service.std).data}</td>
|
<th class="time">Sch Dep.</th>
|
||||||
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
<th class="time">Exp Dep.</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
{#each services as service}
|
||||||
|
<tr>
|
||||||
|
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||||
|
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
||||||
|
<td class="plat">{service.platform || '-'}</td>
|
||||||
|
<td class="time">{parseTime(service.sta).data}</td>
|
||||||
|
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
||||||
|
<td class="time">{parseTime(service.std).data}</td>
|
||||||
|
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<tr><td colspan="7">
|
<tr><td colspan="7">
|
||||||
<p class="service-detail">
|
<p class="service-detail">
|
||||||
A {service.operator || 'Unknown'} service
|
A {service.operator || 'Unknown'} service
|
||||||
{#if service['length']}
|
{#if service['length']}
|
||||||
with {service['length'] || 'some'} coaches
|
with {service['length'] || 'some'} coaches
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{#if service.delayReason}
|
||||||
|
<p class="service-detail">{service.delayReason}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</p>
|
{#if service.cancelReason}
|
||||||
{#if service.delayReason}
|
<p class="service-detail">{service.cancelReason}</p>
|
||||||
<p class="service-detail">{service.delayReason}</p>
|
{/if}
|
||||||
{/if}
|
</td></tr>
|
||||||
{#if service.cancelReason}
|
{/each}
|
||||||
<p class="service-detail">{service.cancelReason}</p>
|
</table>
|
||||||
{/if}
|
{:else}
|
||||||
</td></tr>
|
<p class="table-head-text">No Scheduled Train Services</p>
|
||||||
{/each}
|
{/if}
|
||||||
</table>
|
{#if busServices.length}
|
||||||
|
<br>
|
||||||
|
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br>
|
||||||
|
<span class="table-head-text">Bus Services</span>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th class="from">From</th>
|
||||||
|
<th class="to">To</th>
|
||||||
|
<th class="time">Sch Arr.</th>
|
||||||
|
<th class="time">Exp Arr.</th>
|
||||||
|
<th class="time">Sch Dep.</th>
|
||||||
|
<th class="time">Exp Dep.</th>
|
||||||
|
</tr>
|
||||||
|
{#each busServices as service}
|
||||||
|
<tr>
|
||||||
|
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||||
|
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
||||||
|
<td class="time">{parseTime(service.sta).data}</td>
|
||||||
|
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
||||||
|
<td class="time">{parseTime(service.std).data}</td>
|
||||||
|
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr><td colspan="7">
|
||||||
|
<p class="service-detail">
|
||||||
|
A {service.operator || 'Unknown'} service
|
||||||
|
</p>
|
||||||
|
{#if service.delayReason}
|
||||||
|
<p class="service-detail">{service.delayReason}</p>
|
||||||
|
{/if}
|
||||||
|
{#if service.cancelReason}
|
||||||
|
<p class="service-detail">{service.cancelReason}</p>
|
||||||
|
{/if}
|
||||||
|
</td></tr>
|
||||||
|
{/each}
|
||||||
|
</table>
|
||||||
|
{/if}
|
||||||
|
{#if ferryServices.length}
|
||||||
|
<br>
|
||||||
|
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br>
|
||||||
|
<span class="table-head-text">Ferry Services</span>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th class="from">From</th>
|
||||||
|
<th class="to">To</th>
|
||||||
|
<th class="time">Sch Arr.</th>
|
||||||
|
<th class="time">Exp Arr.</th>
|
||||||
|
<th class="time">Sch Dep.</th>
|
||||||
|
<th class="time">Exp Dep.</th>
|
||||||
|
</tr>
|
||||||
|
{#each ferryServices as service}
|
||||||
|
<tr>
|
||||||
|
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
||||||
|
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
||||||
|
<td class="time">{parseTime(service.sta).data}</td>
|
||||||
|
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
||||||
|
<td class="time">{parseTime(service.std).data}</td>
|
||||||
|
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr><td colspan="7">
|
||||||
|
{#if service.delayReason}
|
||||||
|
<p class="service-detail">{service.delayReason}</p>
|
||||||
|
{/if}
|
||||||
|
{#if service.cancelReason}
|
||||||
|
<p class="service-detail">{service.cancelReason}</p>
|
||||||
|
{/if}
|
||||||
|
</td></tr>
|
||||||
|
{/each}
|
||||||
|
</table>
|
||||||
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<p class="table-head-text">No Scheduled Train Services</p>
|
<p>Unable to find this station</p>
|
||||||
{/if}
|
|
||||||
{#if busServices.length}
|
|
||||||
<br>
|
|
||||||
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br>
|
|
||||||
<span class="table-head-text">Bus Services</span>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th class="from">From</th>
|
|
||||||
<th class="to">To</th>
|
|
||||||
<th class="time">Sch Arr.</th>
|
|
||||||
<th class="time">Exp Arr.</th>
|
|
||||||
<th class="time">Sch Dep.</th>
|
|
||||||
<th class="time">Exp Dep.</th>
|
|
||||||
</tr>
|
|
||||||
{#each busServices as service}
|
|
||||||
<tr>
|
|
||||||
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
|
||||||
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
|
||||||
<td class="time">{parseTime(service.sta).data}</td>
|
|
||||||
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
|
||||||
<td class="time">{parseTime(service.std).data}</td>
|
|
||||||
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr><td colspan="7">
|
|
||||||
<p class="service-detail">
|
|
||||||
A {service.operator || 'Unknown'} service
|
|
||||||
</p>
|
|
||||||
{#if service.delayReason}
|
|
||||||
<p class="service-detail">{service.delayReason}</p>
|
|
||||||
{/if}
|
|
||||||
{#if service.cancelReason}
|
|
||||||
<p class="service-detail">{service.cancelReason}</p>
|
|
||||||
{/if}
|
|
||||||
</td></tr>
|
|
||||||
{/each}
|
|
||||||
</table>
|
|
||||||
{/if}
|
|
||||||
{#if ferryServices.length}
|
|
||||||
<br>
|
|
||||||
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br>
|
|
||||||
<span class="table-head-text">Ferry Services</span>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th class="from">From</th>
|
|
||||||
<th class="to">To</th>
|
|
||||||
<th class="time">Sch Arr.</th>
|
|
||||||
<th class="time">Exp Arr.</th>
|
|
||||||
<th class="time">Sch Dep.</th>
|
|
||||||
<th class="time">Exp Dep.</th>
|
|
||||||
</tr>
|
|
||||||
{#each ferryServices as service}
|
|
||||||
<tr>
|
|
||||||
<td class="origdest from">{service.origin?.location?.locationName || ''}</td>
|
|
||||||
<td class="origdest to">{service.destination?.location?.locationName || ''}</td>
|
|
||||||
<td class="time">{parseTime(service.sta).data}</td>
|
|
||||||
<td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
|
|
||||||
<td class="time">{parseTime(service.std).data}</td>
|
|
||||||
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr><td colspan="7">
|
|
||||||
{#if service.delayReason}
|
|
||||||
<p class="service-detail">{service.delayReason}</p>
|
|
||||||
{/if}
|
|
||||||
{#if service.cancelReason}
|
|
||||||
<p class="service-detail">{service.cancelReason}</p>
|
|
||||||
{/if}
|
|
||||||
</td></tr>
|
|
||||||
{/each}
|
|
||||||
</table>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
<script>
|
||||||
|
const links = [
|
||||||
|
{
|
||||||
|
title: "Home",
|
||||||
|
path: "/",
|
||||||
|
svgPath: "/images/navigation/home.svg"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
import { page } from "$app/stores";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
{#each links as item}
|
||||||
|
<a class="footerLink" href={item.path} class:active={$page.url.pathname == item.path}>
|
||||||
|
<img src="{item.svgPath}" alt="{item.title}">
|
||||||
|
<br>
|
||||||
|
<span>{item.title}</span>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
<div class="data-source">
|
||||||
|
<a href="https://nationalrail.co.uk" target="_blank">
|
||||||
|
<picture>
|
||||||
|
<source srcset="/images/nre/nre-powered_200w.jxl" type="image/jxl">
|
||||||
|
<source srcset="/images/nre/nre-powered_200w.webp" type="image/webp">
|
||||||
|
<img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
background-color: var(--overlay-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footerLink {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--overlay-color);
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: none;
|
||||||
|
border-color: rgba(0, 0, 0, 0.24);
|
||||||
|
text-decoration: double;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a.active {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.data-source {
|
||||||
|
flex-grow: 2;
|
||||||
|
background: rgb(255,255,255);
|
||||||
|
}
|
||||||
|
#nre-logo {
|
||||||
|
width: 150px;
|
||||||
|
height: auto;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: 13px;
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 475px) {
|
||||||
|
.data-source {
|
||||||
|
background: rgb(255,255,255);
|
||||||
|
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);
|
||||||
|
}
|
||||||
|
#nre-logo {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 3px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import Header from '$lib/navigation/header.svelte'
|
import Header from '$lib/navigation/header.svelte'
|
||||||
import Nav from '$lib/navigation/nav.svelte'
|
import Nav from '$lib/navigation/nav-ldb.svelte'
|
||||||
import PublicLdb from '$lib/ldb/public-ldb.svelte';
|
import PublicLdb from '$lib/ldb/public-ldb.svelte';
|
||||||
import StaffLdb from '$lib/ldb/staff-ldb.svelte';
|
import StaffLdb from '$lib/ldb/staff-ldb.svelte';
|
||||||
import { uuid } from '$lib/stores/uuid.js';
|
import { uuid } from '$lib/stores/uuid.js';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue