From 5ef9a8ff8d5cf62c4468db6f93a084ee4cd9fac3 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Sat, 17 Aug 2024 17:03:34 +0200
Subject: [PATCH] feat(web): pasting coordinates (#11866)

---
 .../coordinates-input.svelte                  | 22 +++++++++++++++++--
 .../number-range-input.svelte                 |  3 +++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/shared-components/coordinates-input.svelte b/web/src/lib/components/shared-components/coordinates-input.svelte
index 2eb9682ff6..f5ad120a7b 100644
--- a/web/src/lib/components/shared-components/coordinates-input.svelte
+++ b/web/src/lib/components/shared-components/coordinates-input.svelte
@@ -14,14 +14,32 @@
       onUpdate(lat, lng);
     }
   };
+
+  const onPaste = (event: ClipboardEvent) => {
+    const coords = event.clipboardData?.getData('text/plain')?.split(',');
+    if (!coords || coords.length !== 2) {
+      return;
+    }
+
+    const [latitude, longitude] = coords.map((coord) => Number.parseFloat(coord));
+    if (Number.isNaN(latitude) || latitude < -90 || latitude > 90) {
+      return;
+    }
+    if (Number.isNaN(longitude) || longitude < -180 || longitude > 180) {
+      return;
+    }
+
+    event.preventDefault();
+    [lat, lng] = [latitude, longitude];
+  };
 </script>
 
 <div>
   <label class="immich-form-label" for="latitude-input-{id}">{$t('latitude')}</label>
-  <NumberRangeInput id="latitude-input-{id}" min={-90} max={90} {onInput} bind:value={lat} />
+  <NumberRangeInput id="latitude-input-{id}" min={-90} max={90} {onInput} {onPaste} bind:value={lat} />
 </div>
 
 <div>
   <label class="immich-form-label" for="longitude-input-{id}">{$t('longitude')}</label>
-  <NumberRangeInput id="longitude-input-{id}" min={-180} max={180} {onInput} bind:value={lng} />
+  <NumberRangeInput id="longitude-input-{id}" min={-180} max={180} {onInput} {onPaste} bind:value={lng} />
 </div>
diff --git a/web/src/lib/components/shared-components/number-range-input.svelte b/web/src/lib/components/shared-components/number-range-input.svelte
index e4c780a708..2e7dca8781 100644
--- a/web/src/lib/components/shared-components/number-range-input.svelte
+++ b/web/src/lib/components/shared-components/number-range-input.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { clamp } from 'lodash-es';
+  import type { ClipboardEventHandler } from 'svelte/elements';
 
   export let id: string;
   export let min: number;
@@ -8,6 +9,7 @@
   export let required = true;
   export let value: number | null = null;
   export let onInput: (value: number | null) => void;
+  export let onPaste: ClipboardEventHandler<HTMLInputElement> | undefined = undefined;
 </script>
 
 <input
@@ -25,4 +27,5 @@
     }
     onInput(value);
   }}
+  on:paste={onPaste}
 />