Mercurial > gemma
changeset 4211:d08247127c21 stylesconfig
styles-config: improve code for ColorSettings component
* send color values to server only if they changed
* convert initial values to hex8 values
* add missing code for waterwayprofiles styling
| author | Fadi Abbud <fadi.abbud@intevation.de> |
|---|---|
| date | Thu, 15 Aug 2019 16:55:58 +0200 |
| parents | 8962a25d4290 |
| children | b0bb1b624678 |
| files | client/src/components/systemconfiguration/ColorSettings.vue |
| diffstat | 1 files changed, 106 insertions(+), 52 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/ColorSettings.vue Thu Aug 15 12:10:27 2019 +0200 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Thu Aug 15 16:55:58 2019 +0200 @@ -75,9 +75,10 @@ import { Chrome, Compact } from "vue-color"; import defaults from "./defaults"; import { mapState } from "vuex"; +import { displayInfo } from "@/lib/errors"; -const initSColor = { r: 0, g: 0, b: 0, a: 1.0 }, - initFColor = { r: 0, g: 0, b: 0, a: 1.0 }; +const initSColor = "#000000", + initFColor = "#000000"; export default { name: "colorsettings", @@ -88,8 +89,8 @@ features: [ { name: "Bottlenecks", - fillColor: { r: 0, g: 0, b: 0, a: 1.0 }, - strokeColor: { r: 0, g: 0, b: 0, a: 1.0 } + fillColor: initSColor, + strokeColor: initSColor }, { name: "Stretches", @@ -176,75 +177,128 @@ } } }, + noChangeMsg(name) { + displayInfo({ + title: name + ":", + message: this.$gettext("No style-changes") + }); + }, submit(feature) { + let strokeC = feature.strokeColor.hex8 || feature.strokeColor, + fillC = feature.fillColor + ? feature.fillColor.hex8 || feature.fillColor + : initFColor; switch (feature.name) { case "Bottlenecks": { - this.$store - .dispatch("application/saveConfig", { - bottlenecks_stroke: - feature.strokeColor.hex8 || feature.strokeColor, - bottlenecks_fill: feature.fillColor.hex8 || feature.fillColor - }) - .finally(() => this.$store.dispatch("application/loadConfig")); + // 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 { + this.noChangeMsg(feature.name); + } break; } - case "Stretches": { - this.$store - .dispatch("application/saveConfig", { - stretches_stroke: feature.strokeColor.hex8 || feature.strokeColor, - stretches_fill: feature.fillColor.hex8 || feature.fillColor - }) - .finally(() => this.$store.dispatch("application/loadConfig")); + 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 { + this.noChangeMsg(feature.name); + } break; } case "Sections": { - this.$store - .dispatch("application/saveConfig", { - sections_stroke: feature.strokeColor.hex8 || feature.strokeColor, - sections_fill: feature.fillColor.hex8 || feature.fillColor - }) - .finally(() => this.$store.dispatch("application/loadConfig")); + 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 { + this.noChangeMsg(feature.name); + } break; } case "LOS_1": { - this.$store - .dispatch("application/saveConfig", { - fairwaydimensionslos1_stroke: - feature.strokeColor.hex8 || feature.strokeColor, - fairwaydimensionslos1_fill: - feature.fillColor.hex8 || feature.fillColor - }) - .finally(() => this.$store.dispatch("application/loadConfig")); + 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 { + this.noChangeMsg(feature.name); + } break; } case "LOS_2": { - this.$store - .dispatch("application/saveConfig", { - fairwaydimensionslos2_stroke: - feature.strokeColor.hex8 || feature.strokeColor, - fairwaydimensionslos2_fill: - feature.fillColor.hex8 || feature.fillColor - }) - .finally(() => this.$store.dispatch("application/loadConfig")); + 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 { + this.noChangeMsg(feature.name); + } break; } case "LOS_3": { - this.$store - .dispatch("application/saveConfig", { - fairwaydimensionslos3_stroke: - feature.strokeColor.hex8 || feature.strokeColor, - fairwaydimensionslos3_fill: - feature.fillColor.hex8 || feature.fillColor - }) - .finally(() => this.$store.dispatch("application/loadConfig")); + 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 { + this.noChangeMsg(feature.name); + } break; } case "Waterway profiles": { - this.$store.dispatch("application/saveConfig", { - waterwayprofiles_stroke: - feature.strokeColor.hex || feature.strokeColor - }); + if (strokeC !== this.config.waterwayprofiles_stroke) { + this.$store + .dispatch("application/saveConfig", { + waterwayprofiles_stroke: strokeC + }) + .finally(() => { + this.$store.dispatch("application/loadConfig"); + }); + } else { + this.noChangeMsg(feature.name); + } + break; } } }