Mercurial > gemma

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
3190:54a3e40cfbed 3191:c0cd5dfec153
25 * Thomas Junk <thomas.junk@intevation.de> 25 * Thomas Junk <thomas.junk@intevation.de>
26 * Markus Kottländer <markus.kottlaender@intevation.de> 26 * Markus Kottländer <markus.kottlaender@intevation.de>
27 */ 27 */
28 import * as d3 from "d3"; 28 import * as d3 from "d3";
29 import app from "@/main"; 29 import app from "@/main";
30 import { displayError } from "@/lib/errors";
31 import debounce from "debounce"; 30 import debounce from "debounce";
32 import { diagram } from "@/lib/mixins"; 31 import { diagram } from "@/lib/mixins";
33 import { mapState } from "vuex"; 32 import { mapState } from "vuex";
33 import filters from "@/lib/filters.js";
34 34
35 export default { 35 export default {
36 mixins: [diagram], 36 mixins: [diagram],
37 data() { 37 data() {
38 return { 38 return {
54 }, 54 },
55 created() { 55 created() {
56 window.addEventListener("resize", debounce(this.drawDiagram), 100); 56 window.addEventListener("resize", debounce(this.drawDiagram), 100);
57 }, 57 },
58 mounted() { 58 mounted() {
59 this.loadData(); 59 this.drawDiagram();
60 }, 60 },
61 computed: { 61 computed: {
62 ...mapState("diagram", ["selectedFairwayAvailabilityFeature", "fwData"]), 62 ...mapState("diagram", [
63 "selectedFairwayAvailabilityFeature",
64 "fwData",
65 "from",
66 "to",
67 "frequency"
68 ]),
69 fromDate() {
70 return this.from;
71 },
72 toDate() {
73 return this.to;
74 },
63 availability() { 75 availability() {
64 return this.plainAvailability; 76 return this.plainAvailability;
65 }, 77 },
66 title() { 78 title() {
67 return `Available Fairway Depth: ${this.featureName}`; 79 return `Available Fairway Depth: ${
80 this.featureName
81 } (${filters.surveyDate(this.fromDate)} - ${filters.surveyDate(
82 this.toDate
83 )}) ${this.frequency}`;
68 }, 84 },
69 featureName() { 85 featureName() {
70 return this.selectedFairwayAvailabilityFeature.properties.name; 86 return this.selectedFairwayAvailabilityFeature.properties.name;
71 } 87 }
72 }, 88 },
73 methods: { 89 methods: {
74 close() { 90 close() {
75 this.$store.commit("application/paneSetup", "DEFAULT"); 91 this.$store.commit("application/paneSetup", "DEFAULT");
76 },
77 loadData() {
78 this.$store
79 .dispatch("diagram/loadAvailableFairwayDepth", {
80 featureName: this.featureName
81 })
82 .then(() => {
83 this.drawDiagram();
84 })
85 .catch(error => {
86 console.log(error);
87 const { status, data } = error.response;
88 displayError({
89 title: this.$gettext("Backend Error"),
90 message: `${status}: ${data.message || data}`
91 });
92 });
93 }, 92 },
94 drawDiagram() { 93 drawDiagram() {
95 this.dimensions = this.getDimensions(); 94 this.dimensions = this.getDimensions();
96 this.yScale = d3 95 this.yScale = d3
97 .scaleLinear() 96 .scaleLinear()