Add train detail icons with tooltips

This commit is contained in:
Fred Boniface 2024-04-16 21:28:11 +01:00
parent 3f4a172f48
commit 0a666afc58
6 changed files with 115 additions and 2878 deletions

2861
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,7 +13,7 @@
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --plugin-search-dir . --write ."
}, },
"devDependencies": { "devDependencies": {
"@owlboard/ts-types": "^0.1.8", "@owlboard/ts-types": "^1.0.1",
"@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.2", "@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.5.0", "@sveltejs/kit": "^1.5.0",

58
src/lib/Tooltip.svelte Normal file
View File

@ -0,0 +1,58 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
export let text: string
let isVisible: boolean = false;
let timer: number;
function showTooltip() {
isVisible = true;
timer = setTimeout(() => {
isVisible = false;
}, 2000);
}
function hideTooltip() {
isVisible = false;
clearTimeout(timer);
}
onDestroy(() => {
clearTimeout(timer);
});
</script>
<div class="tooltip" on:touchstart={showTooltip} on:touchend={hideTooltip} on:touchcancel={hideTooltip}>
<slot />
<span class="tooltiptext">{text}</span>
</div>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: var(--island-button-color);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>

View File

@ -20,6 +20,7 @@
</script> </script>
<footer> <footer>
{#each links as item} {#each links as item}
<a href={item.path} class:active={$page.url.pathname == item.path}> <a href={item.path} class:active={$page.url.pathname == item.path}>
<img src={item.svgPath} alt={item.title} /> <img src={item.svgPath} alt={item.title} />

View File

@ -1,4 +1,4 @@
<script> <script lang="ts">
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { uuid } from '$lib/stores/uuid'; import { uuid } from '$lib/stores/uuid';
import LoadingText from '$lib/navigation/loading-text.svelte'; import LoadingText from '$lib/navigation/loading-text.svelte';
@ -6,7 +6,10 @@
import { getApiUrl } from '$lib/scripts/upstream'; import { getApiUrl } from '$lib/scripts/upstream';
import PisHandler from '$lib/train/pis-handler.svelte'; import PisHandler from '$lib/train/pis-handler.svelte';
export let service = ''; import type { OB_TrainTT_service } from '@owlboard/ts-types';
import TrainIcons from './trainIcons.svelte';
export let service: OB_TrainTT_service;
let isExpanded = false; let isExpanded = false;
@ -47,15 +50,20 @@
{: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.<br /><br /> This has been removed from the timetable for today.
The service will not run, another service may be running in its place. </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>
{: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>
<TrainIcons firstClass={serviceDetail.firstClass} hasCatering={serviceDetail.catering} sleeper={serviceDetail.sleeper} vstp={serviceDetail.vstp} />
{#if serviceDetail.pis} {#if serviceDetail.pis}
<br>
<PisHandler pisObject={serviceDetail.pis} /> <PisHandler pisObject={serviceDetail.pis} />
{/if} {/if}
<p class="svc-detail"> <p class="svc-detail">
@ -169,13 +177,4 @@
margin-right: 20px; margin-right: 20px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.vstp {
background-color: red;
margin: auto;
padding: 5px;
width: 50px;
border-radius: 5px;
border-color: darkred;
font-weight: bolder;
}
</style> </style>

View File

@ -0,0 +1,40 @@
<script lang="ts">
import Tooltip from "$lib/Tooltip.svelte";
import { IconBed, IconSquare1, IconSquareLetterV, IconToolsKitchen2 } from "@tabler/icons-svelte";
export let firstClass: boolean
export let hasCatering: boolean
export let sleeper: boolean
export let vstp: boolean
</script>
{#if firstClass}
<Tooltip text="First Class is available">
<IconSquare1 />
</Tooltip>
{/if}
{#if hasCatering}
<Tooltip text="Catering is available">
<IconToolsKitchen2 />
</Tooltip>
{/if}
{#if sleeper}
<Tooltip text="Sleeping Berths are available">
<IconBed />
</Tooltip>
{/if}
{#if vstp}
<Tooltip text="This is a VSTP planned service">
<IconSquareLetterV />
</Tooltip>
{/if}
<style>
</style>