Mercurial > gemma
view client/src/components/systemconfiguration/ColorSettings.vue @ 4063:fe3dd65c0891
Rename HandlePGError to HandleError.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Thu, 25 Jul 2019 11:46:23 +0200 |
parents | 851c0ccba59b |
children | e3210c87f497 |
line wrap: on
line source
<template> <div class="d-flex flex-column py-4"> <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> <a @click.prevent="reset" class="btn btn-outline-info btn-sm ml-2"> <translate>Reset to defaults</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, displayInfo } from "@/lib/errors"; import defaults from "./defaults"; 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: { reset() { this.strokeColor = defaults.feature_colours_bottlenecks_stroke; this.fillColor = defaults.feature_colours_bottlenecks_fill; }, submit() { Promise.all([ HTTP.put( "/system/style/Bottlenecks/stroke", this.strokeColor.rgba || this.strokeColor, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } } ), HTTP.put( "/system/style/Bottlenecks/fill", this.fillColor.rgba || this.fillColor, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } } ) ]) .then(() => { displayInfo({ message: "Configuration saved!" }); }) .catch(error => { const { status, data } = error.response; displayError({ title: "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>