Mercurial > gemma

annotate client/src/components/systemconfiguration/ColorSettings.vue @ 2455:54c9fe587fe6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Subdivide SQL function to prepare for improved error handling The context of an error (e.g. the function in which it occured) can be inferred by the database client. Not doing all in one statement will render the context more meaningful.
author Tom Gottfried <tom@intevation.de>
date Fri, 01 Mar 2019 18:38:02 +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>