reinit whereinputadvanced in /add , and init only/also online mechanism, various fixes: admin edit place; bug in nominatim display_name when place in certain nominatim_class, init refactor geocoding related code in services/geocoding/provider; init MapEdit component

This commit is contained in:
sedum
2023-02-17 00:23:35 +01:00
parent 6aceaba7f7
commit 79ebec9116
21 changed files with 1558 additions and 255 deletions

View File

@@ -11,32 +11,57 @@ v-container
v-dialog(v-model='dialog' width='600' :fullscreen='$vuetify.breakpoint.xsOnly')
v-card
v-card-title {{ $t('admin.edit_place') }}
v-card-text
v-card-text.mb-4
v-form(v-model='valid' ref='form' lazy-validation)
v-text-field(
:rules="[$validators.required('common.name')]"
:label="$t('common.name')"
v-model='place.name'
:placeholder='$t("common.name")')
v-combobox(ref='address'
v-text-field(
:rules="[ v => $validators.required('common.address')(v)]"
:label="$t('common.address')"
v-model='place.address'
persistent-hint)
v-combobox.mt-0.mb-4(ref='geocodedAddress'
v-if="(settings.allow_geolocation && place.name !== 'online')"
:disabled="!(settings.allow_geolocation && place.name !== 'online')"
:prepend-icon='mdiMapSearch'
@input.native='searchAddress'
:label="$t('common.address')"
:rules="[ v => $validators.required('common.address')(v)]"
:value='place.address'
:label="$t('admin.search_address')"
:value='place.latitude && place.longitude && place.geocodedAddress'
persistent-hint hide-no-data clearable no-filter
:loading='loading'
@change='selectAddress'
@focus='searchAddress'
:items="addressList"
:hint="$t('event.address_description')")
: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-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-if="(settings.allow_geolocation && place.name !== 'online')")
v-col.py-0(cols=12 md=6)
v-text-field(v-model="place.latitude"
:value="place.latitude"
:prepend-icon='mdiLatitude'
:disabled="(!settings.allow_geolocation || place.name === 'online')"
:label="$t('common.latitude')"
:rules="$validators.latitude")
v-col.py-0(cols=12 md=6)
v-text-field(v-model="place.longitude"
:prepend-icon='mdiLongitude'
:disabled="!settings.allow_geolocation || place.name === 'online'"
:label="$t('common.longitude')"
:rules="$validators.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
@@ -62,15 +87,22 @@ v-container
</template>
<script>
import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye, mdiMapSearch, mdiChevronDown } from '@mdi/js'
import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye, mdiMapSearch, mdiChevronDown,
mdiLatitude, mdiLongitude } 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'
// import geolocation from '../../server/helpers/geolocation/index'
export default {
components: {
[process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
},
data( {$store} ) {
return {
mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiEye, mdiMapSearch, mdiChevronDown,
mdiLatitude, mdiLongitude,
loading: false,
dialog: false,
valid: false,
@@ -85,12 +117,17 @@ export default {
{ value: 'map', text: 'Map' },
{ value: 'actions', text: this.$t('common.actions'), align: 'right' }
],
geocoding_provider_type: $store.state.settings.geocoding_provider_type || 'Nominatim'
geocoding_provider_type: $store.state.settings.geocoding_provider_type || 'Nominatim',
nominatimProvider: nominatim,
photonProvider: photon
}
},
async fetch() {
this.places = await this.$axios.$get('/places')
},
mounted() {
// this.currentGeocodingProvider = geolocation.getGeocodingProvider(this.settings.geocoding_provider_type)
},
computed: {
...mapState(['settings']),
},
@@ -99,6 +136,8 @@ export default {
this.place.name = item.name
this.place.address = item.address
if (this.settings.allow_geolocation) {
this.place.geocodedAddress = ''
this.mapEdit++
this.place.latitude = item.latitude
this.place.longitude = item.longitude
}
@@ -116,10 +155,12 @@ export default {
selectAddress (v) {
if (!v) { return }
if (typeof v === 'object') {
this.place.latitude = v.lat
this.place.longitude = v.lon
this.place.address = v.address
// }
this.place.latitude = v.lat
this.place.longitude = v.lon
this.place.address = v.address
if (this.settings.allow_geolocation) {
this.place.geocodedAddress = v.address
}
} else {
this.place.address = v
this.place.latitude = this.place.longitude = null
@@ -128,91 +169,19 @@ export default {
},
searchAddress: debounce(async function(ev) {
const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
// allow pasting coordinates lat/lon and lat,lon
const searchCoordinates = pre_searchCoordinates.replace('/', ',')
// const regex_coords_comma = "-?[1-9][0-9]*(\\.[0-9]+)?,\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
// const regex_coords_slash = "-?[1-9][0-9]*(\\.[0-9]+)?/\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
// const setCoords = (v) => {
// const lat = v[0].trim()
// const lon = v[1].trim()
// // check coordinates are valid
// if ((lat < 90 && lat > -90)
// && (lon < 180 && lon > -180)) {
// this.place.latitude = lat
// this.place.longitude = lon
// } else {
// this.$root.$message("Non existent coordinates", { color: 'error' })
// return
// }
// }
// if (pre_searchCoordinates.match(regex_coords_comma)) {
// let v = pre_searchCoordinates.split(",")
// setCoords(v)
// return
// }
// if (pre_searchCoordinates.match(regex_coords_slash)) {
// let v = pre_searchCoordinates.split("/")
// setCoords(v)
// return
// }
if (searchCoordinates.length) {
this.loading = true
const ret = await this.$axios.$get(`placeOSM/${this.geocoding_provider_type}/${searchCoordinates}`)
if (this.geocoding_provider_type == "Nominatim") {
if (ret && ret.length) {
this.addressList = ret.map(v => {
const name = get(v.namedetails, 'alt_name', get(v.namedetails, 'name'))
const address = v.display_name ? v.display_name.replace(name, '').replace(/^, ?/, '') : ''
return {
class: v.class,
type: v.osm_type,
lat: v.lat,
lon: v.lon,
name,
address
}
})
} else {
this.addressList = []
}
this.addressList = nominatim.mapQueryResults(ret)
} else if (this.geocoding_provider_type == "Photon") {
let photon_properties = ['housenumber', 'street', 'district', 'city', 'county', 'state', 'postcode', 'country']
if (ret) {
this.addressList = ret.features.map(v => {
let pre_name = v.properties.name || v.properties.street || ''
let pre_address = ''
photon_properties.forEach((item, i) => {
let last = i == (photon_properties.length - 1)
if (v.properties[item] && !last) {
pre_address += v.properties[item]+', '
} else if (v.properties[item]) {
pre_address += v.properties[item]
}
});
let name = pre_name
let address = pre_address
return {
class: v.properties.osm_key,
type: v.properties.osm_type,
lat: v.geometry.coordinates[1],
lon: v.geometry.coordinates[0],
name,
address
}
})
} else {
this.addressList = []
}
this.addressList = photon.mapQueryResults(ret)
}
this.loading = false
}
}, 300)
}, 1000)
}
}
</script>

View File

@@ -56,6 +56,14 @@ v-container
inset
:label="$t('admin.allow_geolocation')")
v-switch.mt-1(v-model='allow_event_only_online'
inset
:label="$t('admin.allow_event_only_online')")
v-switch.mt-1(v-model='allow_event_also_online'
inset
:label="$t('admin.allow_event_also_online')")
v-dialog(v-model='showSMTP' destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly')
SMTP(@close='showSMTP = false')
@@ -126,6 +134,18 @@ export default {
get () { return this.settings.allow_geolocation },
set (value) { this.setSetting({ key: 'allow_geolocation', value }) }
},
allow_event_only_online: {
get () { return this.settings.allow_event_only_online },
set (value) { this.setSetting({ key: 'allow_event_only_online', value })
if (value == true) { this.allow_event_also_online = value }
}
},
allow_event_also_online: {
get () { return this.settings.allow_event_also_online },
set (value) { this.setSetting({ key: 'allow_event_also_online', value })
if (value == false) { this.setSetting({ key: 'allow_event_only_online', value }) }
}
},
filteredTimezones () {
const current_timezone = moment.tz.guess()
tzNames.unshift(current_timezone)