# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1551772015 -3600
# Node ID ae257e0238f18f7d4eeaec3f5134b0bc66b4b5a7
# Parent  bc0f1771497aa3c01a144f4bf06295d18c1dd2dc# Parent  ac0e2cf199e79e50914771e25d8e0b816c920384
merged critical-bottlenecks into default branch

Contains one change that was unintentionally committed to the critical-bottlenecks branch.
e13daf439068 and 51dbcbf11c5f

diff -r bc0f1771497a -r ae257e0238f1 client/src/components/Maplayer.vue
--- a/client/src/components/Maplayer.vue	Mon Mar 04 16:30:46 2019 +0100
+++ b/client/src/components/Maplayer.vue	Tue Mar 05 08:46:55 2019 +0100
@@ -367,6 +367,20 @@
     );
     layer.data.setVisible(layer.isVisible);
 
+    layer = this.getLayerByName(LAYERS.BOTTLENECKSTATUS);
+    layer.data.getSource().setLoader(
+      this.buildVectorLoader(
+        {
+          featureNS: "gemma",
+          featurePrefix: "gemma",
+          featureTypes: ["bottlenecks_geoserver"],
+          geometryName: "area"
+        },
+        "/internal/wfs",
+        layer.data.getSource()
+      )
+    );
+
     layer = this.getLayerByName(LAYERS.BOTTLENECKS);
     layer.data.getSource().setLoader(
       this.buildVectorLoader(
@@ -385,22 +399,22 @@
       headers: { "X-Gemma-Auth": localStorage.getItem("token") }
     })
       .then(response => {
-        this.btlnStrokeC = response.data.code;
+        let btlnStrokeC = response.data.code;
         HTTP.get("/system/style/Bottlenecks/fill", {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            this.btlnFillC = response.data.code;
-            var newstyle = new Style({
+            let btlnFillC = response.data.code;
+            var newStyle = new Style({
               stroke: new Stroke({
-                color: this.btlnStrokeC,
+                color: btlnStrokeC,
                 width: 4
               }),
               fill: new Fill({
-                color: this.btlnFillC
+                color: btlnFillC
               })
             });
-            layer.data.setStyle(newstyle);
+            layer.data.setStyle(newStyle);
           })
           .catch(error => {
             console.log(error);
diff -r bc0f1771497a -r ae257e0238f1 client/src/components/layers/LegendElement.vue
--- a/client/src/components/layers/LegendElement.vue	Mon Mar 04 16:30:46 2019 +0100
+++ b/client/src/components/layers/LegendElement.vue	Tue Mar 05 08:46:55 2019 +0100
@@ -95,7 +95,8 @@
         }
         mapStyle = this.mapLayer.data.getStyleFunction()(
           feature,
-          this.mapLayer.forLegendStyle.resolution
+          this.mapLayer.forLegendStyle.resolution,
+          true
         );
       }
 
diff -r bc0f1771497a -r ae257e0238f1 client/src/components/usermanagement/Usermanagement.vue
--- a/client/src/components/usermanagement/Usermanagement.vue	Mon Mar 04 16:30:46 2019 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Tue Mar 05 08:46:55 2019 +0100
@@ -172,6 +172,7 @@
     sortedUsers() {
       const start = (this.currentPage - 1) * this.pageSize;
       return this.users
+        .filter(u => u) // to clone the array and leave the original store value intact
         .sort((a, b) => {
           if (
             a[this.sortColumn].toLowerCase() < b[this.sortColumn].toLowerCase()
diff -r bc0f1771497a -r ae257e0238f1 client/src/store/map.js
--- a/client/src/store/map.js	Mon Mar 04 16:30:46 2019 +0100
+++ b/client/src/store/map.js	Tue Mar 05 08:46:55 2019 +0100
@@ -52,6 +52,7 @@
   WATERWAYAXIS: "Waterway Axis",
   WATERWAYPROFILES: "Waterway Profiles",
   BOTTLENECKS: "Bottlenecks",
+  BOTTLENECKSTATUS: "Critical Bottlenecks",
   BOTTLENECKISOLINE: "Bottleneck isolines",
   DISTANCEMARKS: "Distance marks",
   DISTANCEMARKSAXIS: "Distance marks, Axis",
@@ -288,15 +289,17 @@
           source: new VectorSource({
             strategy: bboxStrategy
           }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(230, 230, 10, .8)",
-              width: 4
-            }),
-            fill: new Fill({
-              color: "rgba(230, 230, 10, .3)"
-            })
-          })
+          style: function() {
+            return new Style({
+              stroke: new Stroke({
+                color: "rgba(230, 230, 10, .8)",
+                width: 4
+              }),
+              fill: new Fill({
+                color: "rgba(230, 230, 10, .3)"
+              })
+            });
+          }
         }),
         isVisible: true,
         showInLegend: true
@@ -330,6 +333,46 @@
         showInLegend: true
       },
       {
+        name: LAYERS.BOTTLENECKSTATUS,
+        forLegendStyle: { point: true, resolution: 16 },
+        data: new VectorLayer({
+          source: new VectorSource({
+            strategy: bboxStrategy
+          }),
+          style: function(feature, resolution, isLegend) {
+            if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
+              let bnCenter = getCenter(feature.getGeometry().getExtent());
+              return new Style({
+                geometry: new Point(bnCenter),
+                image: new RegularShape({
+                  points: 3,
+                  radius: isLegend ? 9 : 13,
+                  fill: new Fill({ color: "white" }),
+                  stroke: new Stroke({
+                    color: "rgba(255, 0, 0, 0.8)",
+                    width: isLegend ? 2 : 3
+                  })
+                }),
+                text: new Text({
+                  font:
+                    "bold " +
+                    (isLegend ? 8 : 12) +
+                    'px "Open Sans", "sans-serif"',
+                  placement: "point",
+                  fill: new Fill({ color: "black" }),
+                  text: "!",
+                  offsetY: isLegend ? 0 : 1,
+                  offsetX: isLegend ? 1 : 0
+                })
+              });
+            }
+            return [];
+          }
+        }),
+        isVisible: true,
+        showInLegend: true
+      },
+      {
         name: LAYERS.DISTANCEMARKS,
         forLegendStyle: { point: true, resolution: 8 },
         data: new VectorLayer({