Add train detail icons with tooltips
This commit is contained in:
parent
3f4a172f48
commit
0a666afc58
2861
package-lock.json
generated
2861
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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
58
src/lib/Tooltip.svelte
Normal 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>
|
@ -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} />
|
||||||
|
@ -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>
|
||||||
|
40
src/lib/train/trainIcons.svelte
Normal file
40
src/lib/train/trainIcons.svelte
Normal 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>
|
Loading…
Reference in New Issue
Block a user