Merge branch 'feat/filter-by-tags' of https://gitlab.doc.ic.ac.uk/gk1623/drp-48 into feat/filter-by-tags

src/routes/+layout.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
+    import posthog from "posthog-js";
     import logoUrl from "$lib/assets/logo.svg";
+    import { onMount } from "svelte";
 
     const { children } = $props();
+
+    onMount(() => {
+        posthog.init("phc_hTnel2Q8GKo0TgIBnFWBueJW1ATmCG9tJOtETnQTUdY", {
+            api_host: "https://eu.i.posthog.com",
+            person_profiles: "always"
+        });
+    });
 </script>
 
 <svelte:head>

src/routes/space/+page.svelte

@@ -7,15 +7,30 @@
     import Button from "$lib/components/Button.svelte";
     import Images from "$lib/components/inputs/Images.svelte";
     import type { Table } from "$lib";
-    import { availableStudySpaceTags, wifiTags, powerOutletTags, volumeTags } from "$lib";
+    import {
+        availableStudySpaceTags,
+        wifiTags,
+        powerOutletTags,
+        volumeTags,
+        gmapsLoader
+    } from "$lib";
+    import { onMount } from "svelte";
+    import type { Json } from "$lib/database.js";
     const { data } = $props();
     const { supabase } = $derived(data);
 
     let spaceImgs = $state<FileList>();
     let uploading = $state(false);
-    let studySpaceData = $state<Omit<Table<"study_spaces">, "id" | "created_at" | "updated_at">>({
+    let studySpaceData = $state<
+        Omit<
+            Table<"study_spaces">,
+            "id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
+        > & {
+            building_location?: google.maps.places.PlaceResult;
+        }
+    >({
         description: "",
-        building_location: "",
+        building_location: undefined,
         location: "",
         tags: [],
         volume: "",
@@ -25,10 +40,14 @@
 
     async function uploadStudySpace() {
         if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
+        if (!studySpaceData.building_location) return alert("Please select a building location.");
 
         const { data: studySpaceInsert, error: studySpaceError } = await supabase
             .from("study_spaces")
-            .insert(studySpaceData)
+            .insert({
+                ...studySpaceData,
+                building_location: studySpaceData.building_location as Json
+            })
             .select()
             .single();
         if (studySpaceError)
@@ -92,6 +111,19 @@
             tagFilter = "";
         };
     }
+
+    let addressInput = $state<HTMLInputElement>();
+    onMount(async () => {
+        const loader = await gmapsLoader();
+        const places = await loader.importLibrary("places");
+        if (!addressInput) return console.error("Address input element not found");
+        const placeAutocomplete = new places.Autocomplete(addressInput, {
+            componentRestrictions: { country: "gb" }
+        });
+        placeAutocomplete.addListener("place_changed", () => {
+            studySpaceData.building_location = placeAutocomplete.getPlace();
+        });
+    });
 </script>
 
 <Navbar>
@@ -211,7 +243,7 @@
     <label for="building-location">Add the building location:</label>
     <Text
         name="building-location"
-        bind:value={studySpaceData.building_location}
+        bind:inputElem={addressInput}
         placeholder="Huxley Building, Imperial South Kensington Campus"
         required
     />

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

@@ -4,10 +4,14 @@
     import placeholder from "$lib/assets/study_space.png";
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
+    import Report from "$lib/components/Report.svelte";
+    import { onMount } from "svelte";
+    import { gmapsLoader } from "$lib";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
 
+    const place = $derived(space.building_location as google.maps.places.PlaceResult);
     const imgUrls = $derived(
         space.study_space_images.length === 0
             ? [placeholder]
@@ -17,6 +21,28 @@
                           .publicUrl
               )
     );
+
+    let isReportVisible = $state(false);
+    function hideFunc() {
+        isReportVisible = false;
+    }
+
+    let mapElem = $state<HTMLDivElement>();
+    onMount(async () => {
+        if (!mapElem) return console.error("Map element not found");
+        const loader = await gmapsLoader();
+        const { Map } = await loader.importLibrary("maps");
+        const { AdvancedMarkerElement } = await loader.importLibrary("marker");
+        const map = new Map(mapElem, {
+            center: place.geometry?.location,
+            zoom: 15,
+            mapId: "9f4993cd3fb1504d495821a5"
+        });
+        new AdvancedMarkerElement({
+            position: place.geometry?.location,
+            map
+        });
+    });
 </script>
 
 <Navbar>
@@ -25,6 +51,8 @@
     </a>
 </Navbar>
 
+{#if isReportVisible}<Report {data} studySpaceId={space.id} {hideFunc} />
+{/if}
 <main>
     <Carousel urls={imgUrls} />
     <div class="nameContainer">
@@ -49,8 +77,22 @@
     <hr />
     <div class="subtitle">Where it is:</div>
     <p class="addrContainer">
-        {space.building_location}
+        {#if place.name}
+            {place.name} <br />
+        {/if}
+        {#each place.formatted_address?.split(",") || [] as line (line)}
+            {line.trim()} <br />
+        {/each}
     </p>
+    <div class="addrMap" bind:this={mapElem}></div>
+
+    <button
+        type="button"
+        class="reportButton"
+        onclick={() => {
+            isReportVisible = true;
+        }}>Report</button
+    >
 </main>
 
 <style>
@@ -110,7 +152,7 @@
 
     .addrContainer {
         font-size: 1.2rem;
-        padding: 0rem 1.4rem;
+        padding: 0rem 1.4rem 1rem;
     }
 
     .tagContainer {
@@ -141,4 +183,22 @@
         font-size: 1.3rem;
         padding-bottom: 0;
     }
+
+    .addrMap {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        border-radius: 0.5rem;
+        border: 2px solid #eaffeb;
+    }
+    .reportButton {
+        width: 100%;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #bd4949;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+    }
 </style>