From a59df23fbf412ce0d2686b951aea0dae1884c3db Mon Sep 17 00:00:00 2001
From: sedum <sedum@oziosi.org>
Date: Thu, 27 Apr 2023 00:07:36 +0200
Subject: [PATCH 1/4] refactor of map component, still missing some ignorecache
 functions to test different geocoding providers

---
 components/EventMapDialog.vue     |  65 ++++++++++++++++++
 components/Map.vue                | 108 +++++++++++-------------------
 components/MapEdit.vue            |  77 ---------------------
 components/WhereInputAdvanced.vue |   4 +-
 components/admin/Geolocation.vue  |  92 +++++++++++--------------
 components/admin/Places.vue       |   4 +-
 pages/event/_slug.vue             |   5 +-
 7 files changed, 149 insertions(+), 206 deletions(-)
 create mode 100644 components/EventMapDialog.vue
 delete mode 100644 components/MapEdit.vue

diff --git a/components/EventMapDialog.vue b/components/EventMapDialog.vue
new file mode 100644
index 00000000..378f2719
--- /dev/null
+++ b/components/EventMapDialog.vue
@@ -0,0 +1,65 @@
+<template lang="pug">
+v-card
+  v-container
+    div(:style="{'height': mapHeight}")
+      Map.mt-4(:place='event.place' :height='mapHeight' )
+    
+    v-row.my-4.d-flex.flex-column.align-center.text-center
+      .text-h6
+        v-icon(v-text='mdiMapMarker' )
+        nuxt-link.ml-2.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`')
+        .mx-2(v-text="`${event.place.address}`")
+  v-card-actions
+    v-row(color='primary')
+      //- p.my-4(v-text="$t('common.getting_there')")
+      v-btn.ml-2(icon large :href="routeBy('foot')")
+        v-icon(v-text='mdiWalk')
+      v-btn.ml-2(icon large :href="routeBy('bike')")
+        v-icon(v-text='mdiBike')
+      v-btn.ml-2(icon large :href="routeBy('car')")
+        v-icon(v-text='mdiCar')
+    v-spacer
+    v-btn(@click='$emit("close")' outlined) Close
+</template>
+<script>
+
+import { mapActions } from 'vuex'
+import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
+
+export default {
+  components: {
+    [process.client && 'Map']: () => import('@/components/Map.vue')
+  },
+  data () {
+    return {
+      mdiWalk, mdiBike, mdiCar, mdiMapMarker,
+      mapHeight: "55vh"
+    }
+  },
+  props: {
+    event: { type: Object, default: () => ({}) }
+  },
+  methods: {
+    ...mapActions(['setSetting']),
+    // mountLocateControl() {
+    //   this.$refs.map.mapObject.locate({
+    //     locateOptions: {
+    //       maxZoom: 10
+    //     }
+    //   });
+    //   this.$refs.map.mapObject.MyLocate();
+    // },
+    routeBy (type) {
+      const lat = this.event.place.latitude
+      const lon = this.event.place.longitude
+      const routingType = {
+        foot: "engine=fossgis_osrm_foot",
+        bike: "engine=fossgis_osrm_bike",
+        transit: null,
+        car: "engine=fossgis_osrm_car"
+      }
+      return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingType[type]}#map=14/${lat}/${lon}`
+     },
+  }
+}
+</script>
diff --git a/components/Map.vue b/components/Map.vue
index a62b2beb..be67663a 100644
--- a/components/Map.vue
+++ b/components/Map.vue
@@ -1,43 +1,26 @@
 <template lang="pug">
 client-only(placeholder='Loading...' )
-  v-card
-    v-container
-      LMap(ref="map"
-          id="leaflet-map-dialog"
-          :zoom="zoom"
-          :options="{attributionControl: false}"
-          :center="center")
-        LControlAttribution(position='bottomright' prefix="")
-        LTileLayer(
-            :url="url"
-            :attribution="attribution")
-        LMarker(
-          :lat-lng="marker.coordinates")
+  LMap(ref="leafletMap"
+      id="leaflet-map"
+      :style="{ 'height': height }"
+      :zoom="zoom"
+      :options="{attributionControl: false}"
+      :center="center")
+    LControlAttribution(position='bottomright' prefix="")
+    LTileLayer(
+        @tileload="$emit('tileload')"
+        @tileerror="$emit('tileerror')"
+        :url="url"
+        :attribution="attribution")
+    LMarker(v-if="showMarker"
+      :lat-lng="marker.coordinates")
 
