adds photo upload for summit logs

2024-11-30 18:34:48 +01:00
parent 8f8d28ef7a
commit 1ad7fb3820
20 changed files with 314 additions and 366 deletions
--- a/db/migrations/1732985146_updated_summit_logs.go
+++ b/db/migrations/1732985146_updated_summit_logs.go
@@ -0,0 +1,64 @@
+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("dd2l9a4vxpy2ni8")
+		if err != nil {
+			return err
+		}
+
+		// add
+		new_photos := &schema.SchemaField{}
+		if err := json.Unmarshal([]byte(`{
+			"system": false,
+			"id": "ixnksbkt",
+			"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",
+					"image/heic"
+				],
+				"thumbs": [],
+				"maxSelect": 99,
+				"maxSize": 5242880,
+				"protected": false
+			}
+		}`), new_photos); err != nil {
+			return err
+		}
+		collection.Schema.AddField(new_photos)
+
+		return dao.SaveCollection(collection)
+	}, func(db dbx.Builder) error {
+		dao := daos.New(db);
+
+		collection, err := dao.FindCollectionByNameOrId("dd2l9a4vxpy2ni8")
+		if err != nil {
+			return err
+		}
+
+		// remove
+		collection.Schema.RemoveField("ixnksbkt")
+
+		return dao.SaveCollection(collection)
+	})
+}
--- a/web/package.json
+++ b/web/package.json
@@ -17,8 +17,6 @@
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/leaflet": "^1.9.8",
-    "@types/leaflet-gpx": "^1.3.7",
    "@types/node": "^20.11.25",
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.33",
@@ -39,7 +37,6 @@
    "@turf/destination": "^7.1.0",
    "@turf/distance": "^7.1.0",
    "@types/chart.js": "^2.9.41",
-    "@types/leaflet.awesome-markers": "^2.0.28",
    "@types/three": "^0.161.2",
    "@types/xmldom": "^0.1.34",
    "canvg": "^4.0.1",
@@ -52,9 +49,6 @@
    "isomorphic-xml2js": "^0.1.3",
    "jspdf": "^2.5.1",
    "jszip": "^3.10.1",
-    "leaflet": "^1.9.4",
-    "leaflet-gpx": "^1.7.0",
-    "leaflet.awesome-markers": "^2.0.5",
    "maplibre-gl": "^4.7.1",
    "meilisearch": "^0.37.0",
    "nouislider": "^15.7.1",
--- a/web/src/lib/components/photo_card.svelte
+++ b/web/src/lib/components/photo_card.svelte
@@ -32,7 +32,7 @@
        ></i>
    {/if}
    <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"
+        class="flex opacity-0 group-hover:opacity-100 absolute top-0 w-full h-full bg-secondary-hover/75 rounded-xl items-center justify-center gap-6 transition-all"
    >
        {#if showThumbnailControls}
            <button
--- a/web/src/lib/components/summit_log/summit_log_card.svelte
+++ b/web/src/lib/components/summit_log/summit_log_card.svelte
@@ -1,25 +1,31 @@
 <script lang="ts">
    import type { SummitLog } from "$lib/models/summit_log";
-    import "leaflet/dist/leaflet.css";
    import { _ } from "svelte-i18n";
    import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";

-    import { browser } from "$app/environment";
-    import GPX from "$lib/models/gpx/gpx";
    import {
        formatDistance,
        formatElevation,
        formatTimeHHMM,
    } from "$lib/util/format_util";
-    import { gpx } from "$lib/vendor/toGeoJSON/toGeoJSON";
-    import type { Map } from "leaflet";
-    import { onMount } from "svelte";
+    import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";

-    let map: Map;
-    let L: any;
-    let layer: any;
+    let thumbnail: string = "/imgs/default_thumbnail.webp";
+
+    $: Promise.all(
+        (log._photos ?? []).map(async (f) => {
+            return await readAsDataURLAsync(f);
+        }),
+    ).then((v) => {
+        if (log.photos.length) {
+            thumbnail = getFileURL(log, log.photos[0]);
+        } else if (v.length) {
+            thumbnail = v[0];
+        } else {
+            thumbnail = "/imgs/default_thumbnail.webp";
+        }
+    });

-    export let index: number = 0;
    export let log: SummitLog;
    export let mode: "show" | "edit" = "show";

@@ -27,64 +33,18 @@
        { text: $_("edit"), value: "edit" },
        { text: $_("delete"), value: "delete" },
    ];
