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

center map in dialog delaying popup, add validation of coordinates in /add, fix loading feedback in searchCoordinates field

Browse Source
This commit is contained in:
sedum
2022-10-28 08:27:47 +02:00
parent 6a7205ed34
commit ca6a0ea58f
3 changed files with 96 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
components/Map.vue
View File

@@ -19,8 +19,8 @@ client-only(placeholder='Loading...' )
.text-h6 .text-h6
v-icon(v-text='mdiMapMarker' ) v-icon(v-text='mdiMapMarker' )
nuxt-link.ml-2.p-name.text-decoration-none(v-text="event.place.name" :to='`/place/${event.place.name}`') 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}`") p.mx-2(v-text="`${event.place.address}`")
v-text.my-4(v-text="$t('common.getting_there')") p.my-4(v-text="$t('common.getting_there')")
v-row v-row
v-btn.ml-2(icon large :href="routeBy('foot')") v-btn.ml-2(icon large :href="routeBy('foot')")
v-icon(v-text='mdiWalk' color='white') v-icon(v-text='mdiWalk' color='white')
@@ -32,87 +32,94 @@ client-only(placeholder='Loading...' )
</template> </template>
<script> <script>
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css"
import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'; import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet'
import { mapActions, mapState } from 'vuex' import { mapActions, mapState } from 'vuex'
import { Icon } from 'leaflet'; import { Icon } from 'leaflet'
import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js' import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
export default { export default {
components: { components: {
LMap, LMap,
LTileLayer, LTileLayer,
LMarker, LMarker,
LPopup LPopup
}, },
data ({ $store }) { data ({ $store }) {
return { return {
mdiWalk, mdiBike, mdiCar, mdiMapMarker, mdiWalk, mdiBike, mdiCar, mdiMapMarker,
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: attribution:
'&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors', '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
zoom: 14, zoom: 14,
center: [this.event.place.latitude, this.event.place.longitude], center: [this.event.place.latitude, this.event.place.longitude],
markers: [ markers: [
{ {
address: this.event.place.address, address: this.event.place.address,
coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude} coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
}
],
routingProvider: 'openstreetmap'
} }
}, ],
props: { routingProvider: 'openstreetmap',
event: { type: Object, default: () => ({}) } }
}, },
mounted() { props: {
delete Icon.Default.prototype._getIconUrl; event: { type: Object, default: () => ({}) }
Icon.Default.mergeOptions({ },
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), mounted() {
iconUrl: require('leaflet/dist/images/marker-icon.png'), delete Icon.Default.prototype._getIconUrl;
shadowUrl: require('leaflet/dist/images/marker-shadow.png'), 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(() => { setTimeout(() => {
this.$refs.map.mapObject.invalidateSize(); this.$refs.map.mapObject.invalidateSize();
}, 200); }, 200);
}, },
computed: { computed: {
...mapState(['settings']), ...mapState(['settings']),
}, },
methods: { methods: {
...mapActions(['setSetting']), ...mapActions(['setSetting']),
openPopup(event) { openPopup(event) {
this.$nextTick(() => { setTimeout(() => {
event.target.openPopup(); event.target.openPopup();
}); }, 200);
}, },
mountLocateControl() {
routeBy(routingType) { this.$refs.map.mapObject.locate({
const lat = this.event.place.latitude locateOptions: {
const lon = this.event.place.longitude maxZoom: 10
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}`
}
} }
});
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> </script>

30
components/WhereInput.vue
View File

@@ -173,27 +173,24 @@ export default {
this.$emit('input', { ...this.place }) this.$emit('input', { ...this.place })
}, },
searchCoordinates: debounce(async function(ev) { searchCoordinates: debounce(async function(ev) {
this.loading = true
const pre_searchCoordinates = ev.target.value.trim().toLowerCase() 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('/', ',') 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_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]+)?"; var regex_coords_slash = "-?[1-9][0-9]*(\\.[0-9]+)?/\\s*-?[1-9][0-9]*(\\.[0-9]+)?";
const setCoords = (v) => { const setCoords = (v) => {
this.place.latitude = v[0].trim() const lat = v[0].trim()
this.place.longitude = v[1].trim() const lon = v[1].trim()
// check coordinates are valid
if (this.place.latitude < -90 || this.place.latitude > 90) { if ((lat < 90 && lat > -90)
// non existent && (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)) { if (pre_searchCoordinates.match(regex_coords_comma)) {
@@ -208,10 +205,9 @@ export default {
} }
if (searchCoordinates.length) { if (searchCoordinates.length) {
this.loading = true
this.detailsList = await this.$axios.$get(`placeNominatim/${searchCoordinates}`) this.detailsList = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
} this.loading = false
if (this.detailsList) {
this.loading = false;
} }
}, 300), }, 300),
} }

2
pages/event/_slug.vue
View File

@@ -32,7 +32,7 @@ v-container#event.pa-0.pa-sm-2
v-icon(v-text='mdiMapMarker') 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}} 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}} .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-dialog(v-model='mapModal' :fullscreen='$vuetify.breakpoint.xsOnly' destroy-on-close)
v-card v-card
Map(:event='event') Map(:event='event')