move event.locations to more unique event.online_locations, various fixes on insertion workflow, improved locale messages

This commit is contained in:
sedum
2023-02-22 03:11:58 +01:00
parent 3ca86b9a3b
commit cff608c06f
11 changed files with 105 additions and 102 deletions

View File

@@ -1,6 +1,6 @@
<template lang="pug">
client-only(placeholder='Loading...' )
LMap(ref="map"
LMap(ref="mapEdit"
id="leaflet-map"
:zoom="zoom"
:options="{attributionControl: false}"
@@ -34,7 +34,7 @@ export default {
mdiWalk, mdiBike, mdiCar, mdiMapMarker,
url: $store.state.settings.tilelayer_provider || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: $store.state.settings.tilelayer_provider_attribution || "<a target=\"_blank\" href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",
zoom: 14,
zoom: 16,
center: [this.place.latitude, this.place.longitude],
marker: {
address: this.place.address,
@@ -54,8 +54,8 @@ export default {
});
setTimeout(() => {
if (this.$refs.map && this.$refs.map.mapObject ) {
this.$refs.map.mapObject.invalidateSize();
if (this.$refs.mapEdit && this.$refs.mapEdit.mapObject ) {
this.$refs.mapEdit.mapObject.invalidateSize();
}
}, 200);
}

View File

@@ -25,22 +25,8 @@ v-row.mb-4
v-col(cols=12 md=6)
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="$t('event.online_locations_help')"
:label="$t('event.online_locations_url')"
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="value.name !== 'online'"
ref='address'
v-text-field.mr-4(ref='address' v-if="value.name !== 'online'"
v-model='value.address'
:prepend-icon='mdiMap'
:disabled='disableAddress'
@@ -52,12 +38,27 @@ v-row.mb-4
v-icon(v-text='mdiCog' :disabled='!(value.name && settings.allow_event_also_online) && !(value.isNew && settings.allow_geolocation)'
@click="whereInputAdvancedDialog = true")
v-combobox.mr-4(v-model="onlineLocations" v-if="settings.allow_event_only_online && value.name === 'online'"
:prepend-icon='mdiLink'
:hint="$t('event.online_locations_help')"
:label="$t('event.online_locations_url')"
clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ';', '; ']"
:items="onlineLocations"
@change='selectLocations')
template(v-slot:selection="{ item, index, on, attrs, selected, parent }")
v-chip(v-bind="attrs" :outlined='index !== 0'
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-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"
:onlineLocations.sync="onlineLocations"
:event_only_online_value.sync='event_only_online'
@update:onlineEvent="changeOnlineEvent"
@update:virtualLocations="selectLocations"
@update:onlineEvent="changeEventOnlyOnline"
@update:onlineLocations="selectLocations"
)
@@ -85,7 +86,7 @@ export default {
disableAddress: true,
whereInputAdvancedDialog: false,
hideWhereInputAdvancedDialogButton: !$store.state.settings.allow_event_also_online && !$store.state.settings.allow_geolocation,
virtualLocations: this.event.locations || [],
onlineLocations: this.event.online_locations || [],
event_only_online: (this.value.name === 'online') ? true : false,
whereAdvancedId: 1
}
@@ -173,38 +174,42 @@ export default {
}
// 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.event.online_locations = []
}
this.disableAddress = false
this.$refs.place.blur()
this.$refs.address.focus()
this.$nextTick(() => { this.$refs.address.focus() })
}
}
this.$emit('input', { ...this.place })
},
selectLocations () {
this.event.locations = []
// Insert up to 3 online location: the main one and 2 fallback
if (this.virtualLocations && this.virtualLocations.length > 3) {
this.$nextTick(() => this.virtualLocations.pop())
}
this.virtualLocations && this.virtualLocations.forEach((item, i) => {
if (!item.startsWith('http')) {
this.virtualLocations[i] = `https://${item}`
this.event.online_locations = []
if (this.onlineLocations) {
// Insert up to 3 online location: the main one and 2 fallback
if (this.onlineLocations.length > 3) {
this.$nextTick(() => this.onlineLocations = this.onlineLocations.slice(0, 3))
}
this.event.locations[i] = {'type': 'virtualLocation', 'url': this.virtualLocations[i] }
})
// Remove duplicates
this.$nextTick(() => this.onlineLocations = [...new Set(this.onlineLocations)])
this.onlineLocations.forEach((item, i) => {
if (!item.startsWith('http')) { this.onlineLocations[i] = `https://${item}` }
this.event.online_locations[i] = this.onlineLocations[i]
})
}
},
changeOnlineEvent(v) {
changeEventOnlyOnline(v) {
this.event_only_online = v
// console.log(this.event_only_online)
if (this.event_only_online) { this.place.name = this.place.address = 'online' }
if (!this.event_only_online) { this.place.name = this.place.address = '' }
if (!this.event_only_online) { this.place.name = this.place.address = ''; this.onlineLocations = [] }
this.place.latitude = null
this.place.longitude = null
// update virtualLocations
this.event.locations && this.selectLocations()
// Update onlineLocations
this.event.online_locations && this.selectLocations()
this.$emit('input', { ...this.place })
},
}

View File

@@ -4,31 +4,32 @@ v-card
v-card-subtitle {{ $t('event.where_advanced_options_description') }}
v-card-text(v-if='settings.allow_event_also_online')
v-switch.mt-0.mb-4(v-model='event_only_online_update'
v-switch.mt-0.mb-0(v-model='event_only_online_update'
v-if='settings.allow_event_only_online'
persistent-hint
:label="$t('event.event_only_online_label')"
:hint="$t('event.event_only_online_help')")
:label="$t('event.event_only_online_label')")
v-combobox.mt-0.mb-0.mr-4.my-5(v-model="virtualLocations_update"
v-combobox.mt-0.mb-0.mr-4.my-5(v-model="onlineLocations_update"
v-if="place.name !== 'online' && settings.allow_event_also_online"
:prepend-icon='mdiLink'
:hint="$t('event.additional_online_locations_help')"
:label="$t('event.additional_online_locations')"
:hint="$t('event.online_locations_help')"
:label="$t('event.online_locations')"
clearable chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ';', '; ']"
:items="virtualLocations_update")
template(v-slot:selection="{ item, on, attrs, selected, parent }")
v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
:items="onlineLocations_update")
template(v-slot:selection="{ item, index, on, attrs, selected, parent }")
v-chip(v-bind="attrs" :outlined='index !== 0'
close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
:input-value="selected" label small) {{ item }}
v-divider(v-if='showGeocoded && showOnline')
v-card-text.mt-5(v-if='showGeocoded')
v-combobox(ref='geocodedAddress' v-if="settings.allow_geolocation && place.name !== 'online' || (!settings.allow_event_only_online && place.name === 'online')"
v-focus
:prepend-icon='mdiMapSearch'
@input.native='searchAddress'
:label="$t('common.search_address')"
:label="$t('common.search_coordinates')"
:value='place.geocodedAddress'
item-text='address'
persistent-hint hide-no-data clearable no-filter
@@ -47,13 +48,13 @@ v-card
v-list-item-subtitle(v-text='`${item.address}`')
v-row.mt-4
v-col.py-0(cols=12 md=6)
v-col.py-0(cols=12 sm=6)
v-text-field(v-model="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-col.py-0(cols=12 sm=6)
v-text-field(v-model="place.longitude"
:prepend-icon='mdiLongitude'
:disabled="!settings.allow_geolocation || place.name === 'online'"
@@ -82,7 +83,7 @@ export default {
place: { type: Object, default: () => ({}) },
event: { type: Object, default: () => null },
event_only_online_value: { type: Boolean, default: false },
virtualLocations: { type: Array, default: [] }
onlineLocations: { type: Array, default: [] }
},
components: {
[process.client && 'MapEdit']: () => import('@/components/MapEdit.vue')
@@ -92,7 +93,7 @@ export default {
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,
showGeocoded: $store.state.settings.allow_geolocation && this.place.isNew && this.place.name !== 'online',
event_only_online: this.place.name === 'online',
mapEdit: 1,
addressList: [],
@@ -117,10 +118,10 @@ export default {
this.close()
}
},
virtualLocations_update: {
get () { return this.virtualLocations },
onlineLocations_update: {
get () { return this.onlineLocations },
set (value) {
this.$emit('update:virtualLocations', value)
this.$emit('update:onlineLocations', value)
}
},
},

View File

@@ -30,7 +30,7 @@ v-container
:disabled="!(settings.allow_geolocation && place.name !== 'online')"
:prepend-icon='mdiMapSearch'
@input.native='searchAddress'
:label="$t('common.search_address')"
:label="$t('common.search_coordinates')"
:value='place.latitude && place.longitude && place.geocodedAddress'
persistent-hint hide-no-data clearable no-filter
:loading='loading'
@@ -40,10 +40,10 @@ v-container
: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 }")
template(v-slot:item="{ item, attrs, on, selected }")
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-content(two-line v-if='item' :input-value="selected" )
v-list-item-title(v-text='item.name')
v-list-item-subtitle(v-text='`${item.address}`')
@@ -62,7 +62,7 @@ v-container
: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")
MapEdit.mt-4(:place.sync='place' :key="dialog" v-if="settings.allow_geolocation && place.name !== 'online' && place.latitude && place.longitude")
v-card-actions
v-spacer
@@ -79,7 +79,7 @@ v-container
:footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
:search='search')
template(v-slot:item.map='{ item }')
span {{item.latitude && item.longitude && 'YEP' }}
v-icon(v-if='item.latitude && item.longitude' v-text='mdiMapMarker')
template(v-slot:item.actions='{ item }')
v-btn(@click='editPlace(item)' color='primary' icon)
v-icon(v-text='mdiPencil')
@@ -116,7 +116,6 @@ 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',
currentGeocodingProvider: geolocation.getGeocodingProvider($store.state.settings.geocoding_provider_type),
prevAddress: '',
iconsMapper: {
@@ -124,11 +123,12 @@ export default {
'mdiRoadVariant': mdiRoadVariant,
'mdiMapMarker': mdiMapMarker,
'mdiCityVariant': mdiCityVariant
},
}
}
},
async fetch() {
this.places = await this.$axios.$get('/places')
this.places.splice(this.places.findIndex((p) => p.name === 'online' ), 1)
},
computed: {
...mapState(['settings']),
@@ -140,7 +140,6 @@ export default {
if (this.settings.allow_geolocation) {
this.prevAddress = ''
this.place.geocodedAddress = ''
this.mapEdit++
this.place.latitude = item.latitude
this.place.longitude = item.longitude
}
@@ -157,22 +156,27 @@ export default {
},
selectAddress (v) {
let currentAddress = this.place.address
this.place.geocodedAddress = ''
this.dialog++
if (!v) { return }
if (typeof v === 'object') {
this.place.latitude = v.lat
this.place.longitude = v.lon
this.place.geocodedAddress = v.address
this.place.address = v.address
if (currentAddress === this.prevAddress) {
console.log('here')
this.place.address = currentAddress
}
} else {
this.place.address = v
this.place.latitude = this.place.longitude = null
}
if (currentAddress == '' || currentAddress == this.prevAddress) {
this.place.address = this.place.geocodedAddress
} else {
this.place.address = currentAddress
}
this.prevAddress = this.place.geocodedAddress
this.$emit('input', { ...this.place })
this.prevAddress = this.geocodedAddress
},
searchAddress: debounce(async function(ev) {
const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
@@ -180,7 +184,7 @@ export default {
if (searchCoordinates.length) {
this.loading = true
const ret = await this.$axios.$get(`placeOSM/${this.geocoding_provider_type}/${searchCoordinates}`)
const ret = await this.$axios.$get(`placeOSM/${this.currentGeocodingProvider.commonName}/${searchCoordinates}`)
this.addressList = this.currentGeocodingProvider.mapQueryResults(ret)
this.loading = false
}