init geoloc component

src/App.vue

@@ -2,13 +2,15 @@
   <div id="app">
     <img src="./assets/logo.png">
     <gmalt-map></gmalt-map>
-    <gmalt-search :lat="position.lat" :lng="position.lng" @search="updatePos"></gmalt-search>
-    <p>Parent : {{ position.lat }}, {{ position.lng }}</p>
+    <gmalt-search :lat="lat" :lng="lng" @search="updatePos"></gmalt-search>
+    <p>Parent : {{ lat }}, {{ lng }}</p>
     <p>Alt : {{ alt }}</p>
+    <gmalt-geoloc @geoloc="updatePos"></gmalt-geoloc>
   </div>
 </template>
 
 <script>
+import GmaltGeoloc from './components/GmaltGeoloc'
 import GmaltMap from './components/GmaltMap'
 import GmaltSearch from './components/GmaltSearch'
 
@@ -17,15 +19,18 @@ import AltService from './services/AltService'
 export default {
   name: 'app',
   components: {
+    GmaltGeoloc,
     GmaltMap,
     GmaltSearch
   },
   methods: {
-    updatePos (position) {
-      this.position = position
-      const requestedPosition = position
+    updatePos (lat, lng) {
+      this.lat = lat
+      this.lng = lng
+      this.loading = true
+      const requestedPosition = this.position
       return AltService
-        .get(this.position)
+        .get(lat, lng)
         .then((json) => {
           if (requestedPosition === this.position) {
             this.loading = false
@@ -37,10 +42,17 @@ export default {
         })
     }
   },
+  computed: {
+    position () {
+      return {lat: this.lat, lng: this.lng}
+    }
+  },
   data () {
     return {
-      position: {lat: null, lng: null},
-      alt: null
+      lat: null,
+      lng: null,
+      alt: null,
+      loading: false
     }
   }
 }

src/components/GmaltGeoloc.vue

@@ -0,0 +1,33 @@
+<template>
+  <button type="button" @click="geolocalize()" :disabled="disabled">Geoloc</button>
+</template>
+
+<script>
+  export default {
+    name: 'gmalt-geoloc',
+    methods: {
+      geolocalize () {
+        navigator.geolocation.getCurrentPosition(
+          pos => this.$emit('geoloc', pos.coords.latitude, pos.coords.longitude),
+          () => {
+            this.allowedGeolocation = false
+          }
+        )
+      }
+    },
+    computed: {
+      disabled: function () {
+        return !navigator.geolocation || !this.allowedGeolocation
+      }
+    },
+    data () {
+      return {
+        allowedGeolocation: true
+      }
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

src/components/GmaltSearch.vue

@@ -2,12 +2,12 @@
   <form v-on:submit.prevent="search()">
       <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 />
+        <input type="number" step="any" min="-90" max="90" id="form-latitude" :value="lat" v-on:input="fieldLat = parseFloat($event.target.value)" 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 />
+        <input type="number" step="any" min="-180" max="180" id="form-longitude" :value="lng" v-on:input="fieldLng = parseFloat($event.target.value)" required />
       </div>
 
       <div>
@@ -22,12 +22,13 @@
     props: ['lat', 'lng'],
     methods: {
       search () {
-        this.$emit('search', this.position)
+        this.$emit('search', this.fieldLat, this.fieldLng)
       }
     },
     data () {
       return {
-        position: {lat: this.lat, lng: this.lng}
+        fieldLat: this.lat,
+        fieldLng: this.lng
       }
     }
   }

src/services/AltService.js

@@ -3,8 +3,8 @@ import * as resolveUrl from 'resolve-url'
 const apiUrl = resolveUrl(process.env.API_URL, '/altitude')
 
 export default {
-  get (position) {
-    return fetch(apiUrl + '?lat=' + position.lat + '&lng=' + position.lng)
+  get (lat, lng) {
+    return fetch(apiUrl + '?lat=' + lat + '&lng=' + lng)
       .then(function (response) {
         if (response.status >= 200 && response.status < 300) {
           return response