Mercurial > gemma

comparison client/src/systemconfiguration/systemconfiguration.vue @ 856:ce0d50b1d126

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
systemconfig WIP
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 28 Sep 2018 14:13:51 +0200
parents
children d1863e91b039
comparison
equal deleted inserted replaced
855:d464b777d98f 856:ce0d50b1d126
1 <template>
2 <div class="d-flex flex-row">
3 <div class="card sysconfig">
4 <div class="card-header shadow-sm text-white bg-info mb-3">
5 Systemconfiguration
6 </div>
7 <div class="card-body">
8 <div class="inputs form-group row">
9 <div class="col-2">
10 <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="r">
11 </div>
12 <div class="col-2">
13 <label for="g"></label>G<input class="form-control form-control-sm" v-model="g" id="g" placeholder="g">
14 </div>
15 <div class="col-2">
16 <label for="b"></label>B<input class="form-control form-control-sm" v-model="b" id="b" placeholder="b">
17 </div>
18 <div class="col-2">
19
20 <label for="a"></label>A<input class="form-control form-control-sm" v-model="a" id="a" placeholder="a">
21 </div>
22 </div>
23 <div class="sendbutton">
24 <a @click="submit" class="btn btn-info">Send</a>
25 </div>
26 </div>
27 </div>
28 </div>
29 </template>
30
31 <style lang="scss">
32 .sendbutton {
33 position: absolute;
34 right: $large-offset;
35 bottom: $large-offset;
36 }
37 .inputs {
38 margin-left: auto;
39 margin-right: auto;
40 }
41 .sysconfig {
42 margin-top: $offset;
43 margin-left: auto;
44 margin-right: auto;
45 width: 30vw;
46 height: 40vh;
47 }
48 </style>
49
50 <script>
51 import { HTTP } from "../application/lib/http";
52 import { displayError } from "../application/lib/errors.js";
53 export default {
54 name: "systemconfiguration",
55 data() {
56 return {
57 sent: false,
58 r: 224,
59 g: 215,
60 b: 216,
61 a: 90,
62 currentConfig: null
63 };
64 },
65 methods: {
66 submit() {
67 const payload = JSON.stringify({
68 r: this.r,
69 g: this.g,
70 b: this.b,
71 a: this.a
72 });
73 HTTP.put("/system/style/Bottlenecks/stroke", payload, {
74 headers: {
75 "X-Gemma-Auth": localStorage.getItem("token"),
76 "Content-type": "text/xml; charset=UTF-8"
77 }
78 })
79 .then()
80 .catch(error => {
81 this.loginFailed = true;
82 this.submitted = false;
83 const { status, data } = error.response;
84 displayError({
85 title: "Backend Error",
86 message: `${status}: ${data.message || data}`
87 });
88 });
89 }
90 },
91 mounted() {
92 HTTP.get("/system/style/Bottlenecks/stroke", {
93 headers: {
94 "X-Gemma-Auth": localStorage.getItem("token"),
95 "Content-type": "text/xml; charset=UTF-8"
96 }
97 })
98 .then(response => {
99 console.log(response);
100 })
101 .catch(error => {
102 this.loginFailed = true;
103 this.submitted = false;
104 const { status, data } = error.response;
105 displayError({
106 title: "Backend Error",
107 message: `${status}: ${data.message || data}`
108 });
109 });
110 }
111 };
112 </script>