adds waypoint images

2024-03-20 20:46:29 +01:00
parent 3e8fb85c05
commit e5b5e50747
26 changed files with 1064 additions and 221 deletions
--- a/web/src/lib/components/base/tabs.svelte
+++ b/web/src/lib/components/base/tabs.svelte
--- a/web/src/lib/components/photo_card.svelte
+++ b/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
-            type="button"
-            class="tooltip"
-            data-title={$_("make-thumbnail")}
-            on:click={handleThumbnailClick}
-            ><i class="fa fa-file-image text-primary"></i></button
-        >
+        {#if showThumbnailControls}
+            <button
+                type="button"
+                class="tooltip"
+                data-title={$_("make-thumbnail")}
+                on:click={handleThumbnailClick}
+                ><i class="fa fa-file-image text-primary"></i></button
+            >
+        {/if}
+
        <button
            class="tooltip"
            data-title={$_("delete")}
--- a/web/src/lib/components/photo_gallery.svelte
+++ b/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>
--- a/web/src/lib/components/trail/photo_picker.svelte
+++ b/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>
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/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>
+                    <TrailDropdown {trail} {mode}></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 -->
--- a/web/src/lib/components/waypoint/waypoint_card.svelte
+++ b/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">
-        <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 imgSrc.length}
+        <PhotoGallery
+            photos={waypoint.photos.map((p) => getFileURL(waypoint, p))}
+            bind:open={openGallery}
+        ></PhotoGallery>
+        <button
+            class="relative basis-16 aspect-square ml-2 mb-3 shrink-0"
+            on:click={() => openGallery()}
+        >
+            {#each imgSrc as img, i}
+                <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>
--- a/web/src/lib/components/waypoint/waypoint_modal.svelte
+++ b/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}
--- a/web/src/lib/models/waypoint.ts
+++ b/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 };
--- a/web/src/lib/stores/trail_store.ts
+++ b/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,
        });
--- a/web/src/lib/stores/waypoint_store.ts
+++ b/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) {
-    const r = await fetch('/api/v1/waypoint/' + waypoint.id, {
+export async function waypoints_update(oldWaypoint: Waypoint, newWaypoint: Waypoint) {
+    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 {
--- a/web/src/lib/util/file_util.ts
+++ b/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);
+    });
+}
--- a/web/src/lib/util/format_util.ts
+++ b/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) {
-            return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
+        if (meters >= 1000) {
+            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`;
    }
 }
--- a/web/src/lib/util/leaflet_util.ts
+++ b/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;
 }
--- a/web/src/routes/api/v1/waypoint/[id]/file/+server.ts
+++ b/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)
+    }
+}
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/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 photoPreviews: string[] = [];
+    let editingBasicInfo: boolean = false;
+
+    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;
-                        $form.lon = e.point._latlng.lng;
+                        startCoordinates = e.point._latlng;
+                    } 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.elevation_gain = e.target.get_elevation_gain();
-                    $form.duration = e.target.get_total_time() / 1000 / 60;
+                    $form.distance = Math.round(e.target.get_distance());
+                    $form.elevation_gain = Math.round(
+                        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>) {
-        const savedWaypoint = e.detail;
+    function saveWaypoint(savedWaypoint: Waypoint) {
        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">
-                <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 items-center ">
-                <span>{$_("elevation-gain")}</span>
-                <span class="font-medium"
-                    >{formatElevation($form.elevation_gain)}</span
-                >
-                <input
-                    type="hidden"
+            {#if editingBasicInfo}
+                <TextField
+                    bind:value={$form.distance}
+                    name="distance"
+                    label={$_("distance")}
+                ></TextField>
+                <TextField
+                    bind:value={$form.elevation_gain}
                    name="elevation_gain"
-                    value={$form.elevation_gain}
-                />
-            </div>
-            <div class="flex flex-col items-center">
-                <span>{$_("est-duration")}</span>
-                <span class="font-medium">{formatTimeHHMM($form.duration)}</span
-                >
-                <input type="hidden" name="duration" value={$form.duration} />
-            </div>
+                    label={$_("elevation-gain")}
+                ></TextField>
+                <TextField
+                    bind:value={$form.duration}
+                    name="duration"
+                    label={$_("est-duration")}
+                ></TextField>
+            {:else}
+                <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">
-            <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="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>
+        <PhotoPicker
+            id="trail"
+            parent={$form}
+            bind:photos={$form.photos}
+            bind:thumbnail={$form.thumbnail}
+            bind:photoFiles
+        ></PhotoPicker>
        <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>