Mercurial > gemma
view client/src/components/systemconfiguration/ColorSettings.vue @ 4204:aee5b44f60a1 stylesconfig
styles-config: refactor http requests for all layers in ColorSetting.vue component
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 14 Aug 2019 15:17:10 +0200 |
parents | 5cee71c929d1 |
children | cd267ed8371e |
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="col-sm-2 mt-2"> <div v-if="f.fillColor" class="card"> <div class="card-header small text-center"> <translate>{{ f.name }} Fill Color</translate> </div> <div class="card-body p-0"> <chrome-picker v-model="f.fillColor" /> </div> </div> <div class="mt-2"> <div v-if="f.strokeColor" class="card"> <div class="card-header small text-center"> <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 defaults from "./defaults"; import { mapState } from "vuex"; 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 }, { name: "Waterway profiles", strokeColor: initSColor } ] }; }, computed: { ...mapState("application", ["config"]) }, 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; } case "Waterway profiles": { feature.strokeColor = defaults.feature_colours_waterwayprofiles_stroke; break; } } }, submit(feature) { switch (feature.name) { case "Bottlenecks": { this.$store .dispatch("application/saveConfig", { bottlenecks_stroke: feature.strokeColor.hex || feature.strokeColor, bottlenecks_fill: feature.fillColor.hex || feature.fillColor }) .finally(() => this.$store.dispatch("application/loadConfig")); break; } case "Stretches": { this.$store .dispatch("application/saveConfig", { stretches_stroke: feature.strokeColor.hex || feature.strokeColor, stretches_fill: feature.fillColor.hex || feature.fillColor }) .finally(() => this.$store.dispatch("application/loadConfig")); break; } case "sections": { this.$store .dispatch("application/saveConfig", { stretches_stroke: feature.strokeColor.hex || feature.strokeColor, stretches_fill: feature.fillColor.hex || feature.fillColor }) .finally(() => this.$store.dispatch("application/loadConfig")); break; } case "LOS_1": { this.$store .dispatch("application/saveConfig", { fairwaydimensionslos1_stroke: feature.strokeColor.hex || feature.strokeColor, fairwaydimensionslos1_fill: feature.fillColor.hex || feature.fillColor }) .finally(() => this.$store.dispatch("application/loadConfig")); break; } case "LOS_2": { this.$store .dispatch("application/saveConfig", { fairwaydimensionslos2_stroke: feature.strokeColor.hex || feature.strokeColor, fairwaydimensionslos2_fill: feature.fillColor.hex || feature.fillColor }) .finally(() => this.$store.dispatch("application/loadConfig")); break; } case "LOS_3": { this.$store .dispatch("application/saveConfig", { fairwaydimensionslos3_stroke: feature.strokeColor.hex || feature.strokeColor, fairwaydimensionslos3_fill: feature.fillColor.hex || feature.fillColor }) .finally(() => this.$store.dispatch("application/loadConfig")); break; } case "Waterway profiles": { this.$store.dispatch("application/saveConfig", { waterwayprofiles_stroke: feature.strokeColor.hex || feature.strokeColor }); } } } }, mounted() { this.features[0].strokeColor = this.config.bottlenecks_stroke; this.features[0].fillColor = this.config.bottlenecks_fill; this.features[1].strokeColor = this.config.stretches_stroke; this.features[1].fillColor = this.config.stretches_fill; this.features[2].strokeColor = this.config.sections_stroke; this.features[2].fillColor = this.config.sections_fill; this.features[3].strokeColor = this.config.fairwaydimensionslos1_stroke; this.features[3].fillColor = this.config.fairwaydimensionslos1_fill; this.features[4].strokeColor = this.config.fairwaydimensionslos2_stroke; this.features[4].fillColor = this.config.fairwaydimensionslos2_fill; this.features[5].strokeColor = this.config.fairwaydimensionslos3_stroke; this.features[5].fillColor = this.config.fairwaydimensionslos3_fill; this.features[6].strokeColor = this.config.waterwayprofiles_stroke; } }; </script>