Closes issue: OwlBoard/backend#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.
2023-08-24 20:24:28 +01:00
parent 4cd8a496b8
commit bc6fd6cdc9
20 changed files with 572 additions and 476 deletions
--- a/src/lib/DevBanner.svelte
+++ b/src/lib/DevBanner.svelte
@@ -1,19 +1,19 @@
 <div id="banner">DEVMODE</div>

 <style>
-    #banner {
-        width: 200px;
-        background: red;
-        color: #fff;
-        position: fixed;
-        text-align: center;
-        top: 25px;
-        line-height: 40px;
-        right: -50px;
-        left: auto;
-        -ms-transform: rotate(45deg);
-        -webkit-transform: rotate(45deg);
-        transform: rotate(45deg);
-        z-index: 100;
-    }
+  #banner {
+    width: 200px;
+    background: red;
+    color: #fff;
+    position: fixed;
+    text-align: center;
+    top: 25px;
+    line-height: 40px;
+    right: -50px;
+    left: auto;
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    z-index: 100;
+  }
 </style>
--- a/src/lib/islands/result-island.svelte
+++ b/src/lib/islands/result-island.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
  import Island from '$lib/islands/island.svelte';
-  
+
  interface resultObj {
-    results: boolean,
-    title: string,
-    resultLines: string[]
+    results: boolean;
+    title: string;
+    resultLines: string[];
  }
-  
+
  export let resultObject: resultObj = {
    results: true,
    title: '',
--- a/src/lib/ldb/staff/staff-ldb-dev.svelte
+++ b/src/lib/ldb/staff/staff-ldb-dev.svelte
@@ -9,7 +9,7 @@
  import Island from '$lib/islands/island.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';

@@ -22,9 +22,9 @@

  $: {
    if (isLoading) {
-      title = "Loading..."
+      title = 'Loading...';
    } else {
-      title = station
+      title = station;
    }
  }

--- a/src/lib/ldb/staff/table/table-generator_dev.svelte
+++ b/src/lib/ldb/staff/table/table-generator_dev.svelte
@@ -13,55 +13,77 @@
  }

  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
-    let tiplocs: string[] = []
+    let tiplocs: string[] = [];
    for (const location of locations) {
-      tiplocs.push(location.tiploc)
+      tiplocs.push(location.tiploc);
    }
