Mercurial > gemma

annotate client/src/components/systemconfiguration/ColorSettings.vue @ 2462:9ae2a2f758bb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: make use of new table header/body components
author Markus Kottlaender <markus@intevation.de>
date Mon, 04 Mar 2019 14:50:23 +0100
parents 920fba6eef0d
children c1f2b9148cc8
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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>