Mercurial > gemma
changeset 2276:920fba6eef0d
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 | a6cfa06c5983 |
| children | 5f3110aa1ad1 |
| files | client/src/components/systemconfiguration/ColorSettings.vue client/src/components/systemconfiguration/Systemconfiguration.vue |
| diffstat | 2 files changed, 139 insertions(+), 111 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Fri Feb 15 10:44:45 2019 +0100 @@ -0,0 +1,135 @@ +<template> + <div class="d-flex flex-column mt-4"> + <div class="d-flex flex-row justify-content-between"> + <h5><translate>Color Settings</translate></h5> + </div> + <div class="mt-1"> + <div class="d-flex"> + <div> + <h6 class="card-title"> + <translate>Bottleneck Areas fill-color</translate> + </h6> + <chrome-picker v-model="fillColor" /> + </div> + <div class="ml-4"> + <h6 class="card-title"> + <translate>Bottleneck Areas stroke-color</translate> + </h6> + <compact-picker v-model="strokeColor" /> + </div> + </div> + <div class="mt-4"> + <a @click.prevent="submit" class="btn btn-info text-white"> + <translate>Send</translate> + </a> + </div> + </div> + </div> +</template> + +<script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + * Bernhard Reiter <bernhard@intevation.de> + * Markus Kottländer <markus@intevation.de> + */ +import { Chrome } from "vue-color"; +import { Compact } from "vue-color"; + +import { HTTP } from "@/lib/http"; +import { displayError } from "@/lib/errors.js"; + +export default { + name: "colorsettings", + data() { + return { + sent: false, + strokeColor: { r: 0, g: 0, b: 0, a: 1.0 }, + fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, + currentConfig: null + }; + }, + components: { + "chrome-picker": Chrome, + "compact-picker": Compact + }, + methods: { + submit() { + HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "application/json" + } + }) + .then() + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + + HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "application/json" + } + }) + .then() + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } + }, + mounted() { + HTTP.get("/system/style/Bottlenecks/stroke", { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "application/json" + } + }) + .then(response => { + this.strokeColor = response.data.colour; + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + + HTTP.get("/system/style/Bottlenecks/fill", { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "application/json" + } + }) + .then(response => { + this.fillColor = response.data.colour; + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + } +}; +</script>
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue Fri Feb 15 09:47:57 2019 +0100 +++ b/client/src/components/systemconfiguration/Systemconfiguration.vue Fri Feb 15 10:44:45 2019 +0100 @@ -9,29 +9,8 @@ <translate class="headline">Systemconfiguration</translate> </h6> <div class="card-body text-left"> - <h5 class="border-bottom pb-3 mb-3"> - <translate>Color settings</translate> - </h5> - <div class="d-flex"> - <div> - <h6 class="card-title"> - <translate>Bottleneck Areas fill-color</translate> - </h6> - <chrome-picker v-model="fillColor" /> - </div> - <div class="ml-4"> - <h6 class="card-title"> - <translate>Bottleneck Areas stroke-color</translate> - </h6> - <compact-picker v-model="strokeColor" /> - </div> - </div> - <div class="mt-4"> - <a @click.prevent="submit" class="btn btn-info text-white"> - <translate>Send</translate> - </a> - </div> <PDFTemplates /> + <ColorSettings /> </div> <!-- card-body --> </div> @@ -60,100 +39,14 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> * Bernhard Reiter <bernhard@intevation.de> + * Markus Kottländer <markus@intevation.de> */ -import { Chrome } from "vue-color"; -import { Compact } from "vue-color"; - -import { HTTP } from "@/lib/http"; -import { displayError } from "@/lib/errors.js"; -import { mapState } from "vuex"; - export default { name: "systemconfiguration", - data() { - return { - sent: false, - strokeColor: { r: 0, g: 0, b: 0, a: 1.0 }, - fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, - currentConfig: null - }; - }, components: { - "chrome-picker": Chrome, - "compact-picker": Compact, Spacer: () => import("../Spacer"), - PDFTemplates: () => import("./PDFTemplates") - }, - computed: { - ...mapState("application", ["showSidebar"]) - }, - methods: { - submit() { - HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - }) - .then() - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - - HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - }) - .then() - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - } - }, - mounted() { - HTTP.get("/system/style/Bottlenecks/stroke", { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - }) - .then(response => { - this.strokeColor = response.data.colour; - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - - HTTP.get("/system/style/Bottlenecks/fill", { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - }) - .then(response => { - this.fillColor = response.data.colour; - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); + PDFTemplates: () => import("./PDFTemplates"), + ColorSettings: () => import("./ColorSettings") } }; </script>