# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1561551438 -7200
# Node ID a1bb7c8940589eaf811a402538172e08edd605fd
# Parent  98d5dd2f0ca11c3cd0bfd25984b30c6f20809be1
client: configuration: morphology classbreaks: added color selection

diff -r 98d5dd2f0ca1 -r a1bb7c894058 client/src/components/systemconfiguration/MorphologyClassbreaks.vue
--- a/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jun 26 11:00:35 2019 +0200
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jun 26 14:17:18 2019 +0200
@@ -11,8 +11,42 @@
           v-for="(value, i) in morphologyClassbreaks"
           :key="i"
         >
+          <div class="input-group-prepend">
+            <button
+              class="btn btn-sm btn-outline-secondary"
+              :style="
+                'width: 20px; background-color: ' +
+                  (morphologyClassbreaks[i][1] || 'transparent')
+              "
+              type="button"
+              @click="showColorPicker('sounding-' + i)"
+            ></button>
+            <div
+              class="color-picker card shadow-sm"
+              v-if="activeColorPicker === 'sounding-' + i"
+            >
+              <UIBoxHeader
+                :title="colorPickerTitle"
+                icon="paint-brush"
+                :closeCallback="() => (activeColorPicker = null)"
+                :actions="[
+                  {
+                    callback: () => {
+                      morphologyClassbreaks[i][1] = '#ffffff';
+                      activeColorPicker = null;
+                    },
+                    icon: 'trash'
+                  }
+                ]"
+              />
+              <chrome-picker
+                v-model="morphologyClassbreaks[i][1]"
+                @input="color => (morphologyClassbreaks[i][1] = color.hex)"
+              />
+            </div>
+          </div>
           <input
-            v-model="morphologyClassbreaks[i]"
+            v-model="morphologyClassbreaks[i][0]"
             type="number"
             min="0"
             step="0.1"
@@ -52,8 +86,44 @@
           v-for="(value, i) in morphologyClassbreaksCompare"
           :key="i"
         >
+          <div class="input-group-prepend">
+            <button
+              class="btn btn-sm btn-outline-secondary"
+              :style="
+                'width: 20px; background-color: ' +
+                  (morphologyClassbreaksCompare[i][1] || 'transparent')
+              "
+              type="button"
+              @click="showColorPicker('compare-' + i)"
+            ></button>
+            <div
+              class="color-picker card shadow-sm"
+              v-if="activeColorPicker === 'compare-' + i"
+            >
+              <UIBoxHeader
+                :title="colorPickerTitle"
+                icon="paint-brush"
+                :closeCallback="() => (activeColorPicker = null)"
+                :actions="[
+                  {
+                    callback: () => {
+                      morphologyClassbreaksCompare[i][1] = '#ffffff';
+                      activeColorPicker = null;
+                    },
+                    icon: 'trash'
+                  }
+                ]"
+              />
+              <chrome-picker
+                v-model="morphologyClassbreaksCompare[i][1]"
+                @input="
+                  color => (morphologyClassbreaksCompare[i][1] = color.hex)
+                "
+              />
+            </div>
+          </div>
           <input
-            v-model="morphologyClassbreaksCompare[i]"
+            v-model="morphologyClassbreaksCompare[i][0]"
             type="number"
             step="0.1"
             class="form-control form-control-sm"
@@ -94,13 +164,31 @@
 
 <style lang="sass" scoped>
 .classbreak
-  width: 92px
+  width: 105px
   .btn-outline-secondary
     border-color: #ccc
     color: #ccc
     &:hover
       background: #eee
       color: #dc3545
+  .color-picker
+    position: absolute
+    top: -4px
+    left: 19px
+    z-index: 9
+    overflow: hidden
+    border-top-left-radius: 0 !important
+    .btn
+      border-radius: 0 !important
+    .vc-chrome
+      box-shadow: none
+/deep/
+  .vc-chrome-alpha-wrap
+    display: none !important
+  .vc-chrome-hue-wrap
+    margin-top: 10px
+  .vc-chrome-saturation-wrap
+    border-radius: 0
 </style>
 
 <script>
@@ -118,34 +206,69 @@
  * Markus Kottländer <markus@intevation.de>
  */
 import { mapState } from "vuex";
+import { Chrome } from "vue-color";
 
 export default {
+  components: {
+    "chrome-picker": Chrome
+  },
   data() {
     return {
       morphologyClassbreaks: [],
-      morphologyClassbreaksCompare: []
+      morphologyClassbreaksCompare: [],
+      activeColorPicker: null,
+      closeColorPickerListener: null
     };
   },
   computed: {
-    ...mapState("application", ["config"])
+    ...mapState("application", ["config"]),
+    colorPickerTitle() {
+      return this.$gettext("Choose color");
+    }
   },
   methods: {
+    showColorPicker(id) {
+      this.activeColorPicker = this.activeColorPicker === id ? null : id;
+    },
     submit() {
       this.$store.dispatch("application/saveConfig", {
-        morphology_classbreaks: this.morphologyClassbreaks.join(","),
-        morphology_classbreaks_compare: this.morphologyClassbreaksCompare.join(
-          ","
-        )
+        morphology_classbreaks: this.morphologyClassbreaks
+          .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":")))
+          .join(","),
+        morphology_classbreaks_compare: this.morphologyClassbreaksCompare
+          .map(cb => (cb[1] === "#ffffff" ? cb[0] : cb.join(":")))
+          .join(",")
       });
     }
   },
   mounted() {
     this.morphologyClassbreaks = this.config.morphology_classbreaks
       .split(",")
-      .map(n => Number(n));
+      .map(cb => cb.split(":"))
+      .map(cb => {
+        cb[0] = Number(cb[0]);
+        cb[1] = cb[1] || "#ffffff";
+        return cb;
+      });
     this.morphologyClassbreaksCompare = this.config.morphology_classbreaks_compare
       .split(",")
-      .map(n => Number(n));
+      .map(cb => cb.split(":"))
+      .map(cb => {
+        cb[0] = Number(cb[0]);
+        cb[1] = cb[1] || "#ffffff";
+        return cb;
+      });
+
+    this.closeColorPickerListener = e => {
+      // Escape
+      if (e.keyCode === 27) {
+        this.activeColorPicker = null;
+      }
+    };
+    window.addEventListener("keydown", this.closeColorPickerListener);
+  },
+  destroyed() {
+    window.removeEventListener("keydown", this.closeColorPickerListener);
   }
 };
 </script>
diff -r 98d5dd2f0ca1 -r a1bb7c894058 client/src/main.js
--- a/client/src/main.js	Wed Jun 26 11:00:35 2019 +0200
+++ b/client/src/main.js	Wed Jun 26 14:17:18 2019 +0200
@@ -75,6 +75,7 @@
   faMapMarkedAlt,
   faMinus,
   faObjectGroup,
+  faPaintBrush,
   faPaperPlane,
   faPencilAlt,
   faPlay,
@@ -143,6 +144,7 @@
   faMapMarkedAlt,
   faMinus,
   faObjectGroup,
+  faPaintBrush,
   faPaperPlane,
   faPencilAlt,
   faPlay,
diff -r 98d5dd2f0ca1 -r a1bb7c894058 schema/default_sysconfig.sql
--- a/schema/default_sysconfig.sql	Wed Jun 26 11:00:35 2019 +0200
+++ b/schema/default_sysconfig.sql	Wed Jun 26 14:17:18 2019 +0200
@@ -35,7 +35,7 @@
 INSERT INTO sys_admin.system_config VALUES ('gm_forecast_offset_72h', 15);
 INSERT INTO sys_admin.system_config VALUES ('gm_forecast_vs_reality_nsc_24h', -12.5);
 INSERT INTO sys_admin.system_config VALUES ('gm_forecast_vs_reality_nsc_72h', -12.5);
-INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks', '1,1.5,1.7,1.9,2.1,2.3,2.5,2.7,2.9,3.1,3.3,3.5,4.0,4.5,5,5.5,6,6.5,7');
-INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks_compare', '-2,-1.9,-1.8,-1.7,-1.6,-1.5,-1.4,-1.3,-1.2,-1.1,-1,-0.9,-0.8,-0.7,-0.6,-0.5,-0.4,-0.3,-0.2,-0.1,0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2');
+INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks', '1:#ff00dd,1.5,1.7,1.9,2.1,2.3,2.5:#f25f20,2.7,2.9,3.1,3.3,3.5,4:#8ad51a,4.5,5,5.5,6,6.5,7:#1414ff');
+INSERT INTO sys_admin.system_config VALUES ('morphology_classbreaks_compare', '-2:#06b100,-1.9,-1.8,-1.7,-1.6,-1.5,-1.4,-1.3,-1.2,-1.1,-1:#1cc68e,-0.9,-0.8,-0.7,-0.6,-0.5,-0.4,-0.3,-0.2,-0.1,0:#c2c2c2,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1:#fff01a,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2:#f80012');
 
 COMMIT;