-      v-row.my-4.d-flex.flex-column.align-center.text-center
-        .text-h6
-          v-icon(v-text='mdiMapMarker' )
-          nuxt-link.ml-2.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`')
-          .mx-2(v-text="`${event.place.address}`")
-    v-card-actions
-      v-row
-        //- p.my-4(v-text="$t('common.getting_there')")
-        v-btn.ml-2(icon large :href="routeBy('foot')")
-          v-icon(v-text='mdiWalk')
-        v-btn.ml-2(icon large :href="routeBy('bike')")
-          v-icon(v-text='mdiBike')
-        v-btn.ml-2(icon large :href="routeBy('car')")
-          v-icon(v-text='mdiCar')
-      v-spacer
-      v-btn(@click='$emit("close")' outlined) Close
 </template>
 <script>
 
 import "leaflet/dist/leaflet.css"
 import { LMap, LTileLayer, LMarker, LPopup, LControlAttribution } from 'vue2-leaflet'
-import { mapActions, mapState } from 'vuex'
 import { Icon } from 'leaflet'
-import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
 
 export default {
   components: {
@@ -49,20 +32,31 @@ export default {
   },
   data ({ $store }) {
     return {
-      mdiWalk, mdiBike, mdiCar, mdiMapMarker,
       url: $store.state.settings.tilelayer_provider || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       attribution: $store.state.settings.tilelayer_provider_attribution || "<a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
-      zoom: 14,
-      center: [this.event.place.latitude, this.event.place.longitude],
-      marker: {
-        address: this.event.place.address,
-        coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
-      },
-      routingProvider: 'openstreetmap',
+    }
+  },
+  computed: {
+    center () {
+      if (this.mapCenter.length)
+        return this.mapCenter
+      else {
+        return [this.place.latitude, this.place.longitude]
+      }
+    },
+    marker () {
+      return {
+        address: this.place.address,
+        coordinates: {lat: this.place.latitude, lon: this.place.longitude }
+      }      
     }
   },
   props: {
-    event: { type: Object, default: () => ({}) }
+    place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) },
+    height: { type: String, default: '' },
+    showMarker: { type: Boolean, default: true },
+    mapCenter: { type: Array, default: () => ([]) },
+    zoom: { type: Number, default: () => (16) },
   },
   mounted() {
     delete Icon.Default.prototype._getIconUrl;
@@ -73,41 +67,17 @@ export default {
     });
 
     setTimeout(() => {
-      this.$refs.map.mapObject.invalidateSize();
-    }, 200);
-  },
-  computed: {
-    ...mapState(['settings']),
-  },
-  methods: {
-    ...mapActions(['setSetting']),
-    // mountLocateControl() {
-    //   this.$refs.map.mapObject.locate({
-    //     locateOptions: {
-    //       maxZoom: 10
-    //     }
-    //   });
-    //   this.$refs.map.mapObject.MyLocate();
-    // },
-    routeBy (type) {
-      const lat = this.event.place.latitude
-      const lon = this.event.place.longitude
-      const routingType = {
-        foot: "engine=fossgis_osrm_foot",
-        bike: "engine=fossgis_osrm_bike",
-        transit: null,
-        car: "engine=fossgis_osrm_car"
+      if (this.$refs.leafletMap && this.$refs.leafletMap.mapObject ) {
+        this.$refs.leafletMap.mapObject.invalidateSize();
       }
-      return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingType[type]}#map=14/${lat}/${lon}`
-     },
+    }, 200);
   }
 }
 </script>
 
 <style>
-  #leaflet-map-dialog {
-    height: 55vh;
-    width: 100%;
+  #leaflet-map {
+    height: 10rem;
     border-radius: .3rem;
     border: 1px solid #fff;
     z-index: 1;
