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

geocoding and tilelayer tests are working also on setup, add support for photon

Browse Source
This commit is contained in:
sedum
2022-12-06 00:03:53 +01:00
parent c096a616ba
commit f6ea3be746
11 changed files with 192 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
components/admin/Geolocation.vue
View File

@@ -1,9 +1,17 @@
<template lang="pug">
v-card
v-card-title Geolocation settings
v-card-title Geolocation and Map settings
v-card-text
p.mb-8(v-html="$t('admin.geolocation_description')")
v-form(v-model='isValid')
p.mb-6(v-html="$t('admin.geolocation_description')")
v-form
v-autocomplete.mb-4(v-model='geocoding_provider_type'
@blur="save('geocoding_provider_type', geocoding_provider_type )"
:label="$t('admin.geocoding_provider_type')"
:hint="$t('admin.geocoding_provider_type_help')"
persistent-hint
:items="geocoding_provider_type_items"
:placeholder="geocoding_provider_type_default")
v-text-field.mb-4(v-model='geocoding_provider'
@blur="save('geocoding_provider', geocoding_provider )"
@@ -12,11 +20,11 @@ v-card
persistent-hint
:placeholder="geocoding_provider_default")
v-autocomplete.mb-4(v-model='geocoding_countrycodes'
v-autocomplete.mb-6(v-model="geocoding_countrycodes" :disabled="geocoding_provider_type != null || geocoding_provider_type != 'Nominatim'"
@blur="save('geocoding_countrycodes', geocoding_countrycodes )"
:label="$t('admin.geocoding_countrycodes')"
chips multiple persistent-hint
:items='countries'
:items="countries"
multiple chips small-chips persistent-hint
item-value="code"
item-text="name"
:hint="$t('admin.geocoding_countrycodes_help')")
@@ -31,15 +39,14 @@ v-card
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")
:placeholder="tilelayer_provider_attribution_default")
clientOnly
div.h-8.w-8(id="leaflet-map")
div(id="leaflet-map-preview" max-height='10px')
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='primary' @click='testGeocodingProvider' :loading='testGeocodingLoading' outlined ) {{$t('admin.geocoding_test_button')}}
v-btn(color='primary' @click='testTileLayerProvider' :loading='testTileLayerLoading' outlined ) {{$t('admin.tilelayer_test_button')}}
v-btn(color='warning' @click="done" outlined) {{$t("common.ok")}}
</template>
@@ -49,20 +56,26 @@ import { isoCountries } from '../../server/helpers/geolocation'
import "leaflet/dist/leaflet.css"
export default {
props: {
setup: { type: Boolean, default: false }
},
data ({ $store }) {
return {
isValid: false,
loading: false,
testGeocodingLoading: false,
testTileLayerLoading: false,
geocoding_provider_type_items: ['Nominatim', 'Photon'],
geocoding_provider_type: $store.state.settings.geocoding_provider_type || '',
geocoding_provider_type_default: 'Nominatim',
geocoding_provider: $store.state.settings.geocoding_provider || '',
geocoding_provider_default: "https://nominatim.openstreetmap.org/" ,
geocoding_provider_default: "https://nominatim.openstreetmap.org/search" ,
geocoding_countrycodes: $store.state.settings.geocoding_countrycodes || [],
tilelayer_provider: $store.state.settings.tilelayer_provider || '',
tilelayer_provider_default: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
tilelayer_provider_attribution: $store.state.settings.tilelayer_provider_attribution || '',
tilelayer_provider_default: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
tilelayer_provider_attribution_default: '<a target=\'_blank\' href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors',
countries: isoCountries,
mapTest: {},
mapPreviewTest: null,
}
},
created() {
@@ -70,69 +83,49 @@ export default {
const L = require('leaflet')
}
},
computed: {
...mapState(['settings', 'events']),
},
computed: mapState(['settings', 'events']),
methods: {
...mapActions(['setSetting']),
async testGeocodingProvider () {
this.testGeocodingLoading = true
const geocodingProviderTest = this.geocoding_provider || this.geocoding_provider_default
const geocodingSoftwareTest = this.geocoding_provider_type || this.geocoding_provider_type_default
const geocodingQuery = 'building'
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' })
if (geocodingSoftwareTest === 'Nominatim') {
const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, format: 'json', limit: 1 }} )
} else if (geocodingSoftwareTest === 'Photon') {
const geolocation = await this.$axios.$get(`${geocodingProviderTest}`, {timeout: 3000, params: {q: `${geocodingQuery}`, limit: 1}} )
}
this.$root.$message(this.$t('admin.geocoding_test_success', { service_name: geocodingProviderTest }), { color: 'success' })
} catch (e) {
// console.error(e)
this.$root.$message(e, { color: 'error' })
this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: geocodingProviderTest }), { 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)
const tileThis = this
const tileLayerTest = this.tilelayer_provider || this.tilelayer_provider_default
const tileLayerAttributionTest = this.tilelayer_provider_attribution || this.tilelayer_provider_attribution_default
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' })
// init tilelayer
if (this.mapPreviewTest == null) {
this.mapPreviewTest = L.map("leaflet-map-preview").setView([40,40],10);
}
this.tileLayer = L.tileLayer(`${tileLayerTest}`, {attribution: `${tileLayerAttributionTest}`})
this.tileLayer.addTo(this.mapPreviewTest)
// tilelayer events inherited from gridlayer https://leafletjs.com/reference.html#gridlayer
this.tileLayer.on('tileload', function (event) {
tileThis.tileLayerTestSucess(event, tileLayerTest)
});
this.tileLayer.on('tileerror', function(error, tile) {
tileThis.tileLayerTestError(event, tileLayerTest)
tileThis.tileLayer = null
});
this.testTileLayerLoading = false
},
save (key, value) {
@@ -143,15 +136,22 @@ export default {
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();
}
geocodingTestError(event, tileLayerTest) {
this.$root.$message(this.$t('admin.geocoding_test_error', { service_name: geocodingTest }), { color: 'error' })
},
tileLayerTestSucess(event, tileLayerTest) {
this.$root.$message(this.$t('admin.tilelayer_test_success', { service_name: tileLayerTest }), { color: 'success' })
},
tileLayerTestError(event, tileLayerTest) {
this.$root.$message(this.$t('admin.tilelayer_test_error', { service_name: tileLayerTest }), { color: 'error' })
}
}
}
</script>
<style>
#leaflet-map-preview {
height: 6rem;
}
</style>

