# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1566983207 -7200
# Node ID 315474a66589bae040fc7a43d0ceb7be94542389
# Parent  e4d6c6339cb474c1d67713222cff77b5a31fa270
Map: refreshing layers triggers reloading of styles

diff -r e4d6c6339cb4 -r 315474a66589 client/src/components/layers/Layers.vue
--- a/client/src/components/layers/Layers.vue	Tue Aug 27 17:07:16 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Wed Aug 28 11:06:47 2019 +0200
@@ -86,8 +86,12 @@
       this.$store.commit("application/showLayers", false);
     },
     refreshLayers() {
+      this.$store.commit("map/startRefreshLayers");
       this.$store.commit("gauges/deleteNashSutcliffeCache");
       this.$store.dispatch("map/refreshLayers");
+      this.$nextTick(() => {
+        this.$store.commit("map/finishRefreshLayers");
+      });
     }
   }
 };
diff -r e4d6c6339cb4 -r 315474a66589 client/src/components/map/Map.vue
--- a/client/src/components/map/Map.vue	Tue Aug 27 17:07:16 2019 +0200
+++ b/client/src/components/map/Map.vue	Wed Aug 28 11:06:47 2019 +0200
@@ -59,7 +59,13 @@
     };
   },
   computed: {
-    ...mapState("map", ["initialLoad", "extent", "syncedMaps", "syncedView"]),
+    ...mapState("map", [
+      "initialLoad",
+      "extent",
+      "syncedMaps",
+      "syncedView",
+      "ongoingRefresh"
+    ]),
     ...mapState("bottlenecks", ["selectedSurvey"]),
     ...mapState("fairwayprofile", ["additionalSurvey"]),
     ...mapState("application", ["paneSetup", "paneRotate", "config"]),
@@ -82,6 +88,10 @@
     }
   },
   watch: {
+    ongoingRefresh() {
+      if (this.ongoingRefresh) return;
+      this.loadStyles();
+    },
     paneSetup() {
       this.$nextTick(() => this.map.updateSize());
     },
@@ -243,6 +253,110 @@
       });
       this.$store.dispatch("map/openLayersMap", this.map);
       this.$store.dispatch("map/initIdentifyTool", this.map);
+    },
+    loadStyles() {
+      // load configured bottleneck colors
+      HTTP.get("/system/settings", {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          let btlnStrokeC = response.data.bottlenecks_stroke,
+            btlnFillC = response.data.bottlenecks_fill,
+            strFillC = response.data.stretches_fill,
+            strStrokeC = response.data.stretches_stroke,
+            secStrokeC = response.data.sections_stroke,
+            secFillC = response.data.sections_fill,
+            fwd1StrokeC = response.data.fairwaydimensionslos1_stroke,
+            fwd1FillC = response.data.fairwaydimensionslos1_fill,
+            fwd2StrokeC = response.data.fairwaydimensionslos2_stroke,
+            fwd2FillC = response.data.fairwaydimensionslos2_fill,
+            fwd3StrokeC = response.data.fairwaydimensionslos3_stroke,
+            fwd3FillC = response.data.fairwaydimensionslos3_fill,
+            wwpStokeC = response.data.waterwayprofiles_stroke;
+          let btlnStyle = new Style({
+              stroke: new Stroke({
+                color: btlnStrokeC,
+                width: 4
+              }),
+              fill: new Fill({
+                color: btlnFillC
+              })
+            }),
+            strStyle = new Style({
+              stroke: new Stroke({
+                color: strStrokeC,
+                width: 2
+              }),
+              fill: new Fill({
+                color: strFillC
+              })
+            }),
+            secStyle = new Style({
+              stroke: new Stroke({
+                color: secStrokeC,
+                width: 5
+              }),
+              fill: new Fill({
+                color: secFillC
+              })
+            }),
+            fwd1Style = new Style({
+              stroke: new Stroke({
+                lineDash: [2, 4],
+                lineCap: "round",
+                color: fwd1StrokeC,
+                width: 2
+              }),
+              fill: new Fill({
+                color: fwd1FillC
+              })
+            }),
+            fwd2Style = new Style({
+              stroke: new Stroke({
+                lineDash: [3, 6],
+                lineCap: "round",
+                color: fwd2StrokeC,
+                width: 2
+              }),
+              fill: new Fill({
+                color: fwd2FillC
+              })
+            }),
+            fwd3Style = new Style({
+              stroke: new Stroke({
+                color: fwd3StrokeC,
+                width: 2
+              }),
+              fill: new Fill({
+                color: fwd3FillC
+              })
+            }),
+            wwpStyle = new Style({
+              stroke: new Stroke({
+                color: wwpStokeC,
+                lineDash: [5, 5],
+                width: 2
+              })
+            });
+          this.layers.get("WATERWAYPROFILES").setStyle(wwpStyle);
+          this.layers
+            .get("FAIRWAYDIMENSIONSLOS1")
+            .setStyle(() => [fwd1Style, styles.textFW1]);
+          this.layers
+            .get("FAIRWAYDIMENSIONSLOS2")
+            .setStyle(() => [fwd2Style, styles.textFW2]);
+          this.layers
+            .get("FAIRWAYDIMENSIONSLOS3")
+            .setStyle(() => [fwd3Style, styles.textFW3]);
+          this.layers.get("SECTIONS").setStyle(secStyle);
+          this.layers.get("STRETCHES").setStyle(strStyle);
+          this.layers.get("BOTTLENECKS").setStyle(btlnStyle);
+          this.$store.commit("gauges/deleteNashSutcliffeCache");
+          this.$store.dispatch("map/refreshLayers");
+        })
+        .catch(error => {
+          console.log(error);
+        });
     }
   },
   mounted() {
@@ -271,108 +385,7 @@
             this.additionalSurvey.date_info
           );
         }
