Mercurial > gemma
annotate client/src/systemconfiguration/systemconfiguration.vue @ 1253:fdcbee9a2efa
merge
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 21 Nov 2018 12:17:29 +0100 |
parents | ba8cd80d68b6 |
children |
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"> |
1217
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
3 <div class="card sysconfig mt-3 mx-auto"> |
887
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 | |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
24 <style scoped lang="sass"> |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
25 .config |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
26 text-align: left |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
27 |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
28 .configsection |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
29 margin-bottom: $large-offset |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
30 |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
31 .sendbutton |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
32 position: absolute |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
33 right: $offset |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
34 bottom: $offset |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
35 |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
36 .inputs |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
37 margin-left: auto |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
38 margin-right: auto |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
39 |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
40 .sysconfig |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1019
diff
changeset
|
41 width: 30vw |
856 | 42 </style> |
43 | |
44 <script> | |
1019
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
45 /* |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
46 * This is Free Software under GNU Affero General Public License v >= 3.0 |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
47 * without warranty, see README.md and license for details. |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
48 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
49 * SPDX-License-Identifier: AGPL-3.0-or-later |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
50 * License-Filename: LICENSES/AGPL-3.0.txt |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
51 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
52 * Copyright (C) 2018 by via donau |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
53 * – Österreichische Wasserstraßen-Gesellschaft mbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
54 * Software engineering by Intevation GmbH |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
55 * |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
56 * Author(s): |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
57 * Thomas Junk <thomas.junk@intevation.de> |
ca628dce90dd
Licensing information added
Thomas Junk <thomas.junk@intevation.de>
parents:
887
diff
changeset
|
58 */ |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
59 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
|
60 import { Compact } from "vue-color"; |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
61 |
856 | 62 import { HTTP } from "../application/lib/http"; |
63 import { displayError } from "../application/lib/errors.js"; | |
64 export default { | |
65 name: "systemconfiguration", | |
66 data() { | |
67 return { | |
68 sent: false, | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
69 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
|
70 fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, |
856 | 71 currentConfig: null |
72 }; | |
73 }, | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
74 components: { "chrome-picker": Chrome, "compact-picker": Compact }, |
856 | 75 methods: { |
76 submit() { | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
77 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, { |
856 | 78 headers: { |
79 "X-Gemma-Auth": localStorage.getItem("token"), | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
80 "Content-type": "application/json" |
856 | 81 } |
82 }) | |
83 .then() | |
84 .catch(error => { | |
85 const { status, data } = error.response; | |
86 displayError({ | |
87 title: "Backend Error", | |
88 message: `${status}: ${data.message || data}` | |
89 }); | |
90 }); | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
91 |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
92 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
|
93 headers: { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
94 "X-Gemma-Auth": localStorage.getItem("token"), |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
95 "Content-type": "application/json" |
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 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
98 .then() |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
99 .catch(error => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
100 const { status, data } = error.response; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
101 displayError({ |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
102 title: "Backend Error", |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
103 message: `${status}: ${data.message || data}` |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
104 }); |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
105 }); |
856 | 106 } |
107 }, | |
108 mounted() { | |
109 HTTP.get("/system/style/Bottlenecks/stroke", { | |
110 headers: { | |
111 "X-Gemma-Auth": localStorage.getItem("token"), | |
863
d1863e91b039
client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents:
856
diff
changeset
|
112 "Content-type": "application/json" |
856 | 113 } |
114 }) | |
115 .then(response => { | |
866
9aa545585bdd
Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents:
864
diff
changeset
|
116 this.strokeColor = response.data.colour; |
856 | 117 }) |
118 .catch(error => { | |
119 const { status, data } = error.response; | |
120 displayError({ | |
121 title: "Backend Error", | |
122 message: `${status}: ${data.message || data}` | |
123 }); | |
124 }); | |
864
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
125 |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
126 HTTP.get("/system/style/Bottlenecks/fill", { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
127 headers: { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
128 "X-Gemma-Auth": localStorage.getItem("token"), |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
129 "Content-type": "application/json" |
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 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
132 .then(response => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
133 this.fillColor = response.data.colour; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
134 }) |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
135 .catch(error => { |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
136 const { status, data } = error.response; |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
137 displayError({ |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
138 title: "Backend Error", |
2079fabbe6dd
client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents:
863
diff
changeset
|
139 message: `${status}: ${data.message || data}` |
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 }); |
856 | 142 } |
143 }; | |
144 </script> |