Mercurial > gemma

annotate client/src/components/systemconfiguration/ColorSettings.vue @ 3644:9e91b416d5bb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: cross profile: display arrow in diagram consciously diceded to not draw it in the svg so it will not be exported to pdf since there it does not make sense without the map
author Markus Kottlaender <markus@intevation.de>
date Wed, 12 Jun 2019 17:10:49 +0200
parents 98f14d97611e
children 6c2ef463b958
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>
3597
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
2 <div class="d-flex flex-column pb-4 border-bottom">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
3 <h5 class="py-2 px-3 mb-2 m-0"><translate>Color Settings</translate></h5>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
4 <div class="px-3 container-fluid">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
5 <div class="row">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
6 <div class="col-sm-2">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
7 <div class="card">
3601
98f14d97611e client: configuration: colors: reduced fontsize in colorpicker headers
Markus Kottlaender <markus@intevation.de>
parents: 3597
diff changeset
8 <div class="card-header small">
3597
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
9 <translate>Bottleneck Fill Color</translate>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
10 </div>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
11 <div class="card-body p-0">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
12 <chrome-picker v-model="fillColor" />
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
13 </div>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
14 </div>
2276
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 </div>
3597
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
16 <div class="col-sm-2">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
17 <div class="card">
3601
98f14d97611e client: configuration: colors: reduced fontsize in colorpicker headers
Markus Kottlaender <markus@intevation.de>
parents: 3597
diff changeset
18 <div class="card-header small">
3597
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
19 <translate>Bottleneck Border Color</translate>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
20 </div>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
21 <div class="card-body p-0">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
22 <chrome-picker v-model="strokeColor" />
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
23 </div>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
24 </div>
2276
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>
3597
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
27 </div>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
28 <div class="mt-4 px-3">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
29 <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
30 <translate>Send</translate>
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
31 </a>
2276
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 </div>
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 </div>
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 </template>
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35
3593
e7726cc3bc56 client: configuration: used same color picker for all color settings and adjusted its style
Markus Kottlaender <markus@intevation.de>
parents: 2985
diff changeset
36 <style lang="sass" scoped>
3597
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
37 /deep/
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
38 .card
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
39 overflow: hidden
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
40 .card-header
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
41 padding: .25rem 1rem
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
42 .vc-chrome
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
43 box-shadow: none
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
44 border-radius: 0
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
45 width: 100%
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
46 .vc-chrome-saturation-wrap
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
47 border-radius: 0
d1bbfb9635ca client: configuration: unified styles of different config components
Markus Kottlaender <markus@intevation.de>
parents: 3595
diff changeset
48 padding-bottom: 45%
3593
e7726cc3bc56 client: configuration: used same color picker for all color settings and adjusted its style
Markus Kottlaender <markus@intevation.de>
parents: 2985
diff changeset
49 </style>
e7726cc3bc56 client: configuration: used same color picker for all color settings and adjusted its style
Markus Kottlaender <markus@intevation.de>
parents: 2985
diff changeset
50
2276
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 <script>
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 /* 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
53 * without warranty, see README.md and license for details.
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 *
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 * SPDX-License-Identifier: AGPL-3.0-or-later
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 * License-Filename: LICENSES/AGPL-3.0.txt
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 *
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * Copyright (C) 2018 by via donau
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 * – Österreichische Wasserstraßen-Gesellschaft mbH
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 * Software engineering by Intevation GmbH
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 * Author(s):
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 * Thomas Junk <thomas.junk@intevation.de>
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * Bernhard Reiter <bernhard@intevation.de>
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 * Markus Kottländer <markus@intevation.de>
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 */
2920
c1f2b9148cc8 client: removed more unnecessary closing tags and opzimized imports
Markus Kottlaender <markus@intevation.de>
parents: 2276
diff changeset
67 import { Chrome, Compact } from "vue-color";
2276
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 import { HTTP } from "@/lib/http";
2985
1b8bb4f89227 client: removed .js and .vue extention from imports
Markus Kottlaender <markus@intevation.de>
parents: 2920
diff changeset
69 import { displayError } from "@/lib/errors";
2276
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 export default {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 name: "colorsettings",
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 data() {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 return {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 sent: false,
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 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
77 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
78 currentConfig: null
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 };
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 components: {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 "chrome-picker": Chrome,
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 "compact-picker": Compact
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 },
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 methods: {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 submit() {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 headers: {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 "X-Gemma-Auth": localStorage.getItem("token"),
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 "Content-type": "application/json"
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 }
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 })
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 .then()
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 .catch(error => {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 const { status, data } = error.response;
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 displayError({
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 title: this.$gettext("Backend Error"),
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 message: `${status}: ${data.message || data}`
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
99 });
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 });
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 headers: {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 "X-Gemma-Auth": localStorage.getItem("token"),
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 "Content-type": "application/json"
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 }
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 })
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 .then()
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 },
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
118 mounted() {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
119 HTTP.get("/system/style/Bottlenecks/stroke", {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
120 headers: {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
121 "X-Gemma-Auth": localStorage.getItem("token"),
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
122 "Content-type": "application/json"
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
123 }
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
124 })
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
125 .then(response => {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
126 this.strokeColor = response.data.colour;
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
127 })
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
128 .catch(error => {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
129 const { status, data } = error.response;
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
130 displayError({
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
131 title: this.$gettext("Backend Error"),
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
132 message: `${status}: ${data.message || data}`
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
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
136 HTTP.get("/system/style/Bottlenecks/fill", {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
137 headers: {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
138 "X-Gemma-Auth": localStorage.getItem("token"),
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
139 "Content-type": "application/json"
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
140 }
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
141 })
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
142 .then(response => {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
143 this.fillColor = response.data.colour;
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
144 })
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
145 .catch(error => {
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
146 const { status, data } = error.response;
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
147 displayError({
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
148 title: this.$gettext("Backend Error"),
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
149 message: `${status}: ${data.message || data}`
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
150 });
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
151 });
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
152 }
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
153 };
920fba6eef0d moved color settings into own component
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
154 </script>