encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

235
components/WhereInput.vue
View File

@@ -24,7 +24,22 @@ v-row.mb-4
v-col(cols=12 md=6)
v-text-field(v-if="!settings.allow_geolocation"
v-row.mx-0.my-0.align-center.justify-center
v-combobox.mr-4(v-model="virtualLocations" v-if="settings.allow_event_only_online && value.name === 'online'"
:prepend-icon='mdiLink'
:hint="`Online locations, for instance a url to a videconference room`"
:label="$t('event.online_event_urls')"
clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ';', '; ']"
:items="virtualLocations"
@change='selectLocations')
template(v-slot:selection="{ item, on, attrs, selected, parent }")
v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
:input-value="selected" label small) {{ item }}
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'"
ref='address'
:prepend-icon='mdiMap'
:disabled='disableAddress'
@@ -34,57 +49,66 @@ v-row.mb-4
persistent-hint
@change="changeAddress"
:value="value.address")
v-combobox(ref='address' v-else
: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}`')
//- v-col(cols=12 md=3 v-if='settings.allow_geolocation')
//- v-text-field(ref='latitude' :value='value.latitude'
//- :prepend-icon='mdiLatitude'
//- :disabled='disableDetails'
//- :label="$t('common.latitude')" )
//- v-col(cols=12 md=3 v-if='settings.allow_geolocation')
//- v-text-field(ref='longitude' :value='value.longitude'
//- :prepend-icon='mdiLongitude'
//- :disabled='disableDetails'
//- :label="$t('common.longitude')")
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")
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()'
:virtualLocations.sync="virtualLocations"
:online_event_only_value.sync='online_event_only'
@update:onlineEvent="changeOnlineEvent"
@update:virtualLocations="selectLocations"
)
</template>
<script>
import { mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiLatitude, mdiLongitude, mdiRoadVariant, mdiHome, mdiCityVariant } from '@mdi/js'
import { mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiRoadVariant, mdiHome, mdiCityVariant, 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',
props: {
value: { type: Object, default: () => ({}) }
value: { type: Object, default: () => ({}) },
event: { type: Object, default: () => null },
},
components: { WhereInputAdvanced },
data ( {$store} ) {
return {
mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiLatitude, mdiLongitude, mdiRoadVariant, mdiHome, mdiCityVariant,
mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiRoadVariant, mdiHome, mdiCityVariant, mdiCog, mdiLink, mdiCloseCircle,
places: [],
place: { },
placeName: '',
places: [],
disableAddress: true,
addressList: [],
loading: false,
@@ -101,7 +125,13 @@ export default {
'N': mdiMapMarker,
'R': mdiCityVariant,
},
geocoding_provider_type: $store.state.settings.geocoding_provider_type || 'Nominatim'
geocoding_provider_type: $store.state.settings.geocoding_provider_type || 'Nominatim',
nominatimProvider: nominatim,
photonProvider: photon,
whereInputAdvancedDialog: false,
virtualLocations: this.event.locations || [],
online_event_only: (this.value.name === 'online') ? true : false,
whereAdvancedId: 1
}
},
computed: {
@@ -134,8 +164,15 @@ export default {
search: debounce(async function(ev) {
const search = ev ? ev.target.value.trim().toLowerCase() : ''
this.places = await this.$axios.$get(`place?search=${search}`)
if (!search && this.places.length) { return this.places }
const matches = this.places.find(p => search === p.name.toLocaleLowerCase())
// Filter out the place with name 'online' if not allowed
if (this.places.length && !this.settings.allow_event_only_online) {
this.places = this.places.filter(p => p.name !== 'online')
}
if (!search && this.places.length) {
return this.places
}
const matches = this.places.filter(p => p.name !== 'online').find(p => search === p.name.toLocaleLowerCase())
if (!matches && search) {
this.places.unshift({ create: true, name: ev.target.value.trim() })
}
@@ -154,6 +191,11 @@ export default {
}
},
selectPlace (p) {
// force online events under place: online address: online
this.online_event_only = false
this.place.isNew = false
this.whereAdvancedId++
if (!p) { return }
if (typeof p === 'object' && !p.create) {
if (p.id === this.value.id) return
@@ -164,8 +206,14 @@ export default {
this.place.longitude = p.longitude
}
this.place.id = p.id
if (this.settings.allow_event_only_online && this.place.name === 'online') {
this.online_event_only = true
}
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
@@ -183,6 +231,10 @@ export default {
this.place.latitude = p.latitude
this.place.longitude = p.longitude
}
// Prevent to provide link for 'event only online' if not allowed: reset locations
if (!this.settings.allow_event_only_online && this.place.name === 'online') {
this.event.locations = []
}
this.disableAddress = false
this.$refs.place.blur()
this.$refs.address.focus()
@@ -210,91 +262,42 @@ 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}`)
// this.geocoding_provider.mapQueryResults(ret)
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', 'locality', '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
}
}, 1000)
}, 1000),
selectLocations () {
this.event.locations = []
this.virtualLocations && this.virtualLocations.forEach((item, i) => {
if (!item.startsWith('http')) {
this.virtualLocations[i] = `https://${item}`
}
this.event.locations[i] = {'type': 'virtualLocation', 'url': this.virtualLocations[i] }
})
},
changeOnlineEvent(v) {
this.online_event_only = v
// console.log(this.online_event_only)
if (this.online_event_only) { this.place.name = this.place.address = 'online' }
if (!this.online_event_only) { this.place.name = this.place.address = '' }
this.place.latitude = null
this.place.longitude = null
// update virtualLocations
this.event.locations && this.selectLocations()
this.$emit('input', { ...this.place })
},
}
}
</script>