adds waypoint images

db/migrations/1710949270_updated_waypoints.go

@@ -0,0 +1,61 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models/schema"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// add
+		new_photo := &schema.SchemaField{}
+		json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "tfhs3juh",
+			"name": "photo",
+			"type": "file",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"mimeTypes": [
+					"image/jpeg",
+					"image/png",
+					"image/vnd.mozilla.apng",
+					"image/webp",
+					"image/svg+xml"
+				],
+				"thumbs": [],
+				"maxSelect": 1,
+				"maxSize": 5242880,
+				"protected": false
+			}
+		}`), new_photo)
+		collection.Schema.AddField(new_photo)
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// remove
+		collection.Schema.RemoveField("tfhs3juh")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710949303_updated_waypoints.go

@@ -0,0 +1,84 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models/schema"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// update
+		edit_photo := &schema.SchemaField{}
+		json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "tfhs3juh",
+			"name": "photo",
+			"type": "file",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"mimeTypes": [
+					"image/jpeg",
+					"image/png",
+					"image/vnd.mozilla.apng",
+					"image/webp",
+					"image/svg+xml"
+				],
+				"thumbs": [],
+				"maxSelect": 99,
+				"maxSize": 5242880,
+				"protected": false
+			}
+		}`), edit_photo)
+		collection.Schema.AddField(edit_photo)
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// update
+		edit_photo := &schema.SchemaField{}
+		json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "tfhs3juh",
+			"name": "photo",
+			"type": "file",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"mimeTypes": [
+					"image/jpeg",
+					"image/png",
+					"image/vnd.mozilla.apng",
+					"image/webp",
+					"image/svg+xml"
+				],
+				"thumbs": [],
+				"maxSelect": 1,
+				"maxSize": 5242880,
+				"protected": false
+			}
+		}`), edit_photo)
+		collection.Schema.AddField(edit_photo)
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710954756_updated_waypoints.go

@@ -0,0 +1,55 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models/schema"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// add
+		new_author := &schema.SchemaField{}
+		json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "8qbxrsd8",
+			"name": "author",
+			"type": "relation",
+			"required": true,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"collectionId": "_pb_users_auth_",
+				"cascadeDelete": false,
+				"minSelect": null,
+				"maxSelect": 1,
+				"displayFields": null
+			}
+		}`), new_author)
+		collection.Schema.AddField(new_author)
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// remove
+		collection.Schema.RemoveField("8qbxrsd8")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710954971_updated_waypoints.go

@@ -0,0 +1,38 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && (@collection.trails.author = @request.auth.id)) || @request.data.author = @request.auth.id)")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && (@collection.trails.author = @request.auth.id)) || @request.data.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && @collection.trails.waypoints.id ?= id && (@collection.trails.author = @request.auth.id)")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && @collection.trails.waypoints.id ?= id && (@collection.trails.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710955022_updated_waypoints.go

@@ -0,0 +1,34 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("")
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && (@collection.trails.author = @request.auth.id)) || @request.data.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710955091_updated_waypoints.go

@@ -0,0 +1,38 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @request.data.author = @request.auth.id)")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @request.data.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && (@collection.trails.author = @request.auth.id)) || @request.data.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710955251_updated_waypoints.go

@@ -0,0 +1,38 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @collection.waypoints.author = @request.auth.id)")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @collection.waypoints.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @request.data.author = @request.auth.id)")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @request.data.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710955331_updated_waypoints.go

@@ -0,0 +1,38 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || author = @request.auth.id)")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @collection.waypoints.author = @request.auth.id)")
+
+		collection.DeleteRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || @collection.waypoints.author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710955366_updated_waypoints.go

@@ -0,0 +1,84 @@
+package migrations
+
+import (
+	"encoding/json"
+
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/models/schema"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// update
+		edit_photos := &schema.SchemaField{}
+		json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "tfhs3juh",
+			"name": "photos",
+			"type": "file",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"mimeTypes": [
+					"image/jpeg",
+					"image/png",
+					"image/vnd.mozilla.apng",
+					"image/webp",
+					"image/svg+xml"
+				],
+				"thumbs": [],
+				"maxSelect": 99,
+				"maxSize": 5242880,
+				"protected": false
+			}
+		}`), edit_photos)
+		collection.Schema.AddField(edit_photos)
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		// update
+		edit_photos := &schema.SchemaField{}
+		json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "tfhs3juh",
+			"name": "photo",
+			"type": "file",
+			"required": false,
+			"presentable": false,
+			"unique": false,
+			"options": {
+				"mimeTypes": [
+					"image/jpeg",
+					"image/png",
+					"image/vnd.mozilla.apng",
+					"image/webp",
+					"image/svg+xml"
+				],
+				"thumbs": [],
+				"maxSelect": 99,
+				"maxSize": 5242880,
+				"protected": false
+			}
+		}`), edit_photos)
+		collection.Schema.AddField(edit_photos)
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710956875_updated_waypoints.go

@@ -0,0 +1,34 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("")
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	})
+}

db/migrations/1710956923_updated_waypoints.go