-
-    onMount(async () => {
-        if (!map) {
-            await initMap();
-        }
-        if (log.expand.gpx_data) {
-            showTrailOnMap();
-        }
-    });
-
-    async function initMap() {
-        L = (await import("leaflet")).default;
-
-        map = L.map("mini-map-" + index, {
-            zoomControl: false,
-            scrollWheelZoom: false,
-            dragging: false,
-        });
-        map.attributionControl.setPrefix(false);
-    }
-
-    $: if (log.expand.gpx_data) {
-        showTrailOnMap();
-    } else {
-        removeTrailFromMap();
-    }
-
-    async function showTrailOnMap() {
-        if (!log.expand.gpx_data || !browser || !map) {
-            return;
-        }
-
-        const geoJson = gpx(
-            new DOMParser().parseFromString(log.expand.gpx_data, "text/xml"),
-        );
-        layer = L.geoJson(geoJson, {
-            filter: (feature: any, layer: any) => {
-                return feature.geometry.type !== "Point";
-            },
-        }).addTo(map);
-        map.fitBounds(layer.getBounds());
-        map.invalidateSize();
-    }
-
-    function removeTrailFromMap() {
-        if (layer) {
-            map?.removeLayer(layer);
-        }
-    }
 </script>

 <div class="p-4 my-2 border border-input-border rounded-xl">
    <div class="flex items-center gap-x-4">
-        <div
-            class="h-24 aspect-square shrink-0 rounded-xl !bg-background"
-            class:hidden={!log.expand.gpx_data}
-            id="mini-map-{index}"
-        ></div>
+        <div class="h-24 aspect-square shrink-0 rounded-xl overflow-hidden">
+            <img
+                id="header-img"
+                class="object-cover h-full"
+                src={thumbnail}
+                alt=""
+            />
+        </div>
        <div class="basis-full">
            <div
                class="flex justify-between items-center"
--- a/web/src/lib/components/summit_log/summit_log_modal.svelte
+++ b/web/src/lib/components/summit_log/summit_log_modal.svelte
@@ -12,6 +12,7 @@
    import Textarea from "../base/textarea.svelte";
    import TrailPicker from "../trail/trail_picker.svelte";
    import GPX from "$lib/models/gpx/gpx";
+    import PhotoPicker from "../trail/photo_picker.svelte";
    export let openModal: (() => void) | undefined = undefined;
    export let closeModal: (() => void) | undefined = undefined;

@@ -30,6 +31,22 @@
            if (!$form.expand.gpx_data) {
                $form.gpx = "";
            }
+
+            if (
+                !$form._photos?.length &&
+                !$form.photos?.length &&
+                $form.expand?.gpx_data
+            ) {
+                const canvas = document.querySelector(
+                    "#trail-picker-map .maplibregl-canvas",
+                ) as HTMLCanvasElement;
+
+                const dataURL = canvas.toDataURL();
+                const response = await fetch(dataURL);
+                const blob = await response.blob();
+                $form._photos = [new File([blob], "route")];
+            }
+
            dispatch("save", submittedValues);
            closeModal!();
        },
@@ -85,6 +102,18 @@
                on:change={handleChange}
            ></Datepicker>
        </div>
+        <div>
+            <label for="summitlog-photo-input" class="text-sm font-medium pb-1">
+                {$_("photos")}
+            </label>
+            <PhotoPicker
+                id="summitlog-photo-input"
+                parent={$form}
+                bind:photos={$form.photos}
+                bind:photoFiles={$form._photos}
+                showThumbnailControls={false}
+            ></PhotoPicker>
+        </div>
        <div class="flex gap-4">
            <TrailPicker
                bind:trailFile={$form._gpx}
--- a/web/src/lib/components/summit_log/summit_log_table.svelte
+++ b/web/src/lib/components/summit_log/summit_log_table.svelte
@@ -79,7 +79,6 @@
    <tbody>
        {#each summitLogs as log, i}
            <SummitLogTableRow
-                index={i}
                {log}
                on:open={(e) => openMap(e.detail)}
                on:text={(e) => openText(e.detail)}
--- a/web/src/lib/components/summit_log/summit_log_table_row.svelte
+++ b/web/src/lib/components/summit_log/summit_log_table_row.svelte
@@ -1,66 +1,35 @@
 <script lang="ts">
    import type { SummitLog } from "$lib/models/summit_log";
-    import "leaflet/dist/leaflet.css";

+    import { getFileURL } from "$lib/util/file_util";
    import {
        formatDistance,
        formatElevation,
        formatTimeHHMM,
    } from "$lib/util/format_util";
-    import { gpx } from "$lib/vendor/toGeoJSON/toGeoJSON";
-    import type { Map } from "leaflet";
-    import { createEventDispatcher, onMount } from "svelte";
+    import { createEventDispatcher } from "svelte";
    import { _ } from "svelte-i18n";
-    import { getFileURL } from "$lib/util/file_util";
+    import PhotoGallery from "../photo_gallery.svelte";

-    export let index: number;
    export let log: SummitLog;
    export let showCategory: boolean = false;
    export let showTrail: boolean = false;
    export let showAuthor: boolean = false;

-    let map: Map;
+    let openGallery: (idx?: number) => void;
+
+    let imgSrc: string[] = [];
+    $: if (log.photos?.length) {
+        imgSrc = log.photos
+            .filter((_, i) => i < 3)
+            .reverse()
+            .map((p) => getFileURL(log, p));
+    } else {
+        imgSrc = [];
+    }

    const dispatch = createEventDispatcher();

-    onMount(async () => {
-        if (log.expand.gpx_data) {
-            await initMap();
-        }
-    });
-
-    async function initMap() {
-        const L = (await import("leaflet")).default;
-
-        map = L.map("mini-map-" + index, {
-            zoomControl: false,
-            scrollWheelZoom: false,
-            dragging: false,
-        });
-        map.attributionControl.setPrefix(false);
-
-        if (!log.expand.gpx_data || !map) {
-            return;
-        }
-
-        const geoJson = gpx(
-            new DOMParser().parseFromString(log.expand.gpx_data, "text/xml"),
-        );
-        const layer = (L as any)
-            .geoJson(geoJson, {
-                filter: (feature: any, layer: any) => {
-                    return feature.geometry.type !== "Point";
-                },
-            })
-            .addTo(map);
-        map.fitBounds(layer.getBounds());
-        map.invalidateSize();
-    }
-
-    function openMap() {
-        dispatch("open", log);
-    }
-
    function openText() {
        dispatch("text", log);
    }
@@ -75,13 +44,27 @@

 <tr class="text-center">
    <td>
+        {#if imgSrc.length}
+            <PhotoGallery
+                photos={log.photos.map((p) => getFileURL(log, p))}
+                bind:open={openGallery}
+            ></PhotoGallery>
            <button
+                class="relative w-16 aspect-square ml-2 mb-3 shrink-0"
                type="button"
-            on:click={openMap}
-            class="h-20 aspect-square shrink-0 rounded-xl !bg-background hover:!bg-secondary-hover transition-colors"
-            class:hidden={!log.expand?.gpx_data}
-            id="mini-map-{index}"
-        ></button>
+                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}
    </td>
    <td class:py-4={!log.expand?.gpx_data}
        >{new Date(log.date).toLocaleDateString(undefined, {
--- a/web/src/lib/components/trail/photo_picker.svelte
+++ b/web/src/lib/components/trail/photo_picker.svelte
@@ -116,7 +116,7 @@
 </script>

 <div
-    class="flex gap-x-4 max-w-full overflow-x-auto shrink-0 rounded-xl {offerUpload
+    class="flex gap-x-4 max-w-full shrink-0 rounded-xl {offerUpload
        ? 'outline-dashed outline-input-border'
        : ''}"
    role="dialog"
@@ -125,7 +125,7 @@
    on:drop={handlePhotoDrop}
 >
    <button
-        class="btn-secondary h-32 w-32 m-2 shrink-0 grow-0 basis-auto"
+        class="btn-secondary h-32 w-32 shrink-0 grow-0 basis-auto"
        type="button"
        on:click={openPhotoBrowser}><i class="fa fa-plus"></i></button
    >
@@ -137,8 +137,9 @@
        style="display: none;"
        on:change={() => handlePhotoSelection()}
    />
+    <div class="flex overflow-x-auto gap-x-3">
        {#each (photos ?? []).concat(photoPreviews) as photo, i}
-        <div class="shrink-0 grow-0 basis-auto m-2">
+            <div class="shrink-0 grow-0 basis-auto overflow-hidden">
                <PhotoCard
                    src={i >= photos.length ? photo : getFileURL(parent, photo)}
                    on:delete={() => handlePhotoDelete(i)}
@@ -150,4 +151,5 @@
                ></PhotoCard>
            </div>
        {/each}
+    </div>
 </div>
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -133,7 +133,7 @@
                alt=""
            />
            <div
-                class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
+                class="absolute bottom-0 w-full h-2/3 bg-gradient-to-b from-transparent to-black opacity-50"
            ></div>
            {#if (trail.public || trailIsShared) && pb.authStore.model}
                <div
@@ -366,7 +366,7 @@
                </div>
            {/if}
            {#if mode == "overview"}
-                <div class="relative h-72 rounded-xl">
+                <div class="relative h-72 rounded-xl overflow-hidden">
                    <MapWithElevationMaplibre
                        trails={[trail]}
                        showElevation={false}
--- a/web/src/lib/components/trail/trail_picker.svelte
+++ b/web/src/lib/components/trail/trail_picker.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-    import { gpx } from "$lib/vendor/toGeoJSON/toGeoJSON";
-    import "leaflet/dist/leaflet.css";
+    import * as M from "maplibre-gl";

-    import type { Map } from "leaflet";
-    import { createEventDispatcher, onMount, tick } from "svelte";
+    import { fromFile, toGeoJson } from "$lib/util/gpx_util";
+    import { createEventDispatcher, onMount } from "svelte";
    export let trailFile: File | null;
    export let trailData: string | undefined;
    export let label: string = "";

-    let map: Map;
-    let L: any;
-    let layer: any;
+    let map: M.Map;
+    let layer: M.LineLayerSpecification | undefined;
+    let source: M.GeoJSONSource | undefined;

    const dispatch = createEventDispatcher();

@@ -27,14 +26,13 @@
    });

    async function initMap() {
-        L = (await import("leaflet")).default;
-
-        map = L.map("trail-picker-map", {
-            zoomControl: false,
-            scrollWheelZoom: false,
-            dragging: false,
+        map = new M.Map({
+            container: "trail-picker-map",
+            attributionControl: false,
+            dragPan: false,
+            scrollZoom: false,
+            preserveDrawingBuffer: true
        });
-        map.attributionControl.setPrefix(false);
    }

    function openTrailBrowser() {
@@ -42,7 +40,7 @@
            trailFile = null;
            trailData = undefined;

-            dispatch("change", null)
+            dispatch("change", null);
        } else {
            document.getElementById("trail-input")!.click();
        }
@@ -59,35 +57,61 @@
        }

        trailFile = files.item(0);
-        trailData = await trailFile?.text();
+        if (!trailFile) {
+            return;
+        }
+        const parseResult = await fromFile(trailFile);
+
+        trailData = parseResult.gpxData;

        dispatch("change", trailData);
    }

    async function showTrailOnMap() {
-        if (!trailData) {
+        if (!trailData || !map) {
            return;
        }
+        const sourceId = "trail-picker-geojson-source";
+        const layerId = "trail-picker-geojson-layer";
+
+        const geojson = toGeoJson(trailData);

-        const geoJson = gpx(
-            new DOMParser().parseFromString(trailData, "text/xml"),
-        );
        if (layer) {
-            map.removeLayer(layer);
+            map.removeLayer(layerId);
+            map.removeSource(sourceId);
        }
-        layer = L.geoJson(geoJson, {
-            filter: (feature: any, layer: any) => {
-                return feature.geometry.type !== "Point";
+
+        map.addSource(sourceId, {
+            type: "geojson",
+            data: geojson,
+        });
+        map.addLayer({
+            id: layerId,
+            type: "line",
+            source: sourceId,
+            paint: {
+                "line-color": "#3388ff",
+                "line-width": 3,
            },
-        }).addTo(map);
-        map.fitBounds(layer.getBounds());
-        map.invalidateSize();
+        });
+        layer = map.getLayer(layerId) as M.LineLayerSpecification;
+        source = map.getSource(sourceId) as M.GeoJSONSource;        
+        map.resize()
+        map.fitBounds(geojson.bbox as M.LngLatBoundsLike, {animate: false, padding: 8});
    }

    function removeTrailFromMap() {
        if (layer) {
-            map?.removeLayer(layer);
+            map?.removeLayer(layer.id);
+            layer = undefined;
        }
+        if (source) {
+            map?.removeSource(source.id);
+            source = undefined;
+        }
+
+        trailData = undefined;
+        trailFile = null;
    }
 </script>

--- a/web/src/lib/components/waypoint/waypoint_card.svelte
+++ b/web/src/lib/components/waypoint/waypoint_card.svelte
@@ -15,6 +15,7 @@
    $: if (waypoint.photos?.length) {
        imgSrc = waypoint.photos
            .filter((_, i) => i < 3)
+            .reverse()
            .map((p) => getFileURL(waypoint, p));
    } else if (waypoint._photos?.length && browser) {
        Promise.all(
@@ -37,7 +38,7 @@
 </script>

 <div
-    class="flex gap-4 p-4 border border-input-border rounded-md my-2 hover:bg-menu-item-background-hover"
+    class="flex gap-4 p-4 outline outline-1 outline-input-border rounded-md my-2 hover:outline-2"
 >
    {#if imgSrc.length}
        {#if mode == "show"}
--- a/web/src/lib/components/waypoint/waypoint_modal.svelte
+++ b/web/src/lib/components/waypoint/waypoint_modal.svelte
@@ -120,11 +120,11 @@
            ></TextField>
        </div>
        <div>
-            <label for="trail-photo-input" class="text-sm font-medium pb-1">
+            <label for="waypoint-photo-input" class="text-sm font-medium pb-1">
                {$_("photos")}
            </label>
            <PhotoPicker
-                id="waypoint"
+                id="waypoint-photo-input"
                parent={$form}
                on:exif={(e) => getCoordinatesFromPhoto(e.detail)}
                bind:photos={$form.photos}
--- a/web/src/lib/models/summit_log.ts
+++ b/web/src/lib/models/summit_log.ts
@@ -7,6 +7,8 @@ class SummitLog {
  text?: string;
  gpx?: string;
  _gpx: File | null;
+  photos: string[];
+  _photos: File[];
  distance?: number
  elevation_gain?: number
  elevation_loss?: number
@@ -19,7 +21,7 @@ class SummitLog {
    author?: UserAnonymous
  }

-  constructor(date: string, params?: { id?: string, text?: string, distance?: number, elevation_loss?: number, elevation_gain?: number, duration?: number }) {
+  constructor(date: string, params?: { id?: string, text?: string, distance?: number, elevation_loss?: number, elevation_gain?: number, duration?: number, photos?: string[] }) {
    this.date = date;
    this.id = params?.id;
    this.text = params?.text ?? "";
@@ -29,6 +31,8 @@ class SummitLog {
    this.elevation_loss = params?.elevation_loss
    this.duration = params?.duration
    this._gpx = null
+    this.photos = params?.photos ?? []
+    this._photos = [];
  }
 }

--- a/web/src/lib/stores/summit_log_store.ts
+++ b/web/src/lib/stores/summit_log_store.ts
@@ -53,9 +53,10 @@ export async function summit_logs_create(summitLog: SummitLog, f: (url: RequestI
        throw new ClientResponseError(await r.json())
    }

-    if (summitLog._gpx && summitLog._gpx instanceof File) {
    let model: SummitLog = await r.json();

+    if (summitLog._gpx && summitLog._gpx instanceof File) {
+
        const formData = new FormData()

        formData.append("gpx", summitLog._gpx)
@@ -66,6 +67,20 @@ export async function summit_logs_create(summitLog: SummitLog, f: (url: RequestI
        })
    }

+    if (summitLog._photos && summitLog._photos.length) {
+
+        const formData = new FormData()
+
+        for (const photo of summitLog._photos) {
+            formData.append("photos", photo)
+        }
+
+        r = await fetch(`/api/v1/summit-log/${model.id!}/file`, {
+            method: 'POST',
+            body: formData,
+        })
+    }
+
    if (r.ok) {
        return await r.json();
    } else {
@@ -73,28 +88,38 @@ export async function summit_logs_create(summitLog: SummitLog, f: (url: RequestI
    }
 }

-export async function summit_logs_update(summitLog: SummitLog) {
-    summitLog.author = pb.authStore.model!.id
+export async function summit_logs_update(oldSummitLog: SummitLog, newSummitLog: SummitLog) {
+    newSummitLog.author = pb.authStore.model!.id

-    let r = await fetch('/api/v1/summit-log/' + summitLog.id, {
+    let r = await fetch('/api/v1/summit-log/' + newSummitLog.id, {
        method: 'POST',
-        body: JSON.stringify(summitLog),
+        body: JSON.stringify(newSummitLog),
    })

    if (!r.ok) {
        throw new ClientResponseError(await r.json())
    }

-
-    if (summitLog._gpx) {
    const formData = new FormData()

-        formData.append("gpx", summitLog._gpx);
-        r = await fetch(`/api/v1/summit-log/${summitLog.id!}/file`, {
+    for (const photo of newSummitLog._photos ?? []) {
+        formData.append("photos", photo)
+    }
+
+    const deletedPhotos = oldSummitLog.photos.filter(oldPhoto => !newSummitLog.photos.find(newPhoto => newPhoto === oldPhoto));
+
+    for (const deletedPhoto of deletedPhotos) {
+        formData.append("photos-", deletedPhoto.replace(/^.*[\\/]/, ''));
+    }
+
+    if (newSummitLog._gpx) {
+        formData.append("gpx", newSummitLog._gpx);
+    }
+
+    r = await fetch(`/api/v1/summit-log/${newSummitLog.id!}/file`, {
        method: 'POST',
        body: formData,
    })
-    }

    if (r.ok) {
        return await r.json();
--- a/web/src/lib/stores/trail_store.ts
+++ b/web/src/lib/stores/trail_store.ts
@@ -261,7 +261,9 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, photos?: F
    }

    for (const updatedSummitLog of summitLogUpdates.updated) {
-        const model = await summit_logs_update(updatedSummitLog);
+        const oldSummitLog = oldTrail.expand.summit_logs.find(w => w.id == updatedSummitLog.id);
+
+        const model = await summit_logs_update(oldSummitLog!, updatedSummitLog);
    }

    for (const deletedSummitLog of summitLogUpdates.deleted) {
--- a/web/src/lib/util/gpx_util.ts
+++ b/web/src/lib/util/gpx_util.ts
@@ -102,6 +102,37 @@ export async function trail2gpx(trail: Trail) {
    return gpx.toString();
 }

+export async function fromFile(file: File | Blob) {
+    let gpxData = "";
+    let gpxFile: Blob;
+    const fileContent = await file.text();
+    const fileBuffer = await file.arrayBuffer();
+
+    if (!isFITFile(fileBuffer)) {
+        if (fileContent.includes("http://www.opengis.net/kml")) {
+            gpxData = fromKML(fileContent);
+            gpxFile = new Blob([gpxData], {
+                type: "application/gpx+xml",
+            });
+        } else if (fileContent.includes("TrainingCenterDatabase")) {
+            gpxData = fromTCX(fileContent);
+            gpxFile = new Blob([gpxData], {
+                type: "application/gpx+xml",
+            });
+        } else {
+            gpxData = fileContent;
+            gpxFile = file;
+        }
+    } else {
+        gpxData = await fromFIT(fileBuffer);
+        gpxFile = new Blob([gpxData], {
+            type: "application/gpx+xml",
+        });
+    }
+
+    return {gpxData, gpxFile};
+}
+
 export function fromKML(kmlData: string) {
    const parser = browser ? new DOMParser() : new xmldom.DOMParser();
    const nodes = parser.parseFromString(kmlData, "text/xml")
--- a/web/src/lib/util/leaflet_util.ts
+++ b/web/src/lib/util/leaflet_util.ts
@@ -1,116 +0,0 @@
-import { haversineDistance } from "$lib/models/gpx/utils";
-import type { Waypoint } from "$lib/models/waypoint";
-import type { LeafletEvent, Map, Marker } from "leaflet";
-import * as M from "maplibre-gl";
-
-export const startIcon = () => L.divIcon({
-    html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-bullseye -translate-x-1/2 -translate-y-1/3"></i>',
-    className: 'start-icon'
-});
-export const endIcon = () => L.divIcon({
-    html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-flag-checkered -translate-x-1/2 -translate-y-1/3"></i>',
-    className: 'end-icon'
-});
-
-export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?: (event: LeafletEvent) => void): Marker {
-    const icon = L.divIcon({
-        html: `<i class="px-2 py-2 text-white bg-gray-500 rounded-full fa fa-${waypoint.icon}"></i>`,
-        className: 'waypoint-icon'
-    });
-
-    const marker = L.marker([waypoint.lat, waypoint.lon], {
-        title: waypoint.name,
-        icon: icon,
-        draggable: onDragEnd != null,
-        meta: {
-            waypointName: waypoint.name
-        }
-    })
-        .bindPopup(
-            "<b>" +
-            waypoint.name +
-            "</b>" +
-            (waypoint.description && waypoint.description.length > 0
-                ? "<br>" + waypoint.description
-                : ""),
-        );
-    if (onDragEnd) {
-        marker.on("dragend", onDragEnd);
-    }
-
-    return marker;
-}
-
-export function createAnchorMarker(L: any, lat: number, lon: number, index: number, onDeleteClick: () => void, onDragEnd: (event: LeafletEvent) => void): Marker {
-
-    const anchorIconElement = document.createElement("span")
-    anchorIconElement.textContent = "" + index
-    const anchorIcon = L.divIcon({
-        html: anchorIconElement,
-        iconSize: [24, 24],
-        className: "leaflet-anchor"
-    });
-
-    const deleteButton = document.createElement("button");
-    deleteButton.className = "btn-icon fa fa-trash text-red-500";
-    deleteButton.addEventListener("click", onDeleteClick)
-    const marker = L.marker([lat, lon], {
-        icon: anchorIcon,
-        draggable: true,
-    })
-        .bindPopup(
-            deleteButton
-        );
-    marker.on("dragend", onDragEnd);
-
-    return marker
-}
-
-export function calculatePixelPerMeter(map: M.Map, meters: number) {
-    const y = map.getCanvas().getBoundingClientRect().y;
-    const x = map.getCanvas().getBoundingClientRect().x;
-    const maxMeters = map.unproject([0, y]).distanceTo(map.unproject([x, y]));
-    const pixelPerMeter = x / maxMeters;
-
-    return pixelPerMeter * meters
-}
-
-export function calculateScaleFactor(map: M.Map) {
-    function _pxTOmm() {
-        let heightRef = document.createElement('div');
-        heightRef.style.height = '1mm';
-        heightRef.style.position = "absolute";
-        heightRef.id = 'heightRef';
-        document.body.appendChild(heightRef);
-
-        const pxPermm = heightRef.getBoundingClientRect().height;
-
-        document.body.removeChild(heightRef);
-
-        return function pxTOmm(px: number) {
-            return px / pxPermm;
-        }
-    }
-    var centerOfMap = map.getCanvas().getBoundingClientRect().y / 2;
-
-    const p1 = map.unproject([0, centerOfMap]);
-    const p2 = map.unproject([100, centerOfMap]);
-    var realWorldMetersPer100Pixels = haversineDistance(
-        p1.lat, p1.lng, p2.lat, p2.lng
-    );
-
-    const screenMetersPer100Pixels = _pxTOmm()(100) / 1000;
-
-    const scaleFactor = realWorldMetersPer100Pixels / screenMetersPer100Pixels
-
-    return scaleFactor
-}
-
-export function convertDMSToDD(dms: Number[], direction: "N" | "O" | "S" | "W") {
-    var dd = dms[0].valueOf() + dms[1].valueOf() / 60 + dms[2].valueOf() / (60 * 60);
-
-    if (direction == "S" || direction == "W") {
-        dd = dd * -1;
-    }
-    return dd;
-}
--- a/web/src/lib/vendor/svelte-form-lib/util.js
+++ b/web/src/lib/vendor/svelte-form-lib/util.js
@@ -15,8 +15,7 @@ function update(object, path, value) {

 function cloneDeep(object) {
  try {
-    return JSON.parse(JSON.stringify(object));
-
+    return structuredClone(object);
  } catch (e) {
    return object;
  }
--- a/web/src/routes/api/v1/trail/upload/+server.ts
+++ b/web/src/routes/api/v1/trail/upload/+server.ts
@@ -1,37 +1,16 @@
 import { SummitLog } from "$lib/models/summit_log";
 import type { Trail } from "$lib/models/trail";
 import { trails_create } from "$lib/stores/trail_store";
-import { fromFIT, fromKML, fromTCX, gpx2trail, isFITFile } from "$lib/util/gpx_util";
+import { fromFile, fromFIT, fromKML, fromTCX, gpx2trail, isFITFile } from "$lib/util/gpx_util";
 import { error, json, type RequestEvent } from "@sveltejs/kit";
 import { ClientResponseError } from "pocketbase";

 export async function PUT(event: RequestEvent) {
    try {
        const data = await event.request.formData();
-        const fileBuffer = await (data.get("file") as Blob).arrayBuffer();
-        const fileContent = await (data.get("file") as Blob).text();
-        let gpxData = ""
-        let gpxFile: Blob;
-        if (isFITFile(fileBuffer)) {
-            gpxData = await fromFIT(fileBuffer);
-            gpxFile = new Blob([gpxData], {
-                type: "application/gpx+xml",
-            });
-        }
-        else if (fileContent.includes("http://www.opengis.net/kml")) {
-            gpxData = fromKML(fileContent);
-            gpxFile = new Blob([gpxData], {
-                type: "application/gpx+xml",
-            });
-        } else if (fileContent.includes("TrainingCenterDatabase")) {
-            gpxData = fromTCX(fileContent);
-            gpxFile = new Blob([gpxData], {
-                type: "application/gpx+xml",
-            });
-        } else {
-            gpxData = fileContent;
-            gpxFile = data.get("file") as Blob
-        }
+
+        const { gpxData, gpxFile } = await fromFile(data.get("file") as Blob)
+
        if (!gpxData.length) {
            throw new ClientResponseError({ status: 400, response: { message: "Empty file" } })
        }
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/web/src/routes/trail/edit/[id]/+page.svelte
@@ -52,6 +52,7 @@
        formatTimeHHMM,
    } from "$lib/util/format_util";
    import {
+        fromFile,
        fromFIT,
        fromKML,
        fromTCX,
@@ -231,39 +232,6 @@
        document.getElementById("fileInput")!.click();
    }

-    async function parseFile(file: File) {
-        const fileExtension = file.name.split(".").pop()?.toLowerCase();
-
-        let gpxData = "";
-        const fileContent = await file.text();
-        const fileBuffer = await file.arrayBuffer();
-
-        if (!isFITFile(fileBuffer)) {
-            if (fileContent.includes("http://www.opengis.net/kml")) {
-                gpxData = fromKML(fileContent);
-                gpxFile = new Blob([gpxData], {
-                    type: "application/gpx+xml",
-                });
-                return gpxData;
-            } else if (fileContent.includes("TrainingCenterDatabase")) {
-                gpxData = fromTCX(fileContent);
-                gpxFile = new Blob([gpxData], {
-                    type: "application/gpx+xml",
-                });
-            } else {
-                gpxData = fileContent;
-                gpxFile = file;
-            }
-        } else {
-            gpxData = await fromFIT(fileBuffer);
-            gpxFile = new Blob([gpxData], {
-                type: "application/gpx+xml",
-            });
-        }
-
-        return gpxData;
-    }
-
    async function handleFileSelection() {
        const selectedFile = (
            document.getElementById("fileInput") as HTMLInputElement
@@ -279,7 +247,8 @@
        drawingActive = false;
        overwriteGPX = false;

-        let gpxData = await parseFile(selectedFile);
+        const { gpxData, gpxFile: file } = await fromFile(selectedFile);
+        gpxFile = file;

        try {
            const parseResult = await gpx2trail(gpxData, selectedFile.name);
@@ -848,7 +817,6 @@
                <li>
                    <SummitLogCard
                        {log}
-                        index={i}
                        mode="edit"
                        on:change={(e) => handleSummitLogMenuClick(log, i, e)}
                    ></SummitLogCard>