mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
center map in dialog delaying popup, add validation of coordinates in /add, fix loading feedback in searchCoordinates field
This commit is contained in:
sedum
parent
6a7205ed34
commit
ca6a0ea58f
3 changed files with 96 additions and 93 deletions
|
|
@ -19,8 +19,8 @@ client-only(placeholder='Loading...' )
|
|||
.text-h6
|
||||
v-icon(v-text='mdiMapMarker' )
|
||||
nuxt-link.ml-2.p-name.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`')
|
||||
v-text.mx-2(v-text="`${event.place.address}`")
|
||||
v-text.my-4(v-text="$t('common.getting_there')")
|
||||
p.mx-2(v-text="`${event.place.address}`")
|
||||
p.my-4(v-text="$t('common.getting_there')")
|
||||
v-row
|
||||
v-btn.ml-2(icon large :href="routeBy('foot')")
|
||||
v-icon(v-text='mdiWalk' color='white')
|
||||
|
|
@ -32,87 +32,94 @@ client-only(placeholder='Loading...' )
|
|||
</template>
|
||||
<script>
|
||||
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
|
||||
import "leaflet/dist/leaflet.css"
|
||||
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
|
||||
import { mapActions, mapState } from 'vuex'
|
||||
import { Icon } from 'leaflet';
|
||||
import { Icon } from 'leaflet'
|
||||
import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LPopup
|
||||
},
|
||||
data ({ $store }) {
|
||||
return {
|
||||
mdiWalk, mdiBike, mdiCar, mdiMapMarker,
|
||||
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution:
|
||||
'© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
zoom: 14,
|
||||
center: [this.event.place.latitude, this.event.place.longitude],
|
||||
markers: [
|
||||
{
|
||||
address: this.event.place.address,
|
||||
coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
|
||||
}
|
||||
],
|
||||
routingProvider: 'openstreetmap'
|
||||
components: {
|
||||
LMap,
|
||||
LTileLayer,
|
||||
LMarker,
|
||||
LPopup
|
||||
},
|
||||
data ({ $store }) {
|
||||
return {
|
||||
mdiWalk, mdiBike, mdiCar, mdiMapMarker,
|
||||
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
attribution:
|
||||
'© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
|
||||
zoom: 14,
|
||||
center: [this.event.place.latitude, this.event.place.longitude],
|
||||
markers: [
|
||||
{
|
||||
address: this.event.place.address,
|
||||
coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
event: { type: Object, default: () => ({}) }
|
||||
},
|
||||
mounted() {
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
|
||||
iconUrl: require('leaflet/dist/images/marker-icon.png'),
|
||||
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
|
||||
});
|
||||
],
|
||||
routingProvider: 'openstreetmap',
|
||||
}
|
||||
},
|
||||
props: {
|
||||
event: { type: Object, default: () => ({}) }
|
||||
},
|
||||
mounted() {
|
||||
delete Icon.Default.prototype._getIconUrl;
|
||||
Icon.Default.mergeOptions({
|
||||
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
|
||||
iconUrl: require('leaflet/dist/images/marker-icon.png'),
|
||||
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.$refs.map.mapObject.invalidateSize();
|
||||
}, 200);
|
||||
},
|
||||
computed: {
|
||||
...mapState(['settings']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSetting']),
|
||||
openPopup(event) {
|
||||
this.$nextTick(() => {
|
||||
event.target.openPopup();
|
||||
});
|
||||
},
|
||||
|
||||
routeBy(routingType) {
|
||||
const lat = this.event.place.latitude
|
||||
const lon = this.event.place.longitude
|
||||
switch (this.routingProvider) {
|
||||
case 'google_maps':
|
||||
const routingTypes = {
|
||||
foot: "dirflg=w",
|
||||
bike: "dirflg=b",
|
||||
transit: "dirflg=r",
|
||||
car: "driving"
|
||||
}
|
||||
return `https://maps.google.com/?saddr=Current+Location&daddr=${lat},${lon}&${routingTypes[routingType]}`;
|
||||
case 'openstreetmap':
|
||||
default: {
|
||||
const routingTypes = {
|
||||
foot: "engine=fossgis_osrm_foot",
|
||||
bike: "engine=fossgis_osrm_bike",
|
||||
transit: null,
|
||||
car: "engine=fossgis_osrm_car"
|
||||
}
|
||||
return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingTypes[routingType]}#map=14/${lat}/${lon}`
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$refs.map.mapObject.invalidateSize();
|
||||
}, 200);
|
||||
},
|
||||
computed: {
|
||||
...mapState(['settings']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setSetting']),
|
||||
openPopup(event) {
|
||||
setTimeout(() => {
|
||||
event.target.openPopup();
|
||||
}, 200);
|
||||
},
|
||||
mountLocateControl() {
|
||||
this.$refs.map.mapObject.locate({
|
||||
locateOptions: {
|
||||
maxZoom: 10
|
||||
}
|
||||
});
|
||||
this.$refs.map.mapObject.MyLocate();
|
||||
},
|
||||
routeBy(routingType) {
|
||||
const lat = this.event.place.latitude
|
||||
const lon = this.event.place.longitude
|
||||
switch (this.routingProvider) {
|
||||
case 'google_maps':
|
||||
const routingTypes = {
|
||||
foot: "dirflg=w",
|
||||
bike: "dirflg=b",
|
||||
transit: "dirflg=r",
|
||||
car: "driving"
|
||||
}
|
||||
return `https://maps.google.com/?saddr=Current+Location&daddr=${lat},${lon}&${routingTypes[routingType]}`;
|
||||
case 'openstreetmap':
|
||||
default: {
|
||||
const routingTypes = {
|
||||
foot: "engine=fossgis_osrm_foot",
|
||||
bike: "engine=fossgis_osrm_bike",
|
||||
transit: null,
|
||||
car: "engine=fossgis_osrm_car"
|
||||
}
|
||||
return `https://www.openstreetmap.org/directions?from=&to=${lat},${lon}&${routingTypes[routingType]}#map=14/${lat}/${lon}`
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -173,27 +173,24 @@ export default {
|
|||
this.$emit('input', { ...this.place })
|
||||
},
|
||||
searchCoordinates: debounce(async function(ev) {
|
||||
this.loading = true
|
||||
const pre_searchCoordinates = ev.target.value.trim().toLowerCase()
|
||||
// allow pasting coordinates lat/lon
|
||||
// allow pasting coordinates lat/lon and lat,lon
|
||||
const searchCoordinates = pre_searchCoordinates.replace('/', ',')
|
||||
// console.log(pre_searchCoordinates)
|
||||
|
||||
var regex_coords_comma = "-?[1-9][0-9]*(\\.[0-9]+)?,\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
|
||||
var regex_coords_slash = "-?[1-9][0-9]*(\\.[0-9]+)?/\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
|
||||
|
||||
const setCoords = (v) => {
|
||||
this.place.latitude = v[0].trim()
|
||||
this.place.longitude = v[1].trim()
|
||||
|
||||
if (this.place.latitude < -90 || this.place.latitude > 90) {
|
||||
// non existent
|
||||
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 (this.place.latitude < -180 || this.place.latitude > 180) {
|
||||
// non existent
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
if (pre_searchCoordinates.match(regex_coords_comma)) {
|
||||
|
|
@ -208,10 +205,9 @@ export default {
|
|||
}
|
||||
|
||||
if (searchCoordinates.length) {
|
||||
this.loading = true
|
||||
this.detailsList = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
|
||||
}
|
||||
if (this.detailsList) {
|
||||
this.loading = false;
|
||||
this.loading = false
|
||||
}
|
||||
}, 300),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ v-container#event.pa-0.pa-sm-2
|
|||
v-icon(v-text='mdiMapMarker')
|
||||
nuxt-link.vcard.ml-2.p-name.text-decoration-none(itemprop="name" :to='`/place/${event.place.name}`') {{event.place && event.place.name}}
|
||||
.text-subtitle-1.p-street-address(itemprop='address') {{event.place && event.place.address}}
|
||||
v-btn.mt-2(v-if='event.place.latitude && event.place.longitude' small v-text="$t('common.show_map')" :aria-label="$t('common.show_map')" @click="mapModal = true")
|
||||
v-btn.mt-2(v-if='settings.allow_geolocation && event.place.latitude && event.place.longitude' small v-text="$t('common.show_map')" :aria-label="$t('common.show_map')" @click="mapModal = true")
|
||||
v-dialog(v-model='mapModal' :fullscreen='$vuetify.breakpoint.xsOnly' destroy-on-close)
|
||||
v-card
|
||||
Map(:event='event')
|
||||
|
|
|
|||
Loading…
Reference in a new issue