Fix date handling on train page

package.json

@@ -1,6 +1,6 @@
 {
     "name": "owlboard-svelte",
-    "version": "2024.03.2",
+    "version": "2024.11.4",
     "private": true,
     "scripts": {
         "dev": "vite dev",

src/lib/stores/version.ts

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

src/routes/train/+page.svelte

@@ -10,6 +10,7 @@
     import toast from "svelte-french-toast";
     import TimeBar from "$lib/navigation/TimeBar.svelte";
     import { IconArrowLeft, IconArrowRight, IconCheck } from "@tabler/icons-svelte";
+    import Error from "../+error.svelte";
 
     let title = "Timetable Results";
     let id = "";
@@ -17,8 +18,7 @@
     let error = false;
     let errMsg = "";
 
-    let dateInput: Date = new Date();
+    let formattedDate = new Date().toISOString().split('T')[0];
-    $: formattedDate = dateInput.toISOString().split('T')[0];
 
     $: {
         if (id) {
@@ -33,13 +33,15 @@
     }
 
     function incrementDate() {
+        let dateInput = new Date(formattedDate)
         dateInput.setDate(dateInput.getDate() + 1);
-        dateInput = new Date(dateInput);
+        formattedDate = dateInput.toISOString().split('T')[0];
     }
 
     function decrementDate() {
+        let dateInput = new Date(formattedDate)
         dateInput.setDate(dateInput.getDate() - 1);
-        dateInput = new Date(dateInput);
+        formattedDate = dateInput.toISOString().split('T')[0];
     }
 
     onMount(async () => {
@@ -53,6 +55,16 @@
     });
 
     function load() {
+        error = false;
+        const selectedDate = new Date(formattedDate);
+        const currentDate = new Date();
+        const difference: number = currentDate.getTime() - selectedDate.getTime();
+        const differenceDays: number = difference / (1000 * 60 * 60 * 24)
+        if (differenceDays > 7) {
+            toast.error("Timetable data is not available for dates older than a week")
+            return
+        }
+
         toast.promise(
             fetchData(id),
             {
@@ -108,7 +120,6 @@
         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>
@@ -121,7 +132,7 @@
 
 {#each data as service}
     {#if service}
-        <TrainDetail {service} date={dateInput} />
+        <TrainDetail {service} date={new Date(formattedDate)} />
     {/if}
 {/each}
 
@@ -136,15 +147,13 @@
 
     #dateInput {
         height: 25px;
-        transform: translateY(-7px);
+        transform: translateY(-30px);
-    }
-    #dateSelector {
-        transform: translateY(3px);
         transform: translateX(20px);
     }
     button {
         background: none;
         border: none;
         color: white;
+        transform: translateX(20px);
     }
 </style>