Smart origin/lot1

.eslintrc.json

@@ -11,6 +11,7 @@
   ],
   "reportUnusedDisableDirectives": true,
   "rules": {
+    "prettier/prettier": ["warn", { "endOfLine": "auto" }],
     "no-unused-vars": "warn",
     "no-console": "warn",
     "vue/no-v-html": "off",

docker/nginx.conf

@@ -1,5 +1,6 @@
 server {
-    listen ${PORT} proxy_protocol;
+    listen ${PORT};
+    #listen ${PORT} proxy_protocol;
     server_name ${SERVER_NAME};
     root /usr/share/nginx/html;
     index index.html;

src/components/map/OlMap.vue

@@ -1064,8 +1064,7 @@ export default {
         resultFeature = feature;
         return true;
       });
-
-      this.setHighlightedFeature(resultFeature);
+      this.setHighlightedFeature(resultFeature); ///////////
       this.$emit('highlight-document', resultFeature ? resultFeature.get('document') : null);
     },
 
@@ -1094,6 +1093,13 @@ export default {
 
       if (feature) {
         const document = feature.get('document');
+        if (document && document.type === 'z') {
+          return;
+        }
+        if (document && document.type === 's') {
+          this.$emit('stop-clicked', document.document_id);
+          return;
+        }
         if (document) {
           if (this.documents.length === 1 && document.document_id === this.documents[0].document_id) {
             return;
@@ -1256,6 +1262,75 @@ export default {
       );
       this.editMapLink = `https://www.openstreetmap.org/#map=13/${coords[1]}/${coords[0]}`;
     },
+
+    highlightStop(stopId) {
+      this.resetStopStyles();
+      const stopFeature = this.findStopPoint(stopId);
+
+      if (!stopFeature) {
+        console.warn(`Stop with ID ${stopId} not found.`);
+        return;
+      }
+
+      const title = stopFeature.get('document').stoparea_name;
+      stopFeature.setStyle(getDocumentPointStyle(stopFeature.get('document'), title, true));
+    },
+
+    goAndZoomOnStop(stopId) {
+      const stopFeature = this.findStopPoint(stopId);
+
+      if (!stopFeature) {
+        console.warn(`Stop with ID ${stopId} not found.`);
+        return;
+      }
+      const geometry = stopFeature.getGeometry();
+      if (geometry) {
+        const coordinate = geometry.getCoordinates();
+
+        const view = this.map.getView();
+        view.cancelAnimations();
+
+        view.animate({
+          center: coordinate,
+          zoom: Math.max(view.getZoom(), 15),
+          duration: 300,
+        });
+      }
+    },
+
+    resetStopStyles() {
+      const documentsSource = this.documentsLayer.getSource();
+      const waypointsSource = this.waypointsLayer.getSource();
+
+      documentsSource.forEachFeature((feature) => {
+        if (feature.values_.document.type !== 'w' && feature.values_.document.type !== 'z') {
+          feature.setStyle(feature.get('normalStyle'));
+        }
+      });
+
+      waypointsSource.forEachFeature((feature) => {
+        feature.setStyle(feature.get('normalStyle'));
+      });
+    },
+
+    findStopPoint(stopId) {
+      const documentsSource = this.documentsLayer.getSource();
+      const documentFeature = documentsSource.getFeatureById(stopId);
+
+      if (documentFeature) {
+        return documentFeature;
+      }
+
+      const waypointsSource = this.waypointsLayer.getSource();
+      const waypointFeature = waypointsSource.getFeatureById(stopId);
+
+      if (waypointFeature) {
+        return waypointFeature;
+      }
+
+      console.warn(`Stop with ID ${stopId} not found.`);
+      return null;
+    },
   },
 };
 </script>

src/components/map/map-utils.js

@@ -57,23 +57,38 @@ export const buildDiffStyle = function (isOld) {
 const buildPointStyle = function (title, svgSrc, color, highlight) {
   const imgSize = highlight ? 30 : 20;
   const circleRadius = highlight ? 20 : 15;
+  const zIndexValue = highlight ? 101 : 1;
+
+  if (svgSrc.includes('bus')) {
+    svgSrc = svgSrc.replace('fill="currentColor"', 'fill="white"');
+  } else {
+    svgSrc = svgSrc.replace('fill="currentColor"', `fill="${color}"`);
+  }
 
   svgSrc = svgSrc.replace('<svg ', `<svg width="${imgSize}px" height="${imgSize}px" `);
-  svgSrc = svgSrc.replace('fill="currentColor"', `fill="${color}"`);
 
   const iconStyle = new ol.style.Style({
     image: new ol.style.Icon({
       src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgSrc),
     }),
     text: buildTextStyle(title, highlight),
+    zIndex: zIndexValue + 1,
   });
 
+  let circleFillColor = 'rgba(255, 255, 255, 0.5)';
+  let circleStrokeColor = '#ddd';
+
+  if (svgSrc.includes('bus')) {
+    circleFillColor = highlight ? '#4baf50' : '#337ab7';
+  }
+
   const circleStyle = new ol.style.Style({
     image: new ol.style.Circle({
       radius: circleRadius,
-      fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.5)' }),
-      stroke: new ol.style.Stroke({ color: '#ddd', width: 2 }),
+      fill: new ol.style.Fill({ color: circleFillColor }),
+      stroke: new ol.style.Stroke({ color: circleStrokeColor, width: 2 }),
     }),
+    zIndex: zIndexValue,
   });
 
   return [circleStyle, iconStyle];
@@ -85,6 +100,8 @@ const svgSrcByDocumentType = {
   r: icon({ prefix: 'fas', iconName: 'route' }).html[0],
   u: icon({ prefix: 'fas', iconName: 'user' }).html[0],
   x: icon({ prefix: 'fas', iconName: 'flag-checkered' }).html[0],
+  s: icon({ prefix: 'fas', iconName: 'bus' }).html[0],
+  z: icon({ prefix: 'waypoint', iconName: 'access' }).html[0],
 };
 
 const colorByConditionRating = {
@@ -107,7 +124,7 @@ export const getDocumentPointStyle = function (document, title, highlight) {
     color = colorByConditionRating[document.condition_rating];
   }
 
-  if (type === 'i' || type === 'u' || type === 'x' || type === 'o' || type === 'r') {
+  if (type === 'i' || type === 'u' || type === 'x' || type === 'o' || type === 'r' || type === 's') {
     svgSrc = svgSrcByDocumentType[type];
   } else if (type === 'w') {
     if (
@@ -119,6 +136,33 @@ export const getDocumentPointStyle = function (document, title, highlight) {
       color = '#4baf50';
     }
     svgSrc = icon({ prefix: 'waypoint', iconName: document.waypoint_type || 'misc' }).html[0];
+  } else if (type === 'z') {
+    svgSrc = svgSrcByDocumentType['z'] || icon({ prefix: 'waypoint', iconName: 'access' }).html[0];
+
+    if (document.public_transportation_rating && document.public_transportation_rating !== 'no service') {
+      color = '#4baf50';
+    } else {
+      color = '#F93';
+    }
+
+    const styles = buildPointStyle(title, svgSrc, color, highlight);
+
+    styles.forEach((style) => {
+      const image = style.getImage();
+
+      if (image instanceof ol.style.Circle) {
+        image.getFill().setColor('rgba(255, 255, 255, 1)');
+        image.getStroke().setColor('#4baf50');
+
+        style.setZIndex(highlight ? 101 : 50);
+      }
+
+      if (image instanceof ol.style.Icon) {
+        style.setZIndex(highlight ? 102 : 51);
+      }
+    });
+
+    return styles;
   } else if (type === 'a') {
     return new ol.style.Style();
   } else {