Add per-toc styling to Timetable and train detail

src/lib/ldb/staff/train-detail.svelte

@@ -3,6 +3,7 @@
   import { fade } from 'svelte/transition';
   import Reason from '$lib/raw-fetchers/reason.svelte';
   import { uuid } from '$lib/stores/uuid';
+  import StylesToc from '$lib/train/styles-toc.svelte';
   export let detail = {
     uid: '',
     rid: '',
@@ -102,7 +103,7 @@
       <h6>{detail.headcode}</h6>
       <p in:fade id="loading">Loading Data...</p>
     {:then train}
-      <h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
+      <h6><StylesToc toc={train.GetServiceDetailsResult.operatorCode} full={true}/>    {detail.headcode}</h6>
       <p>
         Locations in grey are not scheduled stops
         <br />

src/lib/stores/tocMap.js

@@ -0,0 +1,40 @@
+const tocMap = {
+  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',
+  hx: 'Heathrow Express',
+  ls: 'Locomotive Services Limited',
+  me: 'Merseyrail',
+  lr: 'Network Rail OTM',
+  xr: 'TfL Elizabeth Line',
+  se: 'SouthEastern',
+  sn: 'Southern',
+  le: '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',
+  wc: 'West Coast Railway',
+  ty: 'Vintage Trains',
+  ld: 'Lumo',
+  so: 'Rail Adventure',
+  ln: 'Grand Union Trains'
+};
+
+export default tocMap;

src/lib/train/styles-toc.svelte

@@ -0,0 +1,178 @@
+<script>
+    import tocMap from "$lib/stores/tocMap";
+    export let toc = ""
+    export let full = false;
+
+    let text = ""
+
+    $: {
+        if (full) {
+            text = tocMap[toc.toLowerCase()] || toc;
+        } else {
+            text = toc;
+        }
+    }
+
+</script>
+
+<span class="{toc.toLocaleLowerCase()}">{text}</span>
+
+<style>
+    span {
+        padding: 4px;
+        border-radius: 5px;
+        border-style: solid;
+        border-width: 1px;
+    }
+    .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 { /*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;
+    }
+</style>

src/lib/train/train-detail.svelte

@@ -2,6 +2,7 @@
   import { fly } from 'svelte/transition';
   import { uuid } from '$lib/stores/uuid';
   import LoadingText from '$lib/navigation/loading-text.svelte';
+  import StylesToc from './styles-toc.svelte';
 
   export let service = '';
 
@@ -33,7 +34,7 @@
 <div class="container">
   <div class="container-header" on:click={expand} on:keypress={expand}>
     <span class="header"
-      >{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>
@@ -43,6 +44,7 @@
       {#await getTrainByUID(service.trainUid)}
         <LoadingText />
       {:then serviceDetail}
+        <div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
         {#if serviceDetail.pis}
           <p class="pis">PIS: {serviceDetail.pis}</p>
         {/if}
@@ -123,13 +125,18 @@
     padding: 0;
     position: absolute;
     right: 16px;
-    top: 13px;
+    top: 10px;
     transition-duration: 300ms;
     z-index: 2;
   }
   .isExpanded {
     transform: rotate(180deg);
   }
+  .detailOperator {
+    padding-top: 15px;
+    margin-bottom: 15px;
+    font-weight: 600;
+  }
   .pis {
     font-size: 18px;
     font-weight: 600;