Mercurial > gemma
view client/src/components/systemconfiguration/ColorSettings.vue @ 4231:6f31a99cd92d
clinet: fix translations process and update source strings
* move strings for translations from *.po files to the component itself to let gettext() mark only the strings without the html elements.
(make makemessages complains to have html elements in the .po files and stops the process).
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Wed, 21 Aug 2019 11:13:12 +0200 |
parents | 912b8aa42c31 |
children | fec07ba0fa60 |
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"> <span v-translate="{ layerName: f.name }" >%{layerName} Fill Color</span > </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"> <span v-translate="{ layerName: f.name }" >%{layerName} Border Color</span > </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 class="col-sm-2 px-3 align-self-end"> <a @click.prevent="resetAll" class="btn btn-outline-info btn-sm w-100" >Reset all to defaults </a> <div class="d-flex mt-2"> <a @click.prevent="saveAll" class="btn btn-info btn-sm text-white w-100" >Send all </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"; 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: "Waterway profiles", strokeColor: initSColor } ] }; }, 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; } } }, submit(feature) { let strokeC = feature.strokeColor.hex8 || feature.strokeColor, fillC = feature.fillColor ? feature.fillColor.hex8 || feature.fillColor : initFColor; 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; } } } }, 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>