refactor of whereInput, move geolocation related code to whereInputAdvanced

components/WhereInputAdvanced.vue

@@ -3,8 +3,9 @@ v-card
   v-card-title {{ $t('event.where_advanced_options') }}
   v-card-subtitle {{ $t('event.where_advanced_options_description') }}
 
-  v-card-text(v-if="settings.allow_event_only_online")
-    v-switch.mt-0.mb-2(v-model='online_event_only_update' 
+  v-card-text(v-if='settings.allow_event_also_online')
+    v-switch.mt-0.mb-4(v-model='online_event_only_update' 
+      v-if='settings.allow_event_only_online'
       persistent-hint
       :label="$t('event.event_only_online_label')"
       :hint="$t('event.online_event_only_help')")
@@ -24,12 +25,26 @@ v-card
   v-divider(v-if='showGeocoded && showOnline')
 
   v-card-text.mt-5(v-if='showGeocoded')
-    v-text-field.mt-0.mb-0(v-model='place.address'
-      :prepend-icon='mdiMap'
-      :disabled="!settings.allow_geolocation || place.name === 'online'"
-      persistent-hint
-      :hint="$t('event.address_overwrite_help')"
-      :label="$t('event.address_overwrite')")
+    v-combobox(ref='geocodedAddress' v-if="settings.allow_geolocation && place.name !== 'online' || (!settings.allow_event_only_online && place.name === 'online')"
+      :prepend-icon='mdiMapSearch'
+      @input.native='searchAddress'
+      :label="$t('common.address')"
+      :value='place.geocodedAddress'
+      item-text='address'
+      persistent-hint hide-no-data clearable no-filter
+      :loading='loading'
+      @change='selectAddress'
+      @focus='searchAddress'
+      :items="addressList"
+      :hint="$t('event.address_description_osm')")
+      template(v-slot:message="{message, key}")
+        span(v-html='message' :key="key")
+      template(v-slot:item="{ item, attrs, on  }")
+        v-list-item(v-bind='attrs' v-on='on')
+          v-icon.pr-4(v-text='loadCoordinatesResultIcon(item)')
+          v-list-item-content(two-line v-if='item')
+            v-list-item-title(v-text='item.name')
+            v-list-item-subtitle(v-text='`${item.address}`')
 
     v-row.mt-4
       v-col.py-0(cols=12 md=6)
@@ -46,7 +61,7 @@ v-card
           :rules="$validators.longitude")
     p.mt-4(v-html="$t('event.address_geocoded_disclaimer')")
 
-    MapEdit.mt-4(:place='place' v-if="mapEdit && (settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
+    MapEdit.mt-4(:place='place' :key='mapEdit' v-if="(settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude)"  )
 
   v-card-actions
     v-spacer
@@ -54,10 +69,12 @@ v-card
 
 </template>
 <script>
-import { mdiMap, mdiLatitude, mdiLongitude, mdiCog, mdiLink, mdiCloseCircle } from '@mdi/js'
+import { mdiMap, mdiLatitude, mdiLongitude, mdiCog, mdiLink, mdiCloseCircle, mdiMapMarker, mdiMapSearch, mdiRoadVariant, mdiHome, mdiCityVariant } from '@mdi/js'
 import { mapState } from 'vuex'
 import debounce from 'lodash/debounce'
 import get from 'lodash/get'
+import nominatim from '../server/services/geocoding/nominatim'
+import photon from '../server/services/geocoding/photon'
 
 export default {
   name: 'WhereInputAdvanced',
@@ -73,10 +90,30 @@ export default {
   data ({$store}) {
     return {
       mdiMap, mdiLatitude, mdiLongitude, mdiCog, mdiLink, mdiCloseCircle,
+      mdiMapMarker, mdiMapSearch, mdiRoadVariant, mdiHome, mdiCityVariant,
       showOnline: $store.state.settings.allow_event_also_online,
       showGeocoded: $store.state.settings.allow_geolocation && this.place.isNew,
       online_event_only: this.place.name === 'online',
-      mapEdit: true
+      mapEdit: 1,
+      addressList: [],
+      loading: false,
+      nominatim_osm_type: {
+        way: mdiRoadVariant,
+        house: mdiHome,
+        node: mdiMapMarker,
+        relation: mdiCityVariant,
+      },
+      nominatim_class: ['amenity', 'shop', 'tourism', 'leisure', 'building'],
+      photon_osm_key: ['amenity', 'shop', 'tourism', 'leisure', 'building'],
+      photon_osm_type: {
+        'W': mdiRoadVariant,
+        'N': mdiMapMarker,
+        'R': mdiCityVariant,
+      },
+      geocoding_provider_type: $store.state.settings.geocoding_provider_type || 'Nominatim',
+      nominatimProvider: nominatim,
+      photonProvider: photon,
+      prevAddress: ''
     }
   },
   computed: {
@@ -98,7 +135,51 @@ export default {
   methods: {
     close() {
       this.$emit('close')
-    }
+    },
+    loadCoordinatesResultIcon(item) {
+      if (this.geocoding_provider_type == "Nominatim") {
+        if ( this.nominatim_class.includes(item.class)) {
+          return this.mdiHome
+        }
+        return this.nominatim_osm_type[item.type]
+      } else if (this.geocoding_provider_type == "Photon") {
+        if ( this.photon_osm_key.includes(item.class)) {
+          return this.mdiHome
+        }
+        return this.photon_osm_type[item.type]
+      }
+    },
+    searchAddress: debounce(async function(ev) {
+      const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
+      const searchCoordinates = pre_searchCoordinates.replace('/', ',')
+      if (searchCoordinates.length) {
+        this.loading = true
+        const ret = await this.$axios.$get(`placeOSM/${this.geocoding_provider_type}/${searchCoordinates}`)
+
+        // this.geocoding_provider.mapQueryResults(ret)
+
+        if (this.geocoding_provider_type == "Nominatim") {
+          this.addressList = nominatim.mapQueryResults(ret)
+        } else if (this.geocoding_provider_type == "Photon") {
+          this.addressList = photon.mapQueryResults(ret)
+        }
+        this.loading = false
+      }
+    }, 1000),
+    selectAddress (v) {
+      if (!v) { return }
+      if (typeof v === 'object') {
+          this.place.latitude = v.lat
+          this.place.longitude = v.lon
+          if (this.place.address === '' || this.place.address === this.prevAddress ) {
+            this.place.address = v.address
+          }
+      } else {
+        this.place.latitude = this.place.longitude = null
+      }
+      this.mapEdit++
+      this.prevAddress = v.address
+    },
   }
 }
 </script>