From e67ace8934e8a41bc9eef5b0bb0e1d329edefe48 Mon Sep 17 00:00:00 2001
From: Jonathan Bouzekri <jonathan.bouzekri@gmail.com>
Date: Tue, 27 Jun 2017 22:44:27 +0200
Subject: [PATCH] quick form to search by lat, lng

---
 src/components/GmaltMap.vue | 37 +++++++++++++++++++++++++++----------
 src/services/AltService.js  |  3 ---
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/GmaltMap.vue b/src/components/GmaltMap.vue
index 12a87ce..9c9c615 100644
--- a/src/components/GmaltMap.vue
+++ b/src/components/GmaltMap.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <p>Click on the map where you want to find the elevation or look up by address with the search field.</p>
+    <p>Click on the map where you want to find the elevation, look up by address with the search field or search by latitude and longitude.</p>
 
     <gmap-autocomplete
       @place_changed="updatePos">
     </gmap-autocomplete>
 
     <gmap-map
-      :center="position"
+      :center="center"
       :zoom="7"
       style="width: 100%; height: 30vh;"
       @click="updatePos"
@@ -20,12 +20,23 @@
       ></gmap-marker>
     </gmap-map>
 
+    <form v-on:submit.prevent="fetchAltitude">
+      <div>
+        <label for="form-latitude">Latitude</label>
+        <input type="number" step="any" min="-90" max="90" id="form-latitude" v-model.number="position.lat" required />
+      </div>
+
+      <div>
+        <label for="form-longitude">Longitude</label>
+        <input type="number" step="any" min="-180" max="180" id="form-longitude" v-model.number="position.lng"  required />
+      </div>
+
+      <div>
+        <input type="submit" value="Search" />
+      </div>
+    </form>
     <div>
-      <ul>
-        <li>Latitude : {{ position.lat }}</li>
-        <li>Longitude : {{ position.lng }}</li>
-        <li>Altitude : {{ alt }}</li>
-      </ul>
+      <p>Altitude : <strong>{{ alt ? alt : 'No value' }}</strong></p>
     </div>
   </div>
 </template>
@@ -58,9 +69,11 @@
         this.fetchAltitude()
       },
       fetchAltitude () {
-        this.loading = true
         const requestedPosition = this.position
-        AltService
+        this.loading = true
+        this.showMarker = true
+        this.center = this.position
+        return AltService
           .get(this.position)
           .then((json) => {
             if (requestedPosition === this.position) {
@@ -68,12 +81,16 @@
               this.alt = json.alt
             }
           })
+          .catch((err) => {
+            console.log(err)
+          })
       }
     },
     data () {
       return {
         showMarker: false,
-        position: defaultPos,
+        position: { lat: null, lng: null },
+        center: defaultPos,
         alt: null,
         loading: false
       }
diff --git a/src/services/AltService.js b/src/services/AltService.js
index f31a811..5cd73fb 100644
--- a/src/services/AltService.js
+++ b/src/services/AltService.js
@@ -17,8 +17,5 @@ export default {
       .then(function (response) {
         return response.json()
       })
-      .catch(function (ex) {
-        console.log('parsing failed', ex)
-      })
   }
 }