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

added place.latitude and place.longitude, fix routes

Browse Source
This commit is contained in:
sedum
2022-09-19 05:13:57 +02:00
parent 838d1988ad
commit 0fb39b2c07
12 changed files with 168 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
components/Map.vue
View File

@@ -1,40 +1,42 @@
<template lang="pug"> <template lang="pug">
v-container client-only(placeholder='Loading...' )
LMap(ref="map" v-container
id="leaflet-map" LMap(ref="map"
:zoom="zoom" id="leaflet-map"
:center="center") :zoom="zoom"
LTileLayer( :center="center")
:url="url" LTileLayer(
:attribution="attribution") :url="url"
LMarker( :attribution="attribution")
v-for="item in markers" LMarker(
:key="item.id" v-for="item in markers"
:lat-lng="item.position" @add="openPopup"
:visible="item.visible" :key="item.id"
:draggable="item.draggable") :lat-lng="item.coordinates")
LPopup(:content="item.address")
v-row.my-4.d-flex.justify-center
v-btn.ml-2(icon large :href="routeByWalk()")
v-icon(v-text='mdiWalk' color='white')
v-btn.ml-2(icon large :href="routeByBike()")
v-icon(v-text='mdiBike' color='white')
v-btn.ml-2(icon large :href="routeByBus()")
v-icon(v-text='mdiBus' color='white')
v-btn.ml-2(icon large :href="routeByCar()")
v-icon(v-text='mdiCar' color='white')
v-row.my-4.d-flex.flex-column.align-center
.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')")
v-row
v-btn.ml-2(icon large :href="routeByWalk()")
v-icon(v-text='mdiWalk' color='white')
v-btn.ml-2(icon large :href="routeByBike()")
v-icon(v-text='mdiBike' color='white')
v-btn.ml-2(icon large :href="routeByCar()")
v-icon(v-text='mdiCar' color='white')
</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 dayjs from 'dayjs';
import { mapActions, mapState } from 'vuex' import { mapActions, mapState } from 'vuex'
import { Icon } from 'leaflet'; import { Icon } from 'leaflet';
import { mdiWalk, mdiBike, mdiCar, mdiBus } from '@mdi/js' import { mdiWalk, mdiBike, mdiCar, mdiMapMarker } from '@mdi/js'
export default { export default {
components: { components: {
@@ -45,21 +47,25 @@ export default {
}, },
data ({ $store }) { data ({ $store }) {
return { return {
mdiWalk, mdiBike, mdiCar, mdiBus, mdiWalk, mdiBike, mdiCar, mdiMapMarker,
// url: "https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png", // url: "https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
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: 10, zoom: 14,
center: [42, 12], center: [this.event.place.latitude, this.event.place.longitude],
markers: [], markers: [
{
address: this.event.place.address,
coordinates: {lat: this.event.place.latitude, lon: this.event.place.longitude}
}
],
osm_navigation: 'https://www.openstreetmap.org/directions?from=&to=', osm_navigation: 'https://www.openstreetmap.org/directions?from=&to=',
routingType: [ routingType: {
{foot: "engine=fossgis_osrm_foot"}, foot: "engine=fossgis_osrm_foot",
{bike: "engine=fossgis_osrm_bike"}, bike: "engine=fossgis_osrm_bike",
{transit: null}, car: "engine=fossgis_osrm_car"
{car: "engine=fossgis_osrm_car"}, }
]
} }
}, },
props: { props: {
@@ -82,46 +88,23 @@ export default {
}, },
methods: { methods: {
...mapActions(['setSetting']), ...mapActions(['setSetting']),
openPopup(event) {
this.$nextTick(() => {
event.target.openPopup();
});
},
route (routingTypes) {
return this.osm_navigation+this.event.place.latitude+','+this.event.place.longitude+'&'+routingTypes
},
routeByWalk() { routeByWalk() {
console.log(this.$root.$event) return this.route(this.routingType.foot)
// return this.osm_navigation+this.$root.event.place.details+'&'+this.routingType.bike
}, },
routeByBike() { routeByBike() {
console.log(this.event.place) return this.route(this.routingType.bike)
// return this.osm_navigation+this.$root.event.place.details+'&'+this.routingType.bike
},
routeByBus() {
console.log(this.$root)
// return this.osm_navigation+this.$root.event.place.details+'&'+this.routingType.bike
}, },
routeByCar() { routeByCar() {
console.log(this.$root) return this.route(this.routingType.car)
// return this.osm_navigation+this.$root.event.place.details+'&'+this.routingType.bike
}, },
route() {
}
// loadMarker(d) {
// this.event = JSON.stringify(d);
//
// let newMarker = [{
// id: d.id,
// title: d.title,
// event: JSON.stringify(d),
// description: d.description,
// place: d.place,
// tags: d.tags,
// multidate: d.multidate,
// start_datetime: d.start_datetime,
// end_datetime: d.end_datetime,
// position: { lat: d.place.details.geometry.coordinates[1], lng: d.place.details.geometry.coordinates[0] },
// draggable: false,
// visible: true
// }]
//
// this.markers.push.apply(this.markers, newMarker)
// },
} }
} }
@@ -131,7 +114,7 @@ export default {
#leaflet-map { #leaflet-map {
height: 55vh; height: 55vh;
width: 100%; width: 100%;
border-radius: .5rem; border-radius: .3rem;
border: 1px solid #fff; border: 1px solid #fff;
z-index: 1; z-index: 1;
} }

86
components/WhereInput.vue
View File

@@ -30,28 +30,38 @@ v-row
:label="$t('common.address')" :label="$t('common.address')"
@change="changeAddress" @change="changeAddress"
:value="value.address") :value="value.address")
v-combobox.mr-4(ref='detailsView' v-if='settings.allow_geolocation' v-col(cols=12 md=6 v-if='settings.allow_geolocation')
:prepend-icon='mdiMapSearch' v-combobox.mr-4(ref='detailsView'
:disabled='disableDetails' :prepend-icon='mdiMapSearch'
@input.native='searchCoordinates' :disabled='disableDetails'
:label="$t('common.coordinates')" @input.native='searchCoordinates'
:value='value.detailsView' :label="$t('common.coordinates')"
persistent-hint hide-no-data clearable no-filter :value='value.detailsView'
:loading='loading' persistent-hint hide-no-data clearable no-filter
@change='selectDetails' :loading='loading'
@focus='searchCoordinates' @change='selectDetails'
:items="detailsList" @focus='searchCoordinates'
:hint="$t('event.coordinates_description')") :items="detailsList"
template(v-slot:item="{ item, attrs, on }") :hint="$t('event.coordinates_description')")
v-list-item(v-bind='attrs' v-on='on') template(v-slot:item="{ item, attrs, on }")
v-list-item-content(two-line v-if='item') v-list-item(v-bind='attrs' v-on='on')
v-list-item-title(v-text='item.display_name') v-list-item-content(two-line v-if='item')
v-list-item-subtitle(v-text='`${item.lat}`+`,`+`${item.lon}`') v-list-item-title(v-text='item.display_name')
v-text-field(ref='details' v-if='settings.allow_geolocation') v-list-item-subtitle(v-text='`${item.lat}`+`,`+`${item.lon}`')
v-col(cols=12 md=3 v-if='settings.allow_geolocation')
v-text-field(ref='latitude' :value='value.latitude'
:prepend-icon='mdiLatitude'
:disabled='disableDetails'
:label="$t('common.latitude')" )
v-col(cols=12 md=3 v-if='settings.allow_geolocation')
v-text-field(ref='longitude' :value='value.longitude'
:prepend-icon='mdiLongitude'
:disabled='disableDetails'
:label="$t('common.longitude')")
</template> </template>
<script> <script>
import { mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch } from '@mdi/js' import { mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiLatitude, mdiLongitude } from '@mdi/js'
import debounce from 'lodash/debounce' import debounce from 'lodash/debounce'
import { mapState } from 'vuex' import { mapState } from 'vuex'
@@ -62,7 +72,7 @@ export default {
}, },
data () { data () {
return { return {
mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiMap, mdiMapMarker, mdiPlus, mdiMapSearch, mdiLatitude, mdiLongitude,
place: { }, place: { },
placeName: '', placeName: '',
places: [], places: [],
@@ -112,6 +122,8 @@ export default {
this.place.address = p.address this.place.address = p.address
if (this.settings.allow_geolocation) { if (this.settings.allow_geolocation) {
this.place.details = p.details this.place.details = p.details
this.place.latitude = p.latitude
this.place.longitude = p.longitude
} }
this.place.id = p.id this.place.id = p.id
this.disableAddress = true this.disableAddress = true
@@ -130,6 +142,8 @@ export default {
this.place.address = '' this.place.address = ''
if (this.settings.allow_geolocation) { if (this.settings.allow_geolocation) {
this.place.details = p.details this.place.details = p.details
this.place.latitude = p.latitude
this.place.longitude = p.longitude
} }
this.disableAddress = false this.disableAddress = false
this.$refs.place.blur() this.$refs.place.blur()
@@ -152,6 +166,8 @@ export default {
c.lon = v.lon c.lon = v.lon
if (typeof c === 'object') { if (typeof c === 'object') {
this.place.details = JSON.stringify(c) this.place.details = JSON.stringify(c)
this.place.latitude = v.lat
this.place.longitude = v.lon
} }
} }
this.$emit('input', { ...this.place }) this.$emit('input', { ...this.place })
@@ -161,6 +177,36 @@ export default {
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
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_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
}
if (this.place.latitude < -180 || this.place.latitude > 180) {
// non existent
}
this.loading = false;
}
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) { if (searchCoordinates.length) {
this.detailsList = await this.$axios.$get(`placeNominatim/${searchCoordinates}`) this.detailsList = await this.$axios.$get(`placeNominatim/${searchCoordinates}`)
} }

21
components/admin/Places.vue
View File

@@ -25,12 +25,18 @@ v-container
v-model='place.address' v-model='place.address'
:placeholder='$t("common.address")') :placeholder='$t("common.address")')
v-textarea(v-if="settings.allow_geolocation" v-text-field(v-if="settings.allow_geolocation"
row-height="15" :rules="[$validators.required('common.latitude')]"
:disabled="true" :label="$t('common.latitude')"
:label="$t('common.details')" v-model='place.latitude'
v-model='place.details' :placeholder='$t("common.latitude")')
:placeholder='$t("common.details")')
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")')
v-card-actions v-card-actions
v-spacer v-spacer
@@ -84,7 +90,8 @@ export default {
this.place.name = item.name this.place.name = item.name
this.place.address = item.address this.place.address = item.address
if (this.settings.allow_geolocation) { if (this.settings.allow_geolocation) {
this.place.details = JSON.parse(item.details) this.place.latitude = item.latitude
this.place.longitude = item.longitude
} }
this.place.id = item.id this.place.id = item.id
this.dialog = true this.dialog = true

5
locales/en.json
View File

@@ -91,7 +91,10 @@
"label": "Label", "label": "Label",
"collections": "Collections", "collections": "Collections",
"close": "Close", "close": "Close",
"show_map": "Show map" "show_map": "Show map",
"latitude": "Latitude",
"longitude": "Longitude",
"getting_there": "Getting there"
}, },
"login": { "login": {
"description": "By logging in you can publish new events.", "description": "By logging in you can publish new events.",

5
pages/add/_edit.vue
View File

@@ -135,7 +135,7 @@ export default {
valid: false, valid: false,
openImportDialog: false, openImportDialog: false,
event: { event: {
place: { name: '', address: '', details: {} }, place: { name: '', address: '', latitude: null, longitude: null },
title: '', title: '',
description: '', description: '',
tags: [], tags: [],
@@ -214,7 +214,8 @@ export default {
} }
formData.append('place_name', this.event.place.name) formData.append('place_name', this.event.place.name)
formData.append('place_address', this.event.place.address) formData.append('place_address', this.event.place.address)
formData.append('place_details', this.event.place.details) formData.append('place_latitude', this.event.place.latitude)
formData.append('place_longitude', this.event.place.longitude)
formData.append('description', this.event.description) formData.append('description', this.event.description)
formData.append('multidate', !!this.date.multidate) formData.append('multidate', !!this.date.multidate)
formData.append('start_datetime', dayjs(this.date.from).unix()) formData.append('start_datetime', dayjs(this.date.from).unix())

3
pages/event/_slug.vue
View File

@@ -35,8 +35,7 @@ v-container#event.pa-0.pa-sm-2
v-btn.mt-2(small v-text="$t('common.show_map')" :aria-label="$t('common.show_map')" @click="mapModal = true") v-btn.mt-2(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
client-only(placeholder='Loading...' ) Map(:event='event')
Map(:event='event')
//- tags, hashtags //- tags, hashtags
v-card-text.pt-0(v-if='event.tags && event.tags.length') v-card-text.pt-0(v-if='event.tags && event.tags.length')

14
server/api/controller/event.js
View File

@@ -34,7 +34,7 @@ const eventController = {
Sequelize.where(Sequelize.fn('LOWER', Sequelize.col('address')), 'LIKE', '%' + search + '%') Sequelize.where(Sequelize.fn('LOWER', Sequelize.col('address')), 'LIKE', '%' + search + '%')
] ]
}, },
attributes: [['name', 'label'], 'address', 'details', 'id', [Sequelize.cast(Sequelize.fn('COUNT', Sequelize.col('events.placeId')), 'INTEGER'), 'w']], attributes: [['name', 'label'], 'address', 'latitude', 'longitude', 'id', [Sequelize.cast(Sequelize.fn('COUNT', Sequelize.col('events.placeId')), 'INTEGER'), 'w']],
include: [{ model: Event, where: { is_visible: true }, required: true, attributes: [] }], include: [{ model: Event, where: { is_visible: true }, required: true, attributes: [] }],
group: ['place.id'], group: ['place.id'],
raw: true raw: true
@@ -110,7 +110,7 @@ const eventController = {
attributes: ['tag'], attributes: ['tag'],
through: { attributes: [] } through: { attributes: [] }
}, },
{ model: Place, required: true, attributes: ['id', 'name', 'address', 'details'] } { model: Place, required: true, attributes: ['id', 'name', 'address', 'latitude', 'longitude'] }
], ],
replacements, replacements,
limit: 30, limit: 30,
@@ -192,7 +192,7 @@ const eventController = {
}, },
include: [ include: [
{ model: Tag, required: false, attributes: ['tag'], through: { attributes: [] } }, { model: Tag, required: false, attributes: ['tag'], through: { attributes: [] } },
{ model: Place, attributes: ['name', 'address', 'details', 'id'] }, { model: Place, attributes: ['name', 'address', 'latitude', 'longitude', 'id'] },
{ {
model: Resource, model: Resource,
where: !is_admin && { hidden: false }, where: !is_admin && { hidden: false },
@@ -406,7 +406,8 @@ const eventController = {
place = await Place.create({ place = await Place.create({
name: body.place_name, name: body.place_name,
address: body.place_address, address: body.place_address,
details: body.place_details latitude: body.place_latitude,
longitude: body.place_longitude
}) })
} }
} }
@@ -561,7 +562,8 @@ const eventController = {
place = await Place.create({ place = await Place.create({
name: body.place_name, name: body.place_name,
address: body.place_address, address: body.place_address,
details: body.place_details latitude: body.place_latitude,
longitude: body.place_longitude
}) })
} }
} }
@@ -700,7 +702,7 @@ const eventController = {
attributes: ['tag'], attributes: ['tag'],
through: { attributes: [] } through: { attributes: [] }
}, },
{ model: Place, required: true, attributes: ['id', 'name', 'address', 'details'] } { model: Place, required: true, attributes: ['id', 'name', 'address', 'latitude', 'longitude'] }
], ],
...pagination, ...pagination,
replacements replacements

