Public board complete
This commit is contained in:
parent
7f65cbbce1
commit
cda71f1648
@ -13,6 +13,7 @@
|
||||
let ferryServices = [];
|
||||
let dataAge = null;
|
||||
let isLoading = true;
|
||||
let dataExists = false;
|
||||
|
||||
$: {
|
||||
if (jsonData === null && requestedStation) {
|
||||
@ -40,11 +41,12 @@
|
||||
if (jsonData?.GetStationBoardResult?.locationName) {
|
||||
title = jsonData.GetStationBoardResult.locationName
|
||||
} else {
|
||||
title = "Loading Board"
|
||||
title = requestedStation.toUpperCase()
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
dataExists = true;
|
||||
isLoading = true; // Set loading state
|
||||
try {
|
||||
console.log(`Requested Station: ${requestedStation}`);
|
||||
@ -52,6 +54,8 @@
|
||||
jsonData = await data.json();
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
dataExists = false;
|
||||
title = "Not Found";
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
@ -106,118 +110,122 @@
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table>
|
||||
<tr>
|
||||
<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}
|
||||
{#if dataAge}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table>
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
{#if service['length']}
|
||||
with {service['length'] || 'some'} coaches
|
||||
<tr><td colspan="7">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
{#if service['length']}
|
||||
with {service['length'] || 'some'} coaches
|
||||
{/if}
|
||||
</p>
|
||||
{#if service.delayReason}
|
||||
<p class="service-detail">{service.delayReason}</p>
|
||||
{/if}
|
||||
</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 service.cancelReason}
|
||||
<p class="service-detail">{service.cancelReason}</p>
|
||||
{/if}
|
||||
</td></tr>
|
||||
{/each}
|
||||
</table>
|
||||
{:else}
|
||||
<p class="table-head-text">No Scheduled Train Services</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}
|
||||
{:else}
|
||||
<p class="table-head-text">No Scheduled Train Services</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>
|
||||
<p>Unable to find this station</p>
|
||||
{/if}
|
||||
{/if}
|
||||
<style>
|
||||
|
||||
91
src/lib/navigation/nav-ldb.svelte
Normal file
91
src/lib/navigation/nav-ldb.svelte
Normal file
@ -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>
|
||||
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 StaffLdb from '$lib/ldb/staff-ldb.svelte';
|
||||
import { uuid } from '$lib/stores/uuid.js';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user