# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1538136831 -7200
# Node ID ce0d50b1d1268f68b43acae7d43684795a694aa0
# Parent  d464b777d98fd5b2f1417bd842d05d364f685c0a
systemconfig WIP

diff -r d464b777d98f -r ce0d50b1d126 client/src/systemconfiguration/systemconfiguration.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/systemconfiguration/systemconfiguration.vue	Fri Sep 28 14:13:51 2018 +0200
@@ -0,0 +1,112 @@
+<template>
+    <div class="d-flex flex-row">
+        <div class="card sysconfig">
+            <div class="card-header shadow-sm text-white bg-info mb-3">
+                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">
+                    </div>
+                        <div class="col-2">
+                            <label for="g"></label>G<input class="form-control form-control-sm" v-model="g" id="g" placeholder="g">
+                    </div>
+                            <div class="col-2">
+                                <label for="b"></label>B<input class="form-control form-control-sm" v-model="b" id="b" placeholder="b">
+                    </div>
+                                <div class="col-2">
+
+                                    <label for="a"></label>A<input class="form-control form-control-sm" v-model="a" id="a" placeholder="a">
+                    </div>
+                                </div>
+                                <div class="sendbutton">
+                                    <a @click="submit" class="btn btn-info">Send</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+</template>
+
+<style lang="scss">
+.sendbutton {
+  position: absolute;
+  right: $large-offset;
+  bottom: $large-offset;
+}
+.inputs {
+  margin-left: auto;
+  margin-right: auto;
+}
+.sysconfig {
+  margin-top: $offset;
+  margin-left: auto;
+  margin-right: auto;
+  width: 30vw;
+  height: 40vh;
+}
+</style>
+
+<script>
+import { HTTP } from "../application/lib/http";
+import { displayError } from "../application/lib/errors.js";
+export default {
+  name: "systemconfiguration",
+  data() {
+    return {
+      sent: false,
+      r: 224,
+      g: 215,
+      b: 216,
+      a: 90,
+      currentConfig: null
+    };
+  },
+  methods: {
+    submit() {
+      const payload = JSON.stringify({
+        r: this.r,
+        g: this.g,
+        b: this.b,
+        a: this.a
+      });
+      HTTP.put("/system/style/Bottlenecks/stroke", payload, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "text/xml; charset=UTF-8"
+        }
+      })
+        .then()
+        .catch(error => {
+          this.loginFailed = true;
+          this.submitted = false;
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    }
+  },
+  mounted() {
+    HTTP.get("/system/style/Bottlenecks/stroke", {
+      headers: {
+        "X-Gemma-Auth": localStorage.getItem("token"),
+        "Content-type": "text/xml; charset=UTF-8"
+      }
+    })
+      .then(response => {
+        console.log(response);
+      })
+      .catch(error => {
+        this.loginFailed = true;
+        this.submitted = false;
+        const { status, data } = error.response;
+        displayError({
+          title: "Backend Error",
+          message: `${status}: ${data.message || data}`
+        });
+      });
+  }
+};
+</script>