Adjust train detail dtop box to space out PIS details

This commit is contained in:
Fred Boniface 2024-02-05 21:07:56 +00:00
parent b9f5f3dc1d
commit 9cd082193b
3 changed files with 50 additions and 22 deletions

View File

@ -1,9 +1,12 @@
import { dev } from '$app/environment'; import { dev } from '$app/environment';
const testUrl: string = 'http://localhost:8460'
const prodUrl: string = 'https://owlboard.info'
export function getApiUrl() { export function getApiUrl() {
if (dev) { if (dev) {
console.info('DEVMODE active, using testing URL'); console.info('DEVMODE active, using testing URL: ', testUrl);
return 'http://localhost:8460'; return testUrl;
} }
return 'https://owlboard.info'; return prodUrl;
} }

View File

@ -6,10 +6,26 @@
{#if pisObject} {#if pisObject}
{#if typeof pisObject === 'string' || typeof pisObject === 'number'} {#if typeof pisObject === 'string' || typeof pisObject === 'number'}
{pisObject} <span class="pis">PIS: {pisObject}</span>
{:else if pisObject['skipCount'] === 0} {:else if pisObject['skipCount'] === 0}
{pisObject.code} <span class="pis">PIS: {pisObject.code}</span>
{:else if pisObject['skipCount'] > 0} {:else if pisObject['skipCount'] > 0}
{pisObject.code} - (Skip first {pisObject.skipType}{#if pisObject.skipCount > 1} {pisObject.skipCount} stops{:else} stop{/if}) <span class="pis">PIS: {pisObject.code}</span>
<br>
<span class="pis-text">(skip first {pisObject.skipType}{#if pisObject.skipCount > 1} {pisObject.skipCount} stops{:else} stop{/if})</span>
{/if} {/if}
{/if} {/if}
<style>
.pis-text {
font-size: 14px;
font-weight: 600;
color: var(--main-text-color);
}
.pis {
font-size: 18px;
font-weight: 600;
color: var(--main-text-color);
}
</style>

View File

@ -31,14 +31,12 @@
} }
</script> </script>
<!-- The next version of backend will only return a subset of information required to display the container-header
, the container will then be responsible for fetching more data using the trainUid. -->
<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 || ''} /> ><StylesToc toc={service?.operator || ''} />
{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']}{#if service?.vstp}VSTP{/if}</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>
</div> </div>
@ -48,12 +46,15 @@
<LoadingText /> <LoadingText />
{:then serviceDetail} {:then serviceDetail}
{#if serviceDetail.stpIndicator === 'C'} {#if serviceDetail.stpIndicator === 'C'}
This has been removed from the timetable for today<br /> <p class="text-message">This has been removed from the timetable for today.<br /><br>
It is likely another service is running in its place The service will not run, another service may be running in its place.</p>
{:else} {:else}
{#if serviceDetail.vstp}
<div class="vstp">VSTP</div>
{/if}
<div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div> <div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
{#if serviceDetail.pis} {#if serviceDetail.pis}
<p class="pis">PIS: <PisHandler pisObject={serviceDetail.pis} /></p> <PisHandler pisObject={serviceDetail.pis} />
{/if} {/if}
<p class="svc-detail"> <p class="svc-detail">
Planned Type: {parseInt(serviceDetail.planSpeed) || '--'}mph {serviceDetail.powerType || 'Non-Rail vehicle'} Planned Type: {parseInt(serviceDetail.planSpeed) || '--'}mph {serviceDetail.powerType || 'Non-Rail vehicle'}
@ -62,9 +63,9 @@
Days Run: {serviceDetail?.daysRun.join(', ').toUpperCase() || 'Unknown'} Days Run: {serviceDetail?.daysRun.join(', ').toUpperCase() || 'Unknown'}
</p> </p>
<p class="svc-detail validity"> <p class="svc-detail validity">
Valid From: {new Date(serviceDetail.scheduleStartDate).toLocaleDateString('en-GB', { Valid From: {new Date(serviceDetail.scheduleStart).toLocaleDateString('en-GB', {
timeZone: 'UTC' timeZone: 'UTC'
})} - {new Date(serviceDetail.scheduleEndDate).toLocaleDateString('en-GB', { })} - {new Date(serviceDetail.scheduleEnd).toLocaleDateString('en-GB', {
timeZone: 'UTC' timeZone: 'UTC'
})} })}
</p> </p>
@ -146,15 +147,8 @@
margin-bottom: 15px; margin-bottom: 15px;
font-weight: 600; font-weight: 600;
} }
.pis {
font-size: 18px;
font-weight: 600;
color: var(--main-text-color);
margin-top: 10px;
margin-bottom: 5px;
}
.svc-detail { .svc-detail {
margin-top: 2px; margin-top: 6px;
margin-bottom: 2px; margin-bottom: 2px;
color: var(--island-text-color); color: var(--island-text-color);
} }
@ -167,4 +161,19 @@
padding-bottom: 10px; padding-bottom: 10px;
color: var(--island-text-color); color: var(--island-text-color);
} }
.text-message {
margin: 5px;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 10px;
}
.vstp {
background-color: red;
margin: auto;
padding: 5px;
width: 50px;
border-radius: 5px;
border-color: darkred;
font-weight: bolder;
}
</style> </style>