feat: Added current opening times to each study space on the main page. In the expanded card, you can view the opening times for the full week. Improved ui

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>

src/lib/components/OpeningTimes.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { Table } from "$lib";
+    import { formatTime } from "$lib";
+
+    interface Props {
+        hours: Table<"study_space_hours">[];
+    }
+
+    // Destructure hours with a safe default to avoid undefined
+    const { hours }: Props = $props();
+
+    // Determine today's index (0 = Sunday, 6 = Saturday)
+    const todayIndex = new Date().getDay();
+
+    // Find the hours entry matching today
+    const todayHours = hours.find((h) => h.day_of_week === todayIndex);
+
+    // Compute the display string for opening times
+    let openingDisplay = $state("");
+    if (todayHours) {
+        openingDisplay = todayHours.is_24_7
+            ? "Open 24/7"
+            : `${formatTime(todayHours.opens_at)} - ${formatTime(todayHours.closes_at)}`;
+    } else {
+        openingDisplay = "Closed";
+    }
+</script>
+
+<div class="opening-times">
+    <strong>Today's Opening Times:</strong>
+    {openingDisplay}
+</div>
+
+<style>
+    .opening-times {
+        margin-top: 0.5rem;
+        font-size: 0.9rem;
+        color: #eaffeb;
+    }
+</style>

src/lib/components/SpaceCard.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     import CompulsoryTags from "./CompulsoryTags.svelte";
+    import OpeningTimes from "./OpeningTimes.svelte";
     import type { Table } from "$lib";
 
     interface Props {
         space: Table<"study_spaces">;
+        hours: Table<"study_space_hours">[];
         alt: string;
         imgSrc: string;
         href?: string;
     }
 
-    const { space, alt, imgSrc, href }: Props = $props();
+    const { space, hours, alt, imgSrc, href }: Props = $props();
 </script>
 
 <a class="card" {href}>
@@ -24,6 +26,7 @@
                 {/each}
             </div>
         {/if}
+        <div class="openingTimesContainer"><OpeningTimes {hours} /></div>
     </div>
 </a>
 

src/lib/index.ts

@@ -8,7 +8,6 @@ export type Enum<T extends keyof Database["public"]["Enums"]> = Database["public
 export const availableStudySpaceTags = [
     "Crowded",
     "Group study",
-    "24/7",
     "Food allowed",
     "No food allowed",
     "Well lit",
@@ -43,3 +42,20 @@ export async function gmapsLoader() {
         libraries: ["places"]
     });
 }
+
+export function formatTime(time: string) {
+    const [h, m] = time.split(":").map(Number);
+    const date = new Date();
+    date.setHours(h, m);
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+export const daysOfWeek = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+];