Mercurial > gemma

comparison client/src/systemconfiguration/systemconfiguration.vue @ 864:2079fabbe6dd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add fill-colour setting to systemconfig * Add simple headlines to show what we are setting. * Add a section to select a colour with the vue-color chrome-picker. * yarn add vue-color.
author Bernhard Reiter <bernhard@intevation.de>
date Fri, 28 Sep 2018 21:39:01 +0200
parents d1863e91b039
children 9aa545585bdd
comparison
equal deleted inserted replaced
863:d1863e91b039 864:2079fabbe6dd
1 <template> 1 <template>
2 <div class="d-flex flex-row"> 2 <div class="d-flex flex-row">
3 <div class="card sysconfig"> 3 <div class="card sysconfig">
4 <div class="card-header shadow-sm text-white bg-info mb-6"> 4 <div class="card-header shadow-sm text-white bg-info mb-6">
5 Systemconfiguration 5 Systemconfiguration
6 </div>
7 <div class="card-body">
8 <h4>Bottleneck Areas stroke-color</h4>
9 <div class="inputs form-group row">
10 <div class="col-2">
11 <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255">
6 </div> 12 </div>
7 <div class="card-body"> 13 <div class="col-2">
8 <div class="inputs form-group row"> 14 <label for="g"></label>G<input class="form-control form-control-sm" v-model.number="g" type="text" id="g" placeholder="255">
15 </div>
9 <div class="col-2"> 16 <div class="col-2">
10 <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255"> 17 <label for="b"></label>B<input class="form-control form-control-sm" v-model.number="b" type="text" id="b" placeholder="255">
11 </div> 18 </div>
12 <div class="col-2"> 19 <div class="col-2">
13 <label for="g"></label>G<input class="form-control form-control-sm" v-model.number="g" type="text" id="g" placeholder="255">
14 </div>
15 <div class="col-2">
16 <label for="b"></label>B<input class="form-control form-control-sm" v-model.number="b" type="text" id="b" placeholder="255">
17 </div>
18 <div class="col-2">
19 20
20 <label for="a"></label>A<input class="form-control form-control-sm" v-model.number="a" type="text" id="a" placeholder="1.0"> 21 <label for="a"></label>A<input class="form-control form-control-sm" v-model.number="a" type="text" id="a" placeholder="1.0">
21 </div> 22 </div>
22 </div>
23 <div class="sendbutton">
24 <a @click="submit" class="btn btn-info">Send</a>
25 </div>
26 </div>
27 </div> 23 </div>
28 </div> 24 <div class="sendbutton">
25 <a @click.prevent="submit" class="btn btn-info">Send</a>
26 </div>
27 <h4>Bottleneck Areas fill-color</h4>
28 <chrome-picker v-model="fillColor" />
29 </div> <!-- card-body -->
30 </div>
31 </div>
29 </template> 32 </template>
30 33
31 <style lang="scss"> 34 <style lang="scss">
32 .sendbutton { 35 .sendbutton {
33 position: absolute; 36 position: absolute;
42 margin-top: $offset; 45 margin-top: $offset;
43 margin-left: 30vw; 46 margin-left: 30vw;
44 margin-right: auto; 47 margin-right: auto;
45 width: 60vw; 48 width: 60vw;
46 max-width: 500px; 49 max-width: 500px;
47 height: 40vh; 50 mind-heigth: 500px;
51 height: 80vh;
48 } 52 }
49 </style> 53 </style>
50 54
51 <script> 55 <script>
56 import { Chrome } from "vue-color";
57
52 import { HTTP } from "../application/lib/http"; 58 import { HTTP } from "../application/lib/http";
53 import { displayError } from "../application/lib/errors.js"; 59 import { displayError } from "../application/lib/errors.js";
54 export default { 60 export default {
55 name: "systemconfiguration", 61 name: "systemconfiguration",
56 data() { 62 data() {
58 sent: false, 64 sent: false,
59 r: 124, 65 r: 124,
60 g: 115, 66 g: 115,
61 b: 116, 67 b: 116,
62 a: 0.9, 68 a: 0.9,
69 fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
63 currentConfig: null 70 currentConfig: null
64 }; 71 };
65 }, 72 },
73 components: { "chrome-picker": Chrome },
66 methods: { 74 methods: {
67 submit() { 75 submit() {
68 const payload = { 76 const payload = {
69 r: parseInt(this.r), 77 r: parseInt(this.r),
70 g: parseInt(this.g), 78 g: parseInt(this.g),
71 b: parseInt(this.b), 79 b: parseInt(this.b),
72 a: parseFloat(this.a) 80 a: parseFloat(this.a)
73 }; 81 };
74 HTTP.put("/system/style/Bottlenecks/stroke", payload, { 82 HTTP.put("/system/style/Bottlenecks/stroke", payload, {
83 headers: {
84 "X-Gemma-Auth": localStorage.getItem("token"),
85 "Content-type": "application/json"
86 }
87 })
88 .then()
89 .catch(error => {
90 const { status, data } = error.response;
91 displayError({
92 title: "Backend Error",
93 message: `${status}: ${data.message || data}`
94 });
95 });
96
97 HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
75 headers: { 98 headers: {
76 "X-Gemma-Auth": localStorage.getItem("token"), 99 "X-Gemma-Auth": localStorage.getItem("token"),
77 "Content-type": "application/json" 100 "Content-type": "application/json"
78 } 101 }
79 }) 102 })
107 displayError({ 130 displayError({
108 title: "Backend Error", 131 title: "Backend Error",
109 message: `${status}: ${data.message || data}` 132 message: `${status}: ${data.message || data}`
110 }); 133 });
111 }); 134 });
135
136 HTTP.get("/system/style/Bottlenecks/fill", {
137 headers: {
138 "X-Gemma-Auth": localStorage.getItem("token"),
139 "Content-type": "application/json"
140 }
141 })
142 .then(response => {
143 this.fillColor = response.data.colour;
144 })
145 .catch(error => {
146 const { status, data } = error.response;
147 displayError({
148 title: "Backend Error",
149 message: `${status}: ${data.message || data}`
150 });
151 });
112 } 152 }
113 }; 153 };
114 </script> 154 </script>