Add per-toc styling to Timetable and train detail
This commit is contained in:
parent
2bbe81922c
commit
93db6c33b1
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue