OwlBoard
/
owlboard-svelte
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Update train detail layout to improve icon placement

This commit is contained in:
Fred Boniface 2024-04-23 19:53:43 +01:00
parent 2a615a822e
commit 41f673c68f
10 changed files with 83 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/lib/Tooltip.svelte
View File

@ -1,40 +1,40 @@
<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;
function showTooltip() { function showTooltip() {
isVisible = true; isVisible = true;
timer = setTimeout(() => { timer = setTimeout(() => {
isVisible = false; isVisible = false;
}, 2000); }, 2000);
} }
function hideTooltip() { function hideTooltip() {
isVisible = false; isVisible = false;
clearTimeout(timer); clearTimeout(timer);
} }
onDestroy(() => { onDestroy(() => {
clearTimeout(timer); clearTimeout(timer);
}); });
</script> </script>
<div class="tooltip" on:touchstart={showTooltip} on:touchend={hideTooltip} on:touchcancel={hideTooltip}> <div class="tooltip" on:touchstart={showTooltip} on:touchend={hideTooltip} on:touchcancel={hideTooltip}>
<slot /> <slot />
<span class="tooltiptext">{text}</span> <span class="tooltiptext">{text}</span>
</div> </div>
<style> <style>
.tooltip { .tooltip {
position: relative; position: relative;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {
visibility: hidden; visibility: hidden;
width: 120px; width: 120px;
background-color: var(--island-button-color); background-color: var(--island-button-color);
@ -52,7 +52,7 @@
} }
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
</style> </style>

3
src/lib/navigation/nav.svelte
View File

@ -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>

2
src/lib/overlays/welcome.svelte
View File

@ -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>

32
src/lib/train/train-detail.svelte
View File

@ -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}
@ -86,26 +80,26 @@
<th>Sch Arr.</th> <th>Sch Arr.</th>
<th>Sch Dep.</th> <th>Sch Dep.</th>
</tr> </tr>
{#each serviceDetail.stops as stop} {#each serviceDetail.stops as stop}
<tr> <tr>
{#if stop.publicArrival || stop.publicDeparture} {#if stop.publicArrival || stop.publicDeparture}
<td>{stop.tiploc}</td> <td>{stop.tiploc}</td>
<td>{stop.platform || '-'}</td> <td>{stop.platform || '-'}</td>
<td>{stop.publicArrival || '-'}</td> <td>{stop.publicArrival || '-'}</td>
<td>{stop.publicDeparture || '-'}</td> <td>{stop.publicDeparture || '-'}</td>
{:else if stop.wttArrival || stop.wttDeparture} {:else if stop.wttArrival || stop.wttDeparture}
<td class="wtt">{stop.tiploc}</td> <td class="wtt">{stop.tiploc}</td>
<td class="wtt">{stop.platform || stop.depLine || stop.arrLine || '-'}</td> <td class="wtt">{stop.platform || stop.depLine || stop.arrLine || '-'}</td>
<td class="wtt">{stop.wttArrival || '-'}</td> <td class="wtt">{stop.wttArrival || '-'}</td>
<td class="wtt">{stop.wttDeparture || '-'}</td> <td class="wtt">{stop.wttDeparture || '-'}</td>
{:else} {:else}
<td class="pass">{stop.tiploc}</td> <td class="pass">{stop.tiploc}</td>
<td class="pass">{stop.platform || stop.depLine || stop.arrLine || '-'}</td> <td class="pass">{stop.platform || stop.depLine || stop.arrLine || '-'}</td>
<td class="pass">-</td> <td class="pass">-</td>
<td class="pass">{stop.pass || '-'}</td> <td class="pass">{stop.pass || '-'}</td>
{/if} {/if}
</tr> </tr>
{/each} {/each}
</table> </table>
{/if} {/if}
{:catch} {:catch}

19
src/lib/train/trainIcons.svelte
View File

@ -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>

2
src/routes/more/+page.svelte
View File

@ -5,7 +5,7 @@
const title = 'More'; const title = 'More';
const links = [ const links = [
{ title: 'Your Data', path: '/more/data', icon: IconUser}, { title: 'Your Data', path: '/more/data', icon: IconUser },
{ title: 'Registration', path: '/more/reg', icon: IconUserPlus }, { title: 'Registration', path: '/more/reg', icon: IconUserPlus },
{ title: 'Settings', path: '/more/settings', icon: IconSettings }, { title: 'Settings', path: '/more/settings', icon: IconSettings },
{ title: 'Help', path: '/more/help', icon: IconHelp }, { title: 'Help', path: '/more/help', icon: IconHelp },

22
src/routes/more/reg/+page.svelte
View File

@ -57,16 +57,17 @@
{#if isLoading} {#if isLoading}
<Loading /> <Loading />
{:else if state == 'unreg'} {:else if state == 'unreg'}
<p>To register, you will need to enter a work email address to receive a confirmation email</p> <p>To register, you will need to enter a work email address to receive a confirmation email</p>
<p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p> <p class="bold">Already have a registration code? <a href="/more/reg/submit">enter it here</a></p>
<form on:submit={request}> <form on:submit={request}>
<input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br /> <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
<label for="checkbox"> <label for="checkbox">
I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br /> I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
<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>

16
src/routes/more/reg/submit/+page.svelte
View File

@ -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}`);
@ -35,17 +34,17 @@
async function handleSubmit() { async function handleSubmit() {
let submitString: string = ''; let submitString: string = '';
for (const input of inputs) { for (const input of inputs) {
submitString += input.value.toUpperCase(); submitString += input.value.toUpperCase();
} }
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}

16
src/routes/more/versions/+page.svelte
View File

@ -27,9 +27,9 @@
<Island> <Island>
<p> <p>
<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>

2
src/routes/pis/+page.svelte
View File

@ -103,7 +103,7 @@
<br /> <br />
<button type="submit">Search</button> <button type="submit">Search</button>
</form> </form>
<!-- FIND BY PIS CODE NOT WORKING AT PRESENT <!-- FIND BY PIS CODE NOT WORKING AT PRESENT
<p class="label">Find By PIS Code:</p> <p class="label">Find By PIS Code:</p>
<form on:submit={findByPis}> <form on:submit={findByPis}>
<input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} /> <input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />