# HG changeset patch
# User Bernhard Reiter <bernhard@intevation.de>
# Date 1538161118 -7200
# Node ID d1863e91b039424f0f0a5af7b469cd053d36d775
# Parent  0a6cb09ca28cf1fd0e7a0dfacdc63df1e09b5cb4
client: fix systemconfiguration for stroke colour

 * Improve layout so that all three values are shown, even when smaller
   and the box does not extend too much, when being in a larger view.
 * Changed code to be sure to send integers and a float.
 * Add code to set the colours from the server response.

diff -r 0a6cb09ca28c -r d1863e91b039 client/src/systemconfiguration/systemconfiguration.vue
--- a/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 18:09:59 2018 +0200
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 20:58:38 2018 +0200
@@ -1,23 +1,23 @@
 <template>
     <div class="d-flex flex-row">
         <div class="card sysconfig">
-            <div class="card-header shadow-sm text-white bg-info mb-3">
+            <div class="card-header shadow-sm text-white bg-info mb-6">
                 Systemconfiguration
             </div>
             <div class="card-body">
                 <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="r">
+                        <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="g" id="g" placeholder="g">
+                            <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="b" id="b" placeholder="b">
+                                <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="a" id="a" placeholder="a">
+                                    <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">
@@ -40,9 +40,10 @@
 }
 .sysconfig {
   margin-top: $offset;
-  margin-left: auto;
+  margin-left: 30vw;
   margin-right: auto;
-  width: 30vw;
+  width: 60vw;
+  max-width: 500px;
   height: 40vh;
 }
 </style>
@@ -55,31 +56,29 @@
   data() {
     return {
       sent: false,
-      r: 224,
-      g: 215,
-      b: 216,
-      a: 90,
+      r: 124,
+      g: 115,
+      b: 116,
+      a: 0.9,
       currentConfig: null
     };
   },
   methods: {
     submit() {
-      const payload = JSON.stringify({
-        r: this.r,
-        g: this.g,
-        b: this.b,
-        a: this.a
-      });
+      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, {
         headers: {
           "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
+          "Content-type": "application/json"
         }
       })
         .then()
         .catch(error => {
-          this.loginFailed = true;
-          this.submitted = false;
           const { status, data } = error.response;
           displayError({
             title: "Backend Error",
@@ -92,15 +91,18 @@
     HTTP.get("/system/style/Bottlenecks/stroke", {
       headers: {
         "X-Gemma-Auth": localStorage.getItem("token"),
-        "Content-type": "text/xml; charset=UTF-8"
+        "Content-type": "application/json"
       }
     })
       .then(response => {
-        console.log(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;
       })
       .catch(error => {
-        this.loginFailed = true;
-        this.submitted = false;
         const { status, data } = error.response;
         displayError({
           title: "Backend Error",