From bc6fd6cdc94e7c3e54d0c0dd902207054b9ca902 Mon Sep 17 00:00:00 2001 From: Fred Boniface Date: Thu, 24 Aug 2023 20:24:28 +0100 Subject: [PATCH] Closes issue: https://git.fjla.uk/OwlBoard/backend/issues/39 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. --- .eslintrc.cjs | 52 ++- README.md | 6 +- src/lib/DevBanner.svelte | 30 +- src/lib/islands/result-island.svelte | 10 +- src/lib/ldb/staff/staff-ldb-dev.svelte | 6 +- .../staff/table/table-generator_dev.svelte | 154 ++++--- src/lib/ldb/staff/train-detail.svelte | 2 +- src/lib/libauth.ts | 122 +++--- src/lib/navigation/LogoutButton.svelte | 24 ++ src/lib/navigation/loading-text.svelte | 19 +- src/lib/overlays/welcome.svelte | 2 +- src/lib/stores/tocMap.ts | 85 ++-- src/lib/train/styles-toc.svelte | 390 ++++++++++-------- src/lib/train/train-detail.svelte | 3 +- src/routes/+layout.svelte | 7 +- src/routes/more/data/+page.svelte | 5 +- src/routes/more/reg/+page.svelte | 93 +++-- src/routes/more/versions/+page.svelte | 4 +- svelte.config.js | 2 +- tsconfig.json | 32 +- 20 files changed, 572 insertions(+), 476 deletions(-) create mode 100644 src/lib/navigation/LogoutButton.svelte diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ca8e6d1..7f883f5 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,31 +1,25 @@ module.exports = { - root: true, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:svelte/recommended', - 'prettier' - ], - parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint'], - parserOptions: { - sourceType: 'module', - ecmaVersion: 2020, - extraFileExtensions: ['.svelte'] - }, - env: { - browser: true, - es2017: true, - node: true - }, - overrides: [ - { - files: ['*.svelte'], - parser: 'svelte-eslint-parser', - parserOptions: { - parser: '@typescript-eslint/parser' - } - } - ] + root: true, + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint'], + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020, + extraFileExtensions: ['.svelte'] + }, + env: { + browser: true, + es2017: true, + node: true + }, + overrides: [ + { + files: ['*.svelte'], + parser: 'svelte-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser' + } + } + ] }; - diff --git a/README.md b/README.md index 35bfa4d..09c15c2 100644 --- a/README.md +++ b/README.md @@ -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. -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 -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. ## TypeScript -Any new code added to the website should be written in TypeScript - where Javascript is extended, it should be re-written into TypeScript. \ No newline at end of file +Any new code added to the website should be written in TypeScript - where Javascript is extended, it should be re-written into TypeScript. diff --git a/src/lib/DevBanner.svelte b/src/lib/DevBanner.svelte index 4b6dda1..f69414e 100644 --- a/src/lib/DevBanner.svelte +++ b/src/lib/DevBanner.svelte @@ -1,19 +1,19 @@ diff --git a/src/lib/islands/result-island.svelte b/src/lib/islands/result-island.svelte index c2cbf0c..6e1e2fe 100644 --- a/src/lib/islands/result-island.svelte +++ b/src/lib/islands/result-island.svelte @@ -1,12 +1,12 @@ @@ -83,39 +105,43 @@ Departure {#each services as service} - detail(event, service.rid, service.uid, service.trainid)} - on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)} - > + detail(event, service.rid, service.uid, service.trainid)} + on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)} + > {#await classGenerator(service) then classes} {service.trainid} {#await formatLocations(service.origin) then txt}{txt}{/await} {#await formatLocations(service.destination) then txt}{txt}{/await} {service.platform || '-'} - {service.sta || '-'} - {service.eta || service.ata || '-'} - {service.std || '-'} - {service.etd || service.atd || '-'} + {service.sta || '-'} + + {service.eta || service.ata || '-'} + + {service.std || '-'} + + {service.etd || service.atd || '-'} + {/await} - - - - {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode} - {#if service.length} | {service.length} carriages{/if} - {#if service.delayReason} -
- - {/if} - {#if service.cancelReason} -
- - {/if} - - - - Unable to display service - + + + + {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode} + {#if service.length} | {service.length} carriages{/if} + {#if service.delayReason} +
+ + {/if} + {#if service.cancelReason} +
+ + {/if} + + + + Unable to display service + {/each} diff --git a/src/lib/ldb/staff/train-detail.svelte b/src/lib/ldb/staff/train-detail.svelte index eb31e49..139f7cc 100644 --- a/src/lib/ldb/staff/train-detail.svelte +++ b/src/lib/ldb/staff/train-detail.svelte @@ -103,7 +103,7 @@
{detail.headcode}

Loading Data...

{:then train} -
{detail.headcode}
+
{detail.headcode}

Locations in grey are not scheduled stops
diff --git a/src/lib/libauth.ts b/src/lib/libauth.ts index a832842..7d245bc 100644 --- a/src/lib/libauth.ts +++ b/src/lib/libauth.ts @@ -1,72 +1,76 @@ -import { uuid } from "./stores/uuid" +import { uuid } from './stores/uuid'; export interface libauthResponse { - uuidPresent?: boolean; - serverAuthCheck?: boolean; - uuidValue?: string; - serverAuthCheckResponseCode?: number; + uuidPresent?: boolean; + serverAuthCheck?: boolean; + uuidValue?: string; + serverAuthCheckResponseCode?: number; } interface uuidCheckRes { - uuidValue?: string; - uuidPresent?: boolean; + uuidValue?: string; + uuidPresent?: boolean; } export async function checkAuth(): Promise { - let result: libauthResponse = {}; - const uuidCheck = await checkUuid(); - result.uuidPresent = uuidCheck?.uuidPresent; - result.uuidValue = uuidCheck?.uuidValue; - - const serverCheck = await checkServerAuth(); - result.serverAuthCheck = serverCheck.authOk; - result.serverAuthCheckResponseCode = serverCheck.status; + let result: libauthResponse = {}; + const uuidCheck = await checkUuid(); + result.uuidPresent = uuidCheck?.uuidPresent; + result.uuidValue = uuidCheck?.uuidValue; - return result + const serverCheck = await checkServerAuth(result.uuidValue || ''); + result.serverAuthCheck = serverCheck.authOk; + result.serverAuthCheckResponseCode = serverCheck.status; + + return result; } -export async function checkUuid(): Promise { - let uuid_value: string = ''; - const unsubscribe = uuid.subscribe(value => { - uuid_value = value; - }); - let res: uuidCheckRes = { - uuidValue: uuid_value - } - console.log("uuid-value is: ", uuid_value) - if (uuid_value && uuid_value != 'null') { - res = { - uuidPresent: true, - 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, - } +async function checkUuid(): Promise { + let uuid_value: string = ''; + const unsubscribe = uuid.subscribe((value) => { + uuid_value = value; + }); + let res: uuidCheckRes = { + uuidValue: uuid_value + }; + console.log('uuid-value is: ', uuid_value); + if (uuid_value && uuid_value != 'null') { + res = { + uuidPresent: true, + uuidValue: uuid_value }; - const res = await fetch(url, options) - let ok: boolean; - if (res.status !== 401) { - ok = true; - } else { - ok = false; + } else { + res = { + uuidPresent: false, + uuidValue: uuid_value + }; + } + 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, - status: res.status, - } -} \ No newline at end of file + }; + const res = await fetch(url, options); + let ok: boolean; + if (res.status !== 401) { + ok = true; + } else { + ok = false; + } + return { + authOk: ok, + status: res.status + }; +} + +export async function logout(): Promise { + uuid.set(null); + return true; +} diff --git a/src/lib/navigation/LogoutButton.svelte b/src/lib/navigation/LogoutButton.svelte new file mode 100644 index 0000000..83ecb2b --- /dev/null +++ b/src/lib/navigation/LogoutButton.svelte @@ -0,0 +1,24 @@ + + + + + diff --git a/src/lib/navigation/loading-text.svelte b/src/lib/navigation/loading-text.svelte index e17bf76..8641412 100644 --- a/src/lib/navigation/loading-text.svelte +++ b/src/lib/navigation/loading-text.svelte @@ -1,15 +1,16 @@

Loading...

+ \ No newline at end of file + diff --git a/src/lib/overlays/welcome.svelte b/src/lib/overlays/welcome.svelte index b01b440..95e0696 100644 --- a/src/lib/overlays/welcome.svelte +++ b/src/lib/overlays/welcome.svelte @@ -21,7 +21,7 @@ const pageText: string[] = [ '

Sign-up Fixed

' + - "

An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.

" + + '

An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.

' + '

This issue has now been fixed and new users will be able to register for Rail Staff Access

', '

Always Improving

' + '

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.

' diff --git a/src/lib/stores/tocMap.ts b/src/lib/stores/tocMap.ts index 1f5d619..ebdbc29 100644 --- a/src/lib/stores/tocMap.ts +++ b/src/lib/stores/tocMap.ts @@ -1,44 +1,43 @@ export const tocs = new Map([ - [ 'gw', 'Great Western Railway' ], - [ 'sw', 'South Western Railway' ], - [ 'id', 'Island Line' ], - [ 'nt', 'Northern' ], - [ 'aw', 'Transport for Wales' ], - [ 'cc', 'c2c' ], - [ 'cs', 'Caledonian Sleeper' ], - [ 'ch', 'Chiltern Railways' ], - [ 'xc', 'CrossCountry' ], - [ 'em', 'East Midlands Railway' ], - [ 'es', 'Eurostar' ], - [ 'ht', 'Hull Trains' ], - [ 'tl', 'Thameslink' ], - [ 'gc', 'Grand Central' ], - [ 'gx', 'Gatwick Express' ], - [ 'hx', 'Heathrow Express' ], - [ 'ls', 'Locomotive Services Limited' ], - [ 'me', 'Merseyrail' ], - [ 'lr', 'Network Rail OTM' ], - [ 'xr', 'TfL Elizabeth Line' ], - [ 'se', 'Southeastern' ], - [ 'sn', 'Southern' ], - [ 'le', 'Greater Anglia' ], - [ 'ga', 'Greater Anglia' ], - [ 'lm', 'West Midlands Railway' ], - [ 'sr', 'ScotRail' ], - [ 'gn', 'Great Northern' ], - [ 'lt', 'TfL London Underground' ], - [ 'lo', 'TfL London Overground' ], - [ 'sj', 'Sheffield SuperTram' ], - [ 'tp', 'TransPennine Express' ], - [ 'vt', 'Avanti West Coast' ], - [ 'gr', 'LNER' ], - [ 'wr', 'West Coast Railway' ], - [ 'ty', 'Vintage Trains' ], - [ 'ld', 'Lumo' ], - [ 'so', 'Rail Adventure' ], - [ 'ln', 'Grand Union Trains' ], - [ 'zz', 'Freight/Charter Company' ], - [ 'wm', 'West Midlands Railway (WMT)' ], - [ 'uk', 'Unknown Operator' ] -] -) \ No newline at end of file + ['gw', 'Great Western Railway'], + ['sw', 'South Western Railway'], + ['id', 'Island Line'], + ['nt', 'Northern'], + ['aw', 'Transport for Wales'], + ['cc', 'c2c'], + ['cs', 'Caledonian Sleeper'], + ['ch', 'Chiltern Railways'], + ['xc', 'CrossCountry'], + ['em', 'East Midlands Railway'], + ['es', 'Eurostar'], + ['ht', 'Hull Trains'], + ['tl', 'Thameslink'], + ['gc', 'Grand Central'], + ['gx', 'Gatwick Express'], + ['hx', 'Heathrow Express'], + ['ls', 'Locomotive Services Limited'], + ['me', 'Merseyrail'], + ['lr', 'Network Rail OTM'], + ['xr', 'TfL Elizabeth Line'], + ['se', 'Southeastern'], + ['sn', 'Southern'], + ['le', 'Greater Anglia'], + ['ga', 'Greater Anglia'], + ['lm', 'West Midlands Railway'], + ['sr', 'ScotRail'], + ['gn', 'Great Northern'], + ['lt', 'TfL London Underground'], + ['lo', 'TfL London Overground'], + ['sj', 'Sheffield SuperTram'], + ['tp', 'TransPennine Express'], + ['vt', 'Avanti West Coast'], + ['gr', 'LNER'], + ['wr', 'West Coast Railway'], + ['ty', 'Vintage Trains'], + ['ld', 'Lumo'], + ['so', 'Rail Adventure'], + ['ln', 'Grand Union Trains'], + ['zz', 'Freight/Charter Company'], + ['wm', 'West Midlands Railway (WMT)'], + ['uk', 'Unknown Operator'] +]); diff --git a/src/lib/train/styles-toc.svelte b/src/lib/train/styles-toc.svelte index b06845d..db37f7f 100644 --- a/src/lib/train/styles-toc.svelte +++ b/src/lib/train/styles-toc.svelte @@ -1,185 +1,223 @@ -{text} +{text} \ No newline at end of file + span { + padding: 4px; + border-radius: 5px; + border-style: solid; + border-width: 1px; + background-color: white; + color: black; + } + .gw { + /* GWR */ + background-color: #07352d; + color: white; + border-color: #041d18; + } + .sw, + .il { + /* SWR & Island Line */ + background-color: rgb(17, 23, 23); + color: white; + } + .nt { + /* Northern */ + background-color: rgb(38, 34, 98); + color: white; + } + .aw { + /* TfW */ + background-color: red; + color: white; + } + .cc { + /* c2c */ + background-color: rgb(168, 25, 127); + color: white; + } + .cs { + /* Caledonian Sleeper */ + background-color: #033c3c; + color: white; + } + .ch { + /* Chiltern Railways */ + background-color: white; + color: blue; + } + .xc { + /* CrossCountry */ + background-color: rgb(76, 18, 58); + color: white; + } + .em { + /* EMR */ + background-color: rgb(69, 29, 69); + color: white; + } + .es { + /* Eurostar */ + background-color: rgb(13, 13, 98); + color: yellow; + } + .zz { + /* Freight, Charters, etc */ + background-color: rgba(255, 255, 255, 0); + color: white; + } + .ht { + /* Hull Trains */ + background-color: rgb(160, 0, 136); + color: rgb(19, 19, 173); + } + .gn { + /* GTR Great Northern */ + background-color: rgb(79, 0, 128); + color: white; + } + .tl { + /* GTR Thameslink */ + background-color: rgb(191, 25, 183); + color: white; + } + .gc { + /* Grand Central */ + background-color: rgb(40, 40, 40); + color: rgb(219, 123, 5); + } + .le, + .ga { + /*Greater Anglia */ + background-color: rgb(122, 124, 154); + color: rgb(151, 0, 0); + border-color: red; + } + .hx { + /* Heathrow Express */ + background-color: rgb(181, 142, 211); + color: black; + } + .ls { + /* Locomotive Services Limited */ + background-color: white; + color: black; + } + .lm { + /* West Midlands Railway */ + background-color: rgb(120, 120, 120); + border-color: rgb(230, 150, 0); + color: white; + } + .lo { + /*London Overground */ + background-color: rgb(231, 150, 0); + color: rgb(0, 0, 210); + } + .lt { + /* London Underground (when on Network Rail Metals) */ + background-color: rgb(203, 17, 17); + color: rgb(0, 0, 210); + } + .me { + /* Merseyrail */ + background-color: rgb(229, 229, 16); + color: rgb(96, 96, 96); + } + .lr { + /* NR On-Track Machines */ + background-color: yellow; + color: black; + } + .tw { + /* Tyne & Wear Metro (when on Network Rail Metals) */ + background-color: rgb(212, 169, 0); + color: black; + } + .sr { + /* ScotRail */ + background-color: rgb(16, 16, 200); + color: white; + } + .sj { + /* South Yorkshire (Sheffield) SuperTram (When on network rail metals) */ + background-color: rgb(255, 185, 56); + color: rgb(58, 58, 255); + } + .se { + /* Southeastern */ + background-color: darkblue; + color: rgb(107, 152, 207); + } + .sn { + /* GTR (Southern) */ + background-color: rgb(11, 74, 11); + color: rgb(231, 231, 188); + } + .xr { + /* Elizabeth Line (EastWest CrossRail) */ + background-color: rgb(91, 0, 171); + color: rgb(207, 207, 255); + } + .tp { + /* TransPennine Express */ + background-color: rgb(197, 130, 238); + color: rgb(0, 98, 226); + } + .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; + } + diff --git a/src/lib/train/train-detail.svelte b/src/lib/train/train-detail.svelte index 6434e87..4a585db 100644 --- a/src/lib/train/train-detail.svelte +++ b/src/lib/train/train-detail.svelte @@ -34,7 +34,8 @@
{service?.stops[0]['publicDeparture'] || service?.stops[0]['wttDeparture']} + > + {service?.stops[0]['publicDeparture'] || service?.stops[0]['wttDeparture']} {service?.stops[0]['tiploc']} to {service?.stops[service['stops'].length - 1]['tiploc']} V diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 81f759d..f83a67a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,7 +7,10 @@ - + @@ -16,6 +19,6 @@ OwlBoard {#if dev} - + {/if} diff --git a/src/routes/more/data/+page.svelte b/src/routes/more/data/+page.svelte index 565d913..f5438d6 100644 --- a/src/routes/more/data/+page.svelte +++ b/src/routes/more/data/+page.svelte @@ -1,5 +1,6 @@ - -
-{#if isLoading} - -{:else} -{#if state == 'unreg'} -

The staff version of OwlBoard offers several extra features:

-
    -
  • Access the Train Finder
    • -
  • Access the PIS Finder
    • -
  • More detailed departure boards:
    • + +
    + {#if isLoading} + + {:else if state == 'unreg'} +

    The staff version of OwlBoard offers several extra features:

      -
    • Non-Passenger movements
      • -
    • Hidden platform numbers
      • -
    • Display up to 25 services
      • +
    • Access the Train Finder
      • +
    • Access the PIS Finder
      • +
    • More detailed departure boards:
      • +
        +
      • Non-Passenger movements
        • +
      • Hidden platform numbers
        • +
      • Display up to 25 services
        • +
    -
-

To register, you will need to enter a work email address to receive a confirmation email

-
-
-
- -
-{:else if state == 'sent'} -

An email has been sent, click the link in the email to activate your profile.

-

When you click the link, your authorisation key will be automatically be stored in your browser.

-

If you use multiple browsers, you will only be logged in using the browser you open the link with.

-

You will be able to register again using the same email address

-{:else if state == 'unauth'} -

The email address you entered does not belong to an authorised business.

-

If you think this is an error, you can report an issue in the 'More' menu.

-{:else if state == 'error'} -

There was an error processing your request.

-

Check that the email you entered was correct or try again later.

-{:else if state == 'reg'} -

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

-{/if} -{/if} +

To register, you will need to enter a work email address to receive a confirmation email

+
+
+
+ +
+ {:else if state == 'sent'} +

An email has been sent, click the link in the email to activate your profile.

+

When you click the link, your authorisation key will be automatically be stored in your browser.

+

If you use multiple browsers, you will only be logged in using the browser you open the link with.

+

You will be able to register again using the same email address

+ {:else if state == 'unauth'} +

The email address you entered does not belong to an authorised business.

+

If you think this is an error, you can report an issue by reporting an issue.

+ {:else if state == 'error'} +

There was an error processing your request.

+

Check that the email you entered was correct or try again later.

+ {:else if state == 'reg'} +

+ 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. +

+ + {/if} +