refactor: open timings

src/lib/components/SpaceCard.svelte

@@ -6,19 +6,22 @@
 
     interface Props {
         space: Table<"study_spaces">;
-        hours: Table<"study_space_hours">[];
         alt: string;
         imgSrc: string;
         href?: string;
         isFavourite: boolean;
-
+        isAvailable?: boolean;
         onToggleFavourite?: () => void;
+        footer?: string;
     }
 
-    const { space, hours, alt, imgSrc, href, isFavourite, onToggleFavourite }: Props = $props();
+    const { space, alt, imgSrc, href, isFavourite, onToggleFavourite, isAvailable, footer }: Props =
+        $props();
+
+    console.log(isAvailable);
 </script>
 
-<a class="card" {href}>
+<a class="card {isAvailable ? 'green' : 'grey'}" {href}>
     <!-- <img src={imgSrc} {alt} /> -->
     <div class="image-container">
         <img src={imgSrc} {alt} />
@@ -34,11 +37,14 @@
         {#if space.tags.length > 0}
             <div class="tagContainer">
                 {#each space.tags as tag (tag)}
-                    <span class="tag">{tag}</span>
+                    <span class="tag {isAvailable ? 'tagGreen' : 'tagGrey'}">{tag}</span>
                 {/each}
             </div>
         {/if}
-        <div class="openingTimesContainer"><OpeningTimes {hours} /></div>
+        <div class="spacer"></div>
+        {#if footer}
+            <div class="footer">{footer}</div>
+        {/if}
     </div>
 </a>
 
@@ -46,14 +52,25 @@
     .card {
         display: flex;
         flex-direction: column;
-        background-color: #49bd85;
         width: 100%;
         max-width: 20rem;
         border-radius: 0.5rem;
         overflow: hidden;
         text-decoration: none;
     }
+    .green {
+        background-color: #49bd85;
+    }
+    .grey {
+        background-color: #2e4653;
+    }
+    .spacer {
+        flex: 1;
+    }
     .description {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
         padding: 0.5rem;
         color: #edebe9;
     }
@@ -83,13 +100,20 @@
         justify-content: center;
         text-align: center;
         border-radius: 0.25rem;
-        background-color: #2e4653;
         color: #eaffeb;
         font-size: 0.875rem;
         cursor: pointer;
         padding: 0.2rem 0.6rem;
     }
 
+    .tagGreen {
+        background-color: #2e4653;
+    }
+
+    .tagGrey {
+        background-color: #49bd85;
+    }
+
     .compulsoryContainer {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr));
@@ -109,4 +133,16 @@
         padding: 0.25rem;
         z-index: 1;
     }
+
+    .footer {
+        width: 100%;
+        color: #2e4653;
+        background-color: #eaffeb;
+        align-self: flex-end;
+        border-radius: 0.5rem;
+        padding: 0.1rem;
+        text-align: center;
+        font-weight: bold;
+        margin-top: 0.4rem;
+    }
 </style>

src/lib/index.ts

@@ -84,3 +84,21 @@ export function haversineDistance(
         Math.pow(Math.sin(deltaLng / 2), 2) * Math.cos(lat1) * Math.cos(lat2);
     return radius * 2 * Math.asin(Math.sqrt(e1));
 }
+
+export function collectTimings(study_space_hours: Table<"study_space_hours">[]) {
+    // Collect all timing entries
+    const timingsPerDay: Record<number, Table<"study_space_hours">[]> = {
+        0: [],
+        1: [],
+        2: [],
+        3: [],
+        4: [],
+        5: [],
+        6: []
+    };
+
+    for (const entry of study_space_hours) {
+        timingsPerDay[entry.day_of_week].push(entry);
+    }
+    return timingsPerDay;
+}

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 = collectTimings(space.study_space_hours);
-    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 isFavourite = $state(false);
     onMount(async () => {