Mercurial > gemma

annotate client/src/systemconfiguration/systemconfiguration.vue @ 904:e4b72a199258

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
New default bottleneck colors Mainly to make the stroke color one actually selectable in the ui. In addition the pink does better match the collors used on the ECDIS layer.
author Sascha Wilde <wilde@intevation.de>
date Tue, 02 Oct 2018 13:34:59 +0200
parents aae517757923
children ca628dce90dd
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
887
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
2 <div class="d-flex flex-row">
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
3 <div class="card sysconfig">
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
4 <div class="card-header shadow-sm text-white bg-info mb-6">
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
5 Systemconfiguration
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
6 </div>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
7 <div class="card-body config">
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
8 <section class="configsection">
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
9 <h4 class="card-title">Bottleneck Areas stroke-color</h4>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
10 <compact-picker v-model="strokeColor" />
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
11 </section>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
12 <section>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
13 <h4 class="card-title">Bottleneck Areas fill-color</h4>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
14 <chrome-picker v-model="fillColor" />
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
15 </section>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
16 <div class="sendbutton">
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
17 <a @click.prevent="submit" class="btn btn-info">Send</a>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
18 </div>
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
19 </div> <!-- card-body -->
866
9aa545585bdd Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents: 864
diff changeset
20 </div>
864
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
21 </div>
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 </template>
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23
887
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
24 <style scoped lang="scss">
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
25 .config {
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
26 text-align: left;
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
27 }
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
28 .configsection {
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
29 margin-bottom: $large-offset;
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
30 }
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 .sendbutton {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 position: absolute;
887
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
33 right: $offset;
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
34 bottom: $offset;
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 }
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
36 .inputs {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 margin-left: auto;
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 margin-right: auto;
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 }
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 .sysconfig {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 margin-top: $offset;
887
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
42 margin-left: auto;
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 margin-right: auto;
887
aae517757923 fix: layout systemconfig
Thomas Junk <thomas.junk@intevation.de>
parents: 866
diff changeset
44 width: 30vw;
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 }
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 </style>
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 <script>
864
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
49 import { Chrome } from "vue-color";
866
9aa545585bdd Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents: 864
diff changeset
50 import { Compact } from "vue-color";
864
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
51
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 import { HTTP } from "../application/lib/http";
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 import { displayError } from "../application/lib/errors.js";
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 export default {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 name: "systemconfiguration",
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 data() {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 return {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 sent: false,
866
9aa545585bdd Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents: 864
diff changeset
59 strokeColor: { r: 0, g: 0, b: 0, a: 1.0 },
864
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
60 fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 currentConfig: null
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 };
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 },
866
9aa545585bdd Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents: 864
diff changeset
64 components: { "chrome-picker": Chrome, "compact-picker": Compact },
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 methods: {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 submit() {
866
9aa545585bdd Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents: 864
diff changeset
67 HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 headers: {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 "X-Gemma-Auth": localStorage.getItem("token"),
863
d1863e91b039 client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents: 856
diff changeset
70 "Content-type": "application/json"
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 }
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 })
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 .then()
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 .catch(error => {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 const { status, data } = error.response;
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 displayError({
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 title: "Backend Error",
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 message: `${status}: ${data.message || data}`
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 });
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 });
864
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
81
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
82 HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
83 headers: {
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
84 "X-Gemma-Auth": localStorage.getItem("token"),
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
85 "Content-type": "application/json"
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
86 }
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
87 })
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
88 .then()
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
89 .catch(error => {
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
90 const { status, data } = error.response;
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
91 displayError({
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
92 title: "Backend Error",
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
93 message: `${status}: ${data.message || data}`
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
94 });
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
95 });
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 }
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 },
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 mounted() {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 HTTP.get("/system/style/Bottlenecks/stroke", {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 headers: {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 "X-Gemma-Auth": localStorage.getItem("token"),
863
d1863e91b039 client: fix systemconfiguration for stroke colour
Bernhard Reiter <bernhard@intevation.de>
parents: 856
diff changeset
102 "Content-type": "application/json"
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 }
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104 })
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 .then(response => {
866
9aa545585bdd Replaced color setting for bottleneck stroke with compact picker.
Sascha Wilde <wilde@intevation.de>
parents: 864
diff changeset
106 this.strokeColor = response.data.colour;
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 })
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 .catch(error => {
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 const { status, data } = error.response;
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 displayError({
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 title: "Backend Error",
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
112 message: `${status}: ${data.message || data}`
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
113 });
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
114 });
864
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
115
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
116 HTTP.get("/system/style/Bottlenecks/fill", {
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
117 headers: {
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
118 "X-Gemma-Auth": localStorage.getItem("token"),
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
119 "Content-type": "application/json"
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
120 }
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
121 })
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
122 .then(response => {
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
123 this.fillColor = response.data.colour;
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
124 })
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
125 .catch(error => {
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
126 const { status, data } = error.response;
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
127 displayError({
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
128 title: "Backend Error",
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
129 message: `${status}: ${data.message || data}`
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
130 });
2079fabbe6dd client: add fill-colour setting to systemconfig
Bernhard Reiter <bernhard@intevation.de>
parents: 863
diff changeset
131 });
856
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
132 }
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
133 };
ce0d50b1d126 systemconfig WIP
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
134 </script>