Mercurial > gemma
annotate client/src/systemconfiguration/systemconfiguration.vue @ 904:e4b72a199258
New default bottleneck colors
Mainly to make the stroke color one actually selectable in the ui.
In addition the pink does better match the collors used on the ECDIS layer.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Tue, 02 Oct 2018 13:34:59 +0200 |
parents | aae517757923 |
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> |