Still awaiting the check auth endpoint, the code only acts on a 401 response.  That means that it currently will not detect if an account is expired.
This commit is contained in:
Fred Boniface 2023-08-24 20:24:28 +01:00
parent 4cd8a496b8
commit bc6fd6cdc9
20 changed files with 572 additions and 476 deletions

View File

@ -1,31 +1,25 @@
module.exports = { module.exports = {
root: true, root: true,
extends: [ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'],
'eslint:recommended', parser: '@typescript-eslint/parser',
'plugin:@typescript-eslint/recommended', plugins: ['@typescript-eslint'],
'plugin:svelte/recommended', parserOptions: {
'prettier' sourceType: 'module',
], ecmaVersion: 2020,
parser: '@typescript-eslint/parser', extraFileExtensions: ['.svelte']
plugins: ['@typescript-eslint'], },
parserOptions: { env: {
sourceType: 'module', browser: true,
ecmaVersion: 2020, es2017: true,
extraFileExtensions: ['.svelte'] node: true
}, },
env: { overrides: [
browser: true, {
es2017: true, files: ['*.svelte'],
node: true parser: 'svelte-eslint-parser',
}, parserOptions: {
overrides: [ parser: '@typescript-eslint/parser'
{ }
files: ['*.svelte'], }
parser: 'svelte-eslint-parser', ]
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
}; };

View File

@ -2,14 +2,14 @@
owlboard-svelte is the OwlBoard web-frontend as of version 2023.7.1 replacing the previous version (https://git.fjla.uk/owlboard/web) and moving from a raw HTML/CSS/JS to a statically build Svelte website. owlboard-svelte is the OwlBoard web-frontend as of version 2023.7.1 replacing the previous version (https://git.fjla.uk/owlboard/web) and moving from a raw HTML/CSS/JS to a statically build Svelte website.
The decision was made because as new features were added, the markup and code started to become difficult to manage and maintain. The Svelte version introduces reusable components simplifying the maintenance and the addition of new features. The decision was made because as new features were added, the markup and code started to become difficult to manage and maintain. The Svelte version introduces reusable components simplifying the maintenance and the addition of new features.
## Building ## Building
To build owlboard-svelte, simply clone the repo and run `npm run build` which will build a static website in the `build` folder. The static files can then be uplaoded to a webserver of your choice. To build owlboard-svelte, simply clone the repo and run `npm run build` which will build a static website in the `build` folder. The static files can then be uplaoded to a webserver of your choice.
The website is build statically for server performance reasons - running an nginx server is lighter than running Node considering that much of the data fetching and processing happens on the client side anyway due to user UUID access keys being required. The website is build statically for server performance reasons - running an nginx server is lighter than running Node considering that much of the data fetching and processing happens on the client side anyway due to user UUID access keys being required.
## TypeScript ## TypeScript
Any new code added to the website should be written in TypeScript - where Javascript is extended, it should be re-written into TypeScript. Any new code added to the website should be written in TypeScript - where Javascript is extended, it should be re-written into TypeScript.

View File

@ -1,19 +1,19 @@
<div id="banner">DEVMODE</div> <div id="banner">DEVMODE</div>
<style> <style>
#banner { #banner {
width: 200px; width: 200px;
background: red; background: red;
color: #fff; color: #fff;
position: fixed; position: fixed;
text-align: center; text-align: center;
top: 25px; top: 25px;
line-height: 40px; line-height: 40px;
right: -50px; right: -50px;
left: auto; left: auto;
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
z-index: 100; z-index: 100;
} }
</style> </style>

View File

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import Island from '$lib/islands/island.svelte'; import Island from '$lib/islands/island.svelte';
interface resultObj { interface resultObj {
results: boolean, results: boolean;
title: string, title: string;
resultLines: string[] resultLines: string[];
} }
export let resultObject: resultObj = { export let resultObject: resultObj = {
results: true, results: true,
title: '', title: '',

View File

@ -9,7 +9,7 @@
import Island from '$lib/islands/island.svelte'; import Island from '$lib/islands/island.svelte';
import TableGeneratorDev from './table/table-generator_dev.svelte'; import TableGeneratorDev from './table/table-generator_dev.svelte';
const TableGenerator = TableGeneratorDev const TableGenerator = TableGeneratorDev;
import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types'; import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
@ -22,9 +22,9 @@
$: { $: {
if (isLoading) { if (isLoading) {
title = "Loading..." title = 'Loading...';
} else { } else {
title = station title = station;
} }
} }

View File

@ -13,55 +13,77 @@
} }
async function formatLocations(locations: ServiceLocation[]): Promise<string> { async function formatLocations(locations: ServiceLocation[]): Promise<string> {
let tiplocs: string[] = [] let tiplocs: string[] = [];
for (const location of locations) { for (const location of locations) {
tiplocs.push(location.tiploc) tiplocs.push(location.tiploc);
} }
return tiplocs.join(' & ') return tiplocs.join(' & ');
} }
async function classGenerator(service: TrainServices) { async function classGenerator(service: TrainServices) {
let otherArr: string[] = [] let otherArr: string[] = [];
let arrArr: string[] = [] let arrArr: string[] = [];
let depArr: string[] = [] let depArr: string[] = [];
let platArr: string[] = [] let platArr: string[] = [];
if (service.isCancelled) {
otherArr.push('canc');
}
if (service.serviceIsSupressed) {
otherArr.push('nonPass');
}
if (service.platformIsHidden) {
platArr.push('nonPass');
}
if (service.isCancelled) {otherArr.push("canc")}
if (service.serviceIsSupressed) {otherArr.push("nonPass")}
if (service.platformIsHidden) {platArr.push("nonPass")}
if (service.sta !== undefined) { if (service.sta !== undefined) {
if (service.eta !== undefined) { if (service.eta !== undefined) {
if (service.sta < service.eta) { arrArr.push("late"); } if (service.sta < service.eta) {
} else if (service.ata !== undefined) { arrArr.push('late');
if (service.sta < service.ata) { arrArr.push("late"); } }
} else if (service.ata !== undefined) {
if (service.sta < service.ata) {
arrArr.push('late');
}
}
if (service.eta !== undefined) {
if (service.sta > service.eta) {
arrArr.push('early');
}
} else if (service.ata !== undefined) {
if (service.sta > service.ata) {
arrArr.push('early');
}
}
} }
if (service.eta !== undefined) {
if (service.sta > service.eta) { arrArr.push("early"); }
} else if (service.ata !== undefined) {
if (service.sta > service.ata) { arrArr.push("early"); }
}
}
if (service.std !== undefined) { if (service.std !== undefined) {
if (service.etd !== undefined) { if (service.etd !== undefined) {
if (service.std < service.etd) { depArr.push("late"); } if (service.std < service.etd) {
} else if (service.atd !== undefined) { depArr.push('late');
if (service.std < service.atd) { depArr.push("late"); } }
} else if (service.atd !== undefined) {
if (service.std < service.atd) {
depArr.push('late');
}
}
if (service.etd !== undefined) {
if (service.std > service.etd) {
depArr.push('early');
}
} else if (service.atd !== undefined) {
if (service.std > service.atd) {
depArr.push('early');
}
}
} }
if (service.etd !== undefined) {
if (service.std > service.etd) { depArr.push("early"); }
} else if (service.atd !== undefined) {
if (service.std > service.atd) { depArr.push("early"); }
}
}
return { return {
other: otherArr.join(" "), other: otherArr.join(' '),
arr: arrArr.join(" "), arr: arrArr.join(' '),
dep: depArr.join(" "), dep: depArr.join(' '),
plat: platArr.join(" "), plat: platArr.join(' ')
} };
} }
</script> </script>
@ -83,39 +105,43 @@
<th class="timepair" colspan="2">Departure</th> <th class="timepair" colspan="2">Departure</th>
</tr> </tr>
{#each services as service} {#each services as service}
<tr <tr
class="dataRow" class="dataRow"
on:click={(event) => detail(event, service.rid, service.uid, service.trainid)} on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)} on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
> >
{#await classGenerator(service) then classes} {#await classGenerator(service) then classes}
<td class="id {classes.other}">{service.trainid}</td> <td class="id {classes.other}">{service.trainid}</td>
<td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td> <td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
<td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td> <td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td>
<td class="plat">{service.platform || '-'}</td> <td class="plat">{service.platform || '-'}</td>
<td class="time schTime {classes.other}">{service.sta || '-'}</td> <!-- All time need to be displayed appropriately --> <td class="time schTime {classes.other}">{service.sta || '-'}</td>
<td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td> <!-- All time need to be displayed appropriately --> <!-- All time need to be displayed appropriately -->
<td class="time schTime {classes.other}">{service.std || '-'}</td> <!-- All time need to be displayed appropriately --> <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
<td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td> <!-- All time need to be displayed appropriately --> <!-- All time need to be displayed appropriately -->
<td class="time schTime {classes.other}">{service.std || '-'}</td>
<!-- All time need to be displayed appropriately -->
<td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td>
<!-- All time need to be displayed appropriately -->
{/await} {/await}
</tr> </tr>
<tr> <tr>
<td class="tableTxt" colspan="8"> <td class="tableTxt" colspan="8">
{tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode} {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
{#if service.length} | {service.length} carriages{/if} {#if service.length} | {service.length} carriages{/if}
{#if service.delayReason} {#if service.delayReason}
<br /> <br />
<Reason type={'delay'} code={service.delayReason} /> <Reason type={'delay'} code={service.delayReason} />
{/if} {/if}
{#if service.cancelReason} {#if service.cancelReason}
<br /> <br />
<Reason type={'cancel'} code={service.cancelReason} /> <Reason type={'cancel'} code={service.cancelReason} />
{/if} {/if}
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="8">Unable to display service</td> <td colspan="8">Unable to display service</td>
</tr> </tr>
{/each} {/each}
</table> </table>

View File

@ -103,7 +103,7 @@
<h6>{detail.headcode}</h6> <h6>{detail.headcode}</h6>
<p in:fade id="loading">Loading Data...</p> <p in:fade id="loading">Loading Data...</p>
{:then train} {:then train}
<h6><StylesToc toc={train.GetServiceDetailsResult.operatorCode} full={true}/> {detail.headcode}</h6> <h6><StylesToc toc={train.GetServiceDetailsResult.operatorCode} full={true} /> {detail.headcode}</h6>
<p> <p>
Locations in grey are not scheduled stops Locations in grey are not scheduled stops
<br /> <br />

View File

@ -1,72 +1,76 @@
import { uuid } from "./stores/uuid" import { uuid } from './stores/uuid';
export interface libauthResponse { export interface libauthResponse {
uuidPresent?: boolean; uuidPresent?: boolean;
serverAuthCheck?: boolean; serverAuthCheck?: boolean;
uuidValue?: string; uuidValue?: string;
serverAuthCheckResponseCode?: number; serverAuthCheckResponseCode?: number;
} }
interface uuidCheckRes { interface uuidCheckRes {
uuidValue?: string; uuidValue?: string;
uuidPresent?: boolean; uuidPresent?: boolean;
} }
export async function checkAuth(): Promise<libauthResponse> { export async function checkAuth(): Promise<libauthResponse> {
let result: libauthResponse = {}; let result: libauthResponse = {};
const uuidCheck = await checkUuid(); const uuidCheck = await checkUuid();
result.uuidPresent = uuidCheck?.uuidPresent; result.uuidPresent = uuidCheck?.uuidPresent;
result.uuidValue = uuidCheck?.uuidValue; result.uuidValue = uuidCheck?.uuidValue;
const serverCheck = await checkServerAuth();
result.serverAuthCheck = serverCheck.authOk;
result.serverAuthCheckResponseCode = serverCheck.status;
return result const serverCheck = await checkServerAuth(result.uuidValue || '');
result.serverAuthCheck = serverCheck.authOk;
result.serverAuthCheckResponseCode = serverCheck.status;
return result;
} }
export async function checkUuid(): Promise<uuidCheckRes> { async function checkUuid(): Promise<uuidCheckRes> {
let uuid_value: string = ''; let uuid_value: string = '';
const unsubscribe = uuid.subscribe(value => { const unsubscribe = uuid.subscribe((value) => {
uuid_value = value; uuid_value = value;
}); });
let res: uuidCheckRes = { let res: uuidCheckRes = {
uuidValue: uuid_value uuidValue: uuid_value
} };
console.log("uuid-value is: ", uuid_value) console.log('uuid-value is: ', uuid_value);
if (uuid_value && uuid_value != 'null') { if (uuid_value && uuid_value != 'null') {
res = { res = {
uuidPresent: true, uuidPresent: true,
uuidValue: uuid_value, uuidValue: uuid_value
}
} else {
res = {
uuidPresent: false,
uuidValue: uuid_value,
}
}unsubscribe()
return res;}
export async function checkServerAuth() {
let uuid_value: string = '';
uuid.subscribe((value => uuid_value = value))
const url = "https://owlboard.info/api/v2/user/checkAuth"
const options = {
method: 'GET',
headers: {
uuid: uuid_value,
}
}; };
const res = await fetch(url, options) } else {
let ok: boolean; res = {
if (res.status !== 401) { uuidPresent: false,
ok = true; uuidValue: uuid_value
} else { };
ok = false; }
unsubscribe();
return res;
}
async function checkServerAuth(uuidString: string) {
const url = 'https://owlboard.info/api/v2/user/checkAuth';
const options = {
method: 'GET',
headers: {
uuid: uuidString
} }
return { };
authOk: ok, const res = await fetch(url, options);
status: res.status, let ok: boolean;
} if (res.status !== 401) {
} ok = true;
} else {
ok = false;
}
return {
authOk: ok,
status: res.status
};
}
export async function logout(): Promise<boolean> {
uuid.set(null);
return true;
}

View File

@ -0,0 +1,24 @@
<script lang="ts">
import { logout } from '$lib/libauth';
async function logoutAction() {
await logout();
location.reload();
}
</script>
<button class="logout" type="button" on:click={logoutAction}>Logout</button>
<style>
.logout {
border: none;
background-color: var(--overlay-color);
color: white;
width: 35%;
border-radius: 50px;
font-size: 20px;
min-width: 90px;
margin: 30px;
height: 48px;
}
</style>

View File

@ -1,15 +1,16 @@
<p id="load">Loading...</p> <p id="load">Loading...</p>
<style> <style>
#load { #load {
margin-top: 5px; margin-top: 5px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: white; color: white;
animation: pulse-loading 2.5s linear infinite; animation: pulse-loading 2.5s linear infinite;
} }
@keyframes pulse-loading { @keyframes pulse-loading {
50% { 50% {
color: rgb(136, 164, 255); color: rgb(136, 164, 255);
} }
} }
</style> </style>

View File

@ -21,7 +21,7 @@
const pageText: string[] = [ const pageText: string[] = [
'<h3>Sign-up Fixed</h3>' + '<h3>Sign-up Fixed</h3>' +
"<p>An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.</p>" + '<p>An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.</p>' +
'<p>This issue has now been fixed and new users will be able to register for Rail Staff Access</p>', '<p>This issue has now been fixed and new users will be able to register for Rail Staff Access</p>',
'<h3>Always Improving</h3>' + '<h3>Always Improving</h3>' +
'<p>OwlBoard is always improving, the current focus is to improve performance when you have low mobile signal by reducing the amount of data being sent.</p>' '<p>OwlBoard is always improving, the current focus is to improve performance when you have low mobile signal by reducing the amount of data being sent.</p>'

View File

@ -1,44 +1,43 @@
export const tocs = new Map<string, string>([ export const tocs = new Map<string, string>([
[ 'gw', 'Great Western Railway' ], ['gw', 'Great Western Railway'],
[ 'sw', 'South Western Railway' ], ['sw', 'South Western Railway'],
[ 'id', 'Island Line' ], ['id', 'Island Line'],
[ 'nt', 'Northern' ], ['nt', 'Northern'],
[ 'aw', 'Transport for Wales' ], ['aw', 'Transport for Wales'],
[ 'cc', 'c2c' ], ['cc', 'c2c'],
[ 'cs', 'Caledonian Sleeper' ], ['cs', 'Caledonian Sleeper'],
[ 'ch', 'Chiltern Railways' ], ['ch', 'Chiltern Railways'],
[ 'xc', 'CrossCountry' ], ['xc', 'CrossCountry'],
[ 'em', 'East Midlands Railway' ], ['em', 'East Midlands Railway'],
[ 'es', 'Eurostar' ], ['es', 'Eurostar'],
[ 'ht', 'Hull Trains' ], ['ht', 'Hull Trains'],
[ 'tl', 'Thameslink' ], ['tl', 'Thameslink'],
[ 'gc', 'Grand Central' ], ['gc', 'Grand Central'],
[ 'gx', 'Gatwick Express' ], ['gx', 'Gatwick Express'],
[ 'hx', 'Heathrow Express' ], ['hx', 'Heathrow Express'],
[ 'ls', 'Locomotive Services Limited' ], ['ls', 'Locomotive Services Limited'],
[ 'me', 'Merseyrail' ], ['me', 'Merseyrail'],
[ 'lr', 'Network Rail OTM' ], ['lr', 'Network Rail OTM'],
[ 'xr', 'TfL Elizabeth Line' ], ['xr', 'TfL Elizabeth Line'],
[ 'se', 'Southeastern' ], ['se', 'Southeastern'],
[ 'sn', 'Southern' ], ['sn', 'Southern'],
[ 'le', 'Greater Anglia' ], ['le', 'Greater Anglia'],
[ 'ga', 'Greater Anglia' ], ['ga', 'Greater Anglia'],
[ 'lm', 'West Midlands Railway' ], ['lm', 'West Midlands Railway'],
[ 'sr', 'ScotRail' ], ['sr', 'ScotRail'],
[ 'gn', 'Great Northern' ], ['gn', 'Great Northern'],
[ 'lt', 'TfL London Underground' ], ['lt', 'TfL London Underground'],
[ 'lo', 'TfL London Overground' ], ['lo', 'TfL London Overground'],
[ 'sj', 'Sheffield SuperTram' ], ['sj', 'Sheffield SuperTram'],
[ 'tp', 'TransPennine Express' ], ['tp', 'TransPennine Express'],
[ 'vt', 'Avanti West Coast' ], ['vt', 'Avanti West Coast'],
[ 'gr', 'LNER' ], ['gr', 'LNER'],
[ 'wr', 'West Coast Railway' ], ['wr', 'West Coast Railway'],
[ 'ty', 'Vintage Trains' ], ['ty', 'Vintage Trains'],
[ 'ld', 'Lumo' ], ['ld', 'Lumo'],
[ 'so', 'Rail Adventure' ], ['so', 'Rail Adventure'],
[ 'ln', 'Grand Union Trains' ], ['ln', 'Grand Union Trains'],
[ 'zz', 'Freight/Charter Company' ], ['zz', 'Freight/Charter Company'],
[ 'wm', 'West Midlands Railway (WMT)' ], ['wm', 'West Midlands Railway (WMT)'],
[ 'uk', 'Unknown Operator' ] ['uk', 'Unknown Operator']
] ]);
)

View File

@ -1,185 +1,223 @@
<script lang="ts"> <script lang="ts">
export let toc: string export let toc: string;
export let full: boolean = false; export let full: boolean = false;
import { tocs as map } from "$lib/stores/tocMap"; import { tocs as map } from '$lib/stores/tocMap';
let text: string let text: string;
$: { $: {
if (full) { if (full) {
text = map.get(toc.toLowerCase()) || toc; text = map.get(toc.toLowerCase()) || toc;
} else { } else {
text = toc; text = toc;
}
} }
}
</script> </script>
<span class="{toc.toLocaleLowerCase()}">{text}</span> <span class={toc.toLocaleLowerCase()}>{text}</span>
<style> <style>
span { span {
padding: 4px; padding: 4px;
border-radius: 5px; border-radius: 5px;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
background-color: white; background-color: white;
color: black; color: black;
} }
.gw { /* GWR */ .gw {
background-color: #07352d; /* GWR */
color: white; background-color: #07352d;
border-color: #041d18; color: white;
} border-color: #041d18;
.sw, .il { /* SWR & Island Line */ }
background-color: rgb(17, 23, 23); .sw,
color: white; .il {
} /* SWR & Island Line */
.nt { /* Northern */ background-color: rgb(17, 23, 23);
background-color: rgb(38, 34, 98); color: white;
color: white; }
} .nt {
.aw { /* TfW */ /* Northern */
background-color: red; background-color: rgb(38, 34, 98);
color: white; color: white;
} }
.cc { /* c2c */ .aw {
background-color: rgb(168, 25, 127); /* TfW */
color: white; background-color: red;
} color: white;
.cs { /* Caledonian Sleeper */ }
background-color: #033c3c; .cc {
color: white; /* c2c */
} background-color: rgb(168, 25, 127);
.ch { /* Chiltern Railways */ color: white;
background-color: white; }
color: blue; .cs {
} /* Caledonian Sleeper */
.xc { /* CrossCountry */ background-color: #033c3c;
background-color: rgb(76, 18, 58); color: white;
color: white; }
} .ch {
.em { /* EMR */ /* Chiltern Railways */
background-color: rgb(69, 29, 69); background-color: white;
color: white; color: blue;
} }
.es { /* Eurostar */ .xc {
background-color: rgb(13, 13, 98); /* CrossCountry */
color: yellow; background-color: rgb(76, 18, 58);
} color: white;
.zz { /* Freight, Charters, etc */ }
background-color: rgba(255, 255, 255, 0); .em {
color: white; /* EMR */
} background-color: rgb(69, 29, 69);
.ht { /* Hull Trains */ color: white;
background-color: rgb(160, 0, 136); }
color: rgb(19, 19, 173); .es {
} /* Eurostar */
.gn { /* GTR Great Northern */ background-color: rgb(13, 13, 98);
background-color: rgb(79, 0, 128); color: yellow;
color: white; }
} .zz {
.tl { /* GTR Thameslink */ /* Freight, Charters, etc */
background-color: rgb(191, 25, 183); background-color: rgba(255, 255, 255, 0);
color: white; color: white;
} }
.gc { /* Grand Central */ .ht {
background-color: rgb(40, 40, 40); /* Hull Trains */
color: rgb(219, 123, 5); background-color: rgb(160, 0, 136);
} color: rgb(19, 19, 173);
.le, .ga { /*Greater Anglia */ }
background-color: rgb(122, 124, 154); .gn {
color: rgb(151, 0, 0); /* GTR Great Northern */
border-color: red; background-color: rgb(79, 0, 128);
} color: white;
.hx { /* Heathrow Express */ }
background-color: rgb(181, 142, 211); .tl {
color: black; /* GTR Thameslink */
} background-color: rgb(191, 25, 183);
.ls { /* Locomotive Services Limited */ color: white;
background-color: white; }
color: black; .gc {
} /* Grand Central */
.lm { /* West Midlands Railway */ background-color: rgb(40, 40, 40);
background-color: rgb(120, 120, 120); color: rgb(219, 123, 5);
border-color: rgb(230, 150, 0); }
color: white; .le,
} .ga {
.lo { /*London Overground */ /*Greater Anglia */
background-color: rgb(231, 150, 0); background-color: rgb(122, 124, 154);
color: rgb(0, 0, 210) color: rgb(151, 0, 0);
} border-color: red;
.lt { /* London Underground (when on Network Rail Metals) */ }
background-color: rgb(203, 17, 17); .hx {
color: rgb(0, 0, 210); /* Heathrow Express */
} background-color: rgb(181, 142, 211);
.me { /* Merseyrail */ color: black;
background-color: rgb(229, 229, 16); }
color: rgb(96, 96, 96); .ls {
} /* Locomotive Services Limited */
.lr { /* NR On-Track Machines */ background-color: white;
background-color: yellow; color: black;
color: black; }
} .lm {
.tw { /* Tyne & Wear Metro (when on Network Rail Metals) */ /* West Midlands Railway */
background-color: rgb(212, 169, 0); background-color: rgb(120, 120, 120);
color: black; border-color: rgb(230, 150, 0);
} color: white;
.sr { /* ScotRail */ }
background-color: rgb(16, 16, 200); .lo {
color: white; /*London Overground */
} background-color: rgb(231, 150, 0);
.sj { /* South Yorkshire (Sheffield) SuperTram (When on network rail metals) */ color: rgb(0, 0, 210);
background-color: rgb(255, 185, 56); }
color: rgb(58, 58, 255); .lt {
} /* London Underground (when on Network Rail Metals) */
.se { /* Southeastern */ background-color: rgb(203, 17, 17);
background-color: darkblue; color: rgb(0, 0, 210);
color: rgb(107, 152, 207); }
} .me {
.sn { /* GTR (Southern) */ /* Merseyrail */
background-color: rgb(11, 74, 11); background-color: rgb(229, 229, 16);
color: rgb(231, 231, 188); color: rgb(96, 96, 96);
} }
.xr { /* Elizabeth Line (EastWest CrossRail) */ .lr {
background-color: rgb(91, 0, 171); /* NR On-Track Machines */
color: rgb(207, 207, 255); background-color: yellow;
} color: black;
.tp { /* TransPennine Express */ }
background-color: rgb(197, 130, 238); .tw {
color: rgb(0, 98, 226) /* Tyne & Wear Metro (when on Network Rail Metals) */
} background-color: rgb(212, 169, 0);
.vt { /* Avanti West Coast */ color: black;
background-color: rgb(37, 37, 86); }
color: rgb(230, 96, 0); .sr {
} /* ScotRail */
.gr { /* LNER */ background-color: rgb(16, 16, 200);
background-color: rgb(202, 0, 0); color: white;
color: white; }
} .sj {
.wc { /* West Coast Railway (Spot Hire/Charter) */ /* South Yorkshire (Sheffield) SuperTram (When on network rail metals) */
background-color: maroon; background-color: rgb(255, 185, 56);
color: rgb(225, 190, 92); color: rgb(58, 58, 255);
} }
.ty { /* Vintage Trains (Tour Operator) */ .se {
background-color: green; /* Southeastern */
color: white; background-color: darkblue;
} color: rgb(107, 152, 207);
.ld { /* Lumo */ }
background-color: whitesmoke; .sn {
color: blue; /* GTR (Southern) */
} background-color: rgb(11, 74, 11);
.so { /* Rail Adventure */ color: rgb(231, 231, 188);
background-color: rgb(93, 93, 93); }
color: rgb(93, 195, 93) .xr {
} /* Elizabeth Line (EastWest CrossRail) */
.ln { /* Grand Union Trains */ background-color: rgb(91, 0, 171);
background-color: rgb(89, 89, 89); color: rgb(207, 207, 255);
color: white; }
} .tp {
.uk { /* TransPennine Express */
background-color: whitesmoke; background-color: rgb(197, 130, 238);
color: black; color: rgb(0, 98, 226);
} }
</style> .vt {
/* Avanti West Coast */
background-color: rgb(37, 37, 86);
color: rgb(230, 96, 0);
}
.gr {
/* LNER */
background-color: rgb(202, 0, 0);
color: white;
}
.wc {
/* West Coast Railway (Spot Hire/Charter) */
background-color: maroon;
color: rgb(225, 190, 92);
}
.ty {
/* Vintage Trains (Tour Operator) */
background-color: green;
color: white;
}
.ld {
/* Lumo */
background-color: whitesmoke;
color: blue;
}
.so {
/* Rail Adventure */
background-color: rgb(93, 93, 93);
color: rgb(93, 195, 93);
}
.ln {
/* Grand Union Trains */
background-color: rgb(89, 89, 89);
color: white;
}
.uk {
background-color: whitesmoke;
color: black;
}
</style>

View File

@ -34,7 +34,8 @@
<div class="container"> <div class="container">
<div class="container-header" on:click={expand} on:keypress={expand}> <div class="container-header" on:click={expand} on:keypress={expand}>
<span class="header" <span class="header"
><StylesToc toc={service?.operator || ''} /> {service?.stops[0]['publicDeparture'] || service?.stops[0]['wttDeparture']} ><StylesToc toc={service?.operator || ''} />
{service?.stops[0]['publicDeparture'] || service?.stops[0]['wttDeparture']}
{service?.stops[0]['tiploc']} to {service?.stops[service['stops'].length - 1]['tiploc']}</span {service?.stops[0]['tiploc']} to {service?.stops[service['stops'].length - 1]['tiploc']}</span
> >
<span id="container-arrow" class:isExpanded>V</span> <span id="container-arrow" class:isExpanded>V</span>

View File

@ -7,7 +7,10 @@
<svelte:head> <svelte:head>
<meta name="application-name" content="OwlBoard" /> <meta name="application-name" content="OwlBoard" />
<meta name="author" content="Frederick Boniface" /> <meta name="author" content="Frederick Boniface" />
<meta name="description" content="Get instant access to live train data, PIS codes, and location reference codes. Built by railway staff, for railway staff your fastest route to accurate information." /> <meta
name="description"
content="Get instant access to live train data, PIS codes, and location reference codes. Built by railway staff, for railway staff your fastest route to accurate information."
/>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#00b7b7" /> <meta name="theme-color" content="#00b7b7" />
<link rel="icon" href="/images/icon.svg" type="image/svg+xml" /> <link rel="icon" href="/images/icon.svg" type="image/svg+xml" />
@ -16,6 +19,6 @@
<title>OwlBoard</title> <title>OwlBoard</title>
</svelte:head> </svelte:head>
{#if dev} {#if dev}
<DevBanner /> <DevBanner />
{/if} {/if}
<slot /> <slot />

View File

@ -1,5 +1,6 @@
<script> <script>
import Header from '$lib/navigation/header.svelte'; import LogoutButton from '$lib/navigation/LogoutButton.svelte';
import Header from '$lib/navigation/header.svelte';
import Loading from '$lib/navigation/loading.svelte'; import Loading from '$lib/navigation/loading.svelte';
import Nav from '$lib/navigation/nav.svelte'; import Nav from '$lib/navigation/nav.svelte';
import { uuid } from '$lib/stores/uuid.js'; import { uuid } from '$lib/stores/uuid.js';
@ -45,6 +46,8 @@
{:else if data[0].domain != 'User not Found'} {:else if data[0].domain != 'User not Found'}
<p class="api_response">Registration Domain: {data[0]['domain']}</p> <p class="api_response">Registration Domain: {data[0]['domain']}</p>
<p class="api_response">Access Time: {data[0]['atime']}</p> <p class="api_response">Access Time: {data[0]['atime']}</p>
<LogoutButton />
<p>Clicking the logout button will delete your data from your browser. You will then be able to make a new account, your old account will remain inactive and be deleted after 90 days.</p>
{:else} {:else}
<p class="api_response">You are not registered, we don't have any data stored.</p> <p class="api_response">You are not registered, we don't have any data stored.</p>
{/if} {/if}

View File

@ -3,8 +3,8 @@
import Nav from '$lib/navigation/nav.svelte'; import Nav from '$lib/navigation/nav.svelte';
import Loading from '$lib/navigation/loading.svelte'; import Loading from '$lib/navigation/loading.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { uuid } from '$lib/stores/uuid.js'; import { checkAuth, logout } from '$lib/libauth';
import { checkAuth } from '$lib/libauth'; import LogoutButton from '$lib/navigation/LogoutButton.svelte';
const title = 'Register'; const title = 'Register';
@ -42,7 +42,7 @@
onMount(async () => { onMount(async () => {
const auth = await checkAuth(); const auth = await checkAuth();
if (auth.uuidPresent === false) { if (auth.uuidPresent === false) {
state = 'unreg'; state = 'unreg';
} else if (auth.uuidPresent === true) { } else if (auth.uuidPresent === true) {
state = 'reg'; state = 'reg';
} }
@ -50,54 +50,57 @@
}); });
</script> </script>
<Header {title} /> <Header {title} />
{#if isLoading}
<Loading /> <section class="content">
{:else} {#if isLoading}
{#if state == 'unreg'} <Loading />
<p>The staff version of OwlBoard offers several extra features:</p> {:else if state == 'unreg'}
<ul> <p>The staff version of OwlBoard offers several extra features:</p>
<li>Access the Train Finder</li>
<li>Access the PIS Finder</li>
<li>More detailed departure boards:</li>
<ul> <ul>
<li>Non-Passenger movements</li> <li>Access the Train Finder</li>
<li>Hidden platform numbers</li> <li>Access the PIS Finder</li>
<li>Display up to 25 services</li> <li>More detailed departure boards:</li>
<ul>
<li>Non-Passenger movements</li>
<li>Hidden platform numbers</li>
<li>Display up to 25 services</li>
</ul>
</ul> </ul>
</ul> <p>To register, you will need to enter a work email address to receive a confirmation email</p>
<p>To register, you will need to enter a work email address to receive a confirmation email</p> <form on:submit={request}>
<form on:submit={request}> <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
<input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br /> <label for="checkbox">
<label for="checkbox"> I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br /> <input id="checkbox" type="checkbox" required />
<input id="checkbox" type="checkbox" required /> </label><br />
</label><br /> <button type="submit">Submit</button>
<button type="submit">Submit</button> </form>
</form> {:else if state == 'sent'}
{:else if state == 'sent'} <p>An email has been sent, click the link in the email to activate your profile.</p>
<p>An email has been sent, click the link in the email to activate your profile.</p> <p>When you click the link, your authorisation key will be automatically be stored in your browser.</p>
<p>When you click the link, your authorisation key will be automatically be stored in your browser.</p> <p>If you use multiple browsers, you will only be logged in using the browser you open the link with.</p>
<p>If you use multiple browsers, you will only be logged in using the browser you open the link with.</p> <p>You will be able to register again using the same email address</p>
<p>You will be able to register again using the same email address</p> {:else if state == 'unauth'}
{:else if state == 'unauth'} <p>The email address you entered does not belong to an authorised business.</p>
<p>The email address you entered does not belong to an authorised business.</p> <p>If you think this is an error, you can report an issue by <a href="/more/report">reporting an issue</a>.</p>
<p>If you think this is an error, you can report an issue in the 'More' menu.</p> {:else if state == 'error'}
{:else if state == 'error'} <p>There was an error processing your request.</p>
<p>There was an error processing your request.</p> <p>Check that the email you entered was correct or try again later.</p>
<p>Check that the email you entered was correct or try again later.</p> {:else if state == 'reg'}
{:else if state == 'reg'} <p>
<p> You are already registered for OwlBoard. If you've recently logged out or updated, you may need to refresh this page to register as old data could still be stored in your
You are already registered for OwlBoard. If you've recently logged out or updated, you may need to refresh this page to register as old data could still be stored in your browser.
browser. </p>
</p> <LogoutButton />
{/if} {/if}
{/if} </section>
<Nav /> <Nav />
<style> <style>
.content {
margin-top: 30px;
}
p { p {
margin: 10px; margin: 10px;
} }

View File

@ -26,13 +26,13 @@
<a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank">Web-app version<br /><span class="data">{version}-{versionTag}</span></a> <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank">Web-app version<br /><span class="data">{version}-{versionTag}</span></a>
</p> </p>
<p> <p>
<a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || "Unknown"}</span></a> <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>
</p> </p>
<p> <p>
<a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a> <a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a>
</p> </p>
<p> <p>
<a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a> <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
</p> </p>
</Island> </Island>
{:catch} {:catch}

View File

@ -13,4 +13,4 @@ const config = {
} }
}; };
export default config; export default config;

View File

@ -1,18 +1,18 @@
{ {
"extends": "./.svelte-kit/tsconfig.json", "extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"allowJs": true, "allowJs": true,
"checkJs": true, "checkJs": true,
"esModuleInterop": true, "esModuleInterop": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"outDir": "./dist" "outDir": "./dist"
} }
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// //
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in // from the referenced tsconfig.json - TypeScript does not merge them in
} }