diff --git a/components/MapEdit.vue b/components/MapEdit.vue
deleted file mode 100644
index dff72e4f..00000000
--- a/components/MapEdit.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template lang="pug">
-client-only(placeholder='Loading...' )
-  LMap(ref="mapEdit"
-      id="leaflet-map"
-      :zoom="zoom"
-      :options="{attributionControl: false}"
-      :center="center")
-    LControlAttribution(position='bottomright' prefix="")
-    LTileLayer(
-        :url="url"
-        :attribution="attribution")
-    LMarker(
-      :lat-lng="marker.coordinates")
-
-</template>
-<script>
-
-import "leaflet/dist/leaflet.css"
-import { LMap, LTileLayer, LMarker, LPopup, LControlAttribution } from 'vue2-leaflet'
-import { Icon } from 'leaflet'
-import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
-
-export default {
-  components: {
-    LMap,
-    LTileLayer,
-    LMarker,
-    LPopup,
-    LControlAttribution
-  },
-  data ({ $store }) {
-    return {
-      mdiWalk, mdiBike, mdiCar, mdiMapMarker,
-      url: $store.state.settings.tilelayer_provider || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-      attribution: $store.state.settings.tilelayer_provider_attribution || "<a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
-      zoom: 16,
-    }
-  },
-  computed: {
-    center () {
-      return [this.place.latitude, this.place.longitude]
-    },
-    marker () {
-      return {
-        address: this.place.address,
-        coordinates: {lat: this.place.latitude, lon: this.place.longitude }
-      }      
-    }
-  },
-  props: {
-    place: { type: Object, default: () => ({ latitude: 0, longitude: 0 }) }
-  },
-  mounted() {
-    delete Icon.Default.prototype._getIconUrl;
-    Icon.Default.mergeOptions({
-      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-      iconUrl: require('leaflet/dist/images/marker-icon.png'),
-      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-    });
-
-    setTimeout(() => {
-      if (this.$refs.mapEdit && this.$refs.mapEdit.mapObject ) {
-        this.$refs.mapEdit.mapObject.invalidateSize();
-      }
-    }, 200);
-  }
-}
-</script>
-
-<style>
-  #leaflet-map {
-    height: 10rem;
-    border-radius: .3rem;
-    border: 1px solid #fff;
-    z-index: 1;
-  }
-</style>
diff --git a/components/WhereInputAdvanced.vue b/components/WhereInputAdvanced.vue
index bcaf5bdd..d81faa11 100644
--- a/components/WhereInputAdvanced.vue
+++ b/components/WhereInputAdvanced.vue
@@ -38,7 +38,7 @@ v-card
           :rules="$validators.longitude")
     p.mt-4(v-if='place.isNew' v-html="$t('event.address_geocoded_disclaimer')")
 
-    MapEdit.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
+    Map.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
 
   v-divider(v-if='settings.allow_online_event && showGeocoded')
 
