[Feat][UI/UX] Enhance coordinate input fields UI experience

- varies paste options added for entering coordinates
nramc · Apr 6, 2024 · 46b2272 · 46b2272
1 parent 369c26f
commit 46b2272
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 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
@@ -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
@@ -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();
+    }
+  }
 }