Mercurial > gemma
view client/src/components/systemconfiguration/ColorSettings.vue @ 3668:3eb19b38446e
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 |
line wrap: on
line source
<template> <div class="d-flex flex-column pb-4 border-bottom"> <h5 class="py-2 px-3 mb-2 m-0"><translate>Color Settings</translate></h5> <div class="px-3 container-fluid"> <div class="row"> <div class="col-sm-2"> <div class="card"> <div class="card-header small"> <translate>Bottleneck Fill Color</translate> </div> <div class="card-body p-0"> <chrome-picker v-model="fillColor" /> </div> </div> </div> <div class="col-sm-2"> <div class="card"> <div class="card-header small"> <translate>Bottleneck Border Color</translate> </div> <div class="card-body p-0"> <chrome-picker v-model="strokeColor" /> </div> </div> </div> </div> </div> <div class="mt-4 px-3"> <a @click.prevent="submit" class="btn btn-info btn-sm text-white"> <translate>Send</translate> </a> </div> </div> </template> <style lang="sass" scoped> /deep/ .card overflow: hidden .card-header padding: .25rem 1rem .vc-chrome box-shadow: none border-radius: 0 width: 100% .vc-chrome-saturation-wrap border-radius: 0 padding-bottom: 45% </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> * Markus Kottländer <markus@intevation.de> */ import { Chrome, Compact } from "vue-color"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; 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>