feat(web): pasting coordinates (immich-app#11866)

Yuvi-raj-P · Aug 19, 2024 · abbb90a · abbb90a
1 parent db3eb32
commit abbb90a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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}
 />