Mercurial > gemma
annotate client/src/systemconfiguration/systemconfiguration.vue @ 887:aae517757923
fix: layout systemconfig
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 01 Oct 2018 17:41:00 +0200 |
parents | 9aa545585bdd |
children | ca628dce90dd |
rev | line source |
---|---|
856 | 1 <template> |
887
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
2 <div class="d-flex flex-row"> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
3 <div class="card sysconfig"> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
4 <div class="card-header shadow-sm text-white bg-info mb-6"> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
5 Systemconfiguration |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
6 </div> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
7 <div class="card-body config"> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
8 <section class="configsection"> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
9 <h4 class="card-title">Bottleneck Areas stroke-color</h4> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
10 <compact-picker v-model="strokeColor" /> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
11 </section> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
12 <section> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
13 <h4 class="card-title">Bottleneck Areas fill-color</h4> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
14 <chrome-picker v-model="fillColor" /> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
15 </section> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
16 <div class="sendbutton"> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
17 <a @click.prevent="submit" class="btn btn-info">Send</a> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
18 </div> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
19 </div> <!-- card-body --> |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
20 </div> |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
21 </div> |
856 | 22 </template> |
23 | |
887
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
24 <style scoped lang="scss"> |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
25 .config { |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
26 text-align: left; |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
27 } |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
28 .configsection { |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
29 margin-bottom: $large-offset; |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
30 } |
856 | 31 .sendbutton { |
32 position: absolute; | |
887
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
33 right: $offset; |
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
34 bottom: $offset; |
856 | 35 } |
36 .inputs { | |
37 margin-left: auto; | |
38 margin-right: auto; | |
39 } | |
40 .sysconfig { | |
41 margin-top: $offset; | |
887
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
42 margin-left: auto; |
856 | 43 margin-right: auto; |
887
aae517757923
fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents:
866
diff
changeset
|
44 width: 30vw; |
856 | 45 } |
46 </style> | |
47 | |
48 <script> | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
49 import { Chrome } from "vue-color"; |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
50 import { Compact } from "vue-color"; |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
51 |
856 | 52 import { HTTP } from "../application/lib/http"; |
53 import { displayError } from "../application/lib/errors.js"; | |
54 export default { | |
55 name: "systemconfiguration", | |
56 data() { | |
57 return { | |
58 sent: false, | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
59 strokeColor: { r: 0, g: 0, b: 0, a: 1.0 }, |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
60 fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, |
856 | 61 currentConfig: null |
62 }; | |
63 }, | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
64 components: { "chrome-picker": Chrome, "compact-picker": Compact }, |
856 | 65 methods: { |
66 submit() { | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
67 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, { |
856 | 68 headers: { |
69 "X-Gemma-Auth": localStorage.getItem("token"), | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
70 "Content-type": "application/json" |
856 | 71 } |
72 }) | |
73 .then() | |
74 .catch(error => { | |
75 const { status, data } = error.response; | |
76 displayError({ | |
77 title: "Backend Error", | |
78 message: `${status}: ${data.message || data}` | |
79 }); | |
80 }); | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
81 |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
82 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
|
83 headers: { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
84 "X-Gemma-Auth": localStorage.getItem("token"), |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
85 "Content-type": "application/json" |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
86 } |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
87 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
88 .then() |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
89 .catch(error => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
90 const { status, data } = error.response; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
91 displayError({ |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
92 title: "Backend Error", |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
93 message: `${status}: ${data.message || data}` |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
94 }); |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
95 }); |
856 | 96 } |
97 }, | |
98 mounted() { | |
99 HTTP.get("/system/style/Bottlenecks/stroke", { | |
100 headers: { | |
101 "X-Gemma-Auth": localStorage.getItem("token"), | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
102 "Content-type": "application/json" |
856 | 103 } |
104 }) | |
105 .then(response => { | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
106 this.strokeColor = response.data.colour; |
856 | 107 }) |
108 .catch(error => { | |
109 const { status, data } = error.response; | |
110 displayError({ | |
111 title: "Backend Error", | |
112 message: `${status}: ${data.message || data}` | |
113 }); | |
114 }); | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
115 |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
116 HTTP.get("/system/style/Bottlenecks/fill", { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
117 headers: { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
118 "X-Gemma-Auth": localStorage.getItem("token"), |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
119 "Content-type": "application/json" |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
120 } |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
121 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
122 .then(response => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
123 this.fillColor = response.data.colour; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
124 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
125 .catch(error => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
126 const { status, data } = error.response; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
127 displayError({ |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
128 title: "Backend Error", |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
129 message: `${status}: ${data.message || data}` |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
130 }); |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
131 }); |
856 | 132 } |
133 }; | |
134 </script> |