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/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>