Mercurial > gemma
annotate client/src/systemconfiguration/systemconfiguration.vue @ 864:2079fabbe6dd
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 |
rev | line source |
---|---|
856 | 1 <template> |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
2 <div class="d-flex flex-row"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
3 <div class="card sysconfig"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
4 <div class="card-header shadow-sm text-white bg-info mb-6"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
5 Systemconfiguration |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
6 </div> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
7 <div class="card-body"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
8 <h4>Bottleneck Areas stroke-color</h4> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
9 <div class="inputs form-group row"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
10 <div class="col-2"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
11 <label for="r"></label>R<input class="form-control form-control-sm" v-model="r" id="r" placeholder="255"> |
856 | 12 </div> |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
13 <div class="col-2"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
14 <label for="g"></label>G<input class="form-control form-control-sm" v-model.number="g" type="text" id="g" placeholder="255"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
15 </div> |
856 | 16 <div class="col-2"> |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
17 <label for="b"></label>B<input class="form-control form-control-sm" v-model.number="b" type="text" id="b" placeholder="255"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
18 </div> |
856 | 19 <div class="col-2"> |
20 | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
21 <label for="a"></label>A<input class="form-control form-control-sm" v-model.number="a" type="text" id="a" placeholder="1.0"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
22 </div> |
856 | 23 </div> |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
24 <div class="sendbutton"> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
25 <a @click.prevent="submit" class="btn btn-info">Send</a> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
26 </div> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
27 <h4>Bottleneck Areas fill-color</h4> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
28 <chrome-picker v-model="fillColor" /> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
29 </div> <!-- card-body --> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
30 </div> |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
31 </div> |
856 | 32 </template> |
33 | |
34 <style lang="scss"> | |
35 .sendbutton { | |
36 position: absolute; | |
37 right: $large-offset; | |
38 bottom: $large-offset; | |
39 } | |
40 .inputs { | |
41 margin-left: auto; | |
42 margin-right: auto; | |
43 } | |
44 .sysconfig { | |
45 margin-top: $offset; | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
46 margin-left: 30vw; |
856 | 47 margin-right: auto; |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
48 width: 60vw; |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
49 max-width: 500px; |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
50 mind-heigth: 500px; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
51 height: 80vh; |
856 | 52 } |
53 </style> | |
54 | |
55 <script> | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
56 import { Chrome } from "vue-color"; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
57 |
856 | 58 import { HTTP } from "../application/lib/http"; |
59 import { displayError } from "../application/lib/errors.js"; | |
60 export default { | |
61 name: "systemconfiguration", | |
62 data() { | |
63 return { | |
64 sent: false, | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
65 r: 124, |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
66 g: 115, |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
67 b: 116, |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
68 a: 0.9, |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
69 fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, |
856 | 70 currentConfig: null |
71 }; | |
72 }, | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
73 components: { "chrome-picker": Chrome }, |
856 | 74 methods: { |
75 submit() { | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
76 const payload = { |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
77 r: parseInt(this.r), |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
78 g: parseInt(this.g), |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
79 b: parseInt(this.b), |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
80 a: parseFloat(this.a) |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
81 }; |
856 | 82 HTTP.put("/system/style/Bottlenecks/stroke", payload, { |
83 headers: { | |
84 "X-Gemma-Auth": localStorage.getItem("token"), | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
85 "Content-type": "application/json" |
856 | 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 }); | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
96 |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
97 HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
98 headers: { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
99 "X-Gemma-Auth": localStorage.getItem("token"), |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
100 "Content-type": "application/json" |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
101 } |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
102 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
103 .then() |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
104 .catch(error => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
105 const { status, data } = error.response; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
106 displayError({ |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
107 title: "Backend Error", |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
108 message: `${status}: ${data.message || data}` |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
109 }); |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
110 }); |
856 | 111 } |
112 }, | |
113 mounted() { | |
114 HTTP.get("/system/style/Bottlenecks/stroke", { | |
115 headers: { | |
116 "X-Gemma-Auth": localStorage.getItem("token"), | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
117 "Content-type": "application/json" |
856 | 118 } |
119 }) | |
120 .then(response => { | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
121 // console.log(response.data); |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
122 let colour = response.data.colour; |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
123 this.r = colour.r; |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
124 this.g = colour.g; |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
125 this.b = colour.b; |
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
126 this.a = colour.a; |
856 | 127 }) |
128 .catch(error => { | |
129 const { status, data } = error.response; | |
130 displayError({ | |
131 title: "Backend Error", | |
132 message: `${status}: ${data.message || data}` | |
133 }); | |
134 }); | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
135 |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
136 HTTP.get("/system/style/Bottlenecks/fill", { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
137 headers: { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
138 "X-Gemma-Auth": localStorage.getItem("token"), |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
139 "Content-type": "application/json" |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
140 } |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
141 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
142 .then(response => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
143 this.fillColor = response.data.colour; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
144 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
145 .catch(error => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
146 const { status, data } = error.response; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
147 displayError({ |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
148 title: "Backend Error", |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
149 message: `${status}: ${data.message || data}` |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
150 }); |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
151 }); |
856 | 152 } |
153 }; | |
154 </script> |