From c5f20d323cb56dd47bdc0ebf7ed7cc30a26e6bf6 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sat, 22 Mar 2025 14:46:16 +0100
Subject: [PATCH] copy coordinates button for POIs, closes #195

---
 .../gpx-layer/CopyCoordinates.svelte          | 23 ++++++++++++++++
 .../gpx-layer/TrackpointPopup.svelte          | 22 +++++-----------
 .../components/gpx-layer/WaypointPopup.svelte | 26 +++++++++++--------
 3 files changed, 45 insertions(+), 26 deletions(-)
 create mode 100644 website/src/lib/components/gpx-layer/CopyCoordinates.svelte

diff --git a/website/src/lib/components/gpx-layer/CopyCoordinates.svelte b/website/src/lib/components/gpx-layer/CopyCoordinates.svelte
new file mode 100644
index 00000000..051f7f28
--- /dev/null
+++ b/website/src/lib/components/gpx-layer/CopyCoordinates.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { Button } from '$lib/components/ui/button';
+    import { ClipboardCopy } from 'lucide-svelte';
+    import { _ } from 'svelte-i18n';
+    import type { Coordinates } from 'gpx';
+
+    export let coordinates: Coordinates;
+    export let onCopy: () => void = () => {};
+</script>
+
+<Button
+    class="w-full px-2 py-1 h-8 justify-start {$$props.class}"
+    variant="outline"
+    on:click={() => {
+        navigator.clipboard.writeText(
+            `${coordinates.lat.toFixed(6)}, ${coordinates.lon.toFixed(6)}`
+        );
+        onCopy();
+    }}
+>
+    <ClipboardCopy size="16" class="mr-1" />
+    {$_('menu.copy_coordinates')}
+</Button>
diff --git a/website/src/lib/components/gpx-layer/TrackpointPopup.svelte b/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
index e51c3f97..1260ba66 100644
--- a/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/TrackpointPopup.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import type { TrackPoint } from 'gpx';
     import type { PopupItem } from '$lib/components/MapPopup';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
     import * as Card from '$lib/components/ui/card';
-    import { Button } from '$lib/components/ui/button';
     import WithUnits from '$lib/components/WithUnits.svelte';
-    import { Compass, Mountain, Timer, ClipboardCopy } from 'lucide-svelte';
+    import { Compass, Mountain, Timer } from 'lucide-svelte';
     import { df } from '$lib/utils';
     import { _ } from 'svelte-i18n';
 
@@ -34,18 +34,10 @@
                 {df.format(trackpoint.item.time)}
             </div>
         {/if}
-        <Button
-            class="w-full px-2 py-1 h-6 justify-start mt-0.5"
-            variant="secondary"
-            on:click={() => {
-                navigator.clipboard.writeText(
-                    `${trackpoint.item.getLatitude().toFixed(6)}, ${trackpoint.item.getLongitude().toFixed(6)}`
-                );
-                trackpoint.hide?.();
-            }}
-        >
-            <ClipboardCopy size="16" class="mr-1" />
-            {$_('menu.copy_coordinates')}
-        </Button>
+        <CopyCoordinates
+            coordinates={trackpoint.item.attributes}
+            onCopy={() => trackpoint.hide?.()}
+            class="mt-0.5"
+        />
     </Card.Content>
 </Card.Root>
diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
index 9acaaecc..0f3124f2 100644
--- a/website/src/lib/components/gpx-layer/WaypointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
@@ -2,6 +2,7 @@
     import * as Card from '$lib/components/ui/card';
     import { Button } from '$lib/components/ui/button';
     import Shortcut from '$lib/components/Shortcut.svelte';
+    import CopyCoordinates from '$lib/components/gpx-layer/CopyCoordinates.svelte';
     import { deleteWaypoint } from './GPXLayerPopup';
     import WithUnits from '$lib/components/WithUnits.svelte';
     import { Dot, ExternalLink, Trash2 } from 'lucide-svelte';
@@ -77,17 +78,20 @@
                 <span class="whitespace-pre-wrap">{@html sanitize(waypoint.item.cmt)}</span>
             {/if}
         </ScrollArea>
-        {#if $currentTool === Tool.WAYPOINT}
-            <Button
-                class="mt-2 w-full px-2 py-1 h-8 justify-start"
-                variant="outline"
-                on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
-            >
-                <Trash2 size="16" class="mr-1" />
-                {$_('menu.delete')}
-                <Shortcut shift={true} click={true} />
-            </Button>
-        {/if}
+        <div class="mt-2 flex flex-col gap-1">
+            <CopyCoordinates coordinates={waypoint.item.attributes} />
+            {#if $currentTool === Tool.WAYPOINT}
+                <Button
+                    class="w-full px-2 py-1 h-8 justify-start"
+                    variant="outline"
+                    on:click={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
+                >
+                    <Trash2 size="16" class="mr-1" />
+                    {$_('menu.delete')}
+                    <Shortcut shift={true} click={true} />
+                </Button>
+            {/if}
+        </div>
     </Card.Content>
 </Card.Root>