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

allow to modify place coordinates in admin too

Browse Source
This commit is contained in:
lesion
2022-11-18 14:14:15 +01:00
parent 1b74bee945
commit 33237fae99
1 changed files with 91 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
components/admin/Places.vue
View File

@@ -19,23 +19,23 @@ v-container
v-model='place.name'
:placeholder='$t("common.name")')
v-text-field(
:rules="[$validators.required('common.address')]"
v-combobox(ref='address'
:prepend-icon='mdiMapSearch'
@input.native='searchAddress'
:label="$t('common.address')"
v-model='place.address'
:placeholder='$t("common.address")')
v-text-field(v-if="settings.allow_geolocation"
:rules="[$validators.required('common.latitude')]"
:label="$t('common.latitude')"
v-model='place.latitude'
:placeholder='$t("common.latitude")')
v-text-field(v-if="settings.allow_geolocation"
:rules="[$validators.required('common.longitude')]"
:label="$t('common.longitude')"
v-model='place.longitude'
:placeholder='$t("common.longitude")')
:rules="[ v => $validators.required('common.address')(v)]"
:value='place.address'
persistent-hint hide-no-data clearable no-filter
:loading='loading'
@change='selectAddress'
@focus='searchAddress'
:items="addressList"
:hint="$t('event.address_description')")
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-card-actions
@@ -51,6 +51,8 @@ v-container
:hide-default-footer='places.length < 5'
:footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
:search='search')
template(v-slot:item.map='{ item }')
span {{item.latitude && item.longitude && 'YEP' }}
template(v-slot:item.actions='{ item }')
v-btn(@click='editPlace(item)' color='primary' icon)
v-icon(v-text='mdiPencil')
@@ -59,22 +61,27 @@ v-container
</template>
<script>
import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye } from '@mdi/js'
import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye, mdiMapSearch } from '@mdi/js'
import { mapState } from 'vuex'
import debounce from 'lodash/debounce'
import get from 'lodash/get'
export default {
data() {
return {
mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiEye,
mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiEye, mdiMapSearch,
loading: false,
dialog: false,
valid: false,
places: [],
addressList: [],
address: '',
search: '',
place: { name: '', address: '', id: null },
headers: [
{ value: 'name', text: 'Name' },
{ value: 'address', text: 'Address' },
{ value: 'map', text: 'Map' },
{ value: 'actions', text: 'Actions', align: 'right' }
]
}
@@ -103,7 +110,72 @@ export default {
await this.$fetch()
this.loading = false
this.dialog = 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()
// 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(`placeNominatim/${searchCoordinates}`)
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 {
lat: v.lat,
lon: v.lon,
name,
address
}
})
} else {
this.addressList = []
}
this.loading = false
}
}, 300)
}
}
</script>