Mercurial > gemma
view client/src/components/systemconfiguration/ColorSettings.vue @ 4198:e3210c87f497 stylesconfig
client: implement basis layer-styles configurations
* refactor ColorSetting component
* set default layers styles
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 08 Aug 2019 16:23:17 +0200 |
parents | 851c0ccba59b |
children | 8509d80b85a1 |
line wrap: on
line source
<template> <div class="d-flex flex-column py-4"> <div class="px-3 container-fluid"> <div class="row"> <div v-for="f in features" :key="f.key" class="column n ml-4"> <div class="row-sm-2 mt-1"> <div class="card"> <div class="card-header small text-left"> <translate>{{ f.name }} Fill Color</translate> </div> <div class="card-body p-0"> <chrome-picker v-model="f.fillColor" /> </div> </div> </div> <div class="row-sm-2 mt-1"> <div class="card"> <div class="card-header small font-weight text-left"> <translate>{{ f.name }} Border Color</translate> </div> <div class="card-body p-0"> <chrome-picker v-model="f.strokeColor" /> </div> </div> </div> <div class="mt-2"> <a @click.prevent="submit(f)" class="btn btn-info btn-sm text-white" > <translate>Send</translate> </a> <a @click.prevent="reset(f)" class="btn btn-outline-info btn-sm ml-2" > <translate>Reset to defaults</translate> </a> </div> </div> </div> </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"; const initSColor = { r: 0, g: 0, b: 0, a: 1.0 }, initFColor = { r: 0, g: 0, b: 0, a: 1.0 }; export default { name: "colorsettings", data() { return { sent: false, currentConfig: null, features: [ { name: "Bottlenecks", fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, strokeColor: { r: 0, g: 0, b: 0, a: 1.0 } }, { name: "Stretches", fillColor: initFColor, strokeColor: initSColor }, { name: "Sections", fillColor: initFColor, strokeColor: initSColor }, { name: "LOS_1", fillColor: initFColor, strokeColor: initSColor }, { name: "LOS_2", fillColor: initFColor, strokeColor: initSColor }, { name: "LOS_3", fillColor: initFColor, strokeColor: initSColor } ] }; }, components: { "chrome-picker": Chrome, "compact-picker": Compact }, methods: { reset(feature) { switch (feature.name) { case "Bottlenecks": { feature.strokeColor = defaults.feature_colours_bottlenecks_stroke; feature.fillColor = defaults.feature_colours_bottlenecks_fill; break; } case "Stretches": { feature.strokeColor = defaults.feature_colours_stretches_stroke; feature.fillColor = defaults.feature_colours_stretches_fill; break; } case "Sections": { feature.strokeColor = defaults.feature_colours_sections_stroke; feature.fillColor = defaults.feature_colours_sections_fill; break; } case "LOS_1": { feature.strokeColor = defaults.feature_colours_fairwaydimensionslos1_stroke; feature.fillColor = defaults.feature_colours_fairwaydimensionslos1_fill; break; } case "LOS_2": { feature.strokeColor = defaults.feature_colours_fairwaydimensionslos2_stroke; feature.fillColor = defaults.feature_colours_fairwaydimensionslos2_fill; break; } case "LOS_3": { feature.strokeColor = defaults.feature_colours_fairwaydimensionslos3_stroke; feature.fillColor = defaults.feature_colours_fairwaydimensionslos3_fill; break; } } }, submit(feature) { Promise.all([ HTTP.put( `/system/style/${feature.name}/stroke`, feature.strokeColor.rgba || feature.strokeColor, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } } ), HTTP.put( `/system/style/${feature.name}/fill`, feature.fillColor.rgba || feature.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() { // For now we getting only the stored styles for bottlenecks HTTP.get("/system/style/Bottlenecks/stroke", { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } }) .then(response => { this.features[0].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.features[0].fillColor = response.data.colour; }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); } }; </script>