2
server/api/controller/place.js
View File

@@ -62,7 +62,7 @@ module.exports = {
{ address: where(fn('LOWER', col('address')), 'LIKE', '%' + search + '%')}, { address: where(fn('LOWER', col('address')), 'LIKE', '%' + search + '%')},
] ]
}, },
attributes: ['name', 'address', 'details', 'id'], attributes: ['name', 'address', 'latitude', 'longitude', 'id'],
include: [{ model: Event, where: { is_visible: true }, required: true, attributes: [] }], include: [{ model: Event, where: { is_visible: true }, required: true, attributes: [] }],
group: ['place.id'], group: ['place.id'],
raw: true, raw: true,

3
server/api/index.js
View File

@@ -110,7 +110,8 @@ if (config.status !== 'READY') {
* @param {string} description - event's description (html accepted and sanitized) * @param {string} description - event's description (html accepted and sanitized)
* @param {string} place_name - the name of the place * @param {string} place_name - the name of the place
* @param {string} [place_address] - the address of the place * @param {string} [place_address] - the address of the place
* @param {array} [place_details] - the details of the place * @param {float} [place_latitude] - the latitude of the place
* @param {float} [place_longitude] - the longitude of the place
* @param {integer} start_datetime - start timestamp * @param {integer} start_datetime - start timestamp
* @param {integer} multidate - is a multidate event? * @param {integer} multidate - is a multidate event?
* @param {array} tags - List of tags * @param {array} tags - List of tags

3
server/api/models/event.js
View File

@@ -106,7 +106,8 @@ Event.prototype.toAP = function (username, locale, to = []) {
location: { location: {
name: this.place.name, name: this.place.name,
address: this.place.address, address: this.place.address,
details: this.place.details latitude: this.place.latitude,
longitude: this.place.longitude
}, },
attachment, attachment,
tag: tags && tags.map(tag => ({ tag: tags && tags.map(tag => ({

3
server/api/models/place.js
View File

@@ -11,7 +11,8 @@ Place.init({
allowNull: false allowNull: false
}, },
address: DataTypes.STRING, address: DataTypes.STRING,
details: DataTypes.JSON latitude: DataTypes.FLOAT,
longitude: DataTypes.FLOAT,
}, { sequelize, modelName: 'place' }) }, { sequelize, modelName: 'place' })
module.exports = Place module.exports = Place

14
server/migrations/20220706090946-place-details.js
View File

@@ -8,8 +8,11 @@ module.exports = {
* Example: * Example:
* await queryInterface.createTable('users', { id: Sequelize.INTEGER }); * await queryInterface.createTable('users', { id: Sequelize.INTEGER });
*/ */
return queryInterface.addColumn('places', 'details', { type: Sequelize.JSON }) return Promise.all(
[
await queryInterface.addColumn('places', 'latitude', { type: Sequelize.FLOAT }),
await queryInterface.addColumn('places', 'longitude', { type: Sequelize.FLOAT })
])
}, },
async down (queryInterface, Sequelize) { async down (queryInterface, Sequelize) {
@@ -19,7 +22,10 @@ module.exports = {
* Example: * Example:
* await queryInterface.dropTable('users'); * await queryInterface.dropTable('users');
*/ */
return queryInterface.removeColumn('places', 'details') return Promise.all(
[
await queryInterface.removeColumn('places', 'latitude'),
await queryInterface.removeColumn('places', 'longitude')
])
} }
}; };