Mercurial > gemma

comparison client/src/components/systemconfiguration/Systemconfiguration.vue @ 2276:920fba6eef0d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
moved color settings into own component The configurations page will be accessible for waterway admins too. Roles will be checked for the individual components on this page. It's also better to read and code is better organized.
author Markus Kottlaender <markus@intevation.de>
date Fri, 15 Feb 2019 10:44:45 +0100
parents e6fba449aa3c
children 5f3110aa1ad1
comparison
equal deleted inserted replaced
2275:a6cfa06c5983 2276:920fba6eef0d
7 > 7 >
8 <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon> 8 <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon>
9 <translate class="headline">Systemconfiguration</translate> 9 <translate class="headline">Systemconfiguration</translate>
10 </h6> 10 </h6>
11 <div class="card-body text-left"> 11 <div class="card-body text-left">
12 <h5 class="border-bottom pb-3 mb-3">
13 <translate>Color settings</translate>
14 </h5>
15 <div class="d-flex">
16 <div>
17 <h6 class="card-title">
18 <translate>Bottleneck Areas fill-color</translate>
19 </h6>
20 <chrome-picker v-model="fillColor" />
21 </div>
22 <div class="ml-4">
23 <h6 class="card-title">
24 <translate>Bottleneck Areas stroke-color</translate>
25 </h6>
26 <compact-picker v-model="strokeColor" />
27 </div>
28 </div>
29 <div class="mt-4">
30 <a @click.prevent="submit" class="btn btn-info text-white">
31 <translate>Send</translate>
32 </a>
33 </div>
34 <PDFTemplates /> 12 <PDFTemplates />
13 <ColorSettings />
35 </div> 14 </div>
36 <!-- card-body --> 15 <!-- card-body -->
37 </div> 16 </div>
38 </div> 17 </div>
39 </template> 18 </template>
58 * Software engineering by Intevation GmbH 37 * Software engineering by Intevation GmbH
59 * 38 *
60 * Author(s): 39 * Author(s):
61 * Thomas Junk <thomas.junk@intevation.de> 40 * Thomas Junk <thomas.junk@intevation.de>
62 * Bernhard Reiter <bernhard@intevation.de> 41 * Bernhard Reiter <bernhard@intevation.de>
42 * Markus Kottländer <markus@intevation.de>
63 */ 43 */
64 import { Chrome } from "vue-color";
65 import { Compact } from "vue-color";
66
67 import { HTTP } from "@/lib/http";
68 import { displayError } from "@/lib/errors.js";
69 import { mapState } from "vuex";
70
71 export default { 44 export default {
72 name: "systemconfiguration", 45 name: "systemconfiguration",
73 data() {
74 return {
75 sent: false,
76 strokeColor: { r: 0, g: 0, b: 0, a: 1.0 },
77 fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
78 currentConfig: null
79 };
80 },
81 components: { 46 components: {
82 "chrome-picker": Chrome,
83 "compact-picker": Compact,
84 Spacer: () => import("../Spacer"), 47 Spacer: () => import("../Spacer"),
85 PDFTemplates: () => import("./PDFTemplates") 48 PDFTemplates: () => import("./PDFTemplates"),
86 }, 49 ColorSettings: () => import("./ColorSettings")
87 computed: {
88 ...mapState("application", ["showSidebar"])
89 },
90 methods: {
91 submit() {
92 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
93 headers: {
94 "X-Gemma-Auth": localStorage.getItem("token"),
95 "Content-type": "application/json"
96 }
97 })
98 .then()
99 .catch(error => {
100 const { status, data } = error.response;
101 displayError({
102 title: this.$gettext("Backend Error"),
103 message: `${status}: ${data.message || data}`
104 });
105 });
106
107 HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
108 headers: {
109 "X-Gemma-Auth": localStorage.getItem("token"),
110 "Content-type": "application/json"
111 }
112 })
113 .then()
114 .catch(error => {
115 const { status, data } = error.response;
116 displayError({
117 title: this.$gettext("Backend Error"),
118 message: `${status}: ${data.message || data}`
119 });
120 });
121 }
122 },
123 mounted() {
124 HTTP.get("/system/style/Bottlenecks/stroke", {
125 headers: {
126 "X-Gemma-Auth": localStorage.getItem("token"),
127 "Content-type": "application/json"
128 }
129 })
130 .then(response => {
131 this.strokeColor = response.data.colour;
132 })
133 .catch(error => {
134 const { status, data } = error.response;
135 displayError({
136 title: this.$gettext("Backend Error"),
137 message: `${status}: ${data.message || data}`
138 });
139 });
140
141 HTTP.get("/system/style/Bottlenecks/fill", {
142 headers: {
143 "X-Gemma-Auth": localStorage.getItem("token"),
144 "Content-type": "application/json"
145 }
146 })
147 .then(response => {
148 this.fillColor = response.data.colour;
149 })
150 .catch(error => {
151 const { status, data } = error.response;
152 displayError({
153 title: this.$gettext("Backend Error"),
154 message: `${status}: ${data.message || data}`
155 });
156 });
157 } 50 }
158 }; 51 };
159 </script> 52 </script>