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

Public board complete

Browse Source
This commit is contained in:
Fred Boniface 2023-06-19 19:42:41 +01:00
parent 7f65cbbce1
commit cda71f1648
3 changed files with 208 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
src/lib/ldb/public-ldb.svelte
View File

@ -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>

91
src/lib/navigation/nav-ldb.svelte Normal file
View 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>

2
src/routes/ldb/+page.svelte
View File

@ -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';