From e2795ff257d901131f35877ae68c91947b2c6c64 Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Wed, 11 Jun 2025 17:53:55 +0100
Subject: [PATCH] feat: edit page

---
 src/lib/components/Carousel.svelte            |  19 ++-
 src/lib/components/inputs/Images.svelte       |  11 +-
 src/routes/+page.svelte                       |   2 +-
 src/routes/space/[id]/edit/+page.server.ts    |  46 ++++++
 src/routes/space/{ => [id]/edit}/+page.svelte | 137 ++++++++++++++----
 5 files changed, 182 insertions(+), 33 deletions(-)
 create mode 100644 src/routes/space/[id]/edit/+page.server.ts
 rename src/routes/space/{ => [id]/edit}/+page.svelte (74%)

diff --git a/src/lib/components/Carousel.svelte b/src/lib/components/Carousel.svelte
index 4eb0777..be70eeb 100644
--- a/src/lib/components/Carousel.svelte
+++ b/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>
 
diff --git a/src/lib/components/inputs/Images.svelte b/src/lib/components/inputs/Images.svelte
index 123cdf3..6940dd0 100644
--- a/src/lib/components/inputs/Images.svelte
+++ b/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">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 19f132f..0d588e1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -51,7 +51,7 @@
 </script>
 
 <Navbar>
-    <a href="/space">
+    <a href="/space/new/edit">
         <img src={crossUrl} alt="new" class="new-space" />
     </a>
 </Navbar>
diff --git a/src/routes/space/[id]/edit/+page.server.ts b/src/routes/space/[id]/edit/+page.server.ts
new file mode 100644
index 0000000..5ddf15d
--- /dev/null
+++ b/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
+    };
+};
diff --git a/src/routes/space/+page.svelte b/src/routes/space/[id]/edit/+page.svelte
similarity index 74%
rename from src/routes/space/+page.svelte
rename to src/routes/space/[id]/edit/+page.svelte
index 27f89aa..6e5657c 100644
--- a/src/routes/space/+page.svelte
+++ b/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({
-                ...studySpaceData,
-                building_location: studySpaceData.building_location as Json
-            })
+            .upsert(
+                {
+                    ...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, {
-                            contentType: imageFile.type
-                        });
+                        .upload(
+                            `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>