refactor: open timings

src/routes/+page.svelte

@@ -4,10 +4,19 @@
     import crossUrl from "$lib/assets/cross.svg";
     import searchUrl from "$lib/assets/search.svg";
     import Navbar from "$lib/components/Navbar.svelte";
-    import { haversineDistance, timeToMins } from "$lib";
+    import {
+        allTags,
+        volumeTags,
+        wifiTags,
+        powerOutletTags,
+        collectTimings,
+        timeToMins,
+        haversineDistance
+    } from "$lib";
     import Button from "$lib/components/Button.svelte";
     import { urldecodeSortFilter } from "$lib/filter.js";
     import { invalidateAll } from "$app/navigation";
+    import type { Table } from "$lib";
 
     const { data } = $props();
     const {
@@ -123,6 +132,42 @@
               })
             : filteredStudySpaces
     );
+
+    // Open now
+    function isOpenNow(all_study_space_hours: Table<"study_space_hours">[]) {
+        const now = new Date();
+        const time = now.toTimeString().slice(0, 5);
+        const day = now.getDay();
+
+        const timingsPerDay = collectTimings(all_study_space_hours);
+        for (const timing of timingsPerDay[day]) {
+            if (timing.open_today_status === true) {
+                return { isOpen: true, message: `Open all day` };
+            } else if (timing.open_today_status === false) {
+                return { isOpen: false, message: `Closed today` };
+            } else {
+                const opensFor = timeUntilClosing(timing.opens_at, timing.closes_at, time);
+                if (opensFor) {
+                    return { isOpen: true, message: `Open now for: ${minsToReadableHours}` };
+                }
+            }
+        }
+
+        return { isOpen: false, message: "Closed today" };
+    }
+
+    function timeUntilClosing(openingTime: string, closingTime: string, currentTime: string) {
+        const currTimeInMins = timeToMins(currentTime);
+        const OpeningTimeInMins = timeToMins(openingTime);
+        const closingTimeInMins = timeToMins(closingTime);
+        if (currTimeInMins >= OpeningTimeInMins && currTimeInMins < closingTimeInMins) {
+            return closingTimeInMins - currTimeInMins;
+        }
+    }
+
+    function minsToReadableHours(mins: number) {
+        return `${Math.floor(mins / 60)} hrs, ${mins % 60} mins`;
+    }
 </script>
 
 <Navbar>
@@ -161,9 +206,14 @@
             href="/space/{studySpace.id}"
             imgSrc={imgUrl}
             space={studySpace}
-            hours={studySpace.study_space_hours}
             isFavourite={favouriteIds.includes(studySpace.id)}
             onToggleFavourite={session ? () => handleToggleFavourite(studySpace.id) : undefined}
+            isAvailable={studySpace.study_space_hours.length === 0
+                ? undefined
+                : isOpenNow(studySpace.study_space_hours).isOpen}
+            footer={studySpace.study_space_hours.length === 0
+                ? undefined
+                : isOpenNow(studySpace.study_space_hours).message}
         />
     {/each}
 </main>

src/routes/space/[id]/+page.svelte

@@ -7,7 +7,7 @@
     import Report from "$lib/components/Report.svelte";
     import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
-    import { gmapsLoader, daysOfWeek, formatTime, type Table } from "$lib";
+    import { gmapsLoader, daysOfWeek, formatTime, collectTimings, type Table } from "$lib";
     import Button from "$lib/components/Button.svelte";
     import Favourite from "$lib/components/Favourite.svelte";
 
@@ -52,20 +52,7 @@
         });
     });
 
-    // Collect all timing entries
-    let timingsPerDay: Record<number, Table<"study_space_hours">[]> = {
-        0: [],
-        1: [],
-        2: [],
-        3: [],
-        4: [],
-        5: [],
-        6: []
-    };
-
-    for (const entry of space.study_space_hours) {
-        timingsPerDay[entry.day_of_week].push(entry);
-    }
+    let timingsPerDay = collectTimings(space.study_space_hours);
 
     let isFavourite = $state(false);
     onMount(async () => {