adds waypoint images

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>

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}