src/lib/components/Carousel.svelte

@@ -4,20 +4,27 @@
     import { onMount } from "svelte";
 
     interface Props {
+        scrollPosition?: number;
         urls?: string[];
         ondelete?: (idx: number) => void;
     }
 
-    const { urls = [], ondelete }: Props = $props();
+    let { scrollPosition = $bindable(0), urls = [], ondelete }: Props = $props();
     let carousel = $state<HTMLDivElement>();
-    let scrollPosition = $state(0);
+    let currentPosition = $state(0);
     let scrollWidth = $state(0);
     let clientWidth = $state(1);
     function updateScroll() {
-        scrollPosition = carousel?.scrollLeft || 0;
+        currentPosition = carousel?.scrollLeft || 0;
         scrollWidth = carousel?.scrollWidth || 0;
         clientWidth = carousel?.clientWidth || 1;
     }
+    $effect(() => {
+        carousel?.scrollTo({
+            left: scrollPosition * clientWidth,
+            behavior: "smooth"
+        });
+    });
     onMount(() => {
         const id = setInterval(() => {
             if (carousel) {
@@ -41,7 +48,7 @@
             </div>
         {/each}
     </div>
-    {#if scrollPosition > clientWidth / 2}
+    {#if currentPosition > clientWidth / 2}
         <button
             class="arrow left"
             onclick={(e) => {
@@ -52,7 +59,7 @@
             <img src={arrowRightUrl} alt="go to previous" />
         </button>
     {/if}
-    {#if scrollPosition < scrollWidth - clientWidth * 1.5}
+    {#if currentPosition < scrollWidth - clientWidth * 1.5}
         <button
             class="arrow right"
             onclick={(e) => {
@@ -64,7 +71,7 @@
         </button>
     {/if}
     <span class="position">
-        {Math.round(scrollPosition / clientWidth) + 1} / {urls.length}
+        {Math.round(currentPosition / clientWidth) + 1} / {urls.length}
     </span>
 </div>
 

src/lib/components/inputs/Images.svelte

@@ -8,9 +8,17 @@
         minHeight?: string;
         files?: FileList;
         required?: boolean;
+        scrollPosition?: number;
     }
 
-    let { name, height, minHeight, files = $bindable(), ...rest }: Props = $props();
+    let {
+        name,
+        height,
+        minHeight,
+        files = $bindable(),
+        scrollPosition = $bindable(),
+        ...rest
+    }: Props = $props();
 </script>
 
 <label
@@ -34,6 +42,7 @@
                 }
                 files = dt.files;
             }}
+            bind:scrollPosition
         />
     {:else}
         <div class="message">

src/lib/index.ts

@@ -22,8 +22,8 @@ export const availableStudySpaceTags = [
     "Cringe"
 ];
 
-export const volumeTags = ["Silent", "Quiet", "Some Noise", "Loud"];
+export const volumeTags = ["Silent", "Some Noise", "Loud"];
-export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad WiFi", "No WiFi"];
+export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad/No WiFi"];
 export const powerOutletTags = ["Many Outlets", "Some Outlets", "No Outlets"];
 
 export const allTags = [...availableStudySpaceTags, ...volumeTags, ...wifiTags, ...powerOutletTags];

src/routes/+page.svelte

@@ -51,12 +51,13 @@
 </script>
 
 <Navbar>
-    <a href="/space">
+    <a href="/space/new/edit">
         <img src={crossUrl} alt="new" class="new-space" />
     </a>
 </Navbar>
 
 <main>
+    <a href="/space/reports" class="checkReports">Check Reports</a>
     <div class="tag-filter-container">
         <form>
             <div class="tagDisplay">
@@ -234,6 +235,17 @@
     .avaliableTag:last-child {
         padding-bottom: 0.6rem;
     }
+    .checkReports {
+        grid-column: 1 / -1;
+        display: block;
+        text-align: center;
+        color: #ffeaea;
+        font-size: 1.2rem;
+        text-decoration: none;
+        padding: 0.5rem;
+        background-color: #bd4949;
+        border-radius: 0.5rem;
+    }
 
     @media (max-width: 20rem) {
         main {

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

@@ -11,6 +11,8 @@
     const { data } = $props();
     const { space, supabase } = $derived(data);
 
+    let adminMode = $state(true);
+
     const place = $derived(space.building_location as google.maps.places.PlaceResult);
     const imgUrls = $derived(
         space.study_space_images.length === 0
@@ -85,14 +87,17 @@
         {/each}
     </p>
     <div class="addrMap" bind:this={mapElem}></div>
-
+    {#if adminMode}
-    <button
+        <a href={`/space/${space.id}/edit`} class="editButton">Edit</a>
-        type="button"
+    {:else}
-        class="reportButton"
+        <button
-        onclick={() => {
+            type="button"
-            isReportVisible = true;
+            class="reportButton"
-        }}>Report</button
+            onclick={() => {
-    >
+                isReportVisible = true;
+            }}>Report</button
+        >
+    {/if}
 </main>
 
 <style>
@@ -201,4 +206,18 @@
         cursor: pointer;
         margin-top: 1rem;
     }
+
+    .editButton {
+        width: 100%;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+        text-decoration: none;
+        text-align: center;
+    }
 </style>

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

@@ -0,0 +1,46 @@
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+import type { Table } from "$lib";
+
+type StudySpaceData = Omit<
+    Table<"study_spaces">,
+    "id" | "created_at" | "updated_at" | "building_location_old" | "building_location"
+> & {
+    id?: string;
+    building_location?: google.maps.places.PlaceResult;
+};
+
+export const load: PageServerLoad = async ({ params, locals: { supabase } }) => {
+    if (params.id === "new") {
+        return {
+            space: {
+                description: "",
+                building_location: undefined,
+                location: "",
+                tags: [],
+                volume: "",
+                power: "",
+                wifi: ""
+            } as StudySpaceData
+        };
+    }
+
+    const { data: space, error: err } = await supabase
+        .from("study_spaces")
+        .select("*, study_space_images(*)")
+        .eq("id", params.id)
+        .single();
+    if (err) error(500, "Failed to load study space");
+    const studySpaceData = space as StudySpaceData & Partial<typeof space>;
+
+    const images = studySpaceData.study_space_images || [];
+
+    delete studySpaceData.created_at;
+    delete studySpaceData.updated_at;
+    delete studySpaceData.study_space_images;
+
+    return {
+        space: studySpaceData as StudySpaceData,
+        images
+    };
+};

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

@@ -6,7 +6,6 @@
     import crossUrl from "$lib/assets/cross.svg";
     import Button from "$lib/components/Button.svelte";
     import Images from "$lib/components/inputs/Images.svelte";
-    import type { Table } from "$lib";
     import {
         availableStudySpaceTags,
         wifiTags,
@@ -16,27 +15,32 @@
     } from "$lib";
     import { onMount } from "svelte";
     import type { Json } from "$lib/database.js";
+
     const { data } = $props();
     const { supabase } = $derived(data);
 
+    const { space, images } = $derived(data);
+    const studySpaceData = $state({
+        ...space
+    });
+
+    let scrollPosition = $state(0);
+    const existingImages = $derived(
+        Promise.all(
+            images?.map(async ({ image_path }) => {
+                const { data, error } = await supabase.storage
+                    .from("files_bucket")
+                    .download(image_path);
+                if (error) {
+                    console.error(`Error downloading image ${image_path}:`, error);
+                    return null;
+                }
+                return { data, name: image_path.split("/").pop() || "image", type: data.type };
+            }) || []
+        )
+    );
     let spaceImgs = $state<FileList>();
     let uploading = $state(false);
-    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: undefined,
-        location: "",
-        tags: [],
-        volume: "",
-        power: "",
-        wifi: ""
-    });
 
     async function uploadStudySpace() {
         if (!spaceImgs || spaceImgs.length < 1) return alert("Please select an image file.");
@@ -44,10 +48,15 @@
 
         const { data: studySpaceInsert, error: studySpaceError } = await supabase
             .from("study_spaces")
-            .insert({
+            .upsert(
-                ...studySpaceData,
+                {
-                building_location: studySpaceData.building_location as Json
+                    ...studySpaceData,
-            })
+                    building_location: studySpaceData.building_location as Json
+                },
+                {
+                    onConflict: "id"
+                }
+            )
             .select()
             .single();
         if (studySpaceError)
@@ -60,14 +69,27 @@
                     const imageFile = spaceImgs![i];
                     const resp = await supabase.storage
                         .from("files_bucket")
-                        .upload(`public/${studySpaceInsert.id}-${imageFile.name}`, imageFile, {
+                        .upload(
-                            contentType: imageFile.type
+                            `public/${studySpaceInsert.id}-${crypto.randomUUID()}-${imageFile.name}`,
-                        });
+                            imageFile,
+                            {
+                                contentType: imageFile.type
+                            }
+                        );
                     return resp;
                 })
         );
+
         const imageError = imgUploads.find(({ error }) => error)?.error;
         if (imageError) return alert(`Error uploading image: ${imageError.message}`);
+        if (space.id) {
+            const { error: imageOverwriteError } = await supabase
+                .from("study_space_images")
+                .delete()
+                .eq("study_space_id", space.id);
+            if (imageOverwriteError)
+                return alert(`Error overwriting existing images: ${imageOverwriteError.message}`);
+        }
 
         const { error: imageInsertError } = await supabase
             .from("study_space_images")
@@ -117,6 +139,10 @@
         const loader = await gmapsLoader();
         const places = await loader.importLibrary("places");
         if (!addressInput) return console.error("Address input element not found");
+        addressInput.value = studySpaceData.building_location?.formatted_address || "";
+        if (studySpaceData.building_location?.name) {
+            addressInput.value = `${studySpaceData.building_location.name}, ${addressInput.value}`;
+        }
         const placeAutocomplete = new places.Autocomplete(addressInput, {
             componentRestrictions: { country: "gb" }
         });
@@ -124,6 +150,17 @@
             studySpaceData.building_location = placeAutocomplete.getPlace();
         });
     });
+    onMount(async () => {
+        const images = await existingImages;
+        const dt = new DataTransfer();
+        images.forEach((response) => {
+            if (response) {
+                const file = new File([response.data], response.name, { type: response.type });
+                dt.items.add(file);
+            }
+        });
+        spaceImgs = dt.files;
+    });
 </script>
 
 <Navbar>
@@ -140,7 +177,40 @@
         uploading = false;
     }}
 >
-    <Images name="study-space-image" minHeight="16rem" bind:files={spaceImgs} required />
+    <Images
+        name="study-space-image"
+        minHeight="16rem"
+        bind:files={spaceImgs}
+        bind:scrollPosition
+        required
+    />
+    {#if spaceImgs?.length || 0 > 0}
+        <label class="additionalImages" for="additionalImages">
+            Add more images
+            <input
+                type="file"
+                name="additionalImages"
+                id="additionalImages"
+                multiple
+                accept=".png, .jpg, .jpeg, .svg"
+                onchange={function () {
+                    const dt = new DataTransfer();
+                    if (spaceImgs) {
+                        for (let i = 0; i < spaceImgs.length; i++) {
+                            dt.items.add(spaceImgs[i]);
+                        }
+                    }
+                    if (this.files) {
+                        for (let i = 0; i < this.files.length; i++) {
+                            dt.items.add(this.files[i]);
+                        }
+                    }
+                    spaceImgs = dt.files;
+                    scrollPosition = dt.files.length - 1;
+                }}
+            />
+        </label>
+    {/if}
 
     <label for="location">Enter the name:</label>
     <Text
@@ -205,6 +275,7 @@
                 dropdownVisible = false;
             }}
             onkeypress={(event) => {
+                event.preventDefault();
                 if (event.key === "Enter") {
                     const tag = filteredTags[0];
                     if (tag) addTag(tag)();
@@ -401,4 +472,20 @@
         background-color: #2e4653;
         color: #eaffeb;
     }
+    .additionalImages {
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
+        background: linear-gradient(-83deg, #3fb095, #49bd85);
+        box-shadow: 0rem 0rem 0.5rem #182125;
+        color: #eaffeb;
+        border: none;
+        cursor: pointer;
+        text-align: center;
+    }
+    .additionalImages:focus {
+        outline: 2px solid #007bff;
+    }
+    .additionalImages input {
+        display: none;
+    }
 </style>

src/routes/space/reports/+page.server.ts

@@ -0,0 +1,14 @@
+import { error } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ depends, locals: { supabase } }) => {
+    depends("db:reports");
+    const { data: reports, error: err } = await supabase
+        .from("reports")
+        .select("*, study_spaces(location)");
+    if (err) error(500, "Failed to load reports");
+
+    return {
+        reports
+    };
+};

src/routes/space/reports/+page.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    import Navbar from "$lib/components/Navbar.svelte";
+    import crossUrl from "$lib/assets/cross.svg";
+    import type { Table } from "$lib";
+    const { data } = $props();
+    const { reports, supabase } = $derived(data);
+    import { invalidate } from "$app/navigation";
+
+    let deleting = $state(false);
+
+    async function deleteReport(report: Table<"reports">) {
+        const { error: reportDeleteError } = await supabase
+            .from("reports")
+            .delete()
+            .eq("id", report.id);
+
+        if (reportDeleteError)
+            return alert(`Error submitting report: ${reportDeleteError.message}`);
+        else alert("Report deleted successfully!");
+    }
+</script>
+
+<Navbar>
+    <a href="/">
+        <img src={crossUrl} alt="close" />
+    </a>
+</Navbar>
+
+<main>
+    {#each reports as report (report.id)}
+        <div class="reportContainer">
+            <button
+                type="button"
+                class="deleteReport"
+                aria-label="delete"
+                disabled={deleting}
+                onclick={async () => {
+                    deleting = true;
+                    await deleteReport(report);
+                    await invalidate("db:reports");
+                    deleting = false;
+                }}><img src={crossUrl} alt="delete" /></button
+            >
+            <h1 class="submitHeader">
+                {report.study_spaces?.location ?? "Study space doesn't exist"}
+            </h1>
+            <span class="tag">
+                {report.type}
+            </span>
+            <p class="content">{report.content}</p>
+
+            <a href="/space/{report.study_space_id}" class="viewPage">View Space</a>
+        </div>
+    {/each}
+</main>
+
+<style>
+    main {
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: column;
+        padding: 5rem 0 1rem 0;
+        max-width: 100%;
+        margin: 0 auto;
+        height: 200vh;
+    }
+
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 1.1rem;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+        width: fit-content;
+    }
+
+    .reportContainer {
+        display: flex;
+        flex-direction: column;
+        width: 90%;
+        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: relative;
+        translate: 0 -3.5rem;
+        border: 2px solid #eaffeb;
+    }
+
+    .viewPage {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #49bd85;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+        text-align: center;
+        text-decoration: none;
+    }
+
+    .deleteReport {
+        position: absolute;
+        top: 0.1rem;
+        right: 0.1rem;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+</style>