9
components/admin/Places.vue
View File

@@ -84,7 +84,8 @@ export default {
{ value: 'address', text: this.$t('common.address') },
{ value: 'map', text: 'Map' },
{ value: 'actions', text: this.$t('common.actions'), align: 'right' }
]
],
geocoding_provider_type: $store.state.settings.geocoding_provider_type || 'Nominatim'
}
},
async fetch() {
@@ -124,7 +125,7 @@ export default {
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
@@ -159,7 +160,7 @@ export default {
if (searchCoordinates.length) {
this.loading = true
const ret = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
const ret = await this.$axios.$get(`placeOSM/${this.geocoding_provider_type}/${searchCoordinates}`)
if (ret && ret.length) {
this.addressList = ret.map(v => {
const name = get(v.namedetails, 'alt_name', get(v.namedetails, 'name'))
@@ -176,7 +177,7 @@ export default {
}
this.loading = false
}
}, 300)
}, 300)
}
}
</script>

9
components/admin/Settings.vue
View File

@@ -54,20 +54,19 @@ v-container
v-dialog(v-model='showSMTP' destroy-on-close max-width='700px' :fullscreen='$vuetify.breakpoint.xsOnly')
SMTP(@close='showSMTP = false')
v-card-actions
v-btn(text @click='showSMTP=true')
<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')
Geolocation(setup, @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')}}
v-btn(text @click='$emit("complete")' color='primary' v-if='setup') {{$t('common.next')}}
v-icon(v-text='mdiArrowRight')
</template>
<script>
import SMTP from './SMTP.vue'