Mercurial > gemma
comparison client/src/components/systemconfiguration/Systemconfiguration.vue @ 2213:9bf8562df42f pdf-export
moved/created files
forgot to add this to last commit.
Systemconfiguration has now a sub component for pdf templates.
Thus I moved the files to their own directory.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 06 Feb 2019 16:32:16 +0100 |
parents | |
children | 9b15293d028c |
comparison
equal
deleted
inserted
replaced
2212:733cfc3db48a | 2213:9bf8562df42f |
---|---|
1 <template> | |
2 <div class="d-flex flex-row"> | |
3 <Spacer></Spacer> | |
4 <div class="card sysconfig mt-3 shadow-xs"> | |
5 <h6 | |
6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" | |
7 > | |
8 <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon> | |
9 <translate class="headline">Systemconfiguration</translate> | |
10 </h6> | |
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 /> | |
35 </div> | |
36 <!-- card-body --> | |
37 </div> | |
38 </div> | |
39 </template> | |
40 | |
41 <style scoped lang="scss"> | |
42 .sysconfig { | |
43 margin-right: $offset; | |
44 width: 100%; | |
45 height: 100%; | |
46 } | |
47 </style> | |
48 | |
49 <script> | |
50 /* This is Free Software under GNU Affero General Public License v >= 3.0 | |
51 * without warranty, see README.md and license for details. | |
52 * | |
53 * SPDX-License-Identifier: AGPL-3.0-or-later | |
54 * License-Filename: LICENSES/AGPL-3.0.txt | |
55 * | |
56 * Copyright (C) 2018 by via donau | |
57 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
58 * Software engineering by Intevation GmbH | |
59 * | |
60 * Author(s): | |
61 * Thomas Junk <thomas.junk@intevation.de> | |
62 * Bernhard Reiter <bernhard@intevation.de> | |
63 */ | |
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 { | |
72 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: { | |
82 "chrome-picker": Chrome, | |
83 "compact-picker": Compact, | |
84 Spacer: () => import("../Spacer"), | |
85 PDFTemplates: () => import("./PDFTemplates") | |
86 }, | |
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 } | |
158 }; | |
159 </script> |