Mercurial > gemma
view client/src/components/systemconfiguration/ColorSettings.vue @ 5095:e21cbb9768a2
Prevent duplicate fairway areas
In principal, there can be only one or no fairway area at each point
on the map. Since polygons from real data will often be topologically
inexact, just disallow equal geometries. This will also help to
avoid importing duplicates with concurrent imports, once the history
of fairway dimensions will be preserved.
author | Tom Gottfried <tom@intevation.de> |
---|---|
date | Wed, 25 Mar 2020 18:10:02 +0100 |
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>