-    return tiplocs.join(' & ')
+    return tiplocs.join(' & ');
  }

  async function classGenerator(service: TrainServices) {
-    let otherArr: string[] = []
-    let arrArr: string[] = []
-    let depArr: string[] = []
-    let platArr: string[] = []
+    let otherArr: string[] = [];
+    let arrArr: string[] = [];
+    let depArr: 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.eta !== undefined) {
-      if (service.sta < service.eta) { 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('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.etd !== undefined) {
-      if (service.std < service.etd) { depArr.push("late"); }
-    } else if (service.atd !== undefined) {
-      if (service.std < service.atd) { depArr.push("late"); }
+    if (service.std !== undefined) {
+      if (service.etd !== undefined) {
+        if (service.std < service.etd) {
+          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 {
-      other: otherArr.join(" "),
-      arr: arrArr.join(" "),
-      dep: depArr.join(" "),
-      plat: platArr.join(" "),
-    }
+      other: otherArr.join(' '),
+      arr: arrArr.join(' '),
+      dep: depArr.join(' '),
+      plat: platArr.join(' ')
+    };
  }
 </script>

@@ -83,39 +105,43 @@
    <th class="timepair" colspan="2">Departure</th>
  </tr>
  {#each services as service}
-      <tr
-        class="dataRow"
-        on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
-        on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
-      >
+    <tr
+      class="dataRow"
+      on:click={(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}
        <td class="id {classes.other}">{service.trainid}</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="plat">{service.platform || '-'}</td>
-        <td class="time schTime {classes.other}">{service.sta || '-'}</td>                      <!-- All time need to be displayed appropriately -->
-        <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td> <!-- 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 -->
+        <td class="time schTime {classes.other}">{service.sta || '-'}</td>
+        <!-- All time need to be displayed appropriately -->
+        <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
+        <!-- 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}
-      </tr>
-      <tr>
-        <td class="tableTxt" colspan="8">
-          {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
-          {#if service.length} | {service.length} carriages{/if}
-          {#if service.delayReason}
-            <br />
-            <Reason type={'delay'} code={service.delayReason} />
-          {/if}
-          {#if service.cancelReason}
-            <br />
-            <Reason type={'cancel'} code={service.cancelReason} />
-          {/if}
-        </td>
-      </tr>
-      <tr>
-        <td colspan="8">Unable to display service</td>
-      </tr>
+    </tr>
+    <tr>
+      <td class="tableTxt" colspan="8">
+        {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
+        {#if service.length} | {service.length} carriages{/if}
+        {#if service.delayReason}
+          <br />
+          <Reason type={'delay'} code={service.delayReason} />
+        {/if}
+        {#if service.cancelReason}
+          <br />
+          <Reason type={'cancel'} code={service.cancelReason} />
+        {/if}
+      </td>
+    </tr>
+    <tr>
+      <td colspan="8">Unable to display service</td>
+    </tr>
  {/each}
 </table>

--- a/src/lib/ldb/staff/train-detail.svelte
+++ b/src/lib/ldb/staff/train-detail.svelte
@@ -103,7 +103,7 @@
      <h6>{detail.headcode}</h6>
      <p in:fade id="loading">Loading Data...</p>
    {: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>
        Locations in grey are not scheduled stops
        <br />
--- 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<libauthResponse> {
-    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<uuidCheckRes> {
-    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<uuidCheckRes> {
+  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,
-    }
-}
+  };
+  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<boolean> {
+  uuid.set(null);
+  return true;
+}
--- a/src/lib/navigation/LogoutButton.svelte
+++ b/src/lib/navigation/LogoutButton.svelte
@@ -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>
--- a/src/lib/navigation/loading-text.svelte
+++ b/src/lib/navigation/loading-text.svelte
@@ -1,15 +1,16 @@
 <p id="load">Loading...</p>
+
 <style>
-    #load {
-        margin-top: 5px;
-        font-size: 18px;
-        font-weight: 600;
-        color: white;
-        animation: pulse-loading 2.5s linear infinite;
-    }
-      @keyframes pulse-loading {
+  #load {
+    margin-top: 5px;
+    font-size: 18px;
+    font-weight: 600;
+    color: white;
+    animation: pulse-loading 2.5s linear infinite;
+  }
+  @keyframes pulse-loading {
    50% {
      color: rgb(136, 164, 255);
    }
  }
-</style>
+</style>
--- a/src/lib/overlays/welcome.svelte
+++ b/src/lib/overlays/welcome.svelte
@@ -21,7 +21,7 @@

  const pageText: string[] = [
    '<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>',
    '<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>'
--- a/src/lib/stores/tocMap.ts
+++ b/src/lib/stores/tocMap.ts
@@ -1,44 +1,43 @@
 export const tocs = new Map<string, string>([
-  [ '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' ]
-]
-)
+  ['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']
+]);
--- a/src/lib/train/styles-toc.svelte
+++ b/src/lib/train/styles-toc.svelte
@@ -1,185 +1,223 @@
 <script lang="ts">
-    export let toc: string
-    export let full: boolean = false;
+  export let toc: string;
+  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) {
-            text = map.get(toc.toLowerCase()) || toc;
-        } else {
-            text = toc;
-        }
+  $: {
+    if (full) {
+      text = map.get(toc.toLowerCase()) || toc;
+    } else {
+      text = toc;
    }
-
+  }
 </script>

-<span class="{toc.toLocaleLowerCase()}">{text}</span>
+<span class={toc.toLocaleLowerCase()}>{text}</span>

 <style>
-    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;
-    }
-</style>
+  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;
+  }
+</style>
--- a/src/lib/train/train-detail.svelte
+++ b/src/lib/train/train-detail.svelte
@@ -34,7 +34,8 @@
 <div class="container">
  <div class="container-header" on:click={expand} on:keypress={expand}>
    <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
    >
    <span id="container-arrow" class:isExpanded>V</span>