Mercurial > gemma
annotate client/src/components/systemconfiguration/ColorSettings.vue @ 2670:d7b1dd25f91f import-overview-rework
Made filter building a bit more reusable.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 16:20:16 +0100 |
parents | 920fba6eef0d |
children | c1f2b9148cc8 |
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 */ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 import { Chrome } from "vue-color"; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 import { Compact } from "vue-color"; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 import { HTTP } from "@/lib/http"; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 import { displayError } from "@/lib/errors.js"; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 export default { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 name: "colorsettings", |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 data() { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 return { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 sent: false, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 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
|
58 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
|
59 currentConfig: null |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 }; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 components: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 "chrome-picker": Chrome, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 "compact-picker": Compact |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
66 methods: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
67 submit() { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 .then() |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 message: `${status}: ${data.message || data}` |
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 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 .then() |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 message: `${status}: ${data.message || data}` |
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 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
98 }, |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
99 mounted() { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
100 HTTP.get("/system/style/Bottlenecks/stroke", { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
101 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
102 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
103 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
104 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
105 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
106 .then(response => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
107 this.strokeColor = response.data.colour; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
108 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
109 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
110 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
111 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
112 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
113 message: `${status}: ${data.message || data}` |
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 }); |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
116 |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
117 HTTP.get("/system/style/Bottlenecks/fill", { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
118 headers: { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
119 "X-Gemma-Auth": localStorage.getItem("token"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
120 "Content-type": "application/json" |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
121 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
122 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
123 .then(response => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
124 this.fillColor = response.data.colour; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
125 }) |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
126 .catch(error => { |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
127 const { status, data } = error.response; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
128 displayError({ |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
129 title: this.$gettext("Backend Error"), |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
130 message: `${status}: ${data.message || data}` |
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 } |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
134 }; |
920fba6eef0d
moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
135 </script> |