# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1566400874 -7200
# Node ID fe24cdde614df2b1ad9e8f6fdea9b2993d14f6bb
# Parent  c831dcad8a10f1fbc4fbfdeade4daf1ff330d368
styles-config: prepare components for WMS-Layer styling and set default color values

diff -r c831dcad8a10 -r fe24cdde614d client/src/components/systemconfiguration/ColorSettings.vue
--- a/client/src/components/systemconfiguration/ColorSettings.vue	Wed Aug 21 17:17:00 2019 +0200
+++ b/client/src/components/systemconfiguration/ColorSettings.vue	Wed Aug 21 17:21:14 2019 +0200
@@ -1,9 +1,9 @@
 <template>
-  <div class="d-flex flex-column py-4">
+  <div class="d-flex flex-column py-3">
     <div class="px-3 container-fluid">
       <div class="row">
         <div v-for="f in features" :key="f.key" class="col-sm-2 mt-2">
-          <div v-if="f.fillColor" class="card">
+          <div v-if="f.fillColor" class="card mt-3">
             <div class="card-header small text-center">
               <span v-translate="{ layerName: f.name }"
                 >%{layerName} Fill Color</span
@@ -13,7 +13,7 @@
               <chrome-picker v-model="f.fillColor" />
             </div>
           </div>
-          <div class="mt-2">
+          <div class="mt-3">
             <div v-if="f.strokeColor" class="card">
               <div class="card-header small text-center">
                 <span v-translate="{ layerName: f.name }"
@@ -139,8 +139,21 @@
           fillColor: initSColor
         },
         {
+          name: "Distance Marks, Axis",
+          strokeColor: initSColor,
+          fillColor: initSColor
+        },
+        {
           name: "Waterway profiles",
           strokeColor: initSColor
+        },
+        {
+          name: "Waterway Axis",
+          strokeColor: initSColor
+        },
+        {
+          name: "Waterway Area",
+          strokeColor: initSColor
         }
       ]
     };
@@ -206,9 +219,24 @@
             defaults.feature_colours_waterwayprofiles_stroke;
           break;
         }
+        case "Waterway Axis": {
+          feature.strokeColor = defaults.feature_colours_waterway_axis_stroke;
+          break;
+        }
+        case "Waterway Area": {
+          feature.strokeColor = defaults.feature_colours_waterway_area_stroke;
+          break;
+        }
         case "Distance Marks": {
           feature.strokeColor = defaults.feature_colours_distancemarks_stroke;
           feature.fillColor = defaults.feature_colours_distancemarks_fill;
+          break;
+        }
+        case "Distance Marks, Axis": {
+          feature.strokeColor =
+            defaults.feature_colours_distancemarks_axis_stroke;
+          feature.fillColor = defaults.feature_colours_distancemarks_axis_fill;
+          break;
         }
       }
     },
@@ -335,6 +363,36 @@
           }
           break;
         }
+        case "Waterway Axis": {
+          if (strokeC !== this.config.waterway_axis_stroke) {
+            this.$store
+              .dispatch("application/saveConfig", {
+                waterway_axis_stroke:
+                  feature.strokeColor.hex || feature.strokeColor
+              })
+              .finally(() => {
+                this.$store.dispatch("application/loadConfig");
+              });
+          } else {
+            noChangeMsg(feature.name);
+          }
+          break;
+        }
+        case "Waterway Area": {
+          if (strokeC !== this.config.waterway_area_stroke) {
+            this.$store
+              .dispatch("application/saveConfig", {
+                waterway_area_stroke:
+                  feature.strokeColor.hex || feature.strokeColor
+              })
+              .finally(() => {
+                this.$store.dispatch("application/loadConfig");
+              });
+          } else {
+            noChangeMsg(feature.name);
+          }
+          break;
+        }
         case "Distance Marks": {
           if (
             strokeC !== this.config.distance_marks_stroke ||
@@ -352,25 +410,57 @@
           }
           break;
         }