@@ -0,0 +1,34 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	m "github.com/pocketbase/pocketbase/migrations"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+func init() {
+	m.Register(func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("@request.auth.id != \"\" && ((@collection.trails.waypoints.id ?= id && @collection.trails.author = @request.auth.id) || author = @request.auth.id)")
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("goeo2ubp103rzp9")
+		if err != nil {
+			return err
+		}
+
+		collection.UpdateRule = types.Pointer("")
+
+		return dao.SaveCollection(collection)
+	})
+}

web/src/lib/components/photo_card.svelte

@@ -4,6 +4,7 @@
 
     export let src: string;
     export let isThumbnail: boolean = false;
+    export let showThumbnailControls: boolean = true;
 
     const dispatch = createEventDispatcher();
 
@@ -20,7 +21,7 @@
     class="group relative h-32 w-32 rounded-xl bg-cover bg-no-repeat"
     style="background-image: url({src});"
 >
-    {#if isThumbnail}
+    {#if isThumbnail && showThumbnailControls}
         <i
             class="fa fa-file-image absolute top-2 right-2 text-primary bg-white rounded-full px-[10px] py-2 shadow-lg"
         ></i>
@@ -28,13 +29,16 @@
     <div
         class="flex opacity-0 group-hover:opacity-100 absolute top-0 w-full h-full bg-white/75 rounded-xl items-center justify-center gap-6 transition-all"
     >
-        <button
+        {#if showThumbnailControls}
-            type="button"
+            <button
-            class="tooltip"
+                type="button"
-            data-title={$_("make-thumbnail")}
+                class="tooltip"
-            on:click={handleThumbnailClick}
+                data-title={$_("make-thumbnail")}
-            ><i class="fa fa-file-image text-primary"></i></button
+                on:click={handleThumbnailClick}
-        >
+                ><i class="fa fa-file-image text-primary"></i></button
+            >
+        {/if}
+
         <button
             class="tooltip"
             data-title={$_("delete")}

web/src/lib/components/photo_gallery.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { DataSource } from "photoswipe";
+    import PhotoSwipeLightbox from "photoswipe/lightbox";
+    import { onMount } from "svelte";
+
+    export let photos: string[];
+    export function open(idx: number = 0) {
+        lightbox.loadAndOpen(idx, lightboxDataSource)
+    }
+    let lightbox: PhotoSwipeLightbox;
+    let lightboxDataSource: DataSource;
+
+    onMount(() => {
+        lightboxDataSource = photos.map((p) => ({
+            src: p,
+        }));
+        lightbox = new PhotoSwipeLightbox({
+            dataSource: lightboxDataSource,
+            pswpModule: async () => await import("photoswipe"),
+        });
+        lightbox.init();
+
+        lightbox.on("beforeOpen", () => {
+            const pswp = lightbox.pswp;
+            const ds = pswp?.options?.dataSource;
+            if (Array.isArray(ds)) {
+                for (let idx = 0, len = ds.length; idx < len; idx++) {
+                    const item = ds[idx];
+                    const img = new Image();
+                    img.onload = () => {
+                        item.width = img.naturalWidth;
+                        item.height = img.naturalHeight;
+                        pswp?.refreshSlideContent(idx);
+                    };
+                    img.src = item.src as string;
+                }
+            }
+        });
+    });
+</script>

web/src/lib/components/trail/photo_picker.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+    import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";
+    import PhotoCard from "../photo_card.svelte";
+
+    export let id: string;
+    export let photos: string[];
+    export let photoFiles: File[] | undefined;
+    export let parent: { [key: string]: any };
+    export let thumbnail: number = 0;
+    export let showThumbnailControls: boolean = true;
+
+    let photoPreviews: string[] = [];
+
+    $: Promise.all(
+        (photoFiles ?? []).map(async (f) => {
+            return await readAsDataURLAsync(f);
+        }),
+    ).then((v) => {
+        photoPreviews = v;
+    });
+
+    let offerUpload: boolean = false;
+
+    function handlePhotoDragOver(e: DragEvent) {
+        e.preventDefault();
+        offerUpload = true;
+    }
+
+    function handlePhotoDragLeave() {
+        offerUpload = false;
+    }
+
+    function handlePhotoDrop(e: DragEvent) {
+        e.preventDefault();
+
+        offerUpload = false;
+        handlePhotoSelection(e.dataTransfer?.files);
+    }
+
+    function openPhotoBrowser() {
+        document.getElementById(`${id}-photo-input`)!.click();
+    }
+
+    function handlePhotoSelection(files?: FileList | null) {
+        if (!files) {
+            files = (
+                document.getElementById(`${id}-photo-input`) as HTMLInputElement
+            ).files;
+        }
+
+        if (!files) {
+            return;
+        }
+
+        for (const file of files) {
+            if (!file.type.startsWith("image")) {
+                continue;
+            }
+            if (!photoFiles) {
+                photoFiles = [];
+            }
+            photoFiles.push(file);
+
+            // (function (file) {
+            //     var reader = new FileReader();
+            //     reader.onload = function (e) {
+            //         if (e.target?.result) {
+            //             photoPreviews = [
+            //                 ...photoPreviews,
+            //                 e.target.result as string,
+            //             ];
+            //         }
+            //     };
+            //     reader.readAsDataURL(file);
+            // })(file);
+        }
+    }
+
+    function makePhotoThumbnail(index: number) {
+        thumbnail = index;
+    }
+
+    function handlePhotoDelete(index: number) {
+        if (thumbnail == index) {
+            thumbnail = 0;
+        }
+
+        if (index >= photos.length) {
+            if (!photoFiles) {
+                photoFiles = [];
+            }
+            const adjustedIndex = index - photos.length;
+            photoFiles.splice(adjustedIndex, 1);
+            photoPreviews.splice(adjustedIndex, 1);
+
+            photoPreviews = [...photoPreviews];
+        } else {
+            photos.splice(index, 1);
+            photos = [...photos];
+        }
+    }
+</script>
+
+<div
+    class="flex gap-x-4 max-w-full overflow-x-auto shrink-0 rounded-xl {offerUpload
+        ? 'outline-dashed outline-input-border'
+        : ''}"
+    role="dialog"
+    on:dragover={handlePhotoDragOver}
+    on:dragleave={handlePhotoDragLeave}
+    on:drop={handlePhotoDrop}
+>
+    <button
+        class="btn-secondary h-32 w-32 m-2 shrink-0 grow-0 basis-auto"
+        type="button"
+        on:click={openPhotoBrowser}><i class="fa fa-plus"></i></button
+    >
+    <input
+        type="file"
+        id="{id}-photo-input"
+        accept="image/*"
+        multiple={true}
+        style="display: none;"
+        on:change={() => handlePhotoSelection()}
+    />
+    {#each (photos ?? []).concat(photoPreviews) as photo, i}
+        <div class="shrink-0 grow-0 basis-auto m-2">
+            <PhotoCard
+                src={i >= photos.length ? photo : getFileURL(parent, photo)}
+                on:delete={() => handlePhotoDelete(i)}
+                isThumbnail={thumbnail === i}
+                on:thumbnail={() => makePhotoThumbnail(i)}
+                {showThumbnailControls}
+            ></PhotoCard>
+        </div>
+    {/each}
+</div>

web/src/lib/components/trail/trail_info_panel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
-    import Tabs from "$lib/components/tabs.svelte";
+    import Tabs from "$lib/components/base/tabs.svelte";
     import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte";
     import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
     import type { Trail } from "$lib/models/trail";
@@ -17,11 +17,10 @@
     import type { Icon, Map, Marker } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
-    import type { DataSource } from "photoswipe";
-    import PhotoSwipeLightbox from "photoswipe/lightbox";
     import "photoswipe/style.css";
     import { onMount } from "svelte";
     import { _ } from "svelte-i18n";
+    import PhotoGallery from "../photo_gallery.svelte";
 
     export let trail: Trail;
     export let mode: "overview" | "map" = "map";
@@ -38,13 +37,12 @@
 
     let activeTab = 0;
 
-    let lightbox: PhotoSwipeLightbox;
-    let lightboxDataSource: DataSource;
-
     let thumbnail = trail.photos.length
         ? getFileURL(trail, trail.photos[trail.thumbnail])
         : "/imgs/default_thumbnail.webp";
 
+    let openGallery: (idx?: number) => void;
+
     onMount(async () => {
         if (mode == "overview") {
             const L = (await import("leaflet")).default;
@@ -91,42 +89,12 @@
                 markers.push(marker);
             }
         }
-
-        lightboxDataSource = trail.photos.map((p) => ({
-            src: getFileURL(trail, p),
-        }));
-        lightbox = new PhotoSwipeLightbox({
-            dataSource: lightboxDataSource,
-            pswpModule: async () => await import("photoswipe"),
-        });
-        lightbox.init();
-
-        lightbox.on("beforeOpen", () => {
-            const pswp = lightbox.pswp;
-            const ds = pswp?.options?.dataSource;
-            if (Array.isArray(ds)) {
-                for (let idx = 0, len = ds.length; idx < len; idx++) {
-                    const item = ds[idx];
-                    const img = new Image();
-                    img.onload = () => {
-                        item.width = img.naturalWidth;
-                        item.height = img.naturalHeight;
-                        pswp?.refreshSlideContent(idx);
-                    };
-                    img.src = item.src as string;
-                }
-            }
-        });
     });
 
     function openMarkerPopup(i: number) {
         markers[i].openPopup();
     }
 
-    function openGallery(idx: number) {
-        lightbox?.loadAndOpen(idx, lightboxDataSource);
-    }
-
     async function toggleMapFullScreen() {
         goto(`/map/trail/${trail.id!}`);
     }
@@ -162,8 +130,7 @@
                     </div>
                 </div>
                 {#if $currentUser && $currentUser.id == trail.author}
-                    <TrailDropdown {trail} {mode}
+                    <TrailDropdown {trail} {mode}></TrailDropdown>
-                    ></TrailDropdown>
                 {/if}
             </div>
         </section>
@@ -234,10 +201,14 @@
             {#if activeTab == 2}
                 <div
                     id="photo-gallery"
-                    class="grid grid-cols-1 {mode == "overview"
+                    class="grid grid-cols-1 {mode == 'overview'
                         ? 'sm:grid-cols-2 md:grid-cols-3'
                         : ''} gap-4"
                 >
+                    <PhotoGallery
+                        photos={trail.photos.map((p) => getFileURL(trail, p))}
+                        bind:open={openGallery}
+                    ></PhotoGallery>
                     {#each trail.photos ?? [] as photo, i}
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->

web/src/lib/components/waypoint/waypoint_card.svelte

@@ -1,11 +1,35 @@
 <script lang="ts">
     import type { Waypoint } from "$lib/models/waypoint";
+    import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";
     import { _ } from "svelte-i18n";
     import Dropdown from "../base/dropdown.svelte";
-    
+    import { browser } from "$app/environment";
+    import PhotoGallery from "../photo_gallery.svelte";
+
     export let waypoint: Waypoint;
     export let mode: "show" | "edit" = "show";
 
+    let openGallery: (idx?: number) => void;
+
+    let imgSrc: string[] = [];
+    $: if (waypoint.photos?.length) {
+        imgSrc = waypoint.photos
+            .filter((_, i) => i < 3)
+            .map((p) => getFileURL(waypoint, p));
+    } else if (waypoint._photos?.length && browser) {
+        Promise.all(
+            waypoint._photos
+                .filter((_, i) => i < 3)
+                .map(async (f) => {
+                    return await readAsDataURLAsync(f);
+                }),
+        ).then((v) => {
+            imgSrc = v;
+        });
+    } else {
+        imgSrc = [];
+    }
+
     const dropdownItems = [
         { text: $_("edit"), value: "edit" },
         { text: $_("delete"), value: "delete" },
@@ -13,19 +37,44 @@
 </script>
 
 <div
-    class="p-4 border border-input-border rounded-md my-2 hover:bg-menu-item-background-hover"
+    class="flex gap-4 p-4 border border-input-border rounded-md my-2 hover:bg-menu-item-background-hover"
 >
-    <div class="flex justify-between items-center mb-2">
+    {#if imgSrc.length}
-        <h5>
+        <PhotoGallery
-            <i class="fa fa-{waypoint.icon} mr-2"></i>{waypoint.name}
+            photos={waypoint.photos.map((p) => getFileURL(waypoint, p))}
-        </h5>
+            bind:open={openGallery}
-        {#if mode == "edit"}
+        ></PhotoGallery>
-            <Dropdown items={dropdownItems} on:change></Dropdown>
+        <button
-        {/if}
+            class="relative basis-16 aspect-square ml-2 mb-3 shrink-0"
-    </div>
+            on:click={() => openGallery()}
-
+        >
-    {#if waypoint.description}
+            {#each imgSrc as img, i}
-        <p>{waypoint.description}</p>
+                <img
+                    class="absolute h-full rounded-xl object-cover"
+                    style="top: {6 * i}px; right: {6 *
+                        i}px; transform: rotate(-{i * 5}deg)"
+                    src={img}
+                    alt="waypoint"
+                />
+            {/each}
+        </button>
     {/if}
-    <span class="text-sm text-gray-500">{waypoint.lat}, {waypoint.lon}</span>
+    <div class="basis-full">
+        <div class="flex justify-between items-center mb-2">
+            <h5>
+                <i class="fa fa-{waypoint.icon} mr-2"></i>{waypoint.name}
+            </h5>
+            {#if mode == "edit"}
+                <Dropdown items={dropdownItems} on:change></Dropdown>
+            {/if}
+        </div>
+
+        {#if waypoint.description}
+            <p>{waypoint.description}</p>
+        {/if}
+
+        <span class="text-sm text-gray-500"
+            >{waypoint.lat.toFixed(5)}, {waypoint.lon.toFixed(5)}</span
+        >
+    </div>
 </div>

web/src/lib/components/waypoint/waypoint_modal.svelte

@@ -11,6 +11,7 @@
     import Modal from "../base/modal.svelte";
     import TextField from "../base/text_field.svelte";
     import Textarea from "../base/textarea.svelte";
+    import PhotoPicker from "../trail/photo_picker.svelte";
     export let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
 
@@ -24,6 +25,7 @@
             closeModal!();
         },
     });
+
     $: form.set(util.cloneDeep($waypoint));
 
     $: filteredIcons =
@@ -92,6 +94,18 @@
                 on:change={handleChange}
             ></TextField>
         </div>
+        <div>
+            <label for="trail-photo-input" class="text-sm font-medium pb-1">
+                {$_("photos")}
+            </label>
+            <PhotoPicker
+                id="waypoint"
+                parent={$form}
+                bind:photos={$form.photos}
+                bind:photoFiles={$form._photos}
+                showThumbnailControls={false}
+            ></PhotoPicker>
+        </div>
     </form>
     <div slot="footer" class="flex items-center gap-4">
         <button class="btn-secondary" on:click={closeModal}

web/src/lib/models/waypoint.ts

@@ -1,5 +1,5 @@
 import type { Marker } from "leaflet";
-import { date, number, object, string } from "yup";
+import { number, object, string } from "yup";
 
 class Waypoint {
     id?: string;
@@ -9,8 +9,13 @@ class Waypoint {
     lon: number;
     icon?: string;
     marker?: Marker;
+    photos: string[];
+    _photos: File[];
+    author?: string;
 
-    constructor(lat: number, lon: number, params?: {id?: string, name?: string, description?: string, icon?: string, marker?: Marker}) {
+    constructor(lat: number, lon: number, params?: {
+        id?: string, name?: string, description?: string, icon?: string, marker?: Marker, photos?: string[];
+    }) {
         this.id = params?.id;
         this.name = params?.name ?? "";
         this.description = params?.description ?? "";
@@ -18,6 +23,8 @@ class Waypoint {
         this.lon = lon;
         this.icon = params?.icon ?? "circle";
         this.marker = params?.marker;
+        this.photos = params?.photos ?? []
+        this._photos = [];
     }
 }
 
@@ -28,6 +35,6 @@ const waypointSchema = object<Waypoint>({
     lat: number().required('Required').typeError('Invalid latitude'),
     lon: number().required('Required').typeError('Invalid longitude'),
     icon: string().optional()
-  });
+});
 
-export { Waypoint, waypointSchema }
+export { Waypoint, waypointSchema };

web/src/lib/stores/trail_store.ts

@@ -253,12 +253,13 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, photos: Fi
         const model = await waypoints_create({
             ...addedWaypoint,
             marker: undefined,
-        });
+        },);
         newTrail.waypoints.push(model.id!);
     }
 
     for (const updatedWaypoint of waypointUpdates.updated) {
-        const model = await waypoints_update({
+        const oldWaypoint = oldTrail.expand.waypoints.find(w => w.id == updatedWaypoint.id);
+        const model = await waypoints_update(oldWaypoint!, {
             ...updatedWaypoint,
             marker: undefined,
         });

web/src/lib/stores/waypoint_store.ts

@@ -1,28 +1,76 @@
 import { Waypoint } from "$lib/models/waypoint";
+import { pb } from "$lib/pocketbase";
 import { ClientResponseError } from "pocketbase";
 import { writable, type Writable } from "svelte/store";
 
 export const waypoint: Writable<Waypoint> = writable(new Waypoint(0, 0));
 
 export async function waypoints_create(waypoint: Waypoint) {
-    const r = await fetch('/api/v1/waypoint', {
+
+    waypoint.author = pb.authStore.model!.id
+
+    let r = await fetch('/api/v1/waypoint', {
         method: 'PUT',
         body: JSON.stringify(waypoint),
     })
 
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+
+    if (waypoint._photos && waypoint._photos.length) {
+        let model: Waypoint = await r.json();
+
+        const formData = new FormData()
+
+        for (const photo of waypoint._photos) {
+            formData.append("photos", photo)
+        }
+
+        r = await fetch(`/api/v1/waypoint/${model.id!}/file`, {
+            method: 'POST',
+            body: formData,
+        })
+    }
+
     if (r.ok) {
         return await r.json();
     } else {
         throw new ClientResponseError(await r.json())
     }
+
 }
 
-export async function waypoints_update(waypoint: Waypoint) {
+export async function waypoints_update(oldWaypoint: Waypoint, newWaypoint: Waypoint) {
-    const r = await fetch('/api/v1/waypoint/' + waypoint.id, {
+    newWaypoint.author = pb.authStore.model!.id
+
+    let r = await fetch('/api/v1/waypoint/' + newWaypoint.id, {
         method: 'POST',
-        body: JSON.stringify(waypoint),
+        body: JSON.stringify(newWaypoint),
     })
 
+    if (!r.ok) {
+        throw new ClientResponseError(await r.json())
+    }
+
+    const formData = new FormData()
+
+    for (const photo of newWaypoint._photos ?? []) {
+        formData.append("photos", photo)
+    }
+
+    const deletedPhotos = oldWaypoint.photos.filter(oldPhoto => !newWaypoint.photos.find(newPhoto => newPhoto === oldPhoto));
+
+    for (const deletedPhoto of deletedPhotos) {
+        formData.append("photos-", deletedPhoto.replace(/^.*[\\/]/, ''));
+    }
+
+    r = await fetch(`/api/v1/waypoint/${newWaypoint.id!}/file`, {
+        method: 'POST',
+        body: formData,
+    })
+
+
     if (r.ok) {
         return await r.json();
     } else {

web/src/lib/util/file_util.ts

@@ -5,4 +5,15 @@ export function getFileURL(record: { [key: string]: any; }, filename?: string) {
     }
 
     return `/api/v1/files/${record.collectionId}/${record.id}/${filename}`
-}
+}
+
+export function readAsDataURLAsync(file: File) {
+    return new Promise<string>((resolve, reject) => {
+        var fr = new FileReader();
+        fr.onload = () => {
+            resolve(fr.result as string);
+        };
+        fr.onerror = reject;
+        fr.readAsDataURL(file);
+    });
+}

web/src/lib/util/format_util.ts

@@ -20,10 +20,10 @@ export function formatDistance(meters?: number) {
     const unit = get(currentUser)?.unit ?? "metric";
 
     if (unit == "metric") {
-        if (meters % 1 === 0) {
+        if (meters >= 1000) {
-            return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
+            return `${(meters / 1000).toFixed(2)} km`
         } else {
-            return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${Math.round(meters)} m`
+            return meters % 1 == 0 ? `${meters} m` : `${Math.round(meters)} m`;
         }
     } else {
         const miles = meters * 0.000621371;
@@ -44,7 +44,7 @@ export function formatElevation(meters?: number) {
         return `${Math.round(meters)} m`
     } else {
         const feet = meters * 3.28084;
-    
+
         return `${Math.round(feet)} ft`;
     }
 }

web/src/lib/util/leaflet_util.ts

@@ -1,7 +1,7 @@
 import type { Waypoint } from "$lib/models/waypoint";
-import type { Icon, Marker } from "leaflet";
+import type { Icon, LeafletEvent, Marker } from "leaflet";
 
-export function createMarkerFromWaypoint(L: any, waypoint: Waypoint): Marker {
+export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?: (event: LeafletEvent) => void): Marker {
     const fontAwesomeIcon = L.AwesomeMarkers.icon({
         icon: waypoint.icon,
         prefix: "fa",
@@ -12,6 +12,7 @@ export function createMarkerFromWaypoint(L: any, waypoint: Waypoint): Marker {
     const marker = L.marker([waypoint.lat, waypoint.lon], {
         title: waypoint.name,
         icon: fontAwesomeIcon,
+        draggable: onDragEnd != null
     })
         .bindPopup(
             "<b>" +
@@ -21,6 +22,9 @@ export function createMarkerFromWaypoint(L: any, waypoint: Waypoint): Marker {
                 ? "<br>" + waypoint.description
                 : ""),
         );
+    if (onDragEnd) {
+        marker.on("dragend", onDragEnd);
+    }
 
     return marker;
 }

web/src/routes/api/v1/waypoint/[id]/file/+server.ts

@@ -0,0 +1,13 @@
+import type { Waypoint } from "$lib/models/waypoint";
+import { pb } from "$lib/pocketbase";
+import { error, json, type RequestEvent } from "@sveltejs/kit";
+
+export async function POST(event: RequestEvent) {
+    const data = await event.request.formData()
+    try {
+        const r = await pb.collection("waypoints").update<Waypoint>(event.params.id as string, data,);
+        return json(r);
+    } catch (e: any) {
+        throw error(e.status, e)
+    }
+}

web/src/routes/trail/edit/[id]/+page.svelte

@@ -4,9 +4,9 @@
     import TextField from "$lib/components/base/text_field.svelte";
     import Textarea from "$lib/components/base/textarea.svelte";
     import Toggle from "$lib/components/base/toggle.svelte";
-    import PhotoCard from "$lib/components/photo_card.svelte";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
     import SummitLogModal from "$lib/components/summit_log/summit_log_modal.svelte";
+    import PhotoPicker from "$lib/components/trail/photo_picker.svelte";
     import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
     import WaypointModal from "$lib/components/waypoint/waypoint_modal.svelte";
     import { SummitLog } from "$lib/models/summit_log";
@@ -21,7 +21,6 @@
         trails_update,
     } from "$lib/stores/trail_store";
     import { waypoint } from "$lib/stores/waypoint_store";
-    import { getFileURL } from "$lib/util/file_util";
     import {
         formatDistance,
         formatElevation,
@@ -32,7 +31,7 @@
     import { createForm } from "$lib/vendor/svelte-form-lib";
     import cryptoRandomString from "crypto-random-string";
     import { format } from "date-fns";
-    import type { GPX, Icon, LeafletEvent, Map } from "leaflet";
+    import type { GPX, Icon, LatLng, LeafletEvent, Map } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
     import "leaflet/dist/leaflet.css";
     import { onMount } from "svelte";
@@ -51,8 +50,9 @@
 
     let loading = false;
 
-    const photoFiles: File[] = [];
+    let editingBasicInfo: boolean = false;
-    let photoPreviews: string[] = [];
+
+    let photoFiles: File[] = [];
 
     let gpxFile: File | null = null;
 
@@ -72,33 +72,6 @@
         description: string().optional(),
     });
 
-    onMount(async () => {
-        L = (await import("leaflet")).default;
-        await import("leaflet-gpx");
-        await import("leaflet.awesome-markers");
-
-        map = L.map("map").setView([0, 0], 2);
-        map.attributionControl.setPrefix(false)
-        
-        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-            attribution: "© OpenStreetMap contributors",
-        }).addTo(map);
-
-        if (
-            data.trail.expand.gpx_data &&
-            data.trail.expand.gpx_data.length > 0
-        ) {
-            addGPXLayer(data.trail.expand.gpx_data, false);
-        }
-
-        if (data.trail.expand.waypoints?.length > 0) {
-            for (const waypoint of data.trail.expand.waypoints) {
-                const marker = createMarkerFromWaypoint(L, waypoint);
-                marker.addTo(map);
-            }
-        }
-    });
-
     const { form, errors, handleChange, handleSubmit } = createForm<Trail>({
         initialValues: data.trail,
         validationSchema: trailSchema,
@@ -170,9 +143,50 @@
         },
     });
 
+    onMount(async () => {
+        L = (await import("leaflet")).default;
+        await import("leaflet-gpx");
+        await import("leaflet.awesome-markers");
+
+        map = L.map("map").setView([0, 0], 2);
+        map.attributionControl.setPrefix(false);
+
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+            attribution: "© OpenStreetMap contributors",
+        }).addTo(map);
+
+        if (
+            data.trail.expand.gpx_data &&
+            data.trail.expand.gpx_data.length > 0
+        ) {
+            addGPXLayer(data.trail.expand.gpx_data, false);
+        }
+
+        if (data.trail.expand.waypoints?.length > 0) {
+            for (const waypoint of data.trail.expand.waypoints) {
+                const marker = createMarkerFromWaypoint(
+                    L,
+                    waypoint,
+                    (event) => {
+                        var marker = event.target;
+                        var position = marker.getLatLng();
+                        const editableWaypoint = $form.expand.waypoints.find(
+                            (w) => w.id == waypoint.id,
+                        );
+                        editableWaypoint!.lat = position.lat;
+                        editableWaypoint!.lon = position.lng;
+                        $form.expand.waypoints = [...$form.expand.waypoints];
+                    },
+                );
+                marker.addTo(map);
+            }
+        }
+    });
+
     function addGPXLayer(gpx: string, addWaypoints: boolean = true) {
         return new Promise<void>(function (resolve, reject) {
             gpxLayer?.remove();
+            let startCoordinates: LatLng;
             gpxLayer = new L.GPX(gpx, {
                 async: true,
                 polyline_options: {
@@ -216,24 +230,37 @@
                 .on("addpoint", function (e: any) {
                     if (e.point_type === "start") {
                         e.point.setZIndexOffset(1000);
-                        $form.lat = e.point._latlng.lat;
+                        startCoordinates = e.point._latlng;
-                        $form.lon = e.point._latlng.lng;
+                    } else if (e.point_type == "end") {
+                        if (startCoordinates) {
+                            $form.lat =
+                                (startCoordinates.lat + e.point._latlng.lat) /
+                                2;
+                            $form.lon =
+                                (startCoordinates.lng + e.point._latlng.lng) /
+                                2;
+                        } else {
+                            $form.lat = e.point._latlng.lat;
+                            $form.lon = e.point._latlng.lng;
+                        }
                     } else if (e.point_type === "waypoint") {
                         const waypoint = new Waypoint(
                             e.point._latlng.lat,
                             e.point._latlng.lng,
                             { name: e.point.options.title, marker: e.point },
                         );
-                        if (!$form.expand.waypoints) {
-                        }
                         $form.expand.waypoints.push(waypoint);
                     }
                 })
                 .on("loaded", function (e: LeafletEvent) {
                     map.fitBounds(e.target.getBounds());
-                    $form.distance = e.target.get_distance();
+                    $form.distance = Math.round(e.target.get_distance());
-                    $form.elevation_gain = e.target.get_elevation_gain();
+                    $form.elevation_gain = Math.round(
-                    $form.duration = e.target.get_total_time() / 1000 / 60;
+                        e.target.get_elevation_gain(),
+                    );
+                    $form.duration = Math.round(
+                        e.target.get_total_time() / 1000 / 60,
+                    );
                     resolve();
                 })
                 .on("error", reject)
@@ -309,8 +336,7 @@
         openWaypointModal();
     }
 
-    function saveWaypoint(e: CustomEvent<Waypoint>) {
+    function saveWaypoint(savedWaypoint: Waypoint) {
-        const savedWaypoint = e.detail;
         let editedWaypointIndex = $form.expand.waypoints.findIndex(
             (s) => s.id == savedWaypoint.id,
         );
@@ -323,61 +349,21 @@
 
             $form.expand.waypoints = [...$form.expand.waypoints, savedWaypoint];
         }
-        const marker = createMarkerFromWaypoint(L, savedWaypoint);
+        const marker = createMarkerFromWaypoint(L, savedWaypoint, (event) => {
+            var marker = event.target;
+            var position = marker.getLatLng();
+            const editableWaypoint = $form.expand.waypoints.find(
+                (w) => w.id == savedWaypoint.id,
+            );
+            editableWaypoint!.lat = position.lat;
+            editableWaypoint!.lon = position.lng;
+            $form.expand.waypoints = [...$form.expand.waypoints];
+        });
+
         marker.addTo(map);
         savedWaypoint.marker = marker;
     }
 
-    function openPhotoBrowser() {
-        document.getElementById("photoInput")!.click();
-    }
-
-    function handlePhotoSelection() {
-        const files = (
-            document.getElementById("photoInput") as HTMLInputElement
-        ).files;
-
-        if (!files) {
-            return;
-        }
-
-        for (const file of files) {
-            photoFiles.push(file);
-
-            (function (file) {
-                var reader = new FileReader();
-                reader.onload = function (e) {
-                    if (e.target?.result) {
-                        photoPreviews = [
-                            ...photoPreviews,
-                            e.target.result as string,
-                        ];
-                    }
-                };
-                reader.readAsDataURL(file);
-            })(file);
-        }
-    }
-
-    function makePhotoThumbnail(index: number) {
-        $form.thumbnail = index;
-    }
-
-    function handlePhotoDelete(index: number) {
-        if ($form.thumbnail == index) {
-            $form.thumbnail = 0;
-        }
-
-        if (index >= $form.photos.length) {
-            const adjustedIndex = index - $form.photos.length;
-            photoFiles.splice(adjustedIndex, 1);
-            photoPreviews.splice(adjustedIndex, 1);
-        } else {
-            $form.photos.splice(index, 1);
-            $form.photos = $form.photos;
-        }
-    }
-
     function beforeSummitLogModalOpen() {
         summitLog.set(new SummitLog(format(new Date(), "yyyy-MM-dd")));
         openSummitLogModal();
@@ -443,31 +429,69 @@
             on:change={handleFileSelection}
         />
         <hr class="border-separator" />
-        <h3 class="text-xl font-semibold">{$_("basic-info")}</h3>
+        <div class="flex gap-x-4">
+            <h3 class="text-xl font-semibold">{$_("basic-info")}</h3>
+            <button
+                type="button"
+                class="btn-icon"
+                on:click={() => (editingBasicInfo = !editingBasicInfo)}
+                ><i class="fa fa-{editingBasicInfo ? 'check' : 'pen'}"
+                ></i></button
+            >
+        </div>
+
         <div class="flex gap-4 justify-around">
-            <div class="flex flex-col items-center">
+            {#if editingBasicInfo}
-                <span>{$_("distance")}</span>
+                <TextField
-                <span class="font-medium">{formatDistance($form.distance)}</span
+                    bind:value={$form.distance}
-                >
+                    name="distance"
-                <input type="hidden" name="distance" value={$form.distance} />
+                    label={$_("distance")}
-            </div>
+                ></TextField>
-            <div class="flex flex-col items-center ">
+                <TextField
-                <span>{$_("elevation-gain")}</span>
+                    bind:value={$form.elevation_gain}
-                <span class="font-medium"
-                    >{formatElevation($form.elevation_gain)}</span
-                >
-                <input
-                    type="hidden"
                     name="elevation_gain"
-                    value={$form.elevation_gain}
+                    label={$_("elevation-gain")}
-                />
+                ></TextField>
-            </div>
+                <TextField
-            <div class="flex flex-col items-center">
+                    bind:value={$form.duration}
-                <span>{$_("est-duration")}</span>
+                    name="duration"
-                <span class="font-medium">{formatTimeHHMM($form.duration)}</span
+                    label={$_("est-duration")}
-                >
+                ></TextField>
-                <input type="hidden" name="duration" value={$form.duration} />
+            {:else}
-            </div>
+                <div class="flex flex-col">
+                    <span>{$_("distance")}</span>
+                    <span class="font-medium"
+                        >{formatDistance($form.distance)}</span
+                    >
+                    <input
+                        type="hidden"
+                        name="distance"
+                        value={$form.distance}
+                    />
+                </div>
+                <div class="flex flex-col">
+                    <span>{$_("elevation-gain")}</span>
+                    <span class="font-medium"
+                        >{formatElevation($form.elevation_gain)}</span
+                    >
+                    <input
+                        type="hidden"
+                        name="elevation_gain"
+                        value={$form.elevation_gain}
+                    />
+                </div>
+                <div class="flex flex-col">
+                    <span>{$_("est-duration")}</span>
+                    <span class="font-medium"
+                        >{formatTimeHHMM($form.duration)}</span
+                    >
+                    <input
+                        type="hidden"
+                        name="duration"
+                        value={$form.duration}
+                    />
+                </div>
+            {/if}
             <input type="hidden" name="lat" value={$form.lat} />
             <input type="hidden" name="lon" value={$form.lon} />
         </div>
@@ -529,33 +553,13 @@
         >
         <hr class="border-separator" />
         <h3 class="text-xl font-semibold">{$_("photos")}</h3>
-        <div class="flex gap-4 max-w-full overflow-x-auto shrink-0">
+        <PhotoPicker
-            <button
+            id="trail"
-                class="btn-secondary h-32 w-32 m-2 shrink-0 grow-0 basis-auto"
+            parent={$form}
-                type="button"
+            bind:photos={$form.photos}
-                on:click={openPhotoBrowser}><i class="fa fa-plus"></i></button
+            bind:thumbnail={$form.thumbnail}
-            >
+            bind:photoFiles
-            <input
+        ></PhotoPicker>
-                type="file"
-                id="photoInput"
-                accept="image/*"
-                multiple={true}
-                style="display: none;"
-                on:change={handlePhotoSelection}
-            />
-            {#each ($form.photos ?? []).concat(photoPreviews) as photo, i}
-                <div class="shrink-0 grow-0 basis-auto m-2">
-                    <PhotoCard
-                        src={i >= $form.photos.length
-                            ? photo
-                            : getFileURL($form, photo)}
-                        on:delete={() => handlePhotoDelete(i)}
-                        isThumbnail={$form.thumbnail === i}
-                        on:thumbnail={() => makePhotoThumbnail(i)}
-                    ></PhotoCard>
-                </div>
-            {/each}
-        </div>
         <hr class="border-separator" />
         <h3 class="text-xl font-semibold">{$_("summit-book")}</h3>
         <ul>
@@ -586,7 +590,9 @@
     </form>
     <div class="rounded-xl" id="map"></div>
 </main>
-<WaypointModal bind:openModal={openWaypointModal} on:save={saveWaypoint}
+<WaypointModal
+    bind:openModal={openWaypointModal}
+    on:save={(e) => saveWaypoint(e.detail)}
 ></WaypointModal>
 <SummitLogModal bind:openModal={openSummitLogModal} on:save={saveSummitLog}
 ></SummitLogModal>