@@ -76,7 +76,7 @@ export default {
     onlineLocations: { type: Array, default: [] }
   },
   components: {
-    [process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
+    [process.client && 'Map']: () => import('@/components/Map.vue')
   },
   data ({$store}) {
     return {
diff --git a/components/admin/Geolocation.vue b/components/admin/Geolocation.vue
index f1b23061..0c64a559 100644
--- a/components/admin/Geolocation.vue
+++ b/components/admin/Geolocation.vue
@@ -49,8 +49,13 @@ v-card
             :label="$t('admin.tilelayer_provider_attribution')"
             :placeholder="tilelayer_provider_attribution_default")
 
-      div(id="leaflet-map-preview" max-height='10px')
-      //- Map
+      Map(:key='mapKey' v-if='mapPreview'
+        @tileerror='tilelayerTestError'
+        @tileload='tilelayerTestSuccess'
+        height="20rem" 
+        showMarker=false 
+        :mapCenter='mapCenter' 
+        :zoom='12')
 
   v-card-actions
     v-spacer
@@ -61,19 +66,19 @@ v-card
 <script>
 import { mapActions, mapState } from 'vuex'
 import { isoCountries } from '../../server/helpers/geolocation/isoCountries'
+import geolocation from '../../server/helpers/geolocation/index'
 import { mdiChevronDown } from '@mdi/js'
-// import Map from '~/components/Map'
-import "leaflet/dist/leaflet.css"
 
 export default {
-  props: {
-    setup: { type: Boolean, default: false }
+  components: { 
+    [process.client && 'Map']: () => import('@/components/Map.vue')
   },
-  // components: { Map },
   data ({ $store }) {
     return {
       mdiChevronDown,
-      loading: false,
+      mapKey: 0,
+      mapPreview: false,
+      mapCenter: [42, 42],
       testGeocodingLoading: false,
       testTileLayerLoading: false,
       geocoding_provider_type_items: ['Nominatim', 'Photon'],
@@ -87,57 +92,38 @@ export default {
       tilelayer_provider_attribution: $store.state.settings.tilelayer_provider_attribution || '',
       tilelayer_provider_attribution_default: '<a target=\'_blank\' href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors',
       countries: isoCountries,
-      mapPreviewTest: null,
     }
   },
-  created() {
-    if (process.client) {
-      const L = require('leaflet')
+  computed: {
+    ...mapState(['settings', 'events']),
+    tilelayerTest() {
+      const v = this.tilelayer_provider !== '' ? this.tilelayer_provider : this.tilelayer_provider_default
+      return v
+    },
+    geocodingTest() {
+      const v = this.geocoding_provider !== '' ? this.geocoding_provider : this.geocoding_provider_default
+      return v
     }
   },
-  computed: mapState(['settings', 'events']),
   methods: {
     ...mapActions(['setSetting']),
     async testGeocodingProvider () {
       this.testGeocodingLoading = true
-      const geocodingProviderTest = this.geocoding_provider || this.geocoding_provider_default
-      const geocodingSoftwareTest = this.geocoding_provider_type || this.geocoding_provider_type_default
+      const currentGeocodingProvider = geolocation.getGeocodingProvider(this.settings.geocoding_provider_type)
       const geocodingQuery = 'building'
-
       try {
-        if (geocodingSoftwareTest === 'Nominatim') {
-          const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, format: 'json', limit: 1 }} )
-        } else if (geocodingSoftwareTest === 'Photon') {
-          const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, limit: 1}} )
-        }
-
-        this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: geocodingProviderTest }), { color: 'success' })
+        const ret = await this.$axios.$get(`placeOSM/${currentGeocodingProvider.commonName}/${geocodingQuery}`, { timeout: 3000 })
+        const res = currentGeocodingProvider.mapQueryResults(ret)
+        this.geocodingTestSuccess()
       } catch (e) {
-        this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: geocodingProviderTest }), { color: 'error' })
+        this.geocodingTestError()
       }
       this.testGeocodingLoading = false
     },
     async testTileLayerProvider () {
       this.testTileLayerLoading = true
-      const tileThis = this
-      const tileLayerTest = this.tilelayer_provider || this.tilelayer_provider_default
-      const tileLayerAttributionTest = this.tilelayer_provider_attribution || this.tilelayer_provider_attribution_default
-
-      // init tilelayer
-      if (this.mapPreviewTest == null) {
-        this.mapPreviewTest = L.map("leaflet-map-preview").setView([40,40],10);
-      }
-      this.tileLayer = L.tileLayer(`${tileLayerTest}`, {attribution: `${tileLayerAttributionTest}`})
-      this.tileLayer.addTo(this.mapPreviewTest)
-
-      // tilelayer events inherited from gridlayer https://leafletjs.com/reference.html#gridlayer
-      this.tileLayer.on('tileload', function (event) {
-          tileThis.tileLayerTestSucess(event, tileLayerTest)
-      });
-      this.tileLayer.on('tileerror', function(error, tile) {
-          tileThis.tileLayerTestError(event, tileLayerTest)
-          tileThis.tileLayer = null
-      });
+      this.mapPreview = true
+      this.mapKey++
       this.testTileLayerLoading = false
     },
     save (key, value) {
@@ -148,22 +134,20 @@ export default {
     done () {
       this.$emit('close')
     },
-    geocodingTestError(event, tileLayerTest) {
-      this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: geocodingTest }), { color: 'error' })
+    geocodingTestError() {
+      this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: this.geocodingTest }), { color: 'error' })
     },
-    tileLayerTestSucess(event, tileLayerTest) {
-      this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: tileLayerTest }), { color: 'success' })
+    geocodingTestSuccess() {
+      this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: this.geocodingTest }), { color: 'success' })
     },
-    tileLayerTestError(event, tileLayerTest) {
-      this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: tileLayerTest }), { color: 'error' })
+    tilelayerTestError() {
+      this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: this.tilelayerTest }), { color: 'error' })
+    },
+    tilelayerTestSuccess() {
+      this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: this.tilelayerTest }), { color: 'success' })
     }
 
   }
 }
 </script>
 
