# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1565863827 -7200
# Node ID 8962a25d42902aeae1cf7d0a5b21a6e8daab04e4
# Parent  984bf74ad3cf0d4ada3b10ace7eb81dad3015025
styles-config: implement layers-styling on the map

diff -r 984bf74ad3cf -r 8962a25d4290 client/src/components/map/Map.vue
--- a/client/src/components/map/Map.vue	Thu Aug 15 10:28:43 2019 +0200
+++ b/client/src/components/map/Map.vue	Thu Aug 15 12:10:27 2019 +0200
@@ -271,32 +271,93 @@
           );
         }
         // load configured bottleneck colors
-        HTTP.get("/system/style/Bottlenecks/stroke", {
+        HTTP.get("/system/settings", {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            let btlnStrokeC = response.data.code;
-            HTTP.get("/system/style/Bottlenecks/fill", {
-              headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-            })
-              .then(response => {
-                let btlnFillC = response.data.code;
-                var newStyle = new Style({
-                  stroke: new Stroke({
-                    color: btlnStrokeC,
-                    width: 4
-                  }),
-                  fill: new Fill({
-                    color: btlnFillC
-                  })
-                });
-                this.layers.get("BOTTLENECKS").setStyle(newStyle);
-                this.$store.commit("gauges/deleteNashSutcliffeCache");
-                this.$store.dispatch("map/refreshLayers");
-              })
-              .catch(error => {
-                console.log(error);
+            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({
+                  color: fwd1StrokeC,
+                  width: 2
+                }),
+                fill: new Fill({
+                  color: fwd1FillC
+                })
+              }),
+              fwd2Style = new Style({
+                stroke: new Stroke({
+                  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);
+            this.layers.get("FAIRWAYDIMENSIONSLOS2").setStyle(fwd2Style);
+            this.layers.get("FAIRWAYDIMENSIONSLOS3").setStyle(fwd3Style);
+            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);