Update train detail layout to improve icon placement
This commit is contained in:
parent
2a615a822e
commit
41f673c68f
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, onDestroy } from "svelte";
|
import { onMount, onDestroy } from 'svelte';
|
||||||
export let text: string
|
export let text: string;
|
||||||
|
|
||||||
let isVisible: boolean = false;
|
let isVisible: boolean = false;
|
||||||
let timer: number;
|
let timer: number;
|
||||||
|
@ -21,9 +21,8 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
||||||
{#each links as item}
|
{#each links as item}
|
||||||
<a href={item.path} class:active={$page.url.pathname == item.path || $page.url.pathname == item.path + "/"}>
|
<a href={item.path} class:active={$page.url.pathname == item.path || $page.url.pathname == item.path + '/'}>
|
||||||
<svelte:component this={item.icon} />
|
<svelte:component this={item.icon} />
|
||||||
<br />
|
<br />
|
||||||
<span>{item.title}</span>
|
<span>{item.title}</span>
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
'<h3>Resgistration Update</h3>' +
|
'<h3>Resgistration Update</h3>' +
|
||||||
'<p>The registration issue has been fixed and registrations are now open.</p>' +
|
'<p>The registration issue has been fixed and registrations are now open.</p>' +
|
||||||
'<p>Headcode and PIS Lookups will still be possible without registering but only for a limited time.</p>' +
|
'<p>Headcode and PIS Lookups will still be possible without registering but only for a limited time.</p>' +
|
||||||
'<p>You will receive further warning before mandatory registration is re-enabled.</p>',
|
'<p>You will receive further warning before mandatory registration is re-enabled.</p>'
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -49,19 +49,13 @@
|
|||||||
<LoadingText />
|
<LoadingText />
|
||||||
{:then serviceDetail}
|
{:then serviceDetail}
|
||||||
{#if serviceDetail.stpIndicator === 'C'}
|
{#if serviceDetail.stpIndicator === 'C'}
|
||||||
<p class="text-message">
|
<p class="text-message">This has been removed from the timetable for today.</p>
|
||||||
This has been removed from the timetable for today.
|
<p class="text-message">The service may have been retimed, re-routed or removed from todays timetable completely.</p>
|
||||||
</p>
|
<p class="text-message">If it has been retimed or re-routed, there is likely to be another service with the same headcode booked to run.</p>
|
||||||
<p class="text-message">
|
|
||||||
The service may have been retimed, re-routed or removed from todays timetable completely.
|
|
||||||
</p>
|
|
||||||
<p class="text-message">
|
|
||||||
If it has been retimed or re-routed, there is likely to be another service with the same headcode booked to run.
|
|
||||||
</p>
|
|
||||||
{:else}
|
{:else}
|
||||||
<div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
|
<div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
|
||||||
|
|
||||||
<TrainIcons serviceDetails={serviceDetail.serviceDetails} />
|
<TrainIcons serviceDetails={serviceDetail.serviceDetail} />
|
||||||
{#if serviceDetail.pis}
|
{#if serviceDetail.pis}
|
||||||
<PisHandler pisObject={serviceDetail.pis} />
|
<PisHandler pisObject={serviceDetail.pis} />
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -1,14 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Tooltip from "$lib/Tooltip.svelte";
|
import Tooltip from '$lib/Tooltip.svelte';
|
||||||
import type { ServiceDetail } from "@owlboard/ts-types";
|
import type { ServiceDetail } from '@owlboard/ts-types';
|
||||||
import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tabler/icons-svelte";
|
import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from '@tabler/icons-svelte';
|
||||||
|
|
||||||
|
export let serviceDetails: ServiceDetail;
|
||||||
|
|
||||||
export let serviceDetails: ServiceDetail
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
{#if serviceDetails.firstClass}
|
{#if serviceDetails.firstClass}
|
||||||
<Tooltip text="First Class is available">
|
<Tooltip text="First Class is available">
|
||||||
<IconSquare1 />
|
<IconSquare1 />
|
||||||
@ -33,6 +30,10 @@ import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tab
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<!-- Render a newline if any of the icons is to appear -->
|
||||||
|
{#if serviceDetails.firstClass || serviceDetails.catering || serviceDetails.sleeper || serviceDetails.vstp}
|
||||||
|
<br>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
</style>
|
</style>
|
@ -66,7 +66,8 @@
|
|||||||
<input id="checkbox" type="checkbox" required />
|
<input id="checkbox" type="checkbox" required />
|
||||||
</label><br />
|
</label><br />
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form><br>
|
</form>
|
||||||
|
<br />
|
||||||
<p class="bold">What do you get?</p>
|
<p class="bold">What do you get?</p>
|
||||||
<li>Access to Train details</li>
|
<li>Access to Train details</li>
|
||||||
<li>Access to PIS Codes</li>
|
<li>Access to PIS Codes</li>
|
||||||
@ -74,7 +75,6 @@
|
|||||||
<li>Non-Public trains on departure boards</li>
|
<li>Non-Public trains on departure boards</li>
|
||||||
<li>Hidden platform numbers on departure boards</li>
|
<li>Hidden platform numbers on departure boards</li>
|
||||||
<li>See up to the next 40 trains departing a station over the next two hours</li>
|
<li>See up to the next 40 trains departing a station over the next two hours</li>
|
||||||
|
|
||||||
{:else if state == 'sent'}
|
{:else if state == 'sent'}
|
||||||
<p>An email has been sent, enter the code in the email to activate your profile.</p>
|
<p>An email has been sent, enter the code in the email to activate your profile.</p>
|
||||||
<p class="bold"><a href="/more/reg/submit">Ready to enter your code?</a></p>
|
<p class="bold"><a href="/more/reg/submit">Ready to enter your code?</a></p>
|
||||||
|
@ -17,7 +17,6 @@
|
|||||||
{ id: '6', value: '' }
|
{ id: '6', value: '' }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
function handleInput(index: number, event: KeyboardEvent): void {
|
function handleInput(index: number, event: KeyboardEvent): void {
|
||||||
if (event.key === 'Backspace' && index > 0 && inputs[index].value === '') {
|
if (event.key === 'Backspace' && index > 0 && inputs[index].value === '') {
|
||||||
const prevInput = document.getElementById(`input-${index}`);
|
const prevInput = document.getElementById(`input-${index}`);
|
||||||
@ -39,13 +38,13 @@
|
|||||||
}
|
}
|
||||||
console.log(`Code: ${submitString}`);
|
console.log(`Code: ${submitString}`);
|
||||||
const res = await submit(submitString);
|
const res = await submit(submitString);
|
||||||
console.log(`Registration Status: ${res}`)
|
console.log(`Registration Status: ${res}`);
|
||||||
if (res == 201) {
|
if (res == 201) {
|
||||||
status = "okay"
|
status = 'okay';
|
||||||
} else if (res == 401) {
|
} else if (res == 401) {
|
||||||
status = "fail"
|
status = 'fail';
|
||||||
} else {
|
} else {
|
||||||
console.error("Unable to register: ", status)
|
console.error('Unable to register: ', status);
|
||||||
}
|
}
|
||||||
state = true;
|
state = true;
|
||||||
}
|
}
|
||||||
@ -70,17 +69,16 @@
|
|||||||
return res.status;
|
return res.status;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Header {title} />
|
<Header {title} />
|
||||||
|
|
||||||
{#if state}
|
{#if state}
|
||||||
{#if status == "okay"}
|
{#if status == 'okay'}
|
||||||
<p class="title-ish">You are now registered</p>
|
<p class="title-ish">You are now registered</p>
|
||||||
<p>Your secret key will be stored in your browser.</p>
|
<p>Your secret key will be stored in your browser.</p>
|
||||||
<p>If you change browsers, change device or clear your browsing data, you may have to register again.</p>
|
<p>If you change browsers, change device or clear your browsing data, you may have to register again.</p>
|
||||||
{:else if status == "fail"}
|
{:else if status == 'fail'}
|
||||||
<p class="title-ish">Your code was not accepted</p>
|
<p class="title-ish">Your code was not accepted</p>
|
||||||
<p>The code expires after 1 hour, you can check the code and enter it again or request a <a href="/more/reg">new code</a>.</p>
|
<p>The code expires after 1 hour, you can check the code and enter it again or request a <a href="/more/reg">new code</a>.</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -29,7 +29,7 @@
|
|||||||
<Tooltip text="Svelte"><IconBrandSvelte /></Tooltip>
|
<Tooltip text="Svelte"><IconBrandSvelte /></Tooltip>
|
||||||
<Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
|
<Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
|
||||||
<Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
|
<Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
|
||||||
<br>
|
<br />
|
||||||
<a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank"
|
<a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank"
|
||||||
>Web-app version<br /><span class="data"
|
>Web-app version<br /><span class="data"
|
||||||
>{version}{#if versionTag}-{versionTag}{/if}</span
|
>{version}{#if versionTag}-{versionTag}{/if}</span
|
||||||
@ -40,25 +40,27 @@
|
|||||||
<Tooltip text="NodeJS"><IconBrandNodejs /></Tooltip>
|
<Tooltip text="NodeJS"><IconBrandNodejs /></Tooltip>
|
||||||
<Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
|
<Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
|
||||||
<Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
|
<Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
|
||||||
<br>
|
<br />
|
||||||
<a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>
|
<a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<Tooltip text="Python"><IconBrandPython /></Tooltip>
|
<Tooltip text="Python"><IconBrandPython /></Tooltip>
|
||||||
<br>
|
<br />
|
||||||
<a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a>
|
<a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<Tooltip text="Go"><IconBrandGolang /></Tooltip>
|
<Tooltip text="Go"><IconBrandGolang /></Tooltip>
|
||||||
<br>
|
<br />
|
||||||
<a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
|
<a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
|
||||||
</p>
|
</p>
|
||||||
</Island>
|
</Island>
|
||||||
{:catch}
|
{:catch}
|
||||||
<Island>
|
<Island>
|
||||||
<p>
|
<p>
|
||||||
<IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br>
|
<IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br />
|
||||||
Web-app Version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span>
|
Web-app Version<br /><span class="data"
|
||||||
|
>{version}{#if versionTag}-{versionTag}{/if}</span
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
<p>Unable to fetch server application versions</p>
|
<p>Unable to fetch server application versions</p>
|
||||||
</Island>
|
</Island>
|
||||||
|
Loading…
Reference in New Issue
Block a user