From bf43fdaa356f08fbc3aa5f65fe8514ac98fde15b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Fri, 29 Apr 2022 17:35:56 +0200
Subject: [PATCH] use router in popup links to avoid website reload
---
src/services/map-service.js | 85 +++++++++++++++++++++----------------
1 file changed, 49 insertions(+), 36 deletions(-)
diff --git a/src/services/map-service.js b/src/services/map-service.js
index e88fceab..6c37c0b2 100644
--- a/src/services/map-service.js
+++ b/src/services/map-service.js
@@ -20,6 +20,8 @@ import VectorLayer from 'ol/layer/Vector';
import { fromLonLat } from 'ol/proj.js';
import OverlayPositioning from 'ol/OverlayPositioning';
+import router from '@/router';
+
let dictLayersToLeaflet = {};
let statusList = [
@@ -124,18 +126,40 @@ const mapService = {
return this.map;
},
+
+ addRouterToPopup(featureTypeSlug, featureId) {
+ function goToFeatureDetail() {
+ console.log(featureTypeSlug, featureId);
+ router.push({
+ name: 'details-signalement',
+ params: {
+ slug_type_signal: featureTypeSlug, //'1-polygones'
+ slug_signal: featureId, //'d267c6fa-d676-45c9-8e34-ec3d1bcc7c25'
+ },
+ });
+ }
+
+ function goToFeatureTypeDetail() {
+ router.push({
+ name: 'details-type-signalement',
+ params: {
+ feature_type_slug: featureTypeSlug, //'1-polygones'
+ },
+ });
+ }
+ document.getElementById('goToFeatureTypeDetail').onclick = goToFeatureTypeDetail;
+ document.getElementById('goToFeatureDetail').onclick = goToFeatureDetail;
+ },
+
onMapClick(event) {
- let self = this;
const features = this.map.getFeaturesAtPixel(event.pixel, {
- layerFilter(l) {
- return l === self.mvtLayer;
- },
+ layerFilter: (l) => l === this.mvtLayer
});
if (features && features.length > 0) {
- const popupContent = this._createContentPopup(features[0],
- this.mvtLayer.featureTypes, this.mvtLayer.project_slug);
- this.content.innerHTML = popupContent;
+ const popupContent = this._createContentPopup(features[0], this.mvtLayer.featureTypes);
+ this.content.innerHTML = popupContent.html;
this.overlay.setPosition(event.coordinate);
+ this.addRouterToPopup(popupContent.feature_type.slug, popupContent.featureId);
}
//const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent;
if (this.layers) {
@@ -476,7 +500,7 @@ const mapService = {
this.map.on(eventName, callback);
},
- _createContentPopup: function (feature, featureTypes, project_slug) {
+ _createContentPopup: function (feature, featureTypes) {
const formatDate = (current_datetime) => {
let formatted_date = current_datetime.getFullYear() + '-' + ('0' + (current_datetime.getMonth() + 1)).slice(-2) + '-' + ('0' + current_datetime.getDate()).slice(-2) + ' ' +
('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2);
@@ -485,37 +509,24 @@ const mapService = {
let feature_type;
let status;
let date_maj;
- let feature_type_url;
- let feature_url;
if (feature.getProperties) {
status = feature.getProperties().status;
date_maj = feature.getProperties().updated_on;
- feature_type_url = feature.getProperties().feature_type_url;
- feature_url = feature.getProperties().feature_url;
} else {
status = feature.status;
date_maj = feature.updated_on;
- feature_type_url = feature.feature_type_url;
- feature_url = feature.feature_url;
}
if (featureTypes) { // => VectorTile
feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
status = statusList.find((x) => x.value === feature.getProperties().status).name;
date_maj = formatDate(new Date(feature.getProperties().updated_on));
- feature_type_url = '/geocontrib/projet/' + project_slug + '/type-signalement/' + feature_type.slug + '/';
- feature_url = feature_type_url + 'signalement/' + feature.getProperties().feature_id + '/';
} else {
feature_type = feature.getProperties ? feature.getProperties().feature_type : feature.feature_type;
status = feature.getProperties ? feature.getProperties().status.label : feature.status.label;
}
- //* adapt link url for shared-project restricted navigation
- if (window.location.pathname.includes('projet-partage')) {
- feature_url = feature_url.replace('projet', 'projet-partage');
- feature_type_url = feature_type_url.replace('projet', 'projet-partage');
- }
let author = '';
const creator = feature.getProperties ? feature.getProperties().creator : feature.creator;
if (creator) {
@@ -527,21 +538,23 @@ const mapService = {
}
const title = feature.getProperties ? feature.getProperties().title : feature.title;
- return `
- <h4>
- <a href="${feature_url}">${title}</a>
- </h4>
- <div>
- Statut : ${status}
- </div>
- <div>
- Type : <a href="${feature_type_url}"> ${feature_type.title} </a>
- </div>
- <div>
- Dernière mise à jour : ${date_maj}
- </div>
- ${author}
- `;
+ const html = `
+ <h4>
+ <a id="goToFeatureDetail" class="pointer">${title}</a>
+ </h4>
+ <div>
+ Statut : ${status}
+ </div>
+ <div>
+ Type : <a id="goToFeatureTypeDetail" class="pointer"> ${feature_type.title} </a>
+ </div>
+ <div>
+ Dernière mise à jour : ${date_maj}
+ </div>
+ ${author}
+ `;
+ const featureId = feature.getProperties ? feature.getProperties().feature_id : feature.id;
+ return { html, feature_type, featureId };
},
zoomTo(location, zoomlevel, lon, lat) {
if (lon && lat) {
--
GitLab