Add train detail icons with tooltips

package.json

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

src/lib/Tooltip.svelte

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

src/lib/navigation/nav.svelte

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

src/lib/train/train-detail.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { fly } from 'svelte/transition';
   import { uuid } from '$lib/stores/uuid';
   import LoadingText from '$lib/navigation/loading-text.svelte';
@@ -6,7 +6,10 @@
   import { getApiUrl } from '$lib/scripts/upstream';
   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;
 
@@ -47,15 +50,20 @@
       {:then serviceDetail}
         {#if serviceDetail.stpIndicator === 'C'}
           <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>
         {:else}
-          {#if serviceDetail.vstp}
-            <div class="vstp">VSTP</div>
-          {/if}
           <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}
+            <br>
             <PisHandler pisObject={serviceDetail.pis} />
           {/if}
           <p class="svc-detail">
@@ -169,13 +177,4 @@
     margin-right: 20px;
     padding-bottom: 10px;
   }
-  .vstp {
-    background-color: red;
-    margin: auto;
-    padding: 5px;
-    width: 50px;
-    border-radius: 5px;
-    border-color: darkred;
-    font-weight: bolder;
-  }
 </style>

src/lib/train/trainIcons.svelte

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