-<style>
-#leaflet-map-preview {
-  height: 20rem;
-}
-</style>
diff --git a/components/admin/Places.vue b/components/admin/Places.vue
index e1d7c11c..ee80662f 100644
--- a/components/admin/Places.vue
+++ b/components/admin/Places.vue
@@ -62,7 +62,7 @@ v-container
                 :label="$t('common.longitude')"
                 :rules="$validators.longitude")
           
-          MapEdit.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")     
+          Map.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")     
 
       v-card-actions
         v-spacer
@@ -96,7 +96,7 @@ import geolocation from '../../server/helpers/geolocation/index'
 
 export default {
   components: {
-    [process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
+    [process.client && 'Map']: () => import('@/components/Map.vue')
   },
   data( {$store} ) {
     return {
diff --git a/pages/event/_slug.vue b/pages/event/_slug.vue
index b719419b..3991c8ec 100644
--- a/pages/event/_slug.vue
+++ b/pages/event/_slug.vue
@@ -177,7 +177,7 @@ v-container#event.pa-2.pa-sm-2(itemscope itemtype="https://schema.org/Event" v-t
       EmbedEvent(:event='event' @close='showEmbed=false')
     
     v-dialog(v-show='settings.allow_geolocation && event.place.latitude && event.place.longitude' v-model='mapModal' :fullscreen='$vuetify.breakpoint.xsOnly' destroy-on-close)
-      Map(:event='event' @close='mapModal=false')        
+      EventMapDialog(:event='event' @close='mapModal=false')        
 
 </template>
 <script>
@@ -188,6 +188,7 @@ import clipboard from '../../assets/clipboard'
 import MyPicture from '~/components/MyPicture'
 import EventAdmin from '@/components/eventAdmin'
 import EmbedEvent from '@/components/embedEvent'
+import EventMapDialog from '@/components/EventMapDialog'
 
 const { htmlToText } = require('html-to-text')
 
@@ -202,7 +203,7 @@ export default {
     EventAdmin,
     EmbedEvent,
     MyPicture,
-    [process.client && 'Map']: () => import('@/components/Map.vue')
+    EventMapDialog
   },
   async asyncData ({ $axios, params, error }) {
     try {

From 4765013898e137a942b78d0f3da8a88edc2b37c2 Mon Sep 17 00:00:00 2001
From: sedum <sedum@oziosi.org>
Date: Tue, 2 May 2023 03:43:30 +0200
Subject: [PATCH 2/4] fix test with different geocoding provider, fix show
 tilelayer message once

---
 components/admin/Geolocation.vue | 45 ++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/components/admin/Geolocation.vue b/components/admin/Geolocation.vue
index 0c64a559..e951acaa 100644
--- a/components/admin/Geolocation.vue
+++ b/components/admin/Geolocation.vue
@@ -6,7 +6,7 @@ v-card
 
     v-form
       v-row
-        v-col(md=3)
+        v-col(cols=12 md=3)
           v-autocomplete.mb-4(v-model='geocoding_provider_type'
             @blur="save('geocoding_provider_type', geocoding_provider_type )"
             :label="$t('admin.geocoding_provider_type')"
@@ -15,7 +15,7 @@ v-card
             :items="geocoding_provider_type_items"
             :placeholder="geocoding_provider_type_default")
 
-        v-col(md=5)
+        v-col(cols=12 md=5)
           v-text-field.mb-4(v-model='geocoding_provider'
             @blur="save('geocoding_provider', geocoding_provider )"
             :label="$t('admin.geocoding_provider')"
@@ -23,7 +23,7 @@ v-card
             persistent-hint
             :placeholder="geocoding_provider_default")
 
-        v-col(md=4)
+        v-col(cols=12 md=4)
           v-autocomplete.mb-6(v-model="geocoding_countrycodes" :disabled="!(geocoding_provider_type === null || geocoding_provider_type === 'Nominatim')"
             :append-icon='mdiChevronDown'
             @blur="save('geocoding_countrycodes', geocoding_countrycodes )"
@@ -35,7 +35,7 @@ v-card
             :hint="$t('admin.geocoding_countrycodes_help')")
       
       v-row
-        v-col(md=6)
+        v-col(cols=12 md=6)
           v-text-field.mb-4(v-model='tilelayer_provider'
             @blur="save('tilelayer_provider', tilelayer_provider )"
             :label="$t('admin.tilelayer_provider')"
@@ -43,7 +43,7 @@ v-card
             persistent-hint
             :placeholder="tilelayer_provider_default")
 
-        v-col(md=6)
+        v-col(cols=12 md=6)
           v-text-field(v-model='tilelayer_provider_attribution'
             @blur="save('tilelayer_provider_attribution', tilelayer_provider_attribution )"
             :label="$t('admin.tilelayer_provider_attribution')"
@@ -55,12 +55,12 @@ v-card
         height="20rem" 
         showMarker=false 
         :mapCenter='mapCenter' 
-        :zoom='12')
+        :zoom='10')
 
   v-card-actions
     v-spacer
-    v-btn(color='primary' @click='testGeocodingProvider' :loading='testGeocodingLoading' outlined ) {{$t('admin.geocoding_test_button')}}
-    v-btn(color='primary' @click='testTileLayerProvider' :loading='testTileLayerLoading' outlined ) {{$t('admin.tilelayer_test_button')}}
+    v-btn(color='primary' @click='testGeocodingProvider' :loading='isNewGeocodingTest' outlined ) {{$t('admin.geocoding_test_button')}}
+    v-btn(color='primary' @click='testTileLayerProvider' :loading='isNewTilelayerTest' outlined ) {{$t('admin.tilelayer_test_button')}}
 
 </template>
 <script>
@@ -79,8 +79,8 @@ export default {
       mapKey: 0,
       mapPreview: false,
       mapCenter: [42, 42],
-      testGeocodingLoading: false,
-      testTileLayerLoading: false,
+      isNewTilelayerTest: false,
+      isNewGeocodingTest: false,
       geocoding_provider_type_items: ['Nominatim', 'Photon'],
       geocoding_provider_type: $store.state.settings.geocoding_provider_type || '',
       geocoding_provider_type_default: 'Nominatim',
@@ -108,9 +108,10 @@ export default {
   methods: {
     ...mapActions(['setSetting']),
     async testGeocodingProvider () {
-      this.testGeocodingLoading = true
+      this.isNewGeocodingTest = true
       const currentGeocodingProvider = geolocation.getGeocodingProvider(this.settings.geocoding_provider_type)
-      const geocodingQuery = 'building'
+      // random query
+      const geocodingQuery = Math.random().toString(36).slice(2, 7);
       try {
         const ret = await this.$axios.$get(`placeOSM/${currentGeocodingProvider.commonName}/${geocodingQuery}`, { timeout: 3000 })
         const res = currentGeocodingProvider.mapQueryResults(ret)
@@ -118,13 +119,12 @@ export default {
       } catch (e) {
         this.geocodingTestError()
       }
-      this.testGeocodingLoading = false
+      this.isNewGeocodingTest = false
     },
-    async testTileLayerProvider () {
-      this.testTileLayerLoading = true
+    testTileLayerProvider () {
+      this.isNewTilelayerTest = true
       this.mapPreview = true
       this.mapKey++
-      this.testTileLayerLoading = false
     },
     save (key, value) {
       if (this.settings[key] !== value) {
@@ -134,17 +134,22 @@ export default {
     done () {
       this.$emit('close')
     },
+    handleMsg(t, s, c) {
+      this.$root.$message(this.$t(t, { service_name: s }), { color: c })
+    },
     geocodingTestError() {
-      this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: this.geocodingTest }), { color: 'error' })
+      this.handleMsg('admin.geocoding_test_error', this.geocodingTest, 'error')
     },
     geocodingTestSuccess() {
-      this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: this.geocodingTest }), { color: 'success' })
+      this.handleMsg('admin.geocoding_test_success', this.geocodingTest, 'success')
     },
     tilelayerTestError() {
-      this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: this.tilelayerTest }), { color: 'error' })
+      this.isNewTilelayerTest && this.handleMsg('admin.tilelayer_test_error', this.tilelayerTest, 'error')
+      this.isNewTilelayerTest = false
     },
     tilelayerTestSuccess() {
-      this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: this.tilelayerTest }), { color: 'success' })
+      this.isNewTilelayerTest && this.handleMsg('admin.tilelayer_test_success', this.tilelayerTest, 'success')
+      this.isNewTilelayerTest = false
     }
 
   }

