Mercurial > gemma
view client/src/components/admin/Systemconfiguration.vue @ 1501:048d1891e004
Fixed problem with accepting sounding result imports and moving them out of the staging area.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Wed, 05 Dec 2018 11:00:53 +0100 |
parents | 9b81ac91a43e |
children | e7830ab6bacc |
line wrap: on
line source
<template> <div class="d-flex flex-row"> <div :class="spacerStyle"></div> <div class="card sysconfig mt-3 shadow-xs"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center" > <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon> <translate class="headline">Systemconfiguration</translate> </h6> <div class="card-body config"> <section class="configsection"> <h4 class="card-title"> <translate>Bottleneck Areas stroke-color</translate> </h4> <compact-picker v-model="strokeColor" /> </section> <section> <h4 class="card-title"> <translate>Bottleneck Areas fill-color</translate> </h4> <chrome-picker v-model="fillColor" /> </section> <div class="sendbutton"> <a @click.prevent="submit" class="btn btn-info text-white"> <translate>Send</translate> </a> </div> </div> <!-- card-body --> </div> </div> </template> <style scoped lang="scss"> .config { text-align: left; } .configsection { margin-bottom: $large-offset; } .sendbutton { position: absolute; right: $offset; bottom: $offset; } .inputs { margin-left: auto; margin-right: auto; } .sysconfig { width: 30vw; height: 100%; } .spacer { height: 100vh; } .spacer-collapsed { min-width: $icon-width + $offset; transition: $transition-fast; } .spacer-expanded { min-width: $sidebar-width + $offset; } </style> <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> */ 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 }, computed: { ...mapState("application", ["showSidebar"]), spacerStyle() { return [ "spacer ml-3", { "spacer-expanded": this.showSidebar, "spacer-collapsed": !this.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}` }); }); } }; </script>