Mercurial > gemma

changeset 4204:aee5b44f60a1 stylesconfig

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>