NoLog.cz/gancio
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

refactor of whereInput, move geolocation related code to whereInputAdvanced

Browse source
This commit is contained in:
sedum 2023-02-19 23:19:16 +01:00
parent f298fe2fed
commit eefc0bb2df
4 changed files with 108 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
components/WhereInput.vue
View file

@ -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
@change="changeAddress"
:value="value.address")
template(v-slot:append v-if="settings.allow_event_also_online && place.name !== 'online'")
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")
persistent-hint)
template(v-slot:append v-if="!hideWhereInputAdvancedDialogButton")
v-icon(v-text='mdiCog' :disabled='!(value.name && settings.allow_event_also_online) && !(value.isNew && settings.allow_geolocation)'
@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) => {

105
components/WhereInputAdvanced.vue
View file

@ -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>

7
pages/add/_edit.vue
View file

@ -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))

2
pages/event/_slug.vue
View file

@ -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