refactor of whereInput, move geolocation related code to whereInputAdvanced

components/WhereInput.vue

@@ -39,43 +39,18 @@ v-row.mb-4
         template(v-slot:append)
           v-icon(v-text='mdiCog' :disabled='!value.name' @click="whereInputAdvancedDialog = true")
       
-      v-text-field.mr-4(v-if="!settings.allow_geolocation && value.name !== 'online'"
+      v-text-field.mr-4(v-if="value.name !== 'online'"
         ref='address'
+        v-model='value.address'
         :prepend-icon='mdiMap'
         :disabled='disableAddress'
         :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
         :label="$t('common.address')"
         :hint="$t('event.address_description')"
-        persistent-hint
+        persistent-hint)
-        @change="changeAddress"
+        template(v-slot:append v-if="!hideWhereInputAdvancedDialogButton")
-        :value="value.address")
+          v-icon(v-text='mdiCog' :disabled='!(value.name && settings.allow_event_also_online) && !(value.isNew && settings.allow_geolocation)'
-        template(v-slot:append v-if="settings.allow_event_also_online && place.name !== 'online'")
+            @click="whereInputAdvancedDialog = true")
-          v-icon(v-text='mdiCog' :disabled='!value.name' @click="whereInputAdvancedDialog = true")
-      
-      v-combobox(ref='address' v-if="settings.allow_geolocation && value.name !== 'online' || (!settings.allow_event_only_online && value.name === 'online')"
-        :prepend-icon='mdiMapSearch'
-        :disabled='disableAddress'
-        @input.native='searchAddress'
-        :label="$t('common.address')"
-        :rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
-        :value='value.address'
-        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}`')
-        template(v-slot:append v-if="settings.allow_event_also_online || settings.allow_geolocation")
-          v-icon(v-text='mdiCog' :disabled='!value.name || (!value.isNew && !settings.allow_event_also_online) ' @click="whereInputAdvancedDialog = true")
 
     v-dialog(v-model='whereInputAdvancedDialog' :key="whereAdvancedId" destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly' dense)
       WhereInputAdvanced(ref='whereAdvanced' :place.sync='value' :event='event' @close='whereInputAdvancedDialog = false && this.$refs.address.blur()'
@@ -88,13 +63,11 @@ v-row.mb-4
     
 </template>
 <script>
-import { mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiRoadVariant, mdiHome, mdiCityVariant, mdiCog, mdiLink, mdiCloseCircle } from '@mdi/js'
+import { mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle } from '@mdi/js'
 import { mapState } from 'vuex'
 import debounce from 'lodash/debounce'
 import get from 'lodash/get'
 import WhereInputAdvanced from './WhereInputAdvanced.vue'
-import nominatim from '../server/services/geocoding/nominatim'
-import photon from '../server/services/geocoding/photon'
 
 export default {
   name: 'WhereInput',
@@ -105,30 +78,13 @@ export default {
   components: { WhereInputAdvanced },
   data ( {$store} ) {
     return {
-      mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiRoadVariant, mdiHome, mdiCityVariant, mdiCog, mdiLink, mdiCloseCircle,
+      mdiMap, mdiMapMarker, mdiPlus, mdiCog, mdiLink, mdiCloseCircle,
       places: [],
       place: { },
       placeName: '',
       disableAddress: true,
-      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,
       whereInputAdvancedDialog: false,
+      hideWhereInputAdvancedDialogButton: !$store.state.settings.allow_event_also_online && !$store.state.settings.allow_geolocation,
       virtualLocations: this.event.locations || [],
       online_event_only: (this.value.name === 'online') ? true : false,
       whereAdvancedId: 1
@@ -177,19 +133,6 @@ export default {
         this.places.unshift({ create: true, name: ev.target.value.trim() })
       }
     }, 200),
-    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]
-      }
-    },
     selectPlace (p) {
       // force online events under place: online address: online
       this.online_event_only = false
@@ -212,8 +155,6 @@ export default {
         this.disableAddress = true
       } else { // this is a new place
         this.place.isNew = true
-        this.whereAdvancedId++
-
         this.place.name = (p.name || p).trim()
         const tmpPlace = this.place.name.toLocaleLowerCase()
         // search for a place with the same name
@@ -227,7 +168,6 @@ export default {
           delete this.place.id
           this.place.address = ''
           if (this.settings.allow_geolocation) {
-            this.place.details = p.details
             this.place.latitude = p.latitude
             this.place.longitude = p.longitude
           }
@@ -242,41 +182,6 @@ export default {
       }
       this.$emit('input', { ...this.place })
     },
-    changeAddress (v) {
-      this.place.address = v
-      this.$emit('input', { ...this.place })
-      this.disableDetails = false
-    },
-    selectAddress (v) {
-      if (!v) { return }
-      if (typeof v === 'object') {
-          this.place.latitude = v.lat
-          this.place.longitude = v.lon
-          this.place.address = v.address
-        // }
-      } else {
-        this.place.address = v
-        this.place.latitude = this.place.longitude = null
-      }
-      this.$emit('input', { ...this.place })
-    },
-    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),
     selectLocations () {
       this.event.locations = []
       this.virtualLocations && this.virtualLocations.forEach((item, i) => {

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-card-text(v-if='settings.allow_event_also_online')
-    v-switch.mt-0.mb-2(v-model='online_event_only_update' 
+    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'
+    v-combobox(ref='geocodedAddress' v-if="settings.allow_geolocation && place.name !== 'online' || (!settings.allow_event_only_online && place.name === 'online')"
-      :prepend-icon='mdiMap'
+      :prepend-icon='mdiMapSearch'
-      :disabled="!settings.allow_geolocation || place.name === 'online'"
+      @input.native='searchAddress'
-      persistent-hint
+      :label="$t('common.address')"
-      :hint="$t('event.address_overwrite_help')"
+      :value='place.geocodedAddress'
-      :label="$t('event.address_overwrite')")
+      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>

pages/add/_edit.vue

@@ -239,8 +239,11 @@ export default {
       }
       formData.append('place_name', this.event.place.name.trim())
       formData.append('place_address', this.event.place.address)
-      formData.append('place_latitude', this.event.place.latitude)
+
-      formData.append('place_longitude', this.event.place.longitude)
+      if (this.settings.allow_geolocation) {
+        formData.append('place_latitude', this.event.place.latitude || '')
+        formData.append('place_longitude', this.event.place.longitude || '')
+      }
 
       if (this.event.locations.length) {
         this.event.locations.forEach(location => formData.append('locations[]', location.url))

pages/event/_slug.vue

@@ -44,7 +44,7 @@ v-container#event.pa-0.pa-sm-2
                 v-list-item-icon
                   v-icon.my-auto(v-text='mdiMonitorAccount')
                 v-list-item-content.py-0
-                  v-text(small label v-text='`${event.locations[0]}`' outlined color='primary')
+                  v-list-item-title.text-caption(v-text='`${event.locations[0]}`')
             v-card.pb-2(v-if='onlineSectionEnabled && event.locations && event.locations.length > 1')
               v-card-text.text-caption.pt-0.pb-0(v-text="$t('event.online_event_fallback_urls')")
               v-list-item