Mercurial > gemma
changeset 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 | c56db74e2f9b |
children | 9285e94d1061 |
files | client/src/components/systemconfiguration/ColorSettings.vue |
diffstat | 1 files changed, 86 insertions(+), 69 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/ColorSettings.vue Wed Aug 14 10:43:40 2019 +0200 +++ b/client/src/components/systemconfiguration/ColorSettings.vue Wed Aug 14 15:17:10 2019 +0200 @@ -73,9 +73,8 @@ * Markus Kottländer <markus@intevation.de> */ import { Chrome, Compact } from "vue-color"; -import { HTTP } from "@/lib/http"; -import { displayError, displayInfo } from "@/lib/errors"; 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 }; @@ -124,6 +123,9 @@ ] }; }, + computed: { + ...mapState("application", ["config"]) + }, components: { "chrome-picker": Chrome, "compact-picker": Compact @@ -175,77 +177,92 @@ } }, submit(feature) { - Promise.all([ - HTTP.put( - `/system/style/${feature.name}/stroke`, - feature.strokeColor.rgba || feature.strokeColor, - { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - } - ), - HTTP.put( - `/system/style/${feature.name}/fill`, - feature.fillColor.rgba || feature.fillColor, - { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - } - ) - ]) - .then(() => { - displayInfo({ - message: "Configuration saved!" + 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 }); - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); + } + } } }, mounted() { - // For now we getting only the stored styles for bottlenecks - HTTP.get("/system/style/Bottlenecks/stroke", { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - }) - .then(response => { - this.features[0].strokeColor = response.data.colour; - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - - HTTP.get("/system/style/Bottlenecks/fill", { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "application/json" - } - }) - .then(response => { - this.features[0].fillColor = response.data.colour; - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); + 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>