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