Mercurial > gemma
comparison client/src/systemconfiguration/systemconfiguration.vue @ 856:ce0d50b1d126
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> |