add filter by countrycodes, and allow to change geolocation providers
This commit is contained in:
sedum
157
components/admin/Geolocation.vue
Normal file
157
components/admin/Geolocation.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template lang="pug">
|
||||
v-card
|
||||
v-card-title Geolocation settings
|
||||
v-card-text
|
||||
p.mb-8(v-html="$t('admin.geolocation_description')")
|
||||
v-form(v-model='isValid')
|
||||
|
||||
v-text-field.mb-4(v-model='geocoding_provider'
|
||||
@blur="save('geocoding_provider', geocoding_provider )"
|
||||
:label="$t('admin.geocoding_provider')"
|
||||
:hint="$t('admin.geocoding_provider_help')"
|
||||
persistent-hint
|
||||
:placeholder="geocoding_provider_default")
|
||||
|
||||
v-autocomplete.mb-4(v-model='geocoding_countrycodes'
|
||||
@blur="save('geocoding_countrycodes', geocoding_countrycodes )"
|
||||
:label="$t('admin.geocoding_countrycodes')"
|
||||
chips multiple persistent-hint
|
||||
:items='countries'
|
||||
item-value="code"
|
||||
item-text="name"
|
||||
:hint="$t('admin.geocoding_countrycodes_help')")
|
||||
|
||||
v-text-field.mb-4(v-model='tilelayer_provider'
|
||||
@blur="save('tilelayer_provider', tilelayer_provider )"
|
||||
:label="$t('admin.tilelayer_provider')"
|
||||
:hint="$t('admin.tilelayer_provider_help')"
|
||||
persistent-hint
|
||||
:placeholder="tilelayer_provider_default")
|
||||
|
||||
v-text-field(v-model='tilelayer_provider_attribution'
|
||||
@blur="save('tilelayer_provider_attribution', tilelayer_provider_attribution )"
|
||||
:label="$t('admin.tilelayer_provider_attribution')"
|
||||
placeholder="map data © OpenStreetMap contributors under ODbL")
|
||||
|
||||
clientOnly
|
||||
div.h-8.w-8(id="leaflet-map")
|
||||
|
||||
v-card-actions
|
||||
v-spacer
|
||||
v-btn(color='primary' @click='testGeocodingProvider' :loading='testGeocodingLoading' outlined) {{$t('admin.geocoding_test_button')}}
|
||||
v-btn(color='primary' @click='testTileLayerProvider' :loading='testTileLayerLoading' outlined :disabled="false" ) {{$t('admin.tilelayer_test_button')}}
|
||||
v-btn(color='warning' @click="done" outlined) {{$t("common.ok")}}
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { isoCountries } from '../../server/helpers/geolocation'
|
||||
import "leaflet/dist/leaflet.css"
|
||||
|
||||
export default {
|
||||
data ({ $store }) {
|
||||
return {
|
||||
isValid: false,
|
||||
loading: false,
|
||||
testGeocodingLoading: false,
|
||||
testTileLayerLoading: false,
|
||||
geocoding_provider: $store.state.settings.geocoding_provider || '',
|
||||
geocoding_provider_default: "https://nominatim.openstreetmap.org/" ,
|
||||
geocoding_countrycodes: $store.state.settings.geocoding_countrycodes || [],
|
||||
tilelayer_provider: $store.state.settings.tilelayer_provider || '',
|
||||
tilelayer_provider_attribution: $store.state.settings.tilelayer_provider_attribution || '',
|
||||
tilelayer_provider_default: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||
countries: isoCountries,
|
||||
mapTest: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (process.client) {
|
||||
const L = require('leaflet')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['settings', 'events']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSetting']),
|
||||
async testGeocodingProvider () {
|
||||
this.testGeocodingLoading = true
|
||||
try {
|
||||
const geolocation = await this.$axios.$get(`${this.geocoding_provider}search`, {timeout: 3000, params: {format: 'json', q: 'building', limit: 1}})
|
||||
this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: this.geocoding_provider }), { color: 'success' })
|
||||
} catch (e) {
|
||||
// console.error(e)
|
||||
this.$root.$message(e, { color: 'error' })
|
||||
}
|
||||
this.testGeocodingLoading = false
|
||||
},
|
||||
async testTileLayerProvider () {
|
||||
this.testTileLayerLoading = true
|
||||
try {
|
||||
// clean
|
||||
// if (this.mapTest !== null) {
|
||||
// this.mapTest.off();
|
||||
// this.mapTest.remove();
|
||||
// }
|
||||
// init tilelayer
|
||||
this.mapTest = L.map("leaflet-map").setView([40,40],10);
|
||||
this.tileLayer = L.tileLayer(`${this.tilelayer_provider}`, {attribution: `${this.tilelayer_provider_attribution}`})
|
||||
const tileLayer = await this.tileLayer.addTo(this.mapTest)
|
||||
|
||||
|
||||
this.tileLayer.on('loading', function (event) {
|
||||
console.log(event)
|
||||
// this.mapTest.fireEvent('dataloading', event);
|
||||
});
|
||||
|
||||
// this.tileLayer.on('load', function (event) {
|
||||
// // this.mapTest.fireEvent('dataload', event);
|
||||
// });
|
||||
|
||||
// this.tileLayer.on('tileerror', function(error, tile) {
|
||||
// console.log(error);
|
||||
// console.log(tile);
|
||||
// });
|
||||
//
|
||||
// this.tileLayer.on('tileabort', this.tileLayer.remove())
|
||||
//
|
||||
this.mapTest.off()
|
||||
this.mapTest.remove()
|
||||
|
||||
// mapTest.on('dataload', handler)
|
||||
|
||||
|
||||
// function handler(event) {
|
||||
// if (mapTest && mapTest.remove) {
|
||||
// mapTest.off();
|
||||
// mapTest.remove();
|
||||
// }
|
||||
// }
|
||||
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
this.$root.$message(e.response && e.response.data, { color: 'error' })
|
||||
}
|
||||
this.testTileLayerLoading = false
|
||||
},
|
||||
save (key, value) {
|
||||
if (this.settings[key] !== value) {
|
||||
this.setSetting({ key, value })
|
||||
}
|
||||
},
|
||||
done () {
|
||||
this.$emit('close')
|
||||
},
|
||||
handlerLoad(event) {
|
||||
// this.mapTest.fireEvent('dataload', (event) => {
|
||||
this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: this.tilelayer_provider }), { color: 'success' })
|
||||
if (this.mapTest !== null) {
|
||||
this.mapTest.off();
|
||||
this.mapTest.remove();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -57,32 +57,41 @@ v-container
|
||||
|
||||
v-card-actions
|
||||
v-btn(text @click='showSMTP=true')
|
||||
<v-icon v-if='!settings.admin_email' color='error' v-text='mdiAlert'></v-icon> {{$t('admin.show_smtp_setup')}}
|
||||
<v-icon v-if='!settings.admin_email' color='error' class="mr-2" v-text='mdiAlert'></v-icon> {{$t('admin.show_smtp_setup')}}
|
||||
v-btn(text @click='$emit("complete")' color='primary' v-if='setup') {{$t('common.next')}}
|
||||
v-icon(v-text='mdiArrowRight')
|
||||
|
||||
v-dialog(v-model='showGeolocationConfigs' destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly')
|
||||
Geolocation(@close='showGeolocationConfigs = false')
|
||||
|
||||
v-card-actions
|
||||
v-btn(text @click='showGeolocationConfigs=true')
|
||||
<v-icon v-if='!settings.admin_email' color='primary' class="mr-2" v-text='mdiMap'></v-icon> {{$t('admin.show_geolocation_setup')}}
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import SMTP from './SMTP.vue'
|
||||
import Geolocation from './Geolocation.vue'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import moment from 'dayjs'
|
||||
import tzNames from './tz.json'
|
||||
import { mdiAlert, mdiArrowRight } from '@mdi/js'
|
||||
import { mdiAlert, mdiArrowRight, mdiMap } from '@mdi/js'
|
||||
const locales = require('../../locales/index')
|
||||
|
||||
export default {
|
||||
props: {
|
||||
setup: { type: Boolean, default: false }
|
||||
},
|
||||
components: { SMTP },
|
||||
components: { SMTP, Geolocation },
|
||||
name: 'Settings',
|
||||
data ({ $store }) {
|
||||
return {
|
||||
mdiAlert, mdiArrowRight,
|
||||
mdiAlert, mdiArrowRight, mdiMap,
|
||||
title: $store.state.settings.title,
|
||||
description: $store.state.settings.description,
|
||||
locales: Object.keys(locales).map(locale => ({ value: locale, text: locales[locale] })),
|
||||
showSMTP: false,
|
||||
showGeolocationConfigs: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
Reference in New Issue
Block a user