-        // load configured bottleneck colors
-        HTTP.get("/system/settings", {
-          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-        })
-          .then(response => {
-            let btlnStrokeC = response.data.bottlenecks_stroke,
-              btlnFillC = response.data.bottlenecks_fill,
-              strFillC = response.data.stretches_fill,
-              strStrokeC = response.data.stretches_stroke,
-              secStrokeC = response.data.sections_stroke,
-              secFillC = response.data.sections_fill,
-              fwd1StrokeC = response.data.fairwaydimensionslos1_stroke,
-              fwd1FillC = response.data.fairwaydimensionslos1_fill,
-              fwd2StrokeC = response.data.fairwaydimensionslos2_stroke,
-              fwd2FillC = response.data.fairwaydimensionslos2_fill,
-              fwd3StrokeC = response.data.fairwaydimensionslos3_stroke,
-              fwd3FillC = response.data.fairwaydimensionslos3_fill,
-              wwpStokeC = response.data.waterwayprofiles_stroke;
-            let btlnStyle = new Style({
-                stroke: new Stroke({
-                  color: btlnStrokeC,
-                  width: 4
-                }),
-                fill: new Fill({
-                  color: btlnFillC
-                })
-              }),
-              strStyle = new Style({
-                stroke: new Stroke({
-                  color: strStrokeC,
-                  width: 2
-                }),
-                fill: new Fill({
-                  color: strFillC
-                })
-              }),
-              secStyle = new Style({
-                stroke: new Stroke({
-                  color: secStrokeC,
-                  width: 5
-                }),
-                fill: new Fill({
-                  color: secFillC
-                })
-              }),
-              fwd1Style = new Style({
-                stroke: new Stroke({
-                  lineDash: [2, 4],
-                  lineCap: "round",
-                  color: fwd1StrokeC,
-                  width: 2
-                }),
-                fill: new Fill({
-                  color: fwd1FillC
-                })
-              }),
-              fwd2Style = new Style({
-                stroke: new Stroke({
-                  lineDash: [3, 6],
-                  lineCap: "round",
-                  color: fwd2StrokeC,
-                  width: 2
-                }),
-                fill: new Fill({
-                  color: fwd2FillC
-                })
-              }),
-              fwd3Style = new Style({
-                stroke: new Stroke({
-                  color: fwd3StrokeC,
-                  width: 2
-                }),
-                fill: new Fill({
-                  color: fwd3FillC
-                })
-              }),
-              wwpStyle = new Style({
-                stroke: new Stroke({
-                  color: wwpStokeC,
-                  lineDash: [5, 5],
-                  width: 2
-                })
-              });
-            this.layers.get("WATERWAYPROFILES").setStyle(wwpStyle);
-            this.layers
-              .get("FAIRWAYDIMENSIONSLOS1")
-              .setStyle(() => [fwd1Style, styles.textFW1]);
-            this.layers
-              .get("FAIRWAYDIMENSIONSLOS2")
-              .setStyle(() => [fwd2Style, styles.textFW2]);
-            this.layers
-              .get("FAIRWAYDIMENSIONSLOS3")
-              .setStyle(() => [fwd3Style, styles.textFW3]);
-            this.layers.get("SECTIONS").setStyle(secStyle);
-            this.layers.get("STRETCHES").setStyle(strStyle);
-            this.layers.get("BOTTLENECKS").setStyle(btlnStyle);
-            this.$store.commit("gauges/deleteNashSutcliffeCache");
-            this.$store.dispatch("map/refreshLayers");
-          })
-          .catch(error => {
-            console.log(error);
-          });
+        this.loadStyles();
       })
       .catch(error => {
         const { status, data } = error.response;
diff -r e4d6c6339cb4 -r 315474a66589 client/src/store/map.js
--- a/client/src/store/map.js	Tue Aug 27 17:07:16 2019 +0200
+++ b/client/src/store/map.js	Wed Aug 28 11:06:47 2019 +0200
@@ -48,7 +48,8 @@
     polygonToolEnabled: false,
     cutToolEnabled: false,
     isolinesLegendImgDataURL: "",
-    differencesLegendImgDataURL: ""
+    differencesLegendImgDataURL: "",
+    ongoingRefresh: false
   };
 };
 
@@ -67,6 +68,12 @@
     }
   },
   mutations: {
+    startRefreshLayers: state => {
+      state.ongoingRefresh = true;
+    },
+    finishRefreshLayers: state => {
+      state.ongoingRefresh = false;
+    },
     initialLoad: (state, initialLoad) => {
       state.initialLoad = initialLoad;
     },