Merge pull request #2217 from goat-community/dev

Dev
goat-community · May 10, 2023 · 7e17712 · 7e17712
2 parents d36f232 + e724f87
commit 7e17712
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 25 deletions.
diff --git a/app/client/src/components/indicators/Indicators.vue b/app/client/src/components/indicators/Indicators.vue
@@ -213,6 +213,8 @@ export default {
     EventBus.$on("updateStyleDialogStatusForLayerOrder", value => {
       this.styleDialogStatus = value;
     });
+
+    this.updateLayerMaxResolution();
   },
   computed: {
     ...mapGetters("app", {
@@ -222,7 +224,8 @@ export default {
       unCalculatedDataUploadIds: "unCalculatedDataUploadIds"
     }),
     ...mapGetters("poisaois", {
-      selectedPoisOnlyKeys: "selectedPoisOnlyKeys"
+      selectedPoisOnlyKeys: "selectedPoisOnlyKeys",
+      selectedAoisOnlyKeys: "selectedAoisOnlyKeys"
     }),
     ...mapGetters("scenarios", {
       activeScenario: "activeScenario"
@@ -314,7 +317,7 @@ export default {
           this.indicatorCancelToken = null;
         }
         layer.getSource().refresh();
-        this.checkIfIndicatorNeedsPois(layer);
+        this.checkIfIndicatorNeedsPoisAois(layer);
         layer.set("showOptions", true);
       }
       if (
@@ -335,7 +338,7 @@ export default {
       }
       indicatorLayers.forEach(layer => {
         if (layer.getVisible()) {
-          this.checkIfIndicatorNeedsPois(layer);
+          this.checkIfIndicatorNeedsPoisAois(layer);
           if (this.indicatorCancelToken instanceof Function) {
             this.indicatorCancelToken("cancelled");
             this.indicatorCancelToken = null;
@@ -354,7 +357,7 @@ export default {
           this.updateIndicators[group].forEach(indicatorName => {
             this.indicatorLayers.forEach(layer => {
               if (layer.get("name") === indicatorName && layer.getVisible()) {
-                this.checkIfIndicatorNeedsPois(layer);
+                this.checkIfIndicatorNeedsPoisAois(layer);
                 if (this.indicatorCancelToken instanceof Function) {
                   this.indicatorCancelToken("cancelled");
                   this.indicatorCancelToken = null;
@@ -398,10 +401,11 @@ export default {
           this.isRecomputingIndicator = false;
         });
     },
-    checkIfIndicatorNeedsPois(layer) {
+    checkIfIndicatorNeedsPoisAois(layer) {
       this.toggleSnackbar({ state: false });
       if (
         this.selectedPoisOnlyKeys.length === 0 &&
+        this.selectedAoisOnlyKeys.length === 0 &&
         this.indicatorsWithAmenities.includes(layer.get("name"))
       ) {
         this.toggleSnackbar({

diff --git a/app/client/src/components/layers/layerTree/LayerTree.vue b/app/client/src/components/layers/layerTree/LayerTree.vue
@@ -205,6 +205,8 @@ import { EventBus } from "../../../EventBus";
 import InLegend from "../../viewer/ol/controls/InLegend";
 import LayerOrder from "../layerOrder/LayerOrder";
 import StyleDialog from "../../styling/StyleDialog";
+// import { Style, Fill } from "ol/style";
+import { Feature } from "ol";
 import Legend from "../../viewer/ol/controls/Legend";
 import ImportExternalLayers from "../importLayers/ImportExternalLayers.vue";
 
@@ -487,7 +489,58 @@ export default {
       }
       this.currentItem = item;
     },
+    opacityToHex(opacity, hexpart) {
+      // Convert the opacity to a 8-bit integer between 0 and 255
+      const alpha = Math.round(opacity * 255);
+      // Convert the alpha value to a hex string
+      const hex = alpha.toString(16).padStart(2, "0");
+      // Return the hex string with an alpha channel
+      return `#${hexpart}${hex}`;
+    },
+    setFillOpacity(style, opacity) {
+      // Get the fill style from the style
+      // style[0].getImage().setOpacity(opacity);
+      style[0].setFill("#000000");
+      // console.log(
+      //   style[0],
+      //
+      // );
+      style[0]
+        .getImage()
+        .getFill()
+        .setColor(
+          this.opacityToHex(
+            opacity,
+            style[0]
+              .getImage()
+              .getFill()
+              .getColor()
+              .slice(1)
+          )
+        );
+      console.log(style[0]);
+      // if (fill instanceof Fill) {
+      //   // Get the color of the fill style and split it into RGBA components
+      //   const color = fill.getColor();
+      //   // eslint-disable-next-line
+      //   const [r, g, b, a] = color;
+      //   // Set the new opacity value
+      //   const newColor = [r, g, b, opacity];
+      //   // Update the fill color with the new opacity value
+      //   fill.setColor(newColor);
+      // }
+      return style[0];
+    },
     changeLayerOpacity(value, layer) {
+      if (layer.get("type") == "MVT") {
+        const layerStyleFn = layer.getStyle();
+        const feature = new Feature();
+        const resolution = 10;
+        const layerStyle = layerStyleFn(feature, resolution);
+
+        let new_style = this.setFillOpacity(layerStyle, value);
+        layer.setStyle(new_style);
+      }
       layer.setOpacity(value);
     },
     // Importing built in layers from a local js file

diff --git a/app/client/src/components/viewer/ol/Map.vue b/app/client/src/components/viewer/ol/Map.vue
@@ -84,24 +84,28 @@
               'trip_cnt'
             )"
             :key="idx"
-            style="display: flex; align-items: center; margin: 5px 0;"
           >
             <div
-              v-if="transitRouteTypesByNr[routeType].color"
-              :style="
-                `width:45px;height:23px;margin-right: 20px;background-color: ${transitRouteTypesByNr[routeType].color};`
-              "
-            ></div>
-            <p style="margin: 0">
-              {{
-                $t(
-                  `indicators.ptRouteTypes.${transitRouteTypesByNr[routeType].name}`
-                )
-              }}:
-              {{
-                tripCnt && timeDelta > 0 ? Math.round(tripCnt / timeDelta) : 0
-              }}
-            </p>
+              v-if="routeType in transitRouteTypesByNr"
+              style="display: flex; align-items: center; margin: 5px 0;"
+            >
+              <div
+                v-if="transitRouteTypesByNr[routeType].color"
+                :style="
+                  `width:45px;height:23px;margin-right: 20px;background-color: ${transitRouteTypesByNr[routeType].color};`
+                "
+              ></div>
+              <p style="margin: 0">
+                {{
+                  $t(
+                    `indicators.ptRouteTypes.${transitRouteTypesByNr[routeType].name}`
+                  )
+                }}:
+                {{
+                  tripCnt && timeDelta > 0 ? Math.round(tripCnt / timeDelta) : 0
+                }}
+              </p>
+            </div>
           </div>
         </template>
         <!-- INDICATOR: ÖV-Güteklassen -->
@@ -410,6 +414,15 @@ export default {
       me.createWmsWmtsPopup();
       EventBus.$on("toggleLayerVisiblity", this.showNonVisibleLayersInfo);
     }, 200);
+
+    // this.updateMapZoomLevel()
+
+    //event to check for page zoom level changes
+    // window
+    //   .matchMedia("(resolution: 1dppx)")
+    //   .addListener(this.updateMapZoomLevel);
+
+    // this.updateMapZoomLevel(window.matchMedia("(resolution: 1dppx)"));
   },
   created() {
     var me = this;
@@ -672,6 +685,17 @@ export default {
       }
     },
 
+    /**
+     * Change view level of map based in the page zoom level
+     */
+    // updateMapZoomLevel(e) {
+    //   const pageZoomLevel = e.matches ? 100 : 200; // calculate the page zoom level based on the devicePixelRatio
+    //   console.log(e.matches);
+    //   this.mapZoomLevel = this.map
+    //     .getView()
+    //     .setZoom(this.map.getView().getZoom() / (pageZoomLevel / 100)); // calculate the new map zoom level
+    // },
+
     /**
      * Show popup for the get info module.
      */

diff --git a/app/client/src/store/modules/isochrones.js b/app/client/src/store/modules/isochrones.js
@@ -199,10 +199,7 @@ const getters = {
       r => r.type === "transit"
     );
     if (routing.length > 0) {
-      const transitModes = [
-        ...routing[0].transit_modes,
-        ...state.transitRouteTypeExtensions
-      ];
+      const transitModes = [...routing[0].transit_modes];
       transitModes.forEach(t => {
         const typeNr = state.transitRouteTypes[t.type];
         obj[typeNr] = {