merge: Resolved merge conflicts

Co-Authored-By: Tadios Temesgen <tt2022@ic.ac.uk>
2025-06-12 16:21:20 +01:00
parent 0c3d0a00b8 30f44b0ac6
commit 950ab5193a
12 changed files with 397 additions and 21 deletions
--- a/src/routes/+page.server.ts
+++ b/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 {
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,6 +11,8 @@

    let selectedTags = $state<string[]>([]);
    let tagFilter = $state("");
+    let openingFilter = $state("");
+    let closingFilter = $state("");
    let tagFilterElem = $state<HTMLInputElement>();

    function categorySelected(category: string[]) {
@@ -33,19 +35,60 @@
            })
    );

-    let filteredStudySpaces = $derived(
-        selectedTags.length === 0
-            ? studySpaces
-            : studySpaces.filter((space) => {
-                  const allTags = [
-                      ...(space.tags || []),
-                      space.volume,
-                      space.wifi,
-                      space.power
-                  ].filter(Boolean);
+    // Convert "HH:MM" or "HH:MM:SS" to minutes since midnight
+    function toMinutes(timeStr: string): number {
+        const [h, m] = timeStr.slice(0, 5).split(":").map(Number);
+        return h * 60 + m;
+    }

-                  return selectedTags.every((tag) => allTags.includes(tag));
-              })
+    // Combine tag and time filtering
+    let filteredStudySpaces = $derived(
+        studySpaces
+            // tag filtering
+            .filter((space) => {
+                if (selectedTags.length === 0) return true;
+                const allTags = [
+                    ...(space.tags || []),
+                    space.volume,
+                    space.wifi,
+                    space.power
+                ].filter(Boolean);
+                return selectedTags.every((tag) => allTags.includes(tag));
+            })
+            // opening time filter
+            .filter((space) => {
+                if (!openingFilter) return true;
+                const entry = space.study_space_hours?.find(
+                    (h) => h.day_of_week === new Date().getDay()
+                );
+                if (!entry) return false;
+                if (entry.is_24_7) return true;
+                const openMin = toMinutes(entry.opens_at);
+                let closeMin = toMinutes(entry.closes_at);
+                // Treat midnight as end of day and handle overnight spans
+                if (closeMin === 0) closeMin = 24 * 60;
+                if (closeMin <= openMin) closeMin += 24 * 60;
+                const filterMin = toMinutes(openingFilter);
+                // Include spaces open at the filter time
+                return filterMin >= openMin && filterMin < closeMin;
+            })
+            // closing time filter
+            .filter((space) => {
+                if (!closingFilter) return true;
+                const entry = space.study_space_hours?.find(
+                    (h) => h.day_of_week === new Date().getDay()
+                );
+                if (!entry) return false;
+                if (entry.is_24_7) return true;
+                const openMin = toMinutes(entry.opens_at);
+                let closeMin = toMinutes(entry.closes_at);
+                if (closeMin === 0) closeMin = 24 * 60;
+                if (closeMin <= openMin) closeMin += 24 * 60;
+                const filterMin =
+                    toMinutes(closingFilter) === 0 ? 24 * 60 : toMinutes(closingFilter);
+                // Include spaces still open at the filter time
+                return filterMin > openMin && filterMin <= closeMin;
+            })
    );

    let dropdownVisible = $state(false);
@@ -80,6 +123,16 @@
            <Button href="/space/reports" type="link" style="red">Check Reports</Button>
        </div>
    {/if}
+    <div class="time-filter-container">
+        <label>
+            Open from:
+            <input type="time" bind:value={openingFilter} />
+        </label>
+        <label>
+            Open until:
+            <input type="time" bind:value={closingFilter} />
+        </label>
+    </div>
    <div class="tag-filter-container">
        <form>
            <div class="tagDisplay">
@@ -144,6 +197,7 @@
            href="/space/{studySpace.id}"
            imgSrc={imgUrl}
            space={studySpace}
+            hours={studySpace.study_space_hours}
        />
    {/each}
 </main>
@@ -185,7 +239,29 @@
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
-        padding: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .time-filter-container {
+        grid-column: 1 / -1;
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        margin-bottom: 0.5rem;
+    }
+    .time-filter-container label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1rem;
+        color: #eaffeb;
+    }
+    .time-filter-container input[type="time"] {
+        background: none;
+        border: 2px solid #eaffeb;
+        border-radius: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        color: #eaffeb;
    }

    form {
--- a/src/routes/space/[id]/+page.server.ts
+++ b/src/routes/space/[id]/+page.server.ts
@@ -5,7 +5,7 @@ export const load: PageServerLoad = async ({ depends, params, locals: { supabase
    depends("db:study_spaces");
    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");
--- a/src/routes/space/[id]/+page.svelte
+++ b/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 } from "$lib";
+    import { gmapsLoader, daysOfWeek, formatTime } from "$lib";
    import Button from "$lib/components/Button.svelte";

    const { data } = $props();
@@ -50,6 +50,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>
@@ -92,6 +99,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}
@@ -235,4 +258,24 @@
        flex-direction: column;
        padding-top: 1rem;
    }
+
+    .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>
--- a/src/routes/space/[id]/edit/+page.server.ts
+++ b/src/routes/space/[id]/edit/+page.server.ts
@@ -8,6 +8,12 @@ type StudySpaceData = Omit<
 > & {
    id?: string;
    building_location?: google.maps.places.PlaceResult;
+    opening_times?: {
+        day_of_week: number;
+        opens_at: string;
+        closes_at: string;
+        is_24_7: boolean;
+    }[];
 };

 export const load: PageServerLoad = async ({ params, locals: { supabase } }) => {
@@ -34,6 +40,13 @@ export const load: PageServerLoad = async ({ params, locals: { supabase } }) =>
    const studySpaceData = space as StudySpaceData & Partial<typeof space>;

    const images = studySpaceData.study_space_images || [];
+    const { data: hours, error: hoursErr } = await supabase
+        .from("study_space_hours")
+        .select("day_of_week, opens_at, closes_at, is_24_7")
+        .eq("study_space_id", params.id)
+        .order("day_of_week", { ascending: true });
+    if (hoursErr) error(500, "Failed to load opening times");
+    studySpaceData.opening_times = hours;

    delete studySpaceData.created_at;
    delete studySpaceData.updated_at;
--- a/src/routes/space/[id]/edit/+page.svelte
+++ b/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,10 +21,25 @@
    const { supabase } = $derived(data);

    const { space, images } = $derived(data);
-    const studySpaceData = $derived({
+    const studySpaceData = $state({
+        opening_times: daysOfWeek.map((_, index) => ({
+            day_of_week: index,
+            opens_at: "",
+            closes_at: "",
+            is_24_7: false
+        })),
        ...space
    });

+    $effect(() => {
+        if (!space) return;
+        const { opening_times, ...rest } = space;
+        Object.assign(studySpaceData, rest);
+        if (opening_times) {
+            studySpaceData.opening_times = opening_times;
+        }
+    });
+
    let scrollPosition = $state(0);
    const existingImages = $derived(
        Promise.all(
@@ -46,11 +62,13 @@
        if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
        if (!studySpaceData.building_location) return alert("Please select a building location.");

+        const { opening_times, ...spacePayload } = studySpaceData;
+
        const { data: studySpaceInsert, error: studySpaceError } = await supabase
            .from("study_spaces")
            .upsert(
                {
-                    ...studySpaceData,
+                    ...spacePayload,
                    building_location: studySpaceData.building_location as Json
                },
                {
@@ -102,6 +120,23 @@
            .select();
        if (imageInsertError) return alert(`Error creating image: ${imageInsertError.message}`);

+        const { error: deleteErr } = await supabase
+            .from("study_space_hours")
+            .delete()
+            .eq("study_space_id", studySpaceInsert.id);
+        if (deleteErr) return alert(`Error clearing old hours: ${deleteErr.message}`);
+
+        const { error: hoursErr } = await supabase.from("study_space_hours").insert(
+            opening_times.map((h) => ({
+                study_space_id: studySpaceInsert.id,
+                day_of_week: h.day_of_week,
+                opens_at: h.opens_at,
+                closes_at: h.closes_at,
+                is_24_7: h.is_24_7
+            }))
+        );
+        if (hoursErr) return alert(`Error saving opening times: ${hoursErr.message}`);
+
        alert("Thank you for your contribution!");
        // Redirect to the new study space page
        await goto(`/space/${studySpaceInsert.id}`, {
@@ -161,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>
@@ -254,6 +303,39 @@
        </div>
    </div>

+    <label for="opening-times-label">Opening Times:</label>
+    <div class="opening-times">
+        {#each daysOfWeek as day, index (index)}
+            <div class="opening-time-item">
+                <label for={"opens-" + index}>{day}</label>
+                <input
+                    id={"opens-" + index}
+                    type="time"
+                    bind:value={studySpaceData.opening_times[index].opens_at}
+                    required
+                    onchange={() => updateTimes(index)}
+                />
+                <span>to</span>
+                <input
+                    id={"closes-" + index}
+                    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)}
+                    />
+                    All day
+                </label>
+            </div>
+        {/each}
+    </div>
+
    <label for="tags">Additional tags:</label>
    <div class="tagDisplay">
        {#each studySpaceData.tags as tagName (tagName)}
@@ -488,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>