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

56
src/lib/Tooltip.svelte
View File

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

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

@ -21,9 +21,8 @@
</script>
<footer>
{#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} />
<br />
<span>{item.title}</span>

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

@ -27,7 +27,7 @@
'<h3>Resgistration Update</h3>' +
'<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>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>

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

@ -49,19 +49,13 @@
<LoadingText />
{:then serviceDetail}
{#if serviceDetail.stpIndicator === 'C'}
<p class="text-message">
This has been removed from the timetable for today.
</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>
<p class="text-message">This has been removed from the timetable for today.</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}
<div class="detailOperator"><StylesToc toc={service?.operator || ''} full={true} /></div>
<TrainIcons serviceDetails={serviceDetail.serviceDetails} />
<TrainIcons serviceDetails={serviceDetail.serviceDetail} />
{#if serviceDetail.pis}
<PisHandler pisObject={serviceDetail.pis} />
{/if}
@ -86,26 +80,26 @@
<th>Sch Arr.</th>
<th>Sch Dep.</th>
</tr>
{#each serviceDetail.stops as stop}
<tr>
{#if stop.publicArrival || stop.publicDeparture}
{#each serviceDetail.stops as stop}
<tr>
{#if stop.publicArrival || stop.publicDeparture}
<td>{stop.tiploc}</td>
<td>{stop.platform || '-'}</td>
<td>{stop.publicArrival || '-'}</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.platform || stop.depLine || stop.arrLine || '-'}</td>
<td class="wtt">{stop.wttArrival || '-'}</td>
<td class="wtt">{stop.wttDeparture || '-'}</td>
{:else}
{:else}
<td class="pass">{stop.tiploc}</td>
<td class="pass">{stop.platform || stop.depLine || stop.arrLine || '-'}</td>
<td class="pass">-</td>
<td class="pass">{stop.pass || '-'}</td>
{/if}
</tr>
{/each}
{/if}
</tr>
{/each}
</table>
{/if}
{:catch}

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

@ -1,14 +1,11 @@
<script lang="ts">
import Tooltip from "$lib/Tooltip.svelte";
import type { ServiceDetail } from "@owlboard/ts-types";
import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tabler/icons-svelte";
import Tooltip from '$lib/Tooltip.svelte';
import type { ServiceDetail } from '@owlboard/ts-types';
import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from '@tabler/icons-svelte';
export let serviceDetails: ServiceDetail
export let serviceDetails: ServiceDetail;
</script>
{#if serviceDetails.firstClass}
<Tooltip text="First Class is available">
<IconSquare1 />
@ -33,6 +30,10 @@ import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tab
</Tooltip>
{/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>

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

@ -5,7 +5,7 @@
const title = 'More';
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: 'Settings', path: '/more/settings', icon: IconSettings },
{ title: 'Help', path: '/more/help', icon: IconHelp },

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

@ -57,16 +57,17 @@
{#if isLoading}
<Loading />
{:else if state == 'unreg'}
<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>
<form on:submit={request}>
<input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
<label for="checkbox">
I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
<input id="checkbox" type="checkbox" required />
</label><br />
<button type="submit">Submit</button>
</form><br>
<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>
<form on:submit={request}>
<input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
<label for="checkbox">
I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
<input id="checkbox" type="checkbox" required />
</label><br />
<button type="submit">Submit</button>
</form>
<br />
<p class="bold">What do you get?</p>
<li>Access to Train details</li>
<li>Access to PIS Codes</li>
@ -74,7 +75,6 @@
<li>Non-Public trains 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>
{:else if state == 'sent'}
<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>

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

@ -17,7 +17,6 @@
{ id: '6', value: '' }
];
function handleInput(index: number, event: KeyboardEvent): void {
if (event.key === 'Backspace' && index > 0 && inputs[index].value === '') {
const prevInput = document.getElementById(`input-${index}`);
@ -35,17 +34,17 @@
async function handleSubmit() {
let submitString: string = '';
for (const input of inputs) {
submitString += input.value.toUpperCase();
submitString += input.value.toUpperCase();
}
console.log(`Code: ${submitString}`);
const res = await submit(submitString);
console.log(`Registration Status: ${res}`)
console.log(`Registration Status: ${res}`);
if (res == 201) {
status = "okay"
status = 'okay';
} else if (res == 401) {
status = "fail"
status = 'fail';
} else {
console.error("Unable to register: ", status)
console.error('Unable to register: ', status);
}
state = true;
}
@ -70,17 +69,16 @@
return res.status;
}
}
</script>
<Header {title} />
{#if state}
{#if status == "okay"}
{#if status == 'okay'}
<p class="title-ish">You are now registered</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>
{:else if status == "fail"}
{:else if status == 'fail'}
<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>
{/if}

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

@ -27,9 +27,9 @@
<Island>
<p>
<Tooltip text="Svelte"><IconBrandSvelte /></Tooltip>
<Tooltip text="Javascript"><IconBrandJavascript/></Tooltip>
<Tooltip text="Javascript"><IconBrandJavascript /></Tooltip>
<Tooltip text="Typescript"><IconBrandTypescript /></Tooltip>
<br>
<br />
<a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank"
>Web-app version<br /><span class="data"
>{version}{#if versionTag}-{versionTag}{/if}</span
@ -40,25 +40,27 @@
<Tooltip text="NodeJS"><IconBrandNodejs /></Tooltip>
<Tooltip text="Javascript"><IconBrandJavascript /></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>
</p>
<p>
<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>
</p>
<p>
<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>
</p>
</Island>
{:catch}
<Island>
<p>
<IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br>
Web-app Version<br /><span class="data">{version}{#if versionTag}-{versionTag}{/if}</span>
<IconBrandSvelte /><IconBrandJavascript /><IconBrandTypescript /><br />
Web-app Version<br /><span class="data"
>{version}{#if versionTag}-{versionTag}{/if}</span
>
</p>
<p>Unable to fetch server application versions</p>
</Island>

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

@ -103,7 +103,7 @@
<br />
<button type="submit">Search</button>
</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>
<form on:submit={findByPis}>
<input type="number" max="9999" autocomplete="off" placeholder="PIS" bind:value={entryPIS} />