changeset 2869:02f51054f648

Client: improv the selected stretch style * give the selected stretch a distinct style from the other ones
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 29 Mar 2019 13:20:58 +0100
parents 85dd3f98e18a
children 35f6e4383161
files client/src/components/ImportStretches.vue
diffstat 1 files changed, 40 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Fri Mar 29 12:56:29 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Fri Mar 29 13:20:58 2019 +0100
@@ -284,6 +284,7 @@
 import { LAYERS } from "@/store/map";
 import { HTTP } from "@/lib/http";
 import { sortTable } from "@/lib/mixins";
+import { Stroke, Style, Fill } from "ol/style.js";
 
 export default {
   name: "importstretches",
@@ -320,6 +321,7 @@
   computed: {
     ...mapState("application", ["searchQuery"]),
     ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
+    ...mapGetters("map", ["getVSourceByName", "getLayerByName"]),
     ...mapGetters("user", ["isSysAdmin"]),
     ...mapState("imports", ["stretches"]),
     defineStretchesLabel() {
@@ -438,13 +440,50 @@
       });
     },
     moveMapToStretch(stretch) {
+      //define new style for the selected stretch
+      var newStyle = new Style({
+        stroke: new Stroke({
+          color: "rgba(250, 240, 10, .9)",
+          width: 5
+        }),
+        fill: new Fill({
+          color: "rgba(250, 240, 0, .7)"
+        })
+      });
+      let stretchesLayer = this.getLayerByName(LAYERS.STRETCHES);
+      let oldStyle = stretchesLayer.data.getStyle();
       this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
+      var stretches = stretchesLayer.data.getSource().getFeatures();
+      // change the style when the the stretches are already loaded
+      if (stretches.length) {
+        this.setStretchStyle(stretches, stretch, oldStyle, newStyle);
+      } else {
+        // by choosing stretch first time wating to load the features then change the style
+        stretchesLayer.data.getSource().once("change", () => {
+          this.setStretchStyle(
+            stretchesLayer.data.getSource().getFeatures(),
+            stretch,
+            oldStyle,
+            newStyle
+          );
+        });
+      }
       this.$store.commit("map/moveToExtent", {
         feature: stretch,
         zoom: 17,
         preventZoomOut: true
       });
     },
+    // give the selected stretch new style and set the orginal style to the others
+    setStretchStyle(features, stretch, oldStyle, newStyle) {
+      features.forEach(f => {
+        if (f.id_ === stretch.id) {
+          f.setStyle(newStyle);
+        } else {
+          f.setStyle(oldStyle);
+        }
+      });
+    },
     loadStretches() {
       return new Promise((resolve, reject) => {
         this.$store
@@ -569,7 +608,7 @@
   },
   mounted() {
     this.edit = false;
-    this.loadStretches().catch(error => {
+    this.$store.dispatch("imports/loadStretches").catch(error => {
       const { status, data } = error.response;
       displayError({
         title: this.$gettext("Backend Error"),