Mercurial > gemma
view client/src/components/systemconfiguration/ColorSettings.vue @ 5259:680be197844d
Merged branch new-fwa.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Wed, 13 May 2020 11:28:34 +0200 |
parents | b5290f4a35f4 |
children | 84d01a536bec |
line wrap: on
line source
<template> <div class="d-flex flex-column py-3"> <div class="px-3 container-fluid"> <div class="row"> <div v-for="f in features" :key="f.key" class="col-sm-3 mt-2 mb-4"> <div v-if="f.fillColor" class="card mt-3"> <div class="card-header small text-center"> <span v-translate="{ layerName: f.name }" >%{layerName} Fill Color</span > </div> <div class="card-body p-0"> <chrome-picker v-model="f.fillColor" :class="{ hide: f.noOpacity }" /> </div> </div> <div class="mt-3"> <div v-if="f.strokeColor" class="card"> <div class="card-header small text-center"> <span v-translate="{ layerName: f.name }" >%{layerName} Border Color</span > </div> <div class="card-body p-0"> <chrome-picker v-model="f.strokeColor" :class="{ hide: f.noOpacity || f.name === 'Distance Marks' || f.name === 'Distance Marks, Axis' }" /> </div> </div> </div> <div class="d-flex text-right mt-2 mb-4"> <a @click.prevent="submit(f)" class="w-50 btn btn-info btn-sm text-white" > <translate>Send</translate> </a> <a @click.prevent="reset(f)" class="w-50 btn btn-outline-info btn-sm ml-2" > <translate>Reset to defaults</translate> </a> </div> <hr /> </div> <div class="d-flex col-sm-3 align-self-end text-right savebuttons"> <a @click.prevent="resetAll" class="w-50 btn btn-outline-info btn-sm" ><translate>Reset all to defaults</translate> </a> <a @click.prevent="saveAll" class="w-50 btn btn-info ml-1 btn-sm text-white " ><translate>Send all</translate> </a> </div> </div> </div> </div> </template> <style lang="sass" scoped> .savebuttons position:relative top: -4em; /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% &.hide .vc-chrome-alpha-wrap display: none !important .vc-chrome-hue-wrap margin-top: 10px </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): * Markus Kottländer <markus@intevation.de> * Fadi Abbud <fadi.abbud@intevation.de> */ import { Chrome, Compact } from "vue-color"; import defaults from "./defaults"; import { mapState } from "vuex"; import { displayInfo } from "@/lib/errors"; const initSColor = "#000000", initFColor = "#000000"; export default { name: "colorsettings", data() { return { sent: false, currentConfig: null, features: [ { name: "Bottlenecks", fillColor: initSColor, strokeColor: initSColor }, { 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: "Distance Marks, Axis", strokeColor: initSColor, fillColor: initSColor }, { name: "Distance Marks", strokeColor: initSColor, fillColor: initSColor }, { name: "Waterway profiles", strokeColor: initSColor }, { name: "Waterway Axis", strokeColor: initSColor, noOpacity: true }, { name: "Waterway Area", strokeColor: initSColor, noOpacity: true } ] }; }, computed: { ...mapState("application", ["config"]) }, components: { "chrome-picker": Chrome, "compact-picker": Compact }, methods: { saveAll() { this.features.forEach(f => { this.submit(f); }); }, resetAll() { this.features.forEach(f => { this.reset(f); }); }, 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; } case "Waterway Axis": { feature.strokeColor = defaults.feature_colours_waterway_axis_stroke; break; } case "Waterway Area": { feature.strokeColor = defaults.feature_colours_waterway_area_stroke; break; } case "Distance Marks, Axis": { feature.strokeColor = defaults.feature_colours_distancemarks_stroke; feature.fillColor = defaults.feature_colours_distancemarks_fill; break; } case "Distance Marks": { feature.strokeColor = defaults.feature_colours_distancemarks_ashore_stroke; feature.fillColor = defaults.feature_colours_distancemarks_ashore_fill; break; } } }, submit(feature) { let strokeC = feature.strokeColor.hex8 || feature.strokeColor, fillC = feature.fillColor ? feature.fillColor.hex8 || feature.fillColor : initFColor; let strokeCForWMS = feature.strokeColor.hex || feature.strokeColor; let noChangeMsg = name => { displayInfo({ title: name + ":", message: this.$gettext("No style-changes") }); }; switch (feature.name) { case "Bottlenecks": { // send values only if they changed if ( strokeC !== this.config.bottlenecks_stroke || fillC !== this.config.bottlenecks_fill ) { this.$store .dispatch("application/saveConfig", { bottlenecks_stroke: strokeC, bottlenecks_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } case "Stretches": { if ( strokeC !== this.config.stretches_stroke || fillC !== this.config.stretches_fill ) { this.$store .dispatch("application/saveConfig", { stretches_stroke: strokeC, stretches_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } case "Sections": { if ( strokeC !== this.config.sections_stroke || fillC !== this.config.sections_fill ) { this.$store .dispatch("application/saveConfig", { sections_stroke: strokeC, sections_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } case "LOS_1": { if ( strokeC !== this.config.fairwaydimensionslos1_stroke || fillC !== this.config.fairwaydimensionslos1_fill ) { this.$store .dispatch("application/saveConfig", { fairwaydimensionslos1_stroke: strokeC, fairwaydimensionslos1_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } case "LOS_2": { if ( strokeC !== this.config.fairwaydimensionslos2_stroke || fillC !== this.config.fairwaydimensionslos2_fill ) { this.$store .dispatch("application/saveConfig", { fairwaydimensionslos2_stroke: strokeC, fairwaydimensionslos2_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } case "LOS_3": { if ( strokeC !== this.config.fairwaydimensionslos3_stroke || fillC !== this.config.fairwaydimensionslos3_fill ) { this.$store .dispatch("application/saveConfig", { fairwaydimensionslos3_stroke: strokeC, fairwaydimensionslos3_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } case "Waterway profiles": { if (strokeC !== this.config.waterwayprofiles_stroke) { this.$store .dispatch("application/saveConfig", { waterwayprofiles_stroke: strokeC }) .finally(() => { this.$store.dispatch("application/loadConfig"); }); } else { noChangeMsg(feature.name); } break; } case "Waterway Axis": { if (strokeCForWMS !== this.config.waterway_axis_stroke) { this.$store .dispatch("application/saveConfig", { waterway_axis_stroke: strokeCForWMS }) .finally(() => { this.$store.dispatch("application/loadConfig"); }); } else { noChangeMsg(feature.name); } break; } case "Waterway Area": { if (strokeCForWMS !== this.config.waterway_area_stroke) { this.$store .dispatch("application/saveConfig", { waterway_area_stroke: strokeCForWMS }) .finally(() => { this.$store.dispatch("application/loadConfig"); }); } else { noChangeMsg(feature.name); } break; } case "Distance Marks, Axis": { if ( strokeCForWMS !== this.config.distance_marks_stroke || fillC !== this.config.distance_marks_fill ) { this.$store .dispatch("application/saveConfig", { distance_marks_stroke: strokeCForWMS, distance_marks_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } case "Distance Marks": { if ( strokeCForWMS !== this.config.distance_marks_ashore_stroke || fillC !== this.config.distance_marks_ashore_fill ) { this.$store .dispatch("application/saveConfig", { distance_marks_ashore_stroke: strokeCForWMS, distance_marks_ashore_fill: fillC }) .finally(() => this.$store.dispatch("application/loadConfig")); } else { noChangeMsg(feature.name); } break; } } } }, mounted() { this.features[0].strokeColor = this.config.bottlenecks_stroke || initSColor; this.features[0].fillColor = this.config.bottlenecks_fill || initFColor; this.features[1].strokeColor = this.config.stretches_stroke || initSColor; this.features[1].fillColor = this.config.stretches_fill || initFColor; this.features[2].strokeColor = this.config.sections_stroke || initSColor; this.features[2].fillColor = this.config.sections_fill || initFColor; this.features[3].strokeColor = this.config.fairwaydimensionslos1_stroke; this.features[3].fillColor = this.config.fairwaydimensionslos1_fill || initFColor; this.features[4].strokeColor = this.config.fairwaydimensionslos2_stroke || initSColor; this.features[4].fillColor = this.config.fairwaydimensionslos2_fill || initFColor; this.features[5].strokeColor = this.config.fairwaydimensionslos3_stroke || initSColor; this.features[5].fillColor = this.config.fairwaydimensionslos3_fill || initFColor; this.features[6].strokeColor = this.config.distance_marks_stroke || initSColor; this.features[6].fillColor = this.config.distance_marks_fill || initFColor; this.features[7].strokeColor = this.config.distance_marks_ashore_stroke || initSColor; this.features[7].fillColor = this.config.distance_marks_ashore_fill || initFColor; this.features[8].strokeColor = this.config.waterwayprofiles_stroke; this.features[9].strokeColor = this.config.waterway_axis_stroke || initSColor; this.features[10].strokeColor = this.config.waterway_area_stroke || initSColor; } }; </script>