Mercurial > gemma

annotate client/src/components/systemconfiguration/ColorSettings.vue @ 3668:3eb19b38446e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: avoid requesting number of pending imports after logging out
author Markus Kottlaender <markus@intevation.de>
date Mon, 17 Jun 2019 11:08:03 +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>