src/lib/components/Feedback.svelte

@@ -0,0 +1,338 @@
+<script lang="ts">
+    import crossUrl from "$lib/assets/cross.svg";
+    import type { Table } from "$lib";
+    import type { SupabaseClient } from "@supabase/supabase-js";
+    import type { Database } from "$lib/database.d.ts";
+    import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
+    import { invalidate } from "$app/navigation";
+
+    type StudySpaceData = Omit<
+        Table<"study_spaces">,
+        "id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
+    > & {
+        id?: string;
+        building_location?: google.maps.places.PlaceResult;
+    };
+    interface Props {
+        studySpaceData: StudySpaceData;
+        supabase: SupabaseClient<Database>;
+        hideFunc: () => void;
+    }
+
+    const { studySpaceData, supabase, hideFunc }: Props = $props();
+    let newStudySpaceData: StudySpaceData = $state({ ...studySpaceData });
+    let uploading = $state(false);
+    async function uploadFeedback() {
+        const { error: feedbackUpload } = await supabase
+            .from("study_spaces")
+            .update({
+                volume: newStudySpaceData.volume,
+                wifi: newStudySpaceData.wifi,
+                power: newStudySpaceData.power,
+                tags: newStudySpaceData.tags
+            })
+            .eq("id", newStudySpaceData.id ?? "");
+        invalidate("db:study_spaces");
+        if (feedbackUpload) return alert(`Error submitting feedback: ${feedbackUpload.message}`);
+        else alert("Feedback submitted successfully!");
+    }
+
+    // Tag
+    let tagFilter = $state("");
+    let tagFilterElem = $state<HTMLInputElement>();
+    let filteredTags = $derived(
+        availableStudySpaceTags
+            .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
+            .filter((tag) => !newStudySpaceData.tags.includes(tag))
+    );
+    let dropdownVisible = $state(false);
+
+    function deleteTag(tagName: string) {
+        return () => {
+            newStudySpaceData.tags = newStudySpaceData.tags.filter((tag) => tag !== tagName);
+        };
+    }
+
+    function addTag(tagName: string) {
+        return () => {
+            if (!newStudySpaceData.tags.includes(tagName)) {
+                newStudySpaceData.tags.push(tagName);
+            }
+            tagFilter = "";
+        };
+    }
+</script>
+
+<div class="overlay">
+    <form
+        onsubmit={async (event) => {
+            event.preventDefault();
+            uploading = true;
+            await uploadFeedback();
+            uploading = false;
+            hideFunc();
+        }}
+        class="feedbackContainer"
+    >
+        <h1 class="submitHeader">Submit Feedback</h1>
+
+        <div class="compulsoryTags">
+            <div class="compulsoryContainer">
+                <label for="volume">Sound level:</label>
+                <select
+                    bind:value={newStudySpaceData.volume}
+                    name="volume"
+                    class="compulsoryTagSelect"
+                >
+                    <option value="" disabled selected>How noisy is it?</option>
+                    {#each volumeTags as volumeTag (volumeTag)}
+                        <option value={volumeTag}>{volumeTag}</option>
+                    {/each}
+                </select>
+            </div>
+            <div class="compulsoryContainer">
+                <label for="powerOutlets">Power outlets:</label>
+                <select
+                    bind:value={newStudySpaceData.power}
+                    name="poweOutlets"
+                    class="compulsoryTagSelect"
+                >
+                    <option value="" disabled selected>Power outlets?</option>
+                    {#each powerOutletTags as powerOutletTag (powerOutletTag)}
+                        <option value={powerOutletTag}>{powerOutletTag}</option>
+                    {/each}
+                </select>
+            </div>
+            <div class="compulsoryContainer">
+                <label for="wifi">Wifi:</label>
+                <select bind:value={newStudySpaceData.wifi} name="wifi" class="compulsoryTagSelect">
+                    <option value="" disabled selected>How's the wifi?</option>
+                    {#each wifiTags as wifiTag (wifiTag)}
+                        <option value={wifiTag}>{wifiTag}</option>
+                    {/each}
+                </select>
+            </div>
+        </div>
+
+        <label for="tags">Additional tags:</label>
+        <div class="tagDisplay">
+            {#each newStudySpaceData.tags as tagName (tagName)}
+                <button class="tag" onclick={deleteTag(tagName)} type="button">
+                    {tagName}
+                    <img src={crossUrl} alt="delete" /></button
+                >
+            {/each}
+            <input
+                type="text"
+                name="tagInput"
+                class="tagInput"
+                bind:value={tagFilter}
+                bind:this={tagFilterElem}
+                onfocus={() => {
+                    dropdownVisible = true;
+                }}
+                onblur={() => {
+                    dropdownVisible = false;
+                }}
+                onkeypress={(event) => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        const tag = filteredTags[0];
+                        if (tag) addTag(tag)();
+                    }
+                }}
+                placeholder="Add tags..."
+            />
+            {#if dropdownVisible}
+                <div class="tagDropdown">
+                    {#each filteredTags as avaliableTag (avaliableTag)}
+                        <button
+                            class="avaliableTag"
+                            onclick={addTag(avaliableTag)}
+                            onmousedown={(e) => {
+                                // Keep input focused
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            type="button"
+                        >
+                            {avaliableTag}
+                        </button>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+
+        <button disabled={uploading} class="submit">Submit</button>
+        <button type="button" class="exit" aria-label="exit" onclick={hideFunc}
+            ><img src={crossUrl} alt="exit" /></button
+        >
+    </form>
+</div>
+
+<style>
+    .overlay {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(8, 15, 18, 0.9);
+        z-index: 100;
+    }
+
+    .feedbackContainer {
+        display: flex;
+        flex-direction: column;
+        width: 80%;
+        gap: 0.5rem;
+        padding: 1rem;
+        background-color: #182125;
+        border-radius: 0.5rem;
+        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+        color: #eaffeb;
+        position: absolute;
+        translate: 0 -3.5rem;
+        border: 2px solid #eaffeb;
+    }
+
+    .submitHeader {
+        width: 80%;
+    }
+
+    .submit {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+    }
+
+    .exit {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+
+    .tagDisplay {
+        display: flex;
+        gap: 0.4rem;
+        flex-wrap: wrap;
+        align-items: left;
+        justify-content: left;
+        position: relative;
+        width: 100%;
+        height: auto;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+    }
+    .tagInput {
+        width: 100%;
+        height: 100%;
+        background: none;
+        color: #eaffeb;
+        font-size: 1rem;
+        border: none;
+        outline: none;
+    }
+    ::placeholder {
+        color: #859a90;
+        opacity: 1;
+    }
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        cursor: pointer;
+        border-width: 0rem;
+    }
+    .tag img {
+        width: 1rem;
+        height: 1rem;
+        margin-left: 0.2rem;
+    }
+
+    .tagDropdown {
+        width: 100%;
+        display: flex;
+        gap: 0.4rem;
+        flex-wrap: wrap;
+        position: absolute;
+        background-color: #2e4653;
+        box-shadow: 1px 1px 0.5rem rgba(0, 0, 0, 0.5);
+        border-radius: 0.5rem;
+        overflow-y: auto;
+        max-height: 10rem;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .avaliableTag {
+        width: 100%;
+        text-align: left;
+        background: none;
+        border: none;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        margin: 0%;
+        padding: 0 0.8rem 0.4rem;
+    }
+    .avaliableTag:first-child {
+        padding-top: 0.6rem;
+        background-color: hsl(201, 26%, 60%);
+    }
+    .avaliableTag:last-child {
+        padding-bottom: 0.6rem;
+    }
+
+    .compulsoryTags {
+        display: flex;
+        flex-direction: column;
+        gap: 0.4rem;
+        border-radius: 0.5rem;
+        background-color: none;
+        width: 100%;
+        font-size: 1rem;
+    }
+
+    .compulsoryContainer {
+        display: flex;
+        flex-direction: column;
+        align-items: left;
+        justify-content: top;
+        border-radius: 0.5rem;
+        background-color: none;
+    }
+
+    .compulsoryTagSelect {
+        width: 100%;
+        height: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+        background: none;
+        color: #eaffeb;
+        font-size: 0.9rem;
+        text-align: left;
+    }
+
+    .compulsoryTagSelect option {
+        background-color: #2e4653;
+        color: #eaffeb;
+    }
+</style>

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

@@ -1,7 +1,8 @@
 import { error } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 
-export const load: PageServerLoad = async ({ params, locals: { supabase } }) => {
+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(*)")

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

@@ -5,6 +5,7 @@
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
     import Report from "$lib/components/Report.svelte";
+    import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
     import { gmapsLoader } from "$lib";
 
@@ -25,10 +26,15 @@
     );
 
     let isReportVisible = $state(false);
-    function hideFunc() {
+    function hideReport() {
         isReportVisible = false;
     }
 
+    let isFeedbackPromptVisible = $state(false);
+    function hideFeedbackPrompt() {
+        isFeedbackPromptVisible = false;
+    }
+
     let mapElem = $state<HTMLDivElement>();
     onMount(async () => {
         if (!mapElem) return console.error("Map element not found");
@@ -53,7 +59,17 @@
     </a>
 </Navbar>
 
-{#if isReportVisible}<Report {data} studySpaceId={space.id} {hideFunc} />
+{#if isReportVisible}<Report {data} studySpaceId={space.id} hideFunc={hideReport} />
+{/if}
+{#if isFeedbackPromptVisible}
+    <Feedback
+        studySpaceData={{
+            ...space,
+            building_location: place
+        }}
+        {supabase}
+        hideFunc={hideFeedbackPrompt}
+    />
 {/if}
 <main>
     <Carousel urls={imgUrls} />
@@ -87,6 +103,15 @@
         {/each}
     </p>
     <div class="addrMap" bind:this={mapElem}></div>
+
+    <button
+        type="button"
+        class="feedbackButton"
+        onclick={() => {
+            isFeedbackPromptVisible = true;
+        }}>Review the study space?</button
+    >
+
     {#if adminMode}
         <a href={`/space/${space.id}/edit`} class="editButton">Edit</a>
     {:else}
@@ -124,6 +149,7 @@
         border: none;
         margin: 0 auto;
     }
+
     .nameContainer {
         z-index: 10;
         display: block;
@@ -206,7 +232,18 @@
         cursor: pointer;
         margin-top: 1rem;
     }
-
+    .feedbackButton {
+        width: 100%;
+        padding: 0.7rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+        text-align: center;
+    }
     .editButton {
         width: 100%;
         padding: 0.4rem;