Mercurial > gemma
annotate client/src/components/systemconfiguration/ColorSettings.vue @ 3588:cffa99aa523c
client: systemconfiguration: made container scrollable for more configuration options
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 04 Jun 2019 12:12:30 +0200 |
parents | 1b8bb4f89227 |
children | e7726cc3bc56 |
rev | line source |
---|---|
2276
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
2 <div class="d-flex flex-column mt-4"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
3 <div class="d-flex flex-row justify-content-between"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 <h5><translate>Color Settings</translate></h5> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
5 </div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
6 <div class="mt-1"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
7 <div class="d-flex"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
8 <div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
9 <h6 class="card-title"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
10 <translate>Bottleneck Areas fill-color</translate> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
11 </h6> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
12 <chrome-picker v-model="fillColor" /> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
13 </div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
14 <div class="ml-4"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
15 <h6 class="card-title"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
16 <translate>Bottleneck Areas stroke-color</translate> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
17 </h6> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
18 <compact-picker v-model="strokeColor" /> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
19 </div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
20 </div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
21 <div class="mt-4"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
22 <a @click.prevent="submit" class="btn btn-info text-white"> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
23 <translate>Send</translate> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
24 </a> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
25 </div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
26 </div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
27 </div> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
28 </template> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
29 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
30 <script> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
31 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
32 * without warranty, see README.md and license for details. |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
33 * |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
34 * SPDX-License-Identifier: AGPL-3.0-or-later |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
35 * License-Filename: LICENSES/AGPL-3.0.txt |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
36 * |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
37 * Copyright (C) 2018 by via donau |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 * – Österreichische Wasserstraßen-Gesellschaft mbH |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
39 * Software engineering by Intevation GmbH |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
40 * |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
41 * Author(s): |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 * Thomas Junk <thomas.junk@intevation.de> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
43 * Bernhard Reiter <bernhard@intevation.de> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
44 * Markus Kottländer <markus@intevation.de> |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 */ |
2920
c1f2b9148cc8
client: removed more unnecessary closing tags and opzimized imports
Markus Kottlaender <markus@intevation.de>
parents:
2276
diff
changeset
|
46 import { Chrome, Compact } from "vue-color"; |
2276
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 import { HTTP } from "@/lib/http"; |
2985
1b8bb4f89227
client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents:
2920
diff
changeset
|
48 import { displayError } from "@/lib/errors"; |
2276
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 export default { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 name: "colorsettings", |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 data() { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 return { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 sent: false, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 strokeColor: { r: 0, g: 0, b: 0, a: 1.0 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 currentConfig: null |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 }; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
59 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 components: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 "chrome-picker": Chrome, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 "compact-picker": Compact |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 methods: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 submit() { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 .then() |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 message: `${status}: ${data.message || data}` |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 .then() |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 message: `${status}: ${data.message || data}` |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
95 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
96 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
97 mounted() { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 HTTP.get("/system/style/Bottlenecks/stroke", { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 .then(response => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 this.strokeColor = response.data.colour; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 message: `${status}: ${data.message || data}` |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
114 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
115 HTTP.get("/system/style/Bottlenecks/fill", { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 .then(response => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 this.fillColor = response.data.colour; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 message: `${status}: ${data.message || data}` |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
131 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
132 }; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
133 </script> |