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"
+];

src/routes/+page.server.ts

@@ -5,7 +5,7 @@ export const load: PageServerLoad = async ({ depends, locals: { supabase } }) =>
     depends("db:study_spaces");
     const { data: studySpaces, error: err } = await supabase
         .from("study_spaces")
-        .select("*, study_space_images(*)");
+        .select("*, study_space_images(*), study_space_hours(*)");
     if (err) error(500, "Failed to load study spaces");
 
     return {

src/routes/+page.svelte

@@ -137,6 +137,7 @@
             href="/space/{studySpace.id}"
             imgSrc={imgUrl}
             space={studySpace}
+            hours={studySpace.study_space_hours}
         />
     {/each}
 </main>

src/routes/space/[id]/+page.server.ts

@@ -4,7 +4,7 @@ import type { PageServerLoad } from "./$types";
 export const load: PageServerLoad = async ({ params, locals: { supabase } }) => {
     const { data: space, error: err } = await supabase
         .from("study_spaces")
-        .select("*, study_space_images(*)")
+        .select("*, study_space_images(*), study_space_hours(*)")
         .eq("id", params.id)
         .single();
     if (err) error(500, "Failed to load study space");

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

@@ -6,7 +6,7 @@
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
     import Report from "$lib/components/Report.svelte";
     import { onMount } from "svelte";
-    import { gmapsLoader } from "$lib";
+    import { gmapsLoader, daysOfWeek, formatTime } from "$lib";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
@@ -45,6 +45,13 @@
             map
         });
     });
+
+    const hoursByDay = $derived(new Map(space.study_space_hours.map((h) => [h.day_of_week, h])));
+
+    const openingEntries = daysOfWeek.map((day, idx) => ({
+        day,
+        entry: hoursByDay.get(idx)
+    }));
 </script>
 
 <Navbar>
@@ -77,6 +84,22 @@
         </div>
     {/if}
     <hr />
+    <div class="subtitle">Opening Times:</div>
+    {#each openingEntries as { day, entry } (entry)}
+        <div class="opening-entry">
+            <span class="day">{day}:</span>
+            <span class="times">
+                {#if entry}
+                    {entry.is_24_7
+                        ? "Open All Day"
+                        : `${formatTime(entry.opens_at)} – ${formatTime(entry.closes_at)}`}
+                {:else}
+                    Closed
+                {/if}
+            </span>
+        </div>
+    {/each}
+
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
         {#if place.name}
@@ -220,4 +243,24 @@
         text-decoration: none;
         text-align: center;
     }
+
+    .opening-entry {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.75rem;
+        padding: 0.5rem 1.4rem;
+        align-items: center;
+    }
+    .opening-entry .day {
+        font-weight: bold;
+        color: #ffffff;
+        white-space: nowrap;
+    }
+    .opening-entry .times {
+        font-family: monospace;
+        background-color: rgba(255, 255, 255, 0.1);
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        color: #eaffeb;
+    }
 </style>

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

@@ -11,7 +11,8 @@
         wifiTags,
         powerOutletTags,
         volumeTags,
-        gmapsLoader
+        gmapsLoader,
+        daysOfWeek
     } from "$lib";
     import { onMount } from "svelte";
     import type { Json } from "$lib/database.js";
@@ -20,16 +21,6 @@
     const { supabase } = $derived(data);
 
     const { space, images } = $derived(data);
-    // Days of week for opening times
-    const daysOfWeek = [
-        "Sunday",
-        "Monday",
-        "Tuesday",
-        "Wednesday",
-        "Thursday",
-        "Friday",
-        "Saturday"
-    ];
     const studySpaceData = $state({
         opening_times: daysOfWeek.map((_, index) => ({
             day_of_week: index,
@@ -205,6 +196,20 @@
         });
         spaceImgs = dt.files;
     });
+
+    // --- Helper functions for opening times ---
+    function toggle247(index: number) {
+        const ot = studySpaceData.opening_times[index];
+        if (ot.is_24_7) {
+            ot.opens_at = "00:00";
+            ot.closes_at = "00:00";
+        }
+    }
+
+    function updateTimes(index: number) {
+        const ot = studySpaceData.opening_times[index];
+        ot.is_24_7 = ot.opens_at === "00:00" && ot.closes_at === "00:00";
+    }
 </script>
 
 <Navbar>
@@ -308,6 +313,7 @@
                     type="time"
                     bind:value={studySpaceData.opening_times[index].opens_at}
                     required
+                    onchange={() => updateTimes(index)}
                 />
                 <span>to</span>
                 <input
@@ -315,14 +321,16 @@
                     type="time"
                     bind:value={studySpaceData.opening_times[index].closes_at}
                     required
+                    onchange={() => updateTimes(index)}
                 />
                 <label for={"is247-" + index}>
                     <input
                         id={"is247-" + index}
                         type="checkbox"
                         bind:checked={studySpaceData.opening_times[index].is_24_7}
+                        onchange={() => toggle247(index)}
                     />
-                    24/7
+                    All day
                 </label>
             </div>
         {/each}
@@ -562,4 +570,36 @@
     .additionalImages input {
         display: none;
     }
+
+    /* Opening times layout and inputs styling */
+    .opening-times {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .opening-time-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .opening-time-item label {
+        margin-top: 0;
+        width: 6rem;
+    }
+
+    .opening-time-item input[type="time"] {
+        padding: 0.5rem;
+        height: 2.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+    }
+
+    .opening-time-item span {
+        margin: 0 0.5rem;
+        color: #eaffeb;
+    }
 </style>