center map in dialog delaying popup, add validation of coordinates in /add, fix loading feedback in searchCoordinates field

components/Map.vue

@@ -19,8 +19,8 @@ client-only(placeholder='Loading...' )
       .text-h6
         v-icon(v-text='mdiMapMarker' )
         nuxt-link.ml-2.p-name.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`')
-        v-text.mx-2(v-text="`${event.place.address}`")
+        p.mx-2(v-text="`${event.place.address}`")
-      v-text.my-4(v-text="$t('common.getting_there')")
+      p.my-4(v-text="$t('common.getting_there')")
       v-row
         v-btn.ml-2(icon large :href="routeBy('foot')")
           v-icon(v-text='mdiWalk' color='white')
@@ -32,10 +32,10 @@ client-only(placeholder='Loading...' )
 </template>
 <script>
 
-import "leaflet/dist/leaflet.css";
+import "leaflet/dist/leaflet.css"
-import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
+import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
 import { mapActions, mapState } from 'vuex'
-import { Icon } from 'leaflet';
+import { Icon } from 'leaflet'
 import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
 
 export default {
@@ -59,7 +59,7 @@ export default {
        coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
      }
     ],
-       routingProvider: 'openstreetmap'
+    routingProvider: 'openstreetmap',
     }
   },
   props: {
@@ -83,11 +83,18 @@ export default {
   methods: {
     ...mapActions(['setSetting']),
     openPopup(event) {
-        this.$nextTick(() => {
+      setTimeout(() => {
         event.target.openPopup();
-        });
+      }, 200);
+    },
+    mountLocateControl() {
+      this.$refs.map.mapObject.locate({
+        locateOptions: {
+          maxZoom: 10
+        }
+      });
+      this.$refs.map.mapObject.MyLocate();
     },
-
     routeBy(routingType) {
       const lat = this.event.place.latitude
       const lon = this.event.place.longitude

components/WhereInput.vue

@@ -173,27 +173,24 @@ export default {
       this.$emit('input', { ...this.place })
     },
     searchCoordinates: debounce(async function(ev) {
-      this.loading = true
       const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
-      // allow pasting coordinates lat/lon
+      // allow pasting coordinates lat/lon and lat,lon
       const searchCoordinates = pre_searchCoordinates.replace('/', ',')
-      // console.log(pre_searchCoordinates)
-
       var regex_coords_comma = "-?[1-9][0-9]*(\\.[0-9]+)?,\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
       var regex_coords_slash = "-?[1-9][0-9]*(\\.[0-9]+)?/\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
 
       const setCoords = (v) => {
-        this.place.latitude = v[0].trim()
+        const lat = v[0].trim()
-        this.place.longitude = v[1].trim()
+        const lon = v[1].trim()
-
+        // check coordinates are valid
-        if (this.place.latitude < -90 || this.place.latitude > 90) {
+        if ((lat < 90 && lat > -90)
-          // non existent
+        && (lon < 180 && lon > -180)) {
+          this.place.latitude = lat
+          this.place.longitude = lon
+        } else {
+          this.$root.$message("Non existent coordinates", { color: 'error' })
+          return
         }
-        if (this.place.latitude < -180 || this.place.latitude > 180) {
-          // non existent
-        }
-        
-        this.loading = false;
       }
 
       if (pre_searchCoordinates.match(regex_coords_comma)) {
@@ -208,10 +205,9 @@ export default {
       }
 
       if (searchCoordinates.length) {
+        this.loading = true
         this.detailsList = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
-      }
+        this.loading = false
-      if (this.detailsList) {
-        this.loading = false;
       }
     }, 300),
   }

pages/event/_slug.vue

@@ -32,7 +32,7 @@ v-container#event.pa-0.pa-sm-2
                 v-icon(v-text='mdiMapMarker')
                 nuxt-link.vcard.ml-2.p-name.text-decoration-none(itemprop="name" :to='`/place/${event.place.name}`') {{event.place && event.place.name}}
                 .text-subtitle-1.p-street-address(itemprop='address') {{event.place && event.place.address}}
-                v-btn.mt-2(v-if='event.place.latitude && event.place.longitude' small v-text="$t('common.show_map')" :aria-label="$t('common.show_map')" @click="mapModal = true")
+                v-btn.mt-2(v-if='settings.allow_geolocation && event.place.latitude && event.place.longitude' small v-text="$t('common.show_map')" :aria-label="$t('common.show_map')" @click="mapModal = true")
                 v-dialog(v-model='mapModal' :fullscreen='$vuetify.breakpoint.xsOnly' destroy-on-close)
                   v-card
                     Map(:event='event')