From 46b22720d48e35e46c93848058c0cf2897557c9b Mon Sep 17 00:00:00 2001
From: Ramachandran Nellaiyappan <ramachandran.nellaiyappan@1und1.de>
Date: Sat, 6 Apr 2024 22:24:19 +0200
Subject: [PATCH] [Feat][UI/UX] Enhance coordinate input fields UI experience

 - varies paste options added for entering coordinates
---
 .../new-journey/new-journey.component.html    | 10 ++++++-
 .../new-journey/new-journey.component.ts      | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/app/page/journeys/new-journey/new-journey.component.html b/src/app/page/journeys/new-journey/new-journey.component.html
index 33e7998d..70cba1ed 100644
--- a/src/app/page/journeys/new-journey/new-journey.component.html
+++ b/src/app/page/journeys/new-journey/new-journey.component.html
@@ -115,10 +115,18 @@
 
         <div class="col-12 col-md-6">
           <div class="input-group mb-3">
-            <span class="input-group-text">Coordinates</span>
             <input type="number" class="form-control" placeholder="Longitude" aria-label="Longitude"
                    id="longitude" name="longitude" [(ngModel)]="coordinates[0]" [readOnly]="journey.id"
                    required min="-180.0" max="180.0" #longitude="ngModel" (blur)="refreshMapWithCoordinates()">
+            <button class="btn btn-primary input-group-text dropdown-toggle" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+              Coordinates
+            </button>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" role="button" (click)="copyCoordinatesFromGoogleMap()">Paste coordinates copied from Google Map</a></li>
+              <li><a class="dropdown-item" role="button" (click)="copyCoordinatesFromClipboard()">Paste from clipboard</a></li>
+              <li><a class="dropdown-item" role="button" (click)="swapCoordinates()">Swap Coordinates</a></li>
+            </ul>
             <input type="number" class="form-control" placeholder="Latitude" aria-label="Latitude"
                    id="latitude" name="latitude" [(ngModel)]="coordinates[1]" [readOnly]="journey.id"
                    required min="-90.0" max="90.0" #latitude="ngModel" (blur)="refreshMapWithCoordinates()">
diff --git a/src/app/page/journeys/new-journey/new-journey.component.ts b/src/app/page/journeys/new-journey/new-journey.component.ts
index c33845c3..9f8c9be7 100644
--- a/src/app/page/journeys/new-journey/new-journey.component.ts
+++ b/src/app/page/journeys/new-journey/new-journey.component.ts
@@ -114,4 +114,33 @@ export class NewJourneyComponent {
       }
     }
   }
+
+  swapCoordinates() {
+    let temp = this.coordinates[0];
+    this.coordinates[0] = this.coordinates[1];
+    this.coordinates[1] = temp;
+    this.refreshMapWithCoordinates();
+  }
+
+  async copyCoordinatesFromGoogleMap() {
+    const copiedValue = await navigator.clipboard.readText()
+    console.debug('Value copied from clipboard:', copiedValue);
+    if (copiedValue) {
+      let copiedCoordinates = copiedValue.split(',');
+      this.coordinates[0] = Number(copiedCoordinates.length < 2 ? copiedCoordinates[0] : copiedCoordinates[1]);
+      this.coordinates[1] = Number(copiedCoordinates[0]);
+      this.refreshMapWithCoordinates();
+    }
+  }
+
+  async copyCoordinatesFromClipboard() {
+    const copiedValue = await navigator.clipboard.readText()
+    console.debug('Value copied from clipboard:', copiedValue);
+    if (copiedValue) {
+      let copiedCoordinates = copiedValue.split(',');
+      this.coordinates[0] = Number(copiedCoordinates[0]);
+      this.coordinates[1] = Number(copiedCoordinates.length >= 2 ? copiedCoordinates[1] : copiedCoordinates[0]);
+      this.refreshMapWithCoordinates();
+    }
+  }
 }