+        case "Distance Marks, Axis": {
+          if (
+            strokeC !== this.config.distance_marks_axis_stroke ||
+            fillC !== this.config.distance_marks_axis_fill
+          ) {
+            this.$store
+              .dispatch("application/saveConfig", {
+                distance_marks_axis_stroke:
+                  feature.strokeColor.hex || feature.strokeColor,
+                distance_marks_axis_fill:
+                  feature.fillColor.hex || feature.fillColor
+              })
+              .finally(() => this.$store.dispatch("application/loadConfig"));
+          } else {
+            noChangeMsg(feature.name);
+          }
+          break;
+        }
       }
     }
   },
   mounted() {
-    this.features[0].strokeColor = this.config.bottlenecks_stroke;
-    this.features[0].fillColor = this.config.bottlenecks_fill;
-    this.features[1].strokeColor = this.config.stretches_stroke;
-    this.features[1].fillColor = this.config.stretches_fill;
-    this.features[2].strokeColor = this.config.sections_stroke;
-    this.features[2].fillColor = this.config.sections_fill;
+    this.features[0].strokeColor = this.config.bottlenecks_stroke || initSColor;
+    this.features[0].fillColor = this.config.bottlenecks_fill || initFColor;
+    this.features[1].strokeColor = this.config.stretches_stroke || initSColor;
+    this.features[1].fillColor = this.config.stretches_fill || initFColor;
+    this.features[2].strokeColor = this.config.sections_stroke || initSColor;
+    this.features[2].fillColor = this.config.sections_fill || initFColor;
     this.features[3].strokeColor = this.config.fairwaydimensionslos1_stroke;
-    this.features[3].fillColor = this.config.fairwaydimensionslos1_fill;
-    this.features[4].strokeColor = this.config.fairwaydimensionslos2_stroke;
-    this.features[4].fillColor = this.config.fairwaydimensionslos2_fill;
-    this.features[5].strokeColor = this.config.fairwaydimensionslos3_stroke;
-    this.features[5].fillColor = this.config.fairwaydimensionslos3_fill;
-    this.features[6].strokeColor = this.config.distance_marks_stroke;
-    this.features[6].fillColor = this.config.distance_marks_fill;
-    this.features[7].strokeColor = this.config.waterwayprofiles_stroke;
+    this.features[3].fillColor =
+      this.config.fairwaydimensionslos1_fill || initFColor;
+    this.features[4].strokeColor =
+      this.config.fairwaydimensionslos2_stroke || initSColor;
+    this.features[4].fillColor =
+      this.config.fairwaydimensionslos2_fill || initFColor;
+    this.features[5].strokeColor =
+      this.config.fairwaydimensionslos3_stroke || initSColor;
+    this.features[5].fillColor =
+      this.config.fairwaydimensionslos3_fill || initFColor;
+    this.features[6].strokeColor =
+      this.config.distance_marks_stroke || initSColor;
+    this.features[6].fillColor = this.config.distance_marks_fill || initFColor;
+    this.features[7].strokeColor =
+      this.config.distance_marks_axis_stroke || initSColor;
+    this.features[7].fillColor =
+      this.config.distance_marks_axis_fill || initFColor;
+    this.features[8].strokeColor = this.config.waterwayprofiles_stroke;
+    this.features[9].strokeColor =
+      this.config.waterway_axis_stroke || initSColor;
+    this.features[10].strokeColor =
+      this.config.waterway_area_stroke || initSColor;
   }
 };
 </script>
diff -r c831dcad8a10 -r fe24cdde614d client/src/components/systemconfiguration/defaults.js
--- a/client/src/components/systemconfiguration/defaults.js	Wed Aug 21 17:17:00 2019 +0200
+++ b/client/src/components/systemconfiguration/defaults.js	Wed Aug 21 17:21:14 2019 +0200
@@ -26,5 +26,9 @@
   feature_colours_fairwaydimensionslos3_fill: "#ffffff66",
   feature_colours_waterwayprofiles_stroke: "#0000ff80",
   feature_colours_distancemarks_stroke: "#6666ff",
-  feature_colours_distancemarks_fill: "#ff9999"
+  feature_colours_distancemarks_fill: "#ff9999",
+  feature_colours_distancemarks_axis_stroke: "#3333FF",
+  feature_colours_distancemarks_axis_fill: "#8888FF",
+  feature_colours_waterway_axis_stroke: "#0000FF",
+  feature_colours_waterway_area_stroke: "#006600"
 };