From 4584924175ccc743ca0edc8cf4a8b676c983b642 Mon Sep 17 00:00:00 2001
From: sedum <sedum@oziosi.org>
Date: Tue, 2 May 2023 19:30:31 +0200
Subject: [PATCH 3/4] add map marker draggable

---
 components/Map.vue                | 13 ++++++++++++-
 components/WhereInputAdvanced.vue |  3 ++-
 components/admin/Places.vue       |  5 +++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/Map.vue b/components/Map.vue
index be67663a..02d0b42e 100644
--- a/components/Map.vue
+++ b/components/Map.vue
@@ -13,7 +13,9 @@ client-only(placeholder='Loading...' )
         :url="url"
         :attribution="attribution")
     LMarker(v-if="showMarker"
-      :lat-lng="marker.coordinates")
+      :lat-lng="marker.coordinates"
+      @update:lat-lng="updateCoords"
+      :draggable="draggable")
 
 </template>
 <script>
@@ -41,6 +43,8 @@ export default {
       if (this.mapCenter.length)
         return this.mapCenter
       else {
+        this.place.latitude = isNaN(this.place.latitude) ? 0 : this.place.latitude
+        this.place.longitude = isNaN(this.place.longitude) ? 0 : this.place.longitude
         return [this.place.latitude, this.place.longitude]
       }
     },
