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

Reformat

Browse Source
This commit is contained in:
Fred Boniface
2023-07-07 11:29:33 +01:00
parent 7dc24646b9
commit c0997e92d4
25 changed files with 117 additions and 443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/lib/islands/input-island-form.svelte
View File

@@ -10,14 +10,7 @@
<Island {variables}>
<form action={variables.action}>
<input
class="form-input"
type="text"
id="input-headcode"
name={variables.queryName}
placeholder={variables.placeholder}
autocomplete="off"
/>
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off" />
<br />
<button type="submit">Submit</button>
</form>
@@ -32,8 +25,7 @@
border-radius: 50px;
border: none;
text-align: center;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-transform: uppercase;
font-size: 15px;
}
@@ -44,8 +36,7 @@
border: none;
border-radius: 20px;
padding: 5px;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
background-color: var(--main-bg-color);

3
src/lib/islands/island.svelte
View File

@@ -9,8 +9,7 @@
<style>
span {
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
font-size: 20px;
color: var(--main-text-color);

3
src/lib/islands/overlay-island.svelte
View File

@@ -11,8 +11,7 @@
<style>
span {
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: var(--main-text-color);
font-weight: 600;
font-size: 20px;

3
src/lib/islands/quick-link-island.svelte
View File

@@ -43,8 +43,7 @@
border: none;
border-radius: 20px;
padding: 5px;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
text-decoration: none;

6
src/lib/islands/quick-link-set-island.svelte
View File

@@ -92,8 +92,7 @@
border: none;
border-radius: 20px;
padding: 5px;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
text-decoration: none;
@@ -107,8 +106,7 @@
border: none;
border-radius: 20px;
padding: 5px;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 400;
background-color: var(--main-bg-color);

18
src/lib/ldb/alert-bar.svelte
View File

@@ -11,17 +11,7 @@
}
function numberAsWord(number) {
const words = [
'zero',
'one',
'two',
'three',
'four',
'five',
'six',
'seven',
'eight'
];
const words = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
let word = words[number];
if (word) {
return word;
@@ -45,11 +35,7 @@
<p id="arrow" class:displayAlerts>V</p>
</div>
{#if displayAlerts}
<div
id="alerts"
in:fly={{ y: -200, duration: 500 }}
out:fly={{ y: -200, duration: 800 }}
>
<div id="alerts" in:fly={{ y: -200, duration: 500 }} out:fly={{ y: -200, duration: 800 }}>
{#each uniqueAlerts as msg}
<p class="alert">{@html msg}</p>
{/each}

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

@@ -54,9 +54,7 @@
isLoading = true; // Set loading state
try {
console.log(`Requested Station: ${requestedStation}`);
const data = await fetch(
`https://owlboard.info/api/v1/ldb/${requestedStation}`
);
const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
jsonData = await data.json();
} catch (error) {
console.error('Error fetching data:', error);
@@ -168,41 +166,25 @@
</tr>
{#each services as service}
<tr>
<td
class="origdest from"
on:click={loadService(service.serviceID)}
on:keypress={loadService(service.serviceID)}
>
<td class="origdest from" on:click={loadService(service.serviceID)} on:keypress={loadService(service.serviceID)}>
{#if Array.isArray(service.origin?.location)}
{service.origin.location[0]['locationName'] +
' & ' +
service.origin.location[1]['locationName']}
{service.origin.location[0]['locationName'] + ' & ' + service.origin.location[1]['locationName']}
{:else}
{service.origin?.location?.locationName || ''}
{/if}
</td>
<td
class="origdest to"
on:click={loadService(service.serviceID)}
on:keypress={loadService(service.serviceID)}
>
<td class="origdest to" on:click={loadService(service.serviceID)} on:keypress={loadService(service.serviceID)}>
{#if Array.isArray(service.destination?.location)}
{service.destination.location[0]['locationName'] +
' & ' +
service.destination.location[0]['locationName']}
{service.destination.location[0]['locationName'] + ' & ' + service.destination.location[0]['locationName']}
{:else}
{service.destination?.location?.locationName || ''}
{/if}
</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.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
>
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
</tr>
<tr
@@ -228,11 +210,7 @@
{/if}
{#if busServices.length}
<br />
<img
class="transport-mode"
src="/images/transport-modes/bus.svg"
alt="Bus services"
/><br />
<img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
<span class="table-head-text">Bus Services</span>
<table class="ldbTable">
<tr>
@@ -245,26 +223,14 @@
</tr>
{#each busServices as service}
<tr>
<td
class="origdest from"
on:click={loadBusService(service.serviceID)}
on:keypress={loadBusService(service.serviceID)}
>{service.origin?.location?.locationName || ''}</td
>
<td
class="origdest to"
on:click={loadBusService(service.serviceID)}
on:keypress={loadBusService(service.serviceID)}
<td class="origdest from" on:click={loadBusService(service.serviceID)} on:keypress={loadBusService(service.serviceID)}>{service.origin?.location?.locationName || ''}</td>
<td class="origdest to" on:click={loadBusService(service.serviceID)} on:keypress={loadBusService(service.serviceID)}
>{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.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
>
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
</tr>
<tr
@@ -285,11 +251,7 @@
{/if}
{#if ferryServices.length}
<br />
<img
class="transport-mode"
src="/images/transport-modes/ferry.svg"
alt="Bus services"
/><br />
<img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services" /><br />
<span class="table-head-text">Ferry Services</span>
<table class="ldbTable">
<tr>
@@ -302,20 +264,12 @@
</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="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.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
>
<td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
</tr>
<tr
@@ -352,35 +306,17 @@
<tr>
<td>{prevPoint.locationName}</td>
<td>{prevPoint.st}</td>
<td
class="time {parseTime(prevPoint.at || prevPoint.et).changed}"
>{parseTime(prevPoint.at || prevPoint.et).data}</td
>
<td class="time {parseTime(prevPoint.at || prevPoint.et).changed}">{parseTime(prevPoint.at || prevPoint.et).data}</td>
</tr>
{/each}
{:else}
<tr>
<td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.locationName}</td>
<td>{serviceDetail.previousCallingPoints.callingPointList.callingPoint.st}</td>
<td
>{serviceDetail.previousCallingPoints.callingPointList
.callingPoint.locationName}</td
>
<td
>{serviceDetail.previousCallingPoints.callingPointList
.callingPoint.st}</td
>
<td
class="time {parseTime(
serviceDetail.previousCallingPoints.callingPointList
.callingPoint.at ||
serviceDetail.previousCallingPoints.callingPointList
.callingPoint.et
).changed}"
>{parseTime(
serviceDetail.previousCallingPoints.callingPointList
.callingPoint.at ||
serviceDetail.previousCallingPoints.callingPointList
.callingPoint.et
).data}</td
class="time {parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et)
.changed}"
>{parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).data}</td
>
</tr>
{/if}
@@ -388,11 +324,7 @@
<tr class="thisStop">
<td>{title}</td>
<td>{serviceDetail.std || serviceDetail.sta}</td>
<td
class="time {parseTime(serviceDetail.etd || serviceDetail.eta)
.changed}"
>{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td
>
<td class="time {parseTime(serviceDetail.etd || serviceDetail.eta).changed}">{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td>
</tr>
{#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint}
{#if Array.isArray(serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint)}
@@ -400,30 +332,15 @@
<tr>
<td>{nextPoint.locationName}</td>
<td>{nextPoint.st}</td>
<td class="time {parseTime(nextPoint.et).changed}"
>{parseTime(nextPoint.et).data}</td
>
<td class="time {parseTime(nextPoint.et).changed}">{parseTime(nextPoint.et).data}</td>
</tr>
{/each}
{:else}
<tr class="detailRow">
<td
>{serviceDetail.subsequentCallingPoints.callingPointList
.callingPoint.locationName}</td
>
<td
>{serviceDetail.subsequentCallingPoints.callingPointList
.callingPoint.st}</td
>
<td
class="time {parseTime(
serviceDetail.subsequentCallingPoints.callingPointList
.callingPoint.et
).changed}"
>{parseTime(
serviceDetail.subsequentCallingPoints.callingPointList
.callingPoint.et
).data}</td
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.locationName}</td>
<td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.st}</td>
<td class="time {parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).changed}"
>{parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).data}</td
>
</tr>
{/if}

45
src/lib/ldb/staff-ldb.svelte
View File

@@ -209,9 +209,7 @@
let processedMessages = [];
for (const message of arrMessages) {
const msgText = message.xhtmlMessage;
processedMessages.push(
msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, '')
);
processedMessages.push(msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, ''));
}
return processedMessages;
}
@@ -228,11 +226,7 @@
<AlertBar {alerts} />
{/if}
<table>
<tr
><td colspan="8" id="timestamp"
>Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td
></tr
>
<tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
<tr>
<th class="id">ID</th>
<th class="from">From</th>
@@ -254,36 +248,15 @@
where 'length' is not provided but 'formation' is. -->
<tr>
<td class="id id-data data">{service.trainid}</td>
<td
class="from from-data data {serviceStats.isCancelled && 'can-dat'}"
>{serviceStats.from}</td
>
<td class="to to-data data {serviceStats.isCancelled && 'can-dat'}"
>{serviceStats.to}</td
>
<td
class="plat plat-data data {serviceStats.isCancelled &&
'can-dat'} {serviceStats.platformHidden && 'hidden'}"
>{serviceStats.platform.number || '-'}</td
>
<td
class="time time-data data {serviceStats.isCancelled && 'can-dat'}"
>{serviceStats.schArr}</td
>
<td
class="time time-data data {serviceStats.isArrDelayed &&
'late'} {serviceStats.isEarlyArr &&
'early'} {serviceStats.isLateArr && 'late'}"
<td class="from from-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.from}</td>
<td class="to to-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.to}</td>
<td class="plat plat-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schArr}</td>
<td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
>{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
>
<td
class="time time-data data {serviceStats.isCancelled && 'can-dat'}"
>{serviceStats.schDep}</td
>
<td
class="time time-data data {serviceStats.isDepDelayed &&
'late'} {serviceStats.isEarlyDep &&
'early'} {serviceStats.isLateDep && 'late'}"
<td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
<td class="time time-data data {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep && 'late'}"
>{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
>
</tr>

6
src/lib/navigation/loading.svelte
View File

@@ -2,11 +2,7 @@
import { fade } from 'svelte/transition';
</script>
<div
id="container"
in:fade={{ delay: 150, duration: 250 }}
out:fade={{ duration: 250 }}
>
<div id="container" in:fade={{ delay: 150, duration: 250 }} out:fade={{ duration: 250 }}>
<div class="spinner" />
<p>Loading...</p>
</div>

18
src/lib/navigation/nav-ldb.svelte
View File

@@ -11,11 +11,7 @@
<footer>
{#each links as item}
<a
class="footerLink"
href={item.path}
class:active={$page.url.pathname == item.path}
>
<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>
@@ -26,11 +22,7 @@
<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"
/>
<img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others" />
</picture>
</a>
</div>
@@ -76,11 +68,7 @@
@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%
);
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%);
}
#nre-logo {
position: absolute;

3
src/lib/overlays/welcome.svelte
View File

@@ -28,8 +28,7 @@
'<h3>PIS Finder</h3>' +
"<p>Don't worry, the PIS finder hasn't gone away. It has even been moved to the new navigation bar for faster access</p>" +
"<p>If there isn't a PIS code available for a given headcode, you can use this tool to search by start and end stations, enabling you to utilise a different code and skipping stops as needed.</p>",
'<h3>Everything Else</h3>' +
"<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
'<h3>Everything Else</h3>' + "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details."
];
</script>

7
src/lib/stores/quick-links.js
View File

@@ -8,9 +8,7 @@ function fromLocalStorage(storageKey, fallback) {
if (browser) {
const storedValue = localStorage.getItem(storageKey);
if (storedValue !== 'undefined' && storedValue !== null) {
return typeof fallback === 'object'
? JSON.parse(storedValue)
: storedValue;
return typeof fallback === 'object' ? JSON.parse(storedValue) : storedValue;
}
}
return fallback;
@@ -19,8 +17,7 @@ function fromLocalStorage(storageKey, fallback) {
function toLocalStorage(store, storageKey) {
if (browser) {
store.subscribe((value) => {
let storageValue =
typeof value === 'object' ? JSON.stringify(value) : value;
let storageValue = typeof value === 'object' ? JSON.stringify(value) : value;
localStorage.setItem(storageKey, storageValue);
});

19
src/lib/train/train-detail.svelte
View File

@@ -13,11 +13,8 @@
<div class="container">
<div class="container-header" on:click={expand} on:keypress={expand}>
<span class="header"
>{service.operator || 'GW'}: {service.stops[0]['publicDeparture'] ||
service.stops[0]['wttDeparture']}
{service.stops[0]['tiploc']} to {service.stops[
service['stops'].length - 1
]['tiploc']}</span
>{service.operator || 'GW'}: {service.stops[0]['publicDeparture'] || service.stops[0]['wttDeparture']}
{service.stops[0]['tiploc']} to {service.stops[service['stops'].length - 1]['tiploc']}</span
>
<span id="container-arrow" class:isExpanded>V</span>
</div>
@@ -27,19 +24,15 @@
<p class="pis">PIS: {service.pis}</p>
{/if}
<p class="svc-detail">
Planned Type: {parseInt(service.planSpeed) || 68}mph {service.powerType ||
'Bus'}
Planned Type: {parseInt(service.planSpeed) || 68}mph {service.powerType || 'Bus'}
</p>
<p class="svc-detail">
Days Run: {service.daysRun.join(', ').toUpperCase()}
</p>
<p class="svc-detail validity">
Valid From: {new Date(service.scheduleStartDate).toLocaleDateString(
'en-GB',
{
timeZone: 'UTC'
}
)} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB', {
Valid From: {new Date(service.scheduleStartDate).toLocaleDateString('en-GB', {
timeZone: 'UTC'
})} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB', {
timeZone: 'UTC'
})}
</p>