# HG changeset patch
# User Sascha Wilde <wilde@intevation.de>
# Date 1538165905 -7200
# Node ID 9aa545585bdd97a9e547593d196d52742c2cd29c
# Parent  f868570da4187ce7f4f7d2294eddc638a2020576
Replaced color setting for bottleneck stroke with compact picker.

diff -r f868570da418 -r 9aa545585bdd client/src/systemconfiguration/systemconfiguration.vue
--- a/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 22:00:21 2018 +0200
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 22:18:25 2018 +0200
@@ -6,26 +6,12 @@
       </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="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.prevent="submit" class="btn btn-info">Send</a>
-        </div>
+        <compact-picker v-model="strokeColor" />
         <h4>Bottleneck Areas fill-color</h4>
         <chrome-picker v-model="fillColor" />
+        <div class="sendbutton">
+          <a @click.prevent="submit" class="btn btn-info">Send</a>
+        </div>
       </div> <!-- card-body -->
     </div>
   </div>
@@ -54,6 +40,7 @@
 
 <script>
 import { Chrome } from "vue-color";
+import { Compact } from "vue-color";
 
 import { HTTP } from "../application/lib/http";
 import { displayError } from "../application/lib/errors.js";
@@ -62,24 +49,15 @@
   data() {
     return {
       sent: false,
-      r: 124,
-      g: 115,
-      b: 116,
-      a: 0.9,
+      strokeColor: { r: 0, g: 0, b: 0, a: 1.0 },
       fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
       currentConfig: null
     };
   },
-  components: { "chrome-picker": Chrome },
+  components: { "chrome-picker": Chrome, "compact-picker": Compact },
   methods: {
     submit() {
-      const payload = {
-        r: parseInt(this.r),
-        g: parseInt(this.g),
-        b: parseInt(this.b),
-        a: parseFloat(this.a)
-      };
-      HTTP.put("/system/style/Bottlenecks/stroke", payload, {
+      HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
         headers: {
           "X-Gemma-Auth": localStorage.getItem("token"),
           "Content-type": "application/json"
@@ -118,12 +96,7 @@
       }
     })
       .then(response => {
-        // console.log(response.data);
-        let colour = response.data.colour;
-        this.r = colour.r;
-        this.g = colour.g;
-        this.b = colour.b;
-        this.a = colour.a;
+        this.strokeColor = response.data.colour;
       })
       .catch(error => {
         const { status, data } = error.response;