@@ -57,6 +61,7 @@ export default {
     showMarker: { type: Boolean, default: true },
     mapCenter: { type: Array, default: () => ([]) },
     zoom: { type: Number, default: () => (16) },
+    draggable: { type: Boolean, default: false },
   },
   mounted() {
     delete Icon.Default.prototype._getIconUrl;
@@ -71,6 +76,12 @@ export default {
         this.$refs.leafletMap.mapObject.invalidateSize();
       }
     }, 200);
+  },
+  methods: {
+    updateCoords(v) {
+      this.place.latitude = Number.parseFloat(v.lat).toFixed(7)
+      this.place.longitude = Number.parseFloat(v.lng).toFixed(7) 
+    }
   }
 }
 </script>
diff --git a/components/WhereInputAdvanced.vue b/components/WhereInputAdvanced.vue
index d81faa11..d2074761 100644
--- a/components/WhereInputAdvanced.vue
+++ b/components/WhereInputAdvanced.vue
@@ -38,7 +38,8 @@ v-card
           :rules="$validators.longitude")
     p.mt-4(v-if='place.isNew' v-html="$t('event.address_geocoded_disclaimer')")
 
-    Map.mt-4(:place='place' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
+    Map.mt-4(:place='place' draggable=true
+      v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
 
   v-divider(v-if='settings.allow_online_event && showGeocoded')
 
diff --git a/components/admin/Places.vue b/components/admin/Places.vue
index ee80662f..7ec8e189 100644
--- a/components/admin/Places.vue
+++ b/components/admin/Places.vue
@@ -62,7 +62,8 @@ v-container
                 :label="$t('common.longitude')"
                 :rules="$validators.longitude")
           
-          Map.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")     
+          Map.mt-4(:place.sync='place' :key="dialog" draggable=true
+            v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")     
 
       v-card-actions
         v-spacer
@@ -109,7 +110,7 @@ export default {
       addressList: [],
       address: '',
       search: '',
-      place: { name: '', address: '', id: null },
+      place: { name: '', address: '', latitude: 0, longitude: 0, id: null },
       headers: [
         { value: 'name', text: this.$t('common.name') },
         { value: 'address', text: this.$t('common.address') },

From c91b7f42cb07b77d475cd79ef8615935251a979d Mon Sep 17 00:00:00 2001
From: sedum <sedum@oziosi.org>
Date: Fri, 5 May 2023 07:01:50 +0200
Subject: [PATCH 4/4] fix erroneus filter, do not allow edit the online place

---
 components/admin/Places.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/admin/Places.vue b/components/admin/Places.vue
index 7ec8e189..94172cd4 100644
--- a/components/admin/Places.vue
+++ b/components/admin/Places.vue
@@ -129,7 +129,8 @@ export default {
   },
   async fetch() {
     this.places = await this.$axios.$get('/places')
-    this.places.splice(this.places.findIndex((p) => p.name === 'online' ), 1)
+    // do not allow edit the online place
+    this.places = this.places.filter(p => p.name !== 'online')
   },
   computed: {
     ...mapState(['settings']),