Trial date selection in timetable search

src/lib/Tooltip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
+    import { onDestroy } from "svelte";
     export let text: string;
 
     let isVisible: boolean = false;
@@ -44,15 +44,16 @@
         padding: 5px;
         position: absolute;
         z-index: 1;
-        bottom: 125%;
+        top: 50%;
-        left: 50%;
+        right: 125%;
+        transform: translateY(-50%);
         margin-left: -60px;
         opacity: 0;
-        transition: opacity 0.3s;
+        transition: opacity 0.5s;
     }
 
     .tooltip:hover .tooltiptext {
         visibility: visible;
-        opacity: 1;
+        opacity: 0.8;
     }
 </style>

src/lib/stores/version.ts

@@ -1,2 +1,2 @@
-export const version: string = "2024.11.2";
+export const version: string = "2024.11.3";
 export const versionTag: string = "";

src/lib/train/train-detail.svelte

@@ -10,11 +10,12 @@
     import TrainIcons from "./trainIcons.svelte";
 
     export let service: OB_TrainTT_service;
+    export let date: Date;
 
     let isExpanded = false;
 
     async function getTrainByUID(tuid = "") {
-        const url = `${getApiUrl()}/api/v2/timetable/train/now/byTrainUid/${tuid}`;
+        const url = `${getApiUrl()}/api/v2/timetable/train/${date.toISOString().split('T')[0]}/byTrainUid/${tuid}`;
         const options = {
             method: "GET",
             headers: {

src/routes/+error.svelte

@@ -10,7 +10,7 @@
 <h1>{$page.status}: {$page?.error?.message}</h1>
 
 {#if $page.status === 404}
-    <p>This is not the page you're looking for.</p>
+    <p>There's no light at the end of this tunnel</p>
     <p>The page you are looking for doesn't exist, use the tabs below to find another page.</p>
 {:else if $page.status === 500}
     <p>

src/routes/more/+page.svelte

@@ -2,7 +2,6 @@
     import Header from "$lib/navigation/header.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import {
-        IconCode,
         IconHelp,
         IconInfoCircle,
         IconLocation,

src/routes/pis/+page.svelte

@@ -146,7 +146,10 @@
     <button id="reset" type="reset" on:click={reset}>Reset</button>
 {:else}
     <Card config={findByHeadcodeCard}>
-        Find by Headcode from the homepage
+        <span class="important">Find by Headcode from the homepage</span>
+        <br>
+        The tools below are more helpful if you've been diverted or are not starting your journey at your scheduled origin.
+        <br><br>
     </Card>
     <Card config={findByStartEndCard}>
     <form on:submit={findByStartEnd}>
@@ -169,6 +172,10 @@
 <Nav />
 
 <style>
+    .important {
+        font-weight: 900;
+        color: whitesmoke;
+    }
     p {
         margin-left: 10px;
         margin-right: 10px;

src/routes/test/+page.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-    import type { LookupCardConfig } from "$lib/cards/Card.types";
-    import LookupCard from "$lib/cards/LookupCard.svelte";
-    import NearToMeCard from "$lib/cards/NearToMeCard.svelte";
-    import QuickLinkCard from "$lib/cards/QuickLinkCard.svelte";
-    import Header from "$lib/navigation/header.svelte";
-    import Nav from "$lib/navigation/nav.svelte";
-    import TimeBar from "$lib/navigation/TimeBar.svelte";
-
-    let LookupConfig: LookupCardConfig = {
-        title: "Live Arr/Dep Boards",
-        helpText: "Enter CRS, TIPLOC or STANOX code to see live departures",
-        placeholder: "Enter CRS/TIPLOC",
-        maxLen: 7,
-        formAction: "/ldb/",
-        fieldName: "station",
-    };
-
-    let TimetableConfig: LookupCardConfig = {
-        title: "Timetable & PIS",
-        helpText: "Enter a headcode to search the timetable and check PIS Codes",
-        placeholder: "Enter headcode",
-        maxLen: 4,
-        formAction: "/train/",
-        fieldName: "headcode",
-    };
-
-    function onRefresh() {
-        console.log("Refresh");
-    }
-</script>
-
-<Header title={"Test"} />
-<TimeBar updatedTime={new Date()} />
-<LookupCard config={LookupConfig} />
-<LookupCard config={TimetableConfig} />
-<NearToMeCard />
-<QuickLinkCard />
-<Nav />

src/routes/train/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import Header from "$lib/navigation/header.svelte";
-    import Loading from "$lib/navigation/loading.svelte";
     import Island from "$lib/islands/island.svelte";
     import Nav from "$lib/navigation/nav.svelte";
     import { uuid } from "$lib/stores/uuid";
@@ -10,14 +9,17 @@
     import { getApiUrl } from "$lib/scripts/upstream";
     import toast from "svelte-french-toast";
     import TimeBar from "$lib/navigation/TimeBar.svelte";
+    import { IconArrowLeft, IconArrowRight, IconCheck } from "@tabler/icons-svelte";
 
     let title = "Timetable Results";
     let id = "";
     let data = [];
-    let isLoading = true;
     let error = false;
     let errMsg = "";
 
+    let dateInput: Date = new Date();
+    $: formattedDate = dateInput.toISOString().split('T')[0];
+
     $: {
         if (id) {
             title = id.toUpperCase();
@@ -30,26 +32,39 @@
         return new URLSearchParams(window.location.search).get("headcode");
     }
 
+    function incrementDate() {
+        dateInput.setDate(dateInput.getDate() + 1);
+        dateInput = new Date(dateInput);
+    }
+
+    function decrementDate() {
+        dateInput.setDate(dateInput.getDate() - 1);
+        dateInput = new Date(dateInput);
+    }
+
     onMount(async () => {
-        isLoading = true;
         id = (await getHeadcode()) || "";
-        const res = await fetchData(id);
+        load();
-        if (res) {
-            data = res;
-            if (!data.length) {
-                error = true;
-                errMsg = "No services found";
-            }
-        }
-        isLoading = false;
 
         toast("Registration soon required for timetable features.\n\nClick 'Register' in the menu.", {
             duration: 3000,
         });
+
     });
 
+    function load() {
+        toast.promise(
+            fetchData(id),
+            {
+                loading: 'Searching Timetable',
+                success: 'Done',
+                error: 'Error'
+            }
+        )
+    }
+
     async function fetchData(id = "") {
-        const date = "now";
+        data = [];
         const searchType = "headcode";
         const options = {
             method: "GET",
@@ -57,44 +72,56 @@
                 uuid: $uuid,
             },
         };
-        const url = `${getApiUrl()}/api/v2/timetable/train/${date}/${searchType}/${id}`;
+        const url = `${getApiUrl()}/api/v2/timetable/train/${formattedDate}/${searchType}/${id}`;
         try {
             const res = await fetch(url, options);
             if (res.status == 200) {
-                return await res.json();
+                let services = await res.json();
+                if (!services.length) {
+                    error = true;
+                    errMsg = "No services found";
+                    return Promise.reject(new Error(errMsg));
+                }
+                data = services
             } else if (res.status === 401) {
                 error = true;
                 errMsg = "You must be logged into the staff version for this feature";
-                return false;
+                return Promise.reject(new Error(errMsg));
             } else {
                 error = true;
                 errMsg = "Unable to connect, check your connection and try again";
-                return false;
+                return Promise.reject(new Error(errMsg));
             }
         } catch (err) {
             error = true;
             errMsg = "Connection error, try again later";
+            return Promise.reject(new Error(errMsg));
         }
-        isLoading = false;
     }
 </script>
 
 <Header {title} />
 <TimeBar updatedTime={undefined} />
-
+<div id="dateSelector">
+    <button on:click={decrementDate}><IconArrowLeft /></button>
+    <input 
+        type="date" 
+        id="dateInput" 
+        bind:value={formattedDate} 
+        on:input={(e) => dateInput = new Date(e.target.value)}
+    />
+    <button on:click={incrementDate}><IconArrowRight /></button>
+    <button on:click={load}><IconCheck /></button>
+</div>
 {#if error}
     <Island>
         <p style="font-weight:600">{errMsg}</p>
     </Island>
 {/if}
 
-{#if isLoading}
-    <Loading />
-{/if}
-
 {#each data as service}
     {#if service}
-        <TrainDetail {service} />
+        <TrainDetail {service} date={dateInput} />
     {/if}
 {/each}
 
@@ -106,4 +133,18 @@
         font-size: 18px;
         font-weight: 600;
     }
+
+    #dateInput {
+        height: 25px;
+        transform: translateY(-7px);
+    }
+    #dateSelector {
+        transform: translateY(3px);
+        transform: translateX(20px);
+    }
+    button {
+        background: none;
+        border: none;
+        color: white;
+    }
 </style>