diff client/src/components/fairway/AvailableFairwayDepth.vue @ 3191:c0cd5dfec153

statistics: persist fields to vuex
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 08 May 2019 11:25:11 +0200
parents 505414dfe3e7
children cd076b7a2227
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Wed May 08 10:50:14 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Wed May 08 11:25:11 2019 +0200
@@ -27,10 +27,10 @@
  */
 import * as d3 from "d3";
 import app from "@/main";
-import { displayError } from "@/lib/errors";
 import debounce from "debounce";
 import { diagram } from "@/lib/mixins";
 import { mapState } from "vuex";
+import filters from "@/lib/filters.js";
 
 export default {
   mixins: [diagram],
@@ -56,15 +56,31 @@
     window.addEventListener("resize", debounce(this.drawDiagram), 100);
   },
   mounted() {
-    this.loadData();
+    this.drawDiagram();
   },
   computed: {
-    ...mapState("diagram", ["selectedFairwayAvailabilityFeature", "fwData"]),
+    ...mapState("diagram", [
+      "selectedFairwayAvailabilityFeature",
+      "fwData",
+      "from",
+      "to",
+      "frequency"
+    ]),
+    fromDate() {
+      return this.from;
+    },
+    toDate() {
+      return this.to;
+    },
     availability() {
       return this.plainAvailability;
     },
     title() {
-      return `Available Fairway Depth: ${this.featureName}`;
+      return `Available Fairway Depth: ${
+        this.featureName
+      } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate(
+        this.toDate
+      )}) ${this.frequency}`;
     },
     featureName() {
       return this.selectedFairwayAvailabilityFeature.properties.name;
@@ -74,23 +90,6 @@
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
-    loadData() {
-      this.$store
-        .dispatch("diagram/loadAvailableFairwayDepth", {
-          featureName: this.featureName
-        })
-        .then(() => {
-          this.drawDiagram();
-        })
-        .catch(error => {
-          console.log(error);
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    },
     drawDiagram() {
       this.dimensions = this.getDimensions();
       this.yScale = d3