# HG changeset patch
# User Bernhard Reiter <bernhard@intevation.de>
# Date 1538163541 -7200
# Node ID 2079fabbe6dd1c27216e62a72cba3cd92345cf79
# Parent  d1863e91b039424f0f0a5af7b469cd053d36d775
client: add fill-colour setting to systemconfig

 * Add simple headlines to show what we are setting.
 * Add a section to select a colour with the vue-color chrome-picker.
 * yarn add vue-color.

diff -r d1863e91b039 -r 2079fabbe6dd client/package.json
--- a/client/package.json	Fri Sep 28 20:58:38 2018 +0200
+++ b/client/package.json	Fri Sep 28 21:39:01 2018 +0200
@@ -28,6 +28,7 @@
     "purgecss-webpack-plugin": "^1.2.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.5.16",
+    "vue-color": "^2.6.0",
     "vue-highlightjs": "^1.3.3",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
diff -r d1863e91b039 -r 2079fabbe6dd client/src/systemconfiguration/systemconfiguration.vue
--- a/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 20:58:38 2018 +0200
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 21:39:01 2018 +0200
@@ -1,31 +1,34 @@
 <template>
-    <div class="d-flex flex-row">
-        <div class="card sysconfig">
-            <div class="card-header shadow-sm text-white bg-info mb-6">
-                Systemconfiguration
+  <div class="d-flex flex-row">
+    <div class="card sysconfig">
+      <div class="card-header shadow-sm text-white bg-info mb-6">
+          Systemconfiguration
+      </div>
+      <div class="card-body">
+        <h4>Bottleneck Areas stroke-color</h4>
+        <div class="inputs form-group row">
+            <div class="col-2">
+                <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255">
             </div>
-            <div class="card-body">
-                <div class="inputs form-group row">
+                <div class="col-2">
+                    <label for="g"></label>G<input class="form-control form-control-sm" v-model.number="g" type="text" id="g" placeholder="255">
+            </div>
                     <div class="col-2">
-                        <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255">
-                    </div>
+                        <label for="b"></label>B<input class="form-control form-control-sm" v-model.number="b" type="text" id="b" placeholder="255">
+            </div>
                         <div class="col-2">
-                            <label for="g"></label>G<input class="form-control form-control-sm" v-model.number="g" type="text" id="g" placeholder="255">
-                    </div>
-                            <div class="col-2">
-                                <label for="b"></label>B<input class="form-control form-control-sm" v-model.number="b" type="text" id="b" placeholder="255">
-                    </div>
-                                <div class="col-2">
 
-                                    <label for="a"></label>A<input class="form-control form-control-sm" v-model.number="a" type="text" id="a" placeholder="1.0">
-                    </div>
-                                </div>
-                                <div class="sendbutton">
-                                    <a @click="submit" class="btn btn-info">Send</a>
-                                </div>
-                            </div>
+                            <label for="a"></label>A<input class="form-control form-control-sm" v-model.number="a" type="text" id="a" placeholder="1.0">
+            </div>
                         </div>
-                    </div>
+                        <div class="sendbutton">
+                            <a @click.prevent="submit" class="btn btn-info">Send</a>
+        </div>
+        <h4>Bottleneck Areas fill-color</h4>
+        <chrome-picker v-model="fillColor" />
+      </div> <!-- card-body -->
+    </div>
+  </div>
 </template>
 
 <style lang="scss">
@@ -44,11 +47,14 @@
   margin-right: auto;
   width: 60vw;
   max-width: 500px;
-  height: 40vh;
+  mind-heigth: 500px;
+  height: 80vh;
 }
 </style>
 
 <script>
+import { Chrome } from "vue-color";
+
 import { HTTP } from "../application/lib/http";
 import { displayError } from "../application/lib/errors.js";
 export default {
@@ -60,9 +66,11 @@
       g: 115,
       b: 116,
       a: 0.9,
+      fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
       currentConfig: null
     };
   },
+  components: { "chrome-picker": Chrome },
   methods: {
     submit() {
       const payload = {
@@ -85,6 +93,21 @@
             message: `${status}: ${data.message || data}`
           });
         });
+
+      HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "application/json"
+        }
+      })
+        .then()
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
     }
   },
   mounted() {
@@ -109,6 +132,23 @@
           message: `${status}: ${data.message || data}`
         });
       });
+
+    HTTP.get("/system/style/Bottlenecks/fill", {
+      headers: {
+        "X-Gemma-Auth": localStorage.getItem("token"),
+        "Content-type": "application/json"
+      }
+    })
+      .then(response => {
+        this.fillColor = response.data.colour;
+      })
+      .catch(error => {
+        const { status, data } = error.response;
+        displayError({
+          title: "Backend Error",
+          message: `${status}: ${data.message || data}`
+        });
+      });
   }
 };
 </script>
diff -r d1863e91b039 -r 2079fabbe6dd client/yarn.lock
--- a/client/yarn.lock	Fri Sep 28 20:58:38 2018 +0200
+++ b/client/yarn.lock	Fri Sep 28 21:39:01 2018 +0200
@@ -6814,6 +6814,11 @@
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
   integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
+lodash.throttle@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -6922,6 +6927,11 @@
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.0.0:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@@ -10231,6 +10241,11 @@
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -10683,6 +10698,15 @@
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
+vue-color@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.6.0.tgz#a4ef85b871cef4d47bf662c3b54321d2bb96f349"
+  integrity sha512-C/SqU/KScPHh6Br32nzQ4LWxzv88r8taGb6MrBHiOXZdkAQp2SpfYdav3K/u9xuWULqwgp2LNYaRPdrIm3A7HQ==
+  dependencies:
+    lodash.throttle "^4.0.0"
+    material-colors "^1.0.0"
+    tinycolor2 "^1.1.2"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"