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;
 }