Prettier formatting
This commit is contained in:
Fred Boniface
@@ -1,10 +1,10 @@
|
||||
<img src="/images/logo/wide_logo.svg" alt="Logo">
|
||||
<img src="/images/logo/wide_logo.svg" alt="Logo" />
|
||||
|
||||
<style>
|
||||
img {
|
||||
width: 50%;
|
||||
max-width: 250px;
|
||||
margin-top: 55px;
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
</style>
|
||||
img {
|
||||
width: 50%;
|
||||
max-width: 250px;
|
||||
margin-top: 55px;
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,45 +1,54 @@
|
||||
<script>
|
||||
import Island from "$lib/islands/island.svelte";
|
||||
export let variables = {
|
||||
title: "Uninitialised",
|
||||
action: "/",
|
||||
placeholder: "Uninitialised",
|
||||
queryName: "uninitiailsed"
|
||||
};
|
||||
import Island from '$lib/islands/island.svelte';
|
||||
export let variables = {
|
||||
title: 'Uninitialised',
|
||||
action: '/',
|
||||
placeholder: 'Uninitialised',
|
||||
queryName: 'uninitiailsed'
|
||||
};
|
||||
</script>
|
||||
|
||||
<Island {variables}>
|
||||
<form action={variables.action}>
|
||||
<input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off">
|
||||
<br>
|
||||
<form action={variables.action}>
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
id="input-headcode"
|
||||
name={variables.queryName}
|
||||
placeholder={variables.placeholder}
|
||||
autocomplete="off"
|
||||
/>
|
||||
<br />
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</form>
|
||||
</Island>
|
||||
|
||||
<style>
|
||||
.form-input {
|
||||
width: 75%;
|
||||
height: 32px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
}
|
||||
button {
|
||||
width: 50%;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
</style>
|
||||
.form-input {
|
||||
width: 75%;
|
||||
height: 32px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
font-size: 15px;
|
||||
}
|
||||
button {
|
||||
width: 50%;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,21 @@
|
||||
<script>
|
||||
export let variables = {title:""}
|
||||
export let variables = { title: '' };
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<span>{variables.title}</span>
|
||||
<slot />
|
||||
<span>{variables.title}</span>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
span {
|
||||
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
span {
|
||||
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)
|
||||
}
|
||||
div {
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
div {
|
||||
width: 85%;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
@@ -22,5 +23,5 @@ div {
|
||||
padding: 10px;
|
||||
background-color: var(--overlay-color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,23 @@
|
||||
<script>
|
||||
import { fade } from "svelte/transition";
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let variables = {title:""}
|
||||
export let variables = { title: '' };
|
||||
</script>
|
||||
|
||||
<div in:fade={{duration: 150}} out:fade={{duration: 150}}>
|
||||
<span>{variables.title}</span>
|
||||
<slot />
|
||||
<div in:fade={{ duration: 150 }} out:fade={{ duration: 150 }}>
|
||||
<span>{variables.title}</span>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
span {
|
||||
font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
span {
|
||||
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;
|
||||
}
|
||||
div {
|
||||
}
|
||||
div {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@@ -32,5 +33,5 @@ div {
|
||||
background-color: var(--overlay-color);
|
||||
border-radius: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,57 +1,54 @@
|
||||
<script>
|
||||
import Island from "$lib/islands/island.svelte";
|
||||
import { ql } from "$lib/stores/quick-links.js"
|
||||
export let variables = {
|
||||
title: "Quick Links",
|
||||
};
|
||||
|
||||
import Island from '$lib/islands/island.svelte';
|
||||
import { ql } from '$lib/stores/quick-links.js';
|
||||
export let variables = {
|
||||
title: 'Quick Links'
|
||||
};
|
||||
</script>
|
||||
|
||||
<Island {variables}>
|
||||
|
||||
{#if $ql.length === 0}
|
||||
{#if $ql.length === 0}
|
||||
<p>Go to <a href="/more/settings">settings</a> to add your Quick Links</p>
|
||||
{/if}
|
||||
<div class="buttons">
|
||||
{#each $ql as link}
|
||||
{#if link.length === 3}
|
||||
<a class="link" href="/ldb?station={link}">
|
||||
{link.toUpperCase()}
|
||||
</a>
|
||||
{:else if link.length === 4}
|
||||
<a class="link" href="/train?headcode={link}">
|
||||
{link.toUpperCase()}
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
<div class="buttons">
|
||||
{#each $ql as link}
|
||||
{#if link.length === 3}
|
||||
<a class="link" href="/ldb?station={link}">
|
||||
{link.toUpperCase()}
|
||||
</a>
|
||||
{:else if link.length === 4}
|
||||
<a class="link" href="/train?headcode={link}">
|
||||
{link.toUpperCase()}
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</Island>
|
||||
|
||||
<style>
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.link {
|
||||
flex: 1;
|
||||
width: 20%;
|
||||
min-width: 50px;
|
||||
margin: 5px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.link {
|
||||
flex: 1;
|
||||
width: 20%;
|
||||
min-width: 50px;
|
||||
margin: 5px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,116 +1,117 @@
|
||||
<script>
|
||||
import Island from "$lib/islands/island.svelte";
|
||||
import { ql } from "$lib/stores/quick-links.js";
|
||||
export let variables = {
|
||||
title: "Quick Links",
|
||||
};
|
||||
|
||||
let qlData =[]
|
||||
$: {
|
||||
qlData = $ql;
|
||||
console.log(qlData);
|
||||
}
|
||||
import Island from '$lib/islands/island.svelte';
|
||||
import { ql } from '$lib/stores/quick-links.js';
|
||||
export let variables = {
|
||||
title: 'Quick Links'
|
||||
};
|
||||
|
||||
let saveButton = "Save"
|
||||
let qlData = [];
|
||||
$: {
|
||||
qlData = $ql;
|
||||
console.log(qlData);
|
||||
}
|
||||
|
||||
async function timeout(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
let saveButton = 'Save';
|
||||
|
||||
async function saveQl() {
|
||||
// Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
|
||||
const inputs = document.getElementsByClassName('qlInput');
|
||||
let inputLinks = []
|
||||
for (let item of inputs) {
|
||||
let text = item?.value;
|
||||
if (text !== '') {
|
||||
inputLinks.push(text);
|
||||
}
|
||||
async function timeout(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
async function saveQl() {
|
||||
// Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
|
||||
const inputs = document.getElementsByClassName('qlInput');
|
||||
let inputLinks = [];
|
||||
for (let item of inputs) {
|
||||
let text = item?.value;
|
||||
if (text !== '') {
|
||||
inputLinks.push(text);
|
||||
}
|
||||
console.log(inputLinks)
|
||||
ql.set(inputLinks)
|
||||
saveButton = "✔"
|
||||
await timeout(3000);
|
||||
saveButton = "Saved"
|
||||
}
|
||||
console.log(inputLinks);
|
||||
ql.set(inputLinks);
|
||||
saveButton = '✔';
|
||||
await timeout(3000);
|
||||
saveButton = 'Saved';
|
||||
}
|
||||
|
||||
function clearQl() {
|
||||
ql.set([]);
|
||||
saveButton = "Saved"
|
||||
}
|
||||
function clearQl() {
|
||||
ql.set([]);
|
||||
saveButton = 'Saved';
|
||||
}
|
||||
|
||||
function addQlBox() {
|
||||
saveButton = "Save"
|
||||
const updatedQl = [...$ql, ""];
|
||||
$ql = updatedQl;
|
||||
ql.set(updatedQl);
|
||||
}
|
||||
function addQlBox() {
|
||||
saveButton = 'Save';
|
||||
const updatedQl = [...$ql, ''];
|
||||
$ql = updatedQl;
|
||||
ql.set(updatedQl);
|
||||
}
|
||||
|
||||
function handleClick(event) {
|
||||
// Handle the click event here
|
||||
console.log("Island Clicked");
|
||||
// You can access the `variables` passed to the Island component here if needed
|
||||
}
|
||||
</script>
|
||||
|
||||
<Island on:click={handleClick} {variables}>
|
||||
{#if $ql.length === 0}
|
||||
<p>Click the + button to add links</p>
|
||||
{/if}
|
||||
<div id="buttons" class="buttons">
|
||||
<p>Quick links can be CRS Codes or Headcodes</p>
|
||||
{#each qlData as link}
|
||||
<input class="qlInput" type="text" value={link}>
|
||||
{/each}
|
||||
<button on:click={addQlBox} id="qlAdd">+</button>
|
||||
</div>
|
||||
<button on:click={saveQl}>{@html saveButton}</button>
|
||||
<button on:click={clearQl}>Clear</button>
|
||||
</Island>
|
||||
|
||||
function handleClick(event) {
|
||||
// Handle the click event here
|
||||
console.log('Island Clicked');
|
||||
// You can access the `variables` passed to the Island component here if needed
|
||||
}
|
||||
</script>
|
||||
|
||||
<Island on:click={handleClick} {variables}>
|
||||
{#if $ql.length === 0}
|
||||
<p>Click the + button to add links</p>
|
||||
{/if}
|
||||
<div id="buttons" class="buttons">
|
||||
<p>Quick links can be CRS Codes or Headcodes</p>
|
||||
{#each qlData as link}
|
||||
<input class="qlInput" type="text" value={link} />
|
||||
{/each}
|
||||
<button on:click={addQlBox} id="qlAdd">+</button>
|
||||
</div>
|
||||
<button on:click={saveQl}>{@html saveButton}</button>
|
||||
<button on:click={clearQl}>Clear</button>
|
||||
</Island>
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#qlAdd {
|
||||
width: 40px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-top: 5px;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
width: 20%;
|
||||
min-width: 50px;
|
||||
margin: 5px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
button {
|
||||
width: 30%;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 10px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
</style>
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#qlAdd {
|
||||
width: 40px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
padding-top: 5px;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
width: 20%;
|
||||
min-width: 50px;
|
||||
margin: 5px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
button {
|
||||
width: 30%;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 10px;
|
||||
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-size: 16px;
|
||||
font-weight: 400;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--link-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,27 +1,24 @@
|
||||
<script>
|
||||
import Island from "$lib/islands/island.svelte";
|
||||
export let resultObject = {
|
||||
results: true,
|
||||
title: "",
|
||||
resultLines: []
|
||||
};
|
||||
|
||||
let variables = {
|
||||
title: resultObject.title
|
||||
}
|
||||
import Island from '$lib/islands/island.svelte';
|
||||
export let resultObject = {
|
||||
results: true,
|
||||
title: '',
|
||||
resultLines: []
|
||||
};
|
||||
|
||||
let variables = {
|
||||
title: resultObject.title
|
||||
};
|
||||
</script>
|
||||
|
||||
<Island {variables}>
|
||||
|
||||
{#each resultObject.resultLines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
|
||||
{#each resultObject.resultLines as line}
|
||||
<p>{line}</p>
|
||||
{/each}
|
||||
</Island>
|
||||
|
||||
<style>
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
p {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,116 +1,132 @@
|
||||
<script>
|
||||
import { fly } from "svelte/transition";
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let alerts = [];
|
||||
$: uniqueAlerts = [...new Set(alerts)];
|
||||
export let alerts = [];
|
||||
$: uniqueAlerts = [...new Set(alerts)];
|
||||
|
||||
let displayAlerts = false;
|
||||
let displayAlerts = false;
|
||||
|
||||
async function alertsToggle() {
|
||||
displayAlerts = !displayAlerts
|
||||
}
|
||||
|
||||
function numberAsWord(number) {
|
||||
const words = ['zero', 'one', 'two','three','four','five','six','seven','eight'];
|
||||
let word = words[number];
|
||||
if (word) {
|
||||
return word;
|
||||
}
|
||||
return number;
|
||||
async function alertsToggle() {
|
||||
displayAlerts = !displayAlerts;
|
||||
}
|
||||
|
||||
function numberAsWord(number) {
|
||||
const words = [
|
||||
'zero',
|
||||
'one',
|
||||
'two',
|
||||
'three',
|
||||
'four',
|
||||
'five',
|
||||
'six',
|
||||
'seven',
|
||||
'eight'
|
||||
];
|
||||
let word = words[number];
|
||||
if (word) {
|
||||
return word;
|
||||
}
|
||||
return number;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="block"><!--Prevent content slipping underneath the bar--></div>
|
||||
<div id="bar" on:click={alertsToggle} on:keypress={alertsToggle}>
|
||||
<img src="/images/navigation/alert.svg" alt="">
|
||||
{#if uniqueAlerts.length == 1}
|
||||
<p id="bartext">There is one active alert</p>
|
||||
{:else if uniqueAlerts.length > 1}
|
||||
<p id="bartext">There are {numberAsWord(uniqueAlerts.length)} active alerts</p>
|
||||
{:else}
|
||||
<p id="bartext">There are no active alerts</p>
|
||||
{/if}
|
||||
<p id="arrow" class:displayAlerts>V</p>
|
||||
<img src="/images/navigation/alert.svg" alt="" />
|
||||
{#if uniqueAlerts.length == 1}
|
||||
<p id="bartext">There is one active alert</p>
|
||||
{:else if uniqueAlerts.length > 1}
|
||||
<p id="bartext">
|
||||
There are {numberAsWord(uniqueAlerts.length)} active alerts
|
||||
</p>
|
||||
{:else}
|
||||
<p id="bartext">There are no active alerts</p>
|
||||
{/if}
|
||||
<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 }}>
|
||||
{#each uniqueAlerts as msg}
|
||||
<p class="alert">{@html msg}</p>
|
||||
{/each}
|
||||
</div>
|
||||
<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}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#block {
|
||||
height: 40px;
|
||||
}
|
||||
#bar {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#bartext {
|
||||
color: white;
|
||||
margin: auto;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#arrow{
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
right: 15px;
|
||||
top: 11px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 00ms;
|
||||
}
|
||||
#arrow:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
#alerts {
|
||||
position: fixed;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: clip;
|
||||
left: 0;
|
||||
top: 89px;
|
||||
}
|
||||
.alert {
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin:auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.displayAlerts {
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 400ms;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
#block {
|
||||
height: 40px;
|
||||
}
|
||||
#bar {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
z-index: 10;
|
||||
}
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#bartext {
|
||||
color: white;
|
||||
margin: auto;
|
||||
font-weight: 600;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#arrow {
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
right: 15px;
|
||||
top: 11px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 00ms;
|
||||
}
|
||||
#arrow:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
#alerts {
|
||||
position: fixed;
|
||||
background-color: var(--main-alert-color);
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: clip;
|
||||
left: 0;
|
||||
top: 89px;
|
||||
}
|
||||
.alert {
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.displayAlerts {
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 400ms;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script>
|
||||
export let station = "";
|
||||
export let title = "Loading...";
|
||||
import { onMount } from 'svelte'
|
||||
export let station = '';
|
||||
export let title = 'Loading...';
|
||||
import { onMount } from 'svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
|
||||
let requestedStation;
|
||||
$: requestedStation = station;
|
||||
@@ -20,96 +20,98 @@
|
||||
let serviceDetail;
|
||||
|
||||
$: {
|
||||
if (jsonData === null && requestedStation) {
|
||||
fetchData();
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetStationBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.busServices?.service) {
|
||||
busServices = jsonData.GetStationBoardResult.busServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.ferryServices?.service) {
|
||||
ferryServices = jsonData.GetStationBoardResult.ferryServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.locationName) {
|
||||
title = jsonData.GetStationBoardResult.locationName
|
||||
} else {
|
||||
title = requestedStation.toUpperCase()
|
||||
}
|
||||
if (jsonData === null && requestedStation) {
|
||||
fetchData();
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetStationBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.busServices?.service) {
|
||||
busServices = jsonData.GetStationBoardResult.busServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.ferryServices?.service) {
|
||||
ferryServices = jsonData.GetStationBoardResult.ferryServices.service;
|
||||
}
|
||||
|
||||
if (jsonData?.GetStationBoardResult?.locationName) {
|
||||
title = jsonData.GetStationBoardResult.locationName;
|
||||
} else {
|
||||
title = requestedStation.toUpperCase();
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
dataExists = true;
|
||||
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);
|
||||
console.error('Error fetching data:', error);
|
||||
dataExists = false;
|
||||
title = "Not Found";
|
||||
title = 'Not Found';
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
prepareNrcc()
|
||||
prepareNrcc();
|
||||
}
|
||||
|
||||
function parseTime(string){
|
||||
let output
|
||||
let change
|
||||
function parseTime(string) {
|
||||
let output;
|
||||
let change;
|
||||
switch (string) {
|
||||
case 'Delayed':
|
||||
output = 'LATE'
|
||||
change = "changed"
|
||||
break
|
||||
case 'Cancelled':
|
||||
output = 'CANC'
|
||||
change = "cancelled"
|
||||
break
|
||||
case 'On Time':
|
||||
case 'On time':
|
||||
output = 'RT'
|
||||
change = ""
|
||||
break
|
||||
case '':
|
||||
output = '-'
|
||||
change = ""
|
||||
break
|
||||
case undefined:
|
||||
output = '-'
|
||||
change = ""
|
||||
break
|
||||
case 'No report':
|
||||
output = '-'
|
||||
change = ""
|
||||
break
|
||||
case 'undefined':
|
||||
output = false
|
||||
change = ""
|
||||
break
|
||||
default:
|
||||
output = string
|
||||
change = "changed"
|
||||
case 'Delayed':
|
||||
output = 'LATE';
|
||||
change = 'changed';
|
||||
break;
|
||||
case 'Cancelled':
|
||||
output = 'CANC';
|
||||
change = 'cancelled';
|
||||
break;
|
||||
case 'On Time':
|
||||
case 'On time':
|
||||
output = 'RT';
|
||||
change = '';
|
||||
break;
|
||||
case '':
|
||||
output = '-';
|
||||
change = '';
|
||||
break;
|
||||
case undefined:
|
||||
output = '-';
|
||||
change = '';
|
||||
break;
|
||||
case 'No report':
|
||||
output = '-';
|
||||
change = '';
|
||||
break;
|
||||
case 'undefined':
|
||||
output = false;
|
||||
change = '';
|
||||
break;
|
||||
default:
|
||||
output = string;
|
||||
change = 'changed';
|
||||
}
|
||||
return {data: output, changed: change}
|
||||
return { data: output, changed: change };
|
||||
}
|
||||
|
||||
async function loadService(sid) {
|
||||
for (const service of services) {
|
||||
if (service.serviceID == sid) {
|
||||
serviceDetail = service
|
||||
serviceDetail = service;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -117,7 +119,7 @@
|
||||
async function loadBusService(sid) {
|
||||
for (const service of busServices) {
|
||||
if (service.serviceID == sid) {
|
||||
serviceDetail = service
|
||||
serviceDetail = service;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -130,7 +132,7 @@
|
||||
if (jsonData?.GetStationBoardResult?.nrccMessages?.message) {
|
||||
const nrcc = jsonData.GetStationBoardResult.nrccMessages.message;
|
||||
if (Array.isArray(nrcc)) {
|
||||
alerts = nrcc
|
||||
alerts = nrcc;
|
||||
return;
|
||||
}
|
||||
alerts.push(nrcc);
|
||||
@@ -146,53 +148,65 @@
|
||||
</script>
|
||||
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts}/>
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
{#if dataAge}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table class="ldbTable">
|
||||
{:else if dataAge}
|
||||
<p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
|
||||
{#if services.length}
|
||||
<table class="ldbTable">
|
||||
<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}
|
||||
<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>
|
||||
<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']}
|
||||
{:else}
|
||||
{service.origin?.location?.locationName || ''}
|
||||
{/if}
|
||||
</td>
|
||||
<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']}
|
||||
{: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.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}"
|
||||
>{parseTime(service.etd).data}</td
|
||||
>
|
||||
</tr>
|
||||
{#each services as service}
|
||||
<tr>
|
||||
<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']}
|
||||
{:else}
|
||||
{service.origin?.location?.locationName || ''}
|
||||
{/if}
|
||||
</td>
|
||||
<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']}
|
||||
{: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.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">
|
||||
A {service.operator || 'Unknown'} service
|
||||
{#if service['length']}
|
||||
@@ -205,36 +219,56 @@
|
||||
{#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 class="ldbTable">
|
||||
</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 class="ldbTable">
|
||||
<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>
|
||||
<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>
|
||||
<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.std).data}</td>
|
||||
<td class="time {parseTime(service.etd).changed}"
|
||||
>{parseTime(service.etd).data}</td
|
||||
>
|
||||
</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)}>{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">
|
||||
<tr
|
||||
><td colspan="7">
|
||||
<p class="service-detail">
|
||||
A {service.operator || 'Unknown'} service
|
||||
</p>
|
||||
@@ -244,47 +278,61 @@
|
||||
{#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 class="ldbTable">
|
||||
</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 class="ldbTable">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
{#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">
|
||||
<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>Unable to find this station</p>
|
||||
</td></tr
|
||||
>
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
{:else}
|
||||
<p>Unable to find this station</p>
|
||||
{/if}
|
||||
|
||||
{#if serviceDetail}
|
||||
@@ -304,21 +352,47 @@
|
||||
<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 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>
|
||||
<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
|
||||
>
|
||||
</tr>
|
||||
{/if}
|
||||
{/if}
|
||||
<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)}
|
||||
@@ -326,14 +400,31 @@
|
||||
<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}
|
||||
{/if}
|
||||
@@ -371,21 +462,40 @@
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
table {font-size: 15px; max-width: 850px;}
|
||||
.service-detail {font-size: 14px;}
|
||||
.transport-mode {width: 50px;}
|
||||
#timestamp {font-size: 16px;}
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
table {font-size: 17px;}
|
||||
.service-detail{font-size: 16px;}
|
||||
.table-head-text {font-size: 16px;}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
table {font-size: 19px;}
|
||||
.service-detail {font-size: 18px;}
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
table {
|
||||
font-size: 15px;
|
||||
max-width: 850px;
|
||||
}
|
||||
.service-detail {
|
||||
font-size: 14px;
|
||||
}
|
||||
.transport-mode {
|
||||
width: 50px;
|
||||
}
|
||||
#timestamp {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
table {
|
||||
font-size: 17px;
|
||||
}
|
||||
.service-detail {
|
||||
font-size: 16px;
|
||||
}
|
||||
.table-head-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
table {
|
||||
font-size: 19px;
|
||||
}
|
||||
.service-detail {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.origdest {
|
||||
color: yellow;
|
||||
}
|
||||
@@ -398,58 +508,58 @@
|
||||
text-align: left;
|
||||
}
|
||||
.plat {
|
||||
width: 10%
|
||||
width: 10%;
|
||||
}
|
||||
.time {
|
||||
width: 10%;
|
||||
}
|
||||
.changed{
|
||||
.changed {
|
||||
animation: pulse-change 1.5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.cancelled {
|
||||
.cancelled {
|
||||
animation: pulse-cancel 1.5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-change {
|
||||
@keyframes pulse-change {
|
||||
50% {
|
||||
color: var(--main-warning-color);
|
||||
color: var(--main-warning-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-cancel {
|
||||
@keyframes pulse-cancel {
|
||||
50% {
|
||||
color: var(--main-alert-color);
|
||||
color: var(--main-alert-color);
|
||||
}
|
||||
}
|
||||
#detailBox {
|
||||
width: 100%;
|
||||
}
|
||||
h6 {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#closeService {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border: none;
|
||||
border-radius: 60px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: var(--main-bg-color);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
#detailTable {
|
||||
margin-top: 40px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
.thisStop {
|
||||
color: yellow;
|
||||
}
|
||||
}
|
||||
#detailBox {
|
||||
width: 100%;
|
||||
}
|
||||
h6 {
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#closeService {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border: none;
|
||||
border-radius: 60px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-color: var(--main-bg-color);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
#detailTable {
|
||||
margin-top: 40px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
.thisStop {
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,290 +1,327 @@
|
||||
<script>
|
||||
export let station = "";
|
||||
export let title = "Loading...";
|
||||
import { onMount } from 'svelte'
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
import StaffTrainDetail from '$lib/ldb/staff-train-detail.svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import Nav from '$lib/navigation/nav.svelte';
|
||||
import { uuid } from '$lib/stores/uuid';
|
||||
|
||||
let requestedStation;
|
||||
$: requestedStation = station;
|
||||
|
||||
let jsonData = {};
|
||||
let services = [];
|
||||
let dataAge = null;
|
||||
let isLoading = true;
|
||||
let alerts = [];
|
||||
|
||||
$: {
|
||||
if (jsonData?.GetBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
export let station = '';
|
||||
export let title = 'Loading...';
|
||||
import { onMount } from 'svelte';
|
||||
import AlertBar from './alert-bar.svelte';
|
||||
import StaffTrainDetail from '$lib/ldb/staff-train-detail.svelte';
|
||||
import Loading from '$lib/navigation/loading.svelte';
|
||||
import Nav from '$lib/navigation/nav.svelte';
|
||||
import { uuid } from '$lib/stores/uuid';
|
||||
|
||||
if (jsonData?.GetBoardResult?.locationName) {
|
||||
title = jsonData.GetBoardResult.locationName
|
||||
} else {
|
||||
title = "Loading Board"
|
||||
}
|
||||
let requestedStation;
|
||||
$: requestedStation = station;
|
||||
|
||||
if (jsonData?.GetBoardResult?.nrccMessages) {
|
||||
alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message)
|
||||
}
|
||||
let jsonData = {};
|
||||
let services = [];
|
||||
let dataAge = null;
|
||||
let isLoading = true;
|
||||
let alerts = [];
|
||||
|
||||
$: {
|
||||
if (jsonData?.GetBoardResult?.generatedAt) {
|
||||
dataAge = new Date(jsonData.GetBoardResult.generatedAt);
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
isLoading = true; // Set loading state
|
||||
try {
|
||||
console.log(`Requested Station: ${requestedStation}`);
|
||||
const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
|
||||
const opt = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"uuid": $uuid
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.trainServices?.service) {
|
||||
services = jsonData.GetBoardResult.trainServices.service;
|
||||
} else {
|
||||
services = [];
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.locationName) {
|
||||
title = jsonData.GetBoardResult.locationName;
|
||||
} else {
|
||||
title = 'Loading Board';
|
||||
}
|
||||
|
||||
if (jsonData?.GetBoardResult?.nrccMessages) {
|
||||
alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchData() {
|
||||
isLoading = true; // Set loading state
|
||||
try {
|
||||
console.log(`Requested Station: ${requestedStation}`);
|
||||
const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
|
||||
const opt = {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
uuid: $uuid
|
||||
}
|
||||
const data = await fetch(url, opt);
|
||||
jsonData = await data.json();
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
};
|
||||
const data = await fetch(url, opt);
|
||||
jsonData = await data.json();
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
} finally {
|
||||
isLoading = false; // Clear loading state
|
||||
}
|
||||
|
||||
async function getReasonCodeData(code) {
|
||||
const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
return json
|
||||
}
|
||||
|
||||
async function generateServiceData(service) {
|
||||
const timeDetails = await parseTimes(service);
|
||||
let serviceData = {
|
||||
from: await parseLocation(service.origin),
|
||||
to: await parseLocation(service.destination),
|
||||
length: await getTrainLength(service),
|
||||
platform: await parsePlatform(service?.platform || "undefined"),
|
||||
platformHidden: service?.platformIsHidden === "true",
|
||||
schArr: timeDetails.schArr,
|
||||
expArr: timeDetails.expArr,
|
||||
schDep: timeDetails.schDep,
|
||||
expDep: timeDetails.expDep,
|
||||
isEarlyArr: timeDetails.earArr,
|
||||
isLateArr: timeDetails.delArr,
|
||||
isEarlyDep: timeDetails.earDep,
|
||||
isLateDep: timeDetails.delDep,
|
||||
isCancelledDep: false,
|
||||
isCancelled: Boolean(service?.isCancelled),
|
||||
isDelayed: service?.arrivalType === "Delayed",
|
||||
isArrDelayed: service?.arrivalType === "Delayed",
|
||||
isDepDelayed: service?.departureType === "Delayed",
|
||||
isEarly: false,
|
||||
isNonPublic: false
|
||||
}
|
||||
return serviceData;
|
||||
}
|
||||
|
||||
async function getTrainLength(service) {
|
||||
if (service?.length) {
|
||||
return parseInt(service?.length);
|
||||
} else if (service?.formation?.coaches) {
|
||||
return service.formation.coaches.coach.length
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function parseLocation(location) {
|
||||
if (!Array.isArray(location.location)) {
|
||||
//console.log(location.location?.tiploc)
|
||||
return location.location?.tiploc
|
||||
}
|
||||
let locations = [];
|
||||
for (const singleLocation of location?.location) {
|
||||
locations.push(singleLocation?.tiploc)
|
||||
}
|
||||
return locations.join(' & ');
|
||||
}
|
||||
|
||||
async function parsePlatform(platform) {
|
||||
if (!platform) {
|
||||
return '-'
|
||||
}
|
||||
if (platform === "TBC" || platform == "undefined") {
|
||||
return '-'
|
||||
}
|
||||
return {
|
||||
number: platform
|
||||
}
|
||||
}
|
||||
|
||||
function parseTimes(service){
|
||||
let schArr = new Date(service?.sta);
|
||||
let expArr = new Date(service?.eta || service?.ata);
|
||||
let schDep = new Date(service?.std);
|
||||
let expDep = new Date(service?.etd || service?.atd);
|
||||
let isEarlyArr = false, isDelayedArr = false, isArr = false
|
||||
let isEarlyDep = false, isDelayedDep = false, isDep = false
|
||||
const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
|
||||
if (expArr - schArr < -timeDifferenceThreshold) {
|
||||
isEarlyArr = true;
|
||||
isArr = true;
|
||||
} else if (expArr - schArr > timeDifferenceThreshold) {
|
||||
isDelayedArr = true;
|
||||
isArr = true;
|
||||
}
|
||||
|
||||
if (expDep - schDep < -timeDifferenceThreshold) {
|
||||
isEarlyDep = true;
|
||||
isDep = true;
|
||||
} else if (expDep - schDep > timeDifferenceThreshold) {
|
||||
isDelayedDep = true;
|
||||
isDep = true;
|
||||
}
|
||||
let parsedExpArr;
|
||||
if (expArr instanceof Date && !isNaN(expArr)) {
|
||||
if (!isEarlyArr && !isDelayedArr) {
|
||||
parsedExpArr = 'RT';
|
||||
} else {
|
||||
parsedExpArr = parseIndividualTime(expArr);
|
||||
}
|
||||
} else {
|
||||
parsedExpArr = '-';
|
||||
}
|
||||
|
||||
let parsedExpDep;
|
||||
if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
if (!isEarlyDep && !isDelayedDep) {
|
||||
parsedExpDep = 'RT';
|
||||
} else {
|
||||
parsedExpDep = parseIndividualTime(expDep);
|
||||
async function getReasonCodeData(code) {
|
||||
const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`;
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
return json;
|
||||
}
|
||||
} else {
|
||||
parsedExpDep = '-';
|
||||
}
|
||||
return {
|
||||
schArr: parseIndividualTime(schArr),
|
||||
expArr: parsedExpArr,
|
||||
schDep: parseIndividualTime(schDep),
|
||||
expDep: parsedExpDep,
|
||||
earArr: isEarlyArr,
|
||||
delArr: isDelayedArr,
|
||||
earDep: isEarlyDep,
|
||||
delDep: isDelayedDep
|
||||
}
|
||||
|
||||
async function generateServiceData(service) {
|
||||
const timeDetails = await parseTimes(service);
|
||||
let serviceData = {
|
||||
from: await parseLocation(service.origin),
|
||||
to: await parseLocation(service.destination),
|
||||
length: await getTrainLength(service),
|
||||
platform: await parsePlatform(service?.platform || 'undefined'),
|
||||
platformHidden: service?.platformIsHidden === 'true',
|
||||
schArr: timeDetails.schArr,
|
||||
expArr: timeDetails.expArr,
|
||||
schDep: timeDetails.schDep,
|
||||
expDep: timeDetails.expDep,
|
||||
isEarlyArr: timeDetails.earArr,
|
||||
isLateArr: timeDetails.delArr,
|
||||
isEarlyDep: timeDetails.earDep,
|
||||
isLateDep: timeDetails.delDep,
|
||||
isCancelledDep: false,
|
||||
isCancelled: Boolean(service?.isCancelled),
|
||||
isDelayed: service?.arrivalType === 'Delayed',
|
||||
isArrDelayed: service?.arrivalType === 'Delayed',
|
||||
isDepDelayed: service?.departureType === 'Delayed',
|
||||
isEarly: false,
|
||||
isNonPublic: false
|
||||
};
|
||||
return serviceData;
|
||||
}
|
||||
|
||||
async function getTrainLength(service) {
|
||||
if (service?.length) {
|
||||
return parseInt(service?.length);
|
||||
} else if (service?.formation?.coaches) {
|
||||
return service.formation.coaches.coach.length;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function parseLocation(location) {
|
||||
if (!Array.isArray(location.location)) {
|
||||
//console.log(location.location?.tiploc)
|
||||
return location.location?.tiploc;
|
||||
}
|
||||
let locations = [];
|
||||
for (const singleLocation of location?.location) {
|
||||
locations.push(singleLocation?.tiploc);
|
||||
}
|
||||
return locations.join(' & ');
|
||||
}
|
||||
|
||||
async function parsePlatform(platform) {
|
||||
if (!platform) {
|
||||
return '-';
|
||||
}
|
||||
if (platform === 'TBC' || platform == 'undefined') {
|
||||
return '-';
|
||||
}
|
||||
return {
|
||||
number: platform
|
||||
};
|
||||
}
|
||||
|
||||
function parseTimes(service) {
|
||||
let schArr = new Date(service?.sta);
|
||||
let expArr = new Date(service?.eta || service?.ata);
|
||||
let schDep = new Date(service?.std);
|
||||
let expDep = new Date(service?.etd || service?.atd);
|
||||
let isEarlyArr = false,
|
||||
isDelayedArr = false,
|
||||
isArr = false;
|
||||
let isEarlyDep = false,
|
||||
isDelayedDep = false,
|
||||
isDep = false;
|
||||
const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
|
||||
if (expArr - schArr < -timeDifferenceThreshold) {
|
||||
isEarlyArr = true;
|
||||
isArr = true;
|
||||
} else if (expArr - schArr > timeDifferenceThreshold) {
|
||||
isDelayedArr = true;
|
||||
isArr = true;
|
||||
}
|
||||
|
||||
function parseIndividualTime(input) {
|
||||
const dt = new Date(input);
|
||||
const output = dt.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
|
||||
if (output !== "Invalid Date") {
|
||||
return output
|
||||
}
|
||||
return '-'
|
||||
if (expDep - schDep < -timeDifferenceThreshold) {
|
||||
isEarlyDep = true;
|
||||
isDep = true;
|
||||
} else if (expDep - schDep > timeDifferenceThreshold) {
|
||||
isDelayedDep = true;
|
||||
isDep = true;
|
||||
}
|
||||
|
||||
function processNrcc(messages) { // Remove newlines and then <p> tags from input and append to array
|
||||
let arrMessages;
|
||||
if (!Array.isArray(messages)) {
|
||||
arrMessages = [messages];
|
||||
let parsedExpArr;
|
||||
if (expArr instanceof Date && !isNaN(expArr)) {
|
||||
if (!isEarlyArr && !isDelayedArr) {
|
||||
parsedExpArr = 'RT';
|
||||
} else {
|
||||
arrMessages = messages;
|
||||
parsedExpArr = parseIndividualTime(expArr);
|
||||
}
|
||||
let processedMessages = [];
|
||||
for (const message of arrMessages) {
|
||||
const msgText = message.xhtmlMessage
|
||||
processedMessages.push(msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, ''));
|
||||
}
|
||||
return processedMessages;
|
||||
} else {
|
||||
parsedExpArr = '-';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
<table>
|
||||
<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>
|
||||
<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}
|
||||
{#await generateServiceData(service)}
|
||||
<tr>
|
||||
<td colspan="8">
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
{:then serviceStats}
|
||||
|
||||
<!-- Await a 'Generate Stats' function here which can evaluate the data and provide
|
||||
let parsedExpDep;
|
||||
if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
if (!isEarlyDep && !isDelayedDep) {
|
||||
parsedExpDep = 'RT';
|
||||
} else {
|
||||
parsedExpDep = parseIndividualTime(expDep);
|
||||
}
|
||||
} else {
|
||||
parsedExpDep = '-';
|
||||
}
|
||||
return {
|
||||
schArr: parseIndividualTime(schArr),
|
||||
expArr: parsedExpArr,
|
||||
schDep: parseIndividualTime(schDep),
|
||||
expDep: parsedExpDep,
|
||||
earArr: isEarlyArr,
|
||||
delArr: isDelayedArr,
|
||||
earDep: isEarlyDep,
|
||||
delDep: isDelayedDep
|
||||
};
|
||||
}
|
||||
|
||||
function parseIndividualTime(input) {
|
||||
const dt = new Date(input);
|
||||
const output = dt.toLocaleTimeString([], {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
if (output !== 'Invalid Date') {
|
||||
return output;
|
||||
}
|
||||
return '-';
|
||||
}
|
||||
|
||||
function processNrcc(messages) {
|
||||
// Remove newlines and then <p> tags from input and append to array
|
||||
let arrMessages;
|
||||
if (!Array.isArray(messages)) {
|
||||
arrMessages = [messages];
|
||||
} else {
|
||||
arrMessages = messages;
|
||||
}
|
||||
let processedMessages = [];
|
||||
for (const message of arrMessages) {
|
||||
const msgText = message.xhtmlMessage;
|
||||
processedMessages.push(
|
||||
msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, '')
|
||||
);
|
||||
}
|
||||
return processedMessages;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if isLoading}
|
||||
<Loading />
|
||||
{:else}
|
||||
{#if alerts.length}
|
||||
<AlertBar {alerts} />
|
||||
{/if}
|
||||
<table>
|
||||
<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>
|
||||
<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}
|
||||
{#await generateServiceData(service)}
|
||||
<tr>
|
||||
<td colspan="8"> Loading... </td>
|
||||
</tr>
|
||||
{:then serviceStats}
|
||||
<!-- Await a 'Generate Stats' function here which can evaluate the data and provide
|
||||
relevant BOOLs like isCancelled, isEarly, isLate, isNonPassenger and calculate train length
|
||||
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'}">{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'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td>
|
||||
</tr>
|
||||
<tr class="text-row">
|
||||
<td colspan="8" class="text-data">
|
||||
{service.operator} {#if serviceStats.length} | {serviceStats.length} carriages{/if}
|
||||
<br>
|
||||
{#if service.isCancelled}
|
||||
{#await getReasonCodeData(service.cancelReason)}
|
||||
This train has been cancelled
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].cancReason}
|
||||
<br>
|
||||
{/await}
|
||||
{/if}
|
||||
{#if service?.delayReason}
|
||||
{#await getReasonCodeData(service.delayReason)}
|
||||
This train has been delayed
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].lateReason}
|
||||
<br>
|
||||
{/await}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{:catch}
|
||||
<tr>
|
||||
<td colspan="8">Unable to load service</td>
|
||||
</tr>
|
||||
{/await}
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
<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'}"
|
||||
>{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'}"
|
||||
>{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
|
||||
>
|
||||
</tr>
|
||||
<tr class="text-row">
|
||||
<td colspan="8" class="text-data">
|
||||
{service.operator}
|
||||
{#if serviceStats.length} | {serviceStats.length} carriages{/if}
|
||||
<br />
|
||||
{#if service.isCancelled}
|
||||
{#await getReasonCodeData(service.cancelReason)}
|
||||
This train has been cancelled
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].cancReason}
|
||||
<br />
|
||||
{/await}
|
||||
{/if}
|
||||
{#if service?.delayReason}
|
||||
{#await getReasonCodeData(service.delayReason)}
|
||||
This train has been delayed
|
||||
{:then reasonCode}
|
||||
{reasonCode[0].lateReason}
|
||||
<br />
|
||||
{/await}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{:catch}
|
||||
<tr>
|
||||
<td colspan="8">Unable to load service</td>
|
||||
</tr>
|
||||
{/await}
|
||||
{/each}
|
||||
</table>
|
||||
{/if}
|
||||
|
||||
<Nav />
|
||||
<Nav />
|
||||
|
||||
<style>
|
||||
<style>
|
||||
#timestamp {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
@@ -306,7 +343,8 @@ if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.from-data, .to-data {
|
||||
.from-data,
|
||||
.to-data {
|
||||
color: yellow;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
@@ -323,42 +361,42 @@ if (expDep instanceof Date && !isNaN(expDep)) {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.can-dat {
|
||||
color: grey;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.can-dat {
|
||||
color: grey;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
color: grey;
|
||||
}
|
||||
.hidden {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.can-time {
|
||||
.can-time {
|
||||
animation: pulse-cancel 1.5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.early {
|
||||
animation: pulse-early 1.5s linear infinite;
|
||||
}
|
||||
.early {
|
||||
animation: pulse-early 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.late {
|
||||
animation: pulse-late 1.5s linear infinite;
|
||||
}
|
||||
.late {
|
||||
animation: pulse-late 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-late {
|
||||
@keyframes pulse-late {
|
||||
50% {
|
||||
color: var(--main-warning-color);
|
||||
color: var(--main-warning-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-cancel {
|
||||
@keyframes pulse-cancel {
|
||||
50% {
|
||||
color: var(--main-alert-color);
|
||||
color: var(--main-alert-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-early {
|
||||
@keyframes pulse-early {
|
||||
50% {
|
||||
color: rgb(136, 164, 255);
|
||||
color: rgb(136, 164, 255);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<div id="container">
|
||||
<p id="tick">✔</p>
|
||||
<p>Done</p>
|
||||
<p id="tick">✔</p>
|
||||
<p>Done</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#tick {
|
||||
#tick {
|
||||
font-size: 45px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#container {
|
||||
position:fixed;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
margin:auto;
|
||||
background-color:var(--overlay-color);
|
||||
border-radius:15px;
|
||||
padding:20px;
|
||||
padding-bottom:1px;
|
||||
min-width:90px;
|
||||
max-width:90px
|
||||
}
|
||||
p {
|
||||
padding-top:0px;
|
||||
font-weight:bolder;
|
||||
overflow-wrap:normal;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
#container {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: auto;
|
||||
background-color: var(--overlay-color);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
padding-bottom: 1px;
|
||||
min-width: 90px;
|
||||
max-width: 90px;
|
||||
}
|
||||
p {
|
||||
padding-top: 0px;
|
||||
font-weight: bolder;
|
||||
overflow-wrap: normal;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +1,42 @@
|
||||
<script>
|
||||
export let title = 'title'
|
||||
export let title = 'title';
|
||||
</script>
|
||||
|
||||
<div class="headerBar">
|
||||
<a href="/">
|
||||
<picture>
|
||||
<source srcset="/images/logo/wide_logo.svg" type="image/svg+xml">
|
||||
<img src="/images/logo/wide_logo_200.png" alt="OwlBoard Logo">
|
||||
</picture>
|
||||
</a>
|
||||
<header>{title}</header>
|
||||
<a href="/">
|
||||
<picture>
|
||||
<source srcset="/images/logo/wide_logo.svg" type="image/svg+xml" />
|
||||
<img src="/images/logo/wide_logo_200.png" alt="OwlBoard Logo" />
|
||||
</picture>
|
||||
</a>
|
||||
<header>{title}</header>
|
||||
</div>
|
||||
<div class="headerBlock">
|
||||
<!-- This exists to prevent the headerBar overlapping anything below it -->
|
||||
<!-- This exists to prevent the headerBar overlapping anything below it -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.headerBar {
|
||||
.headerBar {
|
||||
background: var(--overlay-color-solid);
|
||||
color: var(--main-text-color);
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
img {
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
right: 8px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
header {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 3px;
|
||||
@@ -43,11 +45,11 @@ header {
|
||||
margin-top: 7px;
|
||||
margin-left: 20px;
|
||||
font-size: 15pt;
|
||||
}
|
||||
}
|
||||
|
||||
.headerBlock {
|
||||
.headerBlock {
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,53 +1,57 @@
|
||||
<script>
|
||||
import { fade } from "svelte/transition";
|
||||
import { fade } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
<div id="container" in:fade={{delay: 150, duration: 250}} out:fade={{duration: 250}}>
|
||||
<div class="spinner"></div>
|
||||
<p>Loading...</p>
|
||||
<div
|
||||
id="container"
|
||||
in:fade={{ delay: 150, duration: 250 }}
|
||||
out:fade={{ duration: 250 }}
|
||||
>
|
||||
<div class="spinner" />
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform:translate3d(-50%,-50%,0) rotate(0)
|
||||
}
|
||||
100% {
|
||||
transform:translate3d(-50%,-50%,0) rotate(360deg)
|
||||
}
|
||||
}
|
||||
.spinner::before {
|
||||
animation:1.5s linear infinite spinner;
|
||||
animation-play-state:inherit;
|
||||
border:solid 5px var(--overlay-color);
|
||||
border-bottom-color: white;
|
||||
border-radius:50%;
|
||||
content:"";
|
||||
height:40px;
|
||||
width:40px;
|
||||
position:absolute;
|
||||
top:30%;
|
||||
margin:auto;
|
||||
transform:translate3d(-50%,-50%,0);
|
||||
will-change:transform
|
||||
}
|
||||
#container {
|
||||
position:fixed;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
margin:auto;
|
||||
background-color:var(--overlay-color);
|
||||
border-radius:15px;
|
||||
padding:20px;
|
||||
padding-bottom:1px;
|
||||
min-width:90px;
|
||||
max-width:90px
|
||||
}
|
||||
p {
|
||||
padding-top:50px;
|
||||
font-weight:bolder;
|
||||
overflow-wrap:normal;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: translate3d(-50%, -50%, 0) rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(-50%, -50%, 0) rotate(360deg);
|
||||
}
|
||||
}
|
||||
.spinner::before {
|
||||
animation: 1.5s linear infinite spinner;
|
||||
animation-play-state: inherit;
|
||||
border: solid 5px var(--overlay-color);
|
||||
border-bottom-color: white;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
margin: auto;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
will-change: transform;
|
||||
}
|
||||
#container {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: auto;
|
||||
background-color: var(--overlay-color);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
padding-bottom: 1px;
|
||||
min-width: 90px;
|
||||
max-width: 90px;
|
||||
}
|
||||
p {
|
||||
padding-top: 50px;
|
||||
font-weight: bolder;
|
||||
overflow-wrap: normal;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,91 +1,103 @@
|
||||
<script>
|
||||
const links = [
|
||||
{
|
||||
title: "Home",
|
||||
path: "/",
|
||||
svgPath: "/images/navigation/home.svg"
|
||||
}
|
||||
]
|
||||
import { page } from "$app/stores";
|
||||
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>
|
||||
<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">
|
||||
<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);
|
||||
}
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
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 {
|
||||
flex-grow: 2;
|
||||
background: rgb(255,255,255);
|
||||
background: rgb(255, 255, 255);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 1) 40%
|
||||
);
|
||||
}
|
||||
#nre-logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
margin-top: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
right: 20px;
|
||||
}
|
||||
@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>
|
||||
}
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
margin-top: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
span {
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
<script>
|
||||
const links = [
|
||||
{
|
||||
title: "Home",
|
||||
path: "/",
|
||||
svgPath: "/images/navigation/home.svg"
|
||||
},
|
||||
{
|
||||
title: "PIS Finder",
|
||||
path: "/pis",
|
||||
svgPath: "/images/navigation/info.svg"
|
||||
},
|
||||
{
|
||||
title: "More",
|
||||
path: "/more",
|
||||
svgPath: "/images/navigation/more.svg"
|
||||
}
|
||||
]
|
||||
import { page } from "$app/stores";
|
||||
const links = [
|
||||
{
|
||||
title: 'Home',
|
||||
path: '/',
|
||||
svgPath: '/images/navigation/home.svg'
|
||||
},
|
||||
{
|
||||
title: 'PIS Finder',
|
||||
path: '/pis',
|
||||
svgPath: '/images/navigation/info.svg'
|
||||
},
|
||||
{
|
||||
title: 'More',
|
||||
path: '/more',
|
||||
svgPath: '/images/navigation/more.svg'
|
||||
}
|
||||
];
|
||||
import { page } from '$app/stores';
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
{#each links as item}
|
||||
<a href={item.path} class:active={$page.url.pathname == item.path}>
|
||||
<img src="{item.svgPath}" alt="{item.title}">
|
||||
<br>
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
<a href={item.path} class:active={$page.url.pathname == item.path}>
|
||||
<img src={item.svgPath} alt={item.title} />
|
||||
<br />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(54, 54, 54);
|
||||
}
|
||||
footer {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: rgb(54, 54, 54);
|
||||
}
|
||||
|
||||
footer a {
|
||||
flex: 12;
|
||||
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 {
|
||||
flex: 12;
|
||||
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;
|
||||
}
|
||||
footer a.active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
margin-top: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0;
|
||||
margin-top: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
span {
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
<script>
|
||||
import OverlayIsland from "$lib/islands/overlay-island.svelte";
|
||||
import OverlayIsland from '$lib/islands/overlay-island.svelte';
|
||||
|
||||
const variables = {
|
||||
title: "Welcome to OwlBoard"
|
||||
}
|
||||
const version = "2023.7.1"
|
||||
let pageNum = 0;
|
||||
const variables = {
|
||||
title: 'Welcome to OwlBoard'
|
||||
};
|
||||
const version = '2023.7.1';
|
||||
let pageNum = 0;
|
||||
|
||||
function pageUp() {
|
||||
pageNum ++;
|
||||
console.log(`Welcome page: ${pageNum}`)
|
||||
}
|
||||
function pageUp() {
|
||||
pageNum++;
|
||||
console.log(`Welcome page: ${pageNum}`);
|
||||
}
|
||||
|
||||
function pageDn() {
|
||||
pageNum --;
|
||||
console.log(`Welcome page: ${pageNum}`)
|
||||
}
|
||||
function pageDn() {
|
||||
pageNum--;
|
||||
console.log(`Welcome page: ${pageNum}`);
|
||||
}
|
||||
|
||||
const pageText = [
|
||||
"<h3>A brand new look</h3>" +
|
||||
"<p>OwlBoard has a brand new look, making it even faster for you to access the data</p>" +
|
||||
"<p>If you have signed up before, you won't have to to it again and any customised Quick Links are here waiting for you</p>",
|
||||
"<h3>Faster Access</h3>" +
|
||||
"<p>Both live station data, and timetable search is available from the homepage. Making it faster to get the info you need</p>" +
|
||||
"<p>Search the timetable using a headcode to see a trains details - OwlBoard now shows data for all TOCs and FOCs.</p>" +
|
||||
"<p>For GWR services: if a PIS code is available for a service, you'll see it alongside the train details.</p>",
|
||||
"<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."
|
||||
]
|
||||
const pageText = [
|
||||
'<h3>A brand new look</h3>' +
|
||||
'<p>OwlBoard has a brand new look, making it even faster for you to access the data</p>' +
|
||||
"<p>If you have signed up before, you won't have to to it again and any customised Quick Links are here waiting for you</p>",
|
||||
'<h3>Faster Access</h3>' +
|
||||
'<p>Both live station data, and timetable search is available from the homepage. Making it faster to get the info you need</p>' +
|
||||
'<p>Search the timetable using a headcode to see a trains details - OwlBoard now shows data for all TOCs and FOCs.</p>' +
|
||||
"<p>For GWR services: if a PIS code is available for a service, you'll see it alongside the train details.</p>",
|
||||
'<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."
|
||||
];
|
||||
</script>
|
||||
|
||||
<OverlayIsland {variables}>
|
||||
<h2>What's new in OwlBoard {version}</h2>
|
||||
<div>
|
||||
{@html pageText[pageNum]}
|
||||
</div>
|
||||
<button type="button" on:click={pageDn}><</button>
|
||||
<button type="button" on:click={pageUp}>></button>
|
||||
<div>
|
||||
{@html pageText[pageNum]}
|
||||
</div>
|
||||
<button type="button" on:click={pageDn}><</button>
|
||||
<button type="button" on:click={pageUp}>></button>
|
||||
</OverlayIsland>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
div {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,29 +1,28 @@
|
||||
import { writable } from 'svelte/store'
|
||||
import { writable } from 'svelte/store';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
export const ql = writable(fromLocalStorage('ql', []))
|
||||
export const ql = writable(fromLocalStorage('ql', []));
|
||||
toLocalStorage(ql, 'ql');
|
||||
|
||||
function fromLocalStorage(storageKey, fallback) {
|
||||
if (browser) {
|
||||
const storedValue = localStorage.getItem(storageKey);
|
||||
if (storedValue !== 'undefined' && storedValue !== null) {
|
||||
return (typeof fallback === 'object')
|
||||
? JSON.parse(storedValue)
|
||||
: storedValue
|
||||
}
|
||||
if (browser) {
|
||||
const storedValue = localStorage.getItem(storageKey);
|
||||
if (storedValue !== 'undefined' && storedValue !== null) {
|
||||
return typeof fallback === 'object'
|
||||
? JSON.parse(storedValue)
|
||||
: storedValue;
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function toLocalStorage(store, storageKey) {
|
||||
if (browser) {
|
||||
store.subscribe(value => {
|
||||
let storageValue = (typeof value === 'object')
|
||||
? JSON.stringify(value)
|
||||
: value
|
||||
if (browser) {
|
||||
store.subscribe((value) => {
|
||||
let storageValue =
|
||||
typeof value === 'object' ? JSON.stringify(value) : value;
|
||||
|
||||
localStorage.setItem(storageKey, storageValue)
|
||||
})
|
||||
}
|
||||
}
|
||||
localStorage.setItem(storageKey, storageValue);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import { writable } from 'svelte/store'
|
||||
import { writable } from 'svelte/store';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
export const uuid = writable(fromLocalStorage('uuid', null))
|
||||
export const uuid = writable(fromLocalStorage('uuid', null));
|
||||
toLocalStorage(uuid, 'uuid');
|
||||
|
||||
function fromLocalStorage(storageKey, fallback) {
|
||||
if (browser) {
|
||||
const storedValue = localStorage.getItem(storageKey);
|
||||
if (storedValue !== 'undefined') {
|
||||
return storedValue
|
||||
}
|
||||
if (browser) {
|
||||
const storedValue = localStorage.getItem(storageKey);
|
||||
if (storedValue !== 'undefined') {
|
||||
return storedValue;
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function toLocalStorage(store, storageKey) {
|
||||
if (browser) {
|
||||
store.subscribe(value => {
|
||||
localStorage.setItem(storageKey, value)
|
||||
})
|
||||
}
|
||||
}
|
||||
if (browser) {
|
||||
store.subscribe((value) => {
|
||||
localStorage.setItem(storageKey, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,114 +1,133 @@
|
||||
<script>
|
||||
import { fly } from "svelte/transition";
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let service = ""
|
||||
export let service = '';
|
||||
|
||||
let isExpanded = false;
|
||||
|
||||
async function expand() {
|
||||
isExpanded = !isExpanded
|
||||
}
|
||||
let isExpanded = false;
|
||||
|
||||
async function expand() {
|
||||
isExpanded = !isExpanded;
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<span id="container-arrow" class:isExpanded>V</span>
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<div class="container-detail" in:fly={{ y: -20, duration: 200}}>
|
||||
{#if service.pis}
|
||||
<p class="pis">PIS: {service.pis}</p>
|
||||
<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
|
||||
>
|
||||
<span id="container-arrow" class:isExpanded>V</span>
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<div class="container-detail" in:fly={{ y: -20, duration: 200 }}>
|
||||
{#if service.pis}
|
||||
<p class="pis">PIS: {service.pis}</p>
|
||||
{/if}
|
||||
<p class="svc-detail">
|
||||
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', {
|
||||
timeZone: 'UTC'
|
||||
})}
|
||||
</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Location</th>
|
||||
<th>Sch Arr.</th>
|
||||
<th>Sch Dep.</th>
|
||||
</tr>
|
||||
{#if service.stops[0]['publicDeparture']}
|
||||
{#each service.stops as stop}
|
||||
{#if stop.publicArrival || stop.publicDeparture}
|
||||
<tr>
|
||||
<td>{stop.tiploc}</td>
|
||||
<td>{stop.publicArrival || '-'}</td>
|
||||
<td>{stop.publicDeparture || '-'}</td>
|
||||
</tr>
|
||||
{/if}
|
||||
<p class="svc-detail">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', {timeZone: 'UTC'})}</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Location</th>
|
||||
<th>Sch Arr.</th>
|
||||
<th>Sch Dep.</th>
|
||||
</tr>
|
||||
{#if service.stops[0]['publicDeparture']}
|
||||
{#each service.stops as stop}
|
||||
{#if stop.publicArrival || stop.publicDeparture}
|
||||
<tr>
|
||||
<td>{stop.tiploc}</td>
|
||||
<td>{stop.publicArrival || '-'}</td>
|
||||
<td>{stop.publicDeparture || '-'}</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{#each service.stops as stop}
|
||||
<tr>
|
||||
<td>{stop.tiploc}</td>
|
||||
<td>{stop.wttArrival || '-'}</td>
|
||||
<td>{stop.wttDeparture || '-'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{#each service.stops as stop}
|
||||
<tr>
|
||||
<td>{stop.tiploc}</td>
|
||||
<td>{stop.wttArrival || '-'}</td>
|
||||
<td>{stop.wttDeparture || '-'}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
width: 95%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
background-color: var(--overlay-color);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: height 500ms ease-in-out;
|
||||
}
|
||||
.container-header {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#container-arrow {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 13px;
|
||||
transition-duration: 300ms;
|
||||
z-index: 2;
|
||||
}
|
||||
.isExpanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.pis {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: azure;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.svc-detail {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
color: white;
|
||||
}
|
||||
.validity {
|
||||
font-size: 14px;
|
||||
}
|
||||
table {
|
||||
margin: auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
.container {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
width: 95%;
|
||||
max-width: 600px;
|
||||
height: auto;
|
||||
background-color: var(--overlay-color);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: height 500ms ease-in-out;
|
||||
}
|
||||
.container-header {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#container-arrow {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 13px;
|
||||
transition-duration: 300ms;
|
||||
z-index: 2;
|
||||
}
|
||||
.isExpanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.pis {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: azure;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.svc-detail {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
color: white;
|
||||
}
|
||||
.validity {
|
||||
font-size: 14px;
|
||||
}
|
||||
table {
|
||||
margin: auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user