Mercurial > gemma
changeset 3191:c0cd5dfec153
statistics: persist fields to vuex
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 08 May 2019 11:25:11 +0200 |
parents | 54a3e40cfbed |
children | cd076b7a2227 |
files | client/src/components/Statistics.vue client/src/components/fairway/AvailableFairwayDepth.vue client/src/store/diagram.js |
diffstat | 3 files changed, 116 insertions(+), 33 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Statistics.vue Wed May 08 10:50:14 2019 +0200 +++ b/client/src/components/Statistics.vue Wed May 08 11:25:11 2019 +0200 @@ -49,27 +49,35 @@ <small class="my-auto text-muted" ><translate>Type</translate></small > - <select class="form-control"> - <option>Monthly</option> - <option>Quaterly</option> - <option>Yearly</option> + <select v-model="selectedFrequency" class="form-control"> + <option + v-for="(option, index) in $options.FREQUENCIES" + :value="option" + :key="index" + ><translate>{{ option }}</translate></option + > </select> </div> <div class="d-flex flex-column mb-3"> <small for="from" class="my-auto text-muted" ><translate>Date from</translate></small - ><input id="from" class="form-control" type="date" /> + ><input + id="from" + v-model="fromDate" + class="form-control" + type="date" + /> </div> <div class="d-flex flex-column"> <small for="to" class="my-auto text-muted" ><translate>Date to</translate></small - ><input id="to" class="form-control" type="date" /> + ><input id="to" v-model="toDate" class="form-control" type="date" /> </div> </div> <div class="mt-3"> <button @click="openFairwaydepth" - :disabled="selectedEntry == null" + :disabled="isComplete" class="btn btn-info btn-sm w-100" > <translate>Available Fairway Depth</translate> @@ -97,6 +105,7 @@ */ import app from "@/main"; +import { displayError } from "@/lib/errors"; import { mapState, mapGetters } from "vuex"; export default { @@ -108,7 +117,26 @@ }, methods: { openFairwaydepth() { - this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH"); + this.loading = true; + this.$store + .dispatch("diagram/loadAvailableFairwayDepth", { + feature: this.selectedFairwayAvailabilityFeature, + from: this.from, + to: this.to, + frequency: this.frequency + }) + .then(() => { + this.loading = false; + this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH"); + }) + .catch(error => { + console.log(error); + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); }, close() { this.$store.commit("application/showStatistics", false); @@ -147,10 +175,47 @@ }, computed: { ...mapState("application", ["showStatistics", "paneSetup", "showProfiles"]), - ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]), + ...mapState("diagram", [ + "selectedFairwayAvailabilityFeature", + "from", + "to", + "frequency" + ]), ...mapState("imports", ["stretches"]), ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), ...mapGetters("map", ["openLayersMap"]), + isComplete() { + return ( + this.from == null || + this.to == null || + this.frequency == null || + this.selectedFairwayAvailabilityFeature == null + ); + }, + fromDate: { + get() { + return this.from; + }, + set(value) { + this.$store.commit("diagram/setFrom", value); + } + }, + toDate: { + get() { + return this.to; + }, + set(value) { + this.$store.commit("diagram/setTo", value); + } + }, + selectedFrequency: { + get() { + return this.frequency; + }, + set(value) { + this.$store.commit("diagram/setFrequency", value); + } + }, selectedEntry: { get() { return this.selectedFairwayAvailabilityFeature; @@ -205,7 +270,12 @@ BOTTLENECKS: "bottlenecks", SECTIONS: "sections", STRETCHES: "stretches", - AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth") + AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), + FREQUENCIES: { + MONTHLY: "monthly", + QUARTERLY: "quarterly", + YEARLY: "yearly" + } }; </script>
--- 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
--- a/client/src/store/diagram.js Wed May 08 10:50:14 2019 +0200 +++ b/client/src/store/diagram.js Wed May 08 11:25:11 2019 +0200 @@ -24,6 +24,9 @@ const init = () => { return { selectedFairwayAvailabilityFeature: null, + from: null, + to: null, + frequency: null, fwData: null, legend: null }; @@ -34,6 +37,15 @@ namespaced: true, state: init(), mutations: { + setFrequency: (state, frequency) => { + state.frequency = frequency; + }, + setFrom: (state, from) => { + state.from = from; + }, + setTo: (state, to) => { + state.to = to; + }, setSelectedFairwayAvailability: (state, feature) => { state.selectedFairwayAvailabilityFeature = feature; }, @@ -51,8 +63,10 @@ actions: { loadAvailableFairwayDepth: ({ commit }, options) => { return new Promise((resolve, reject) => { - const { featureName } = options; - const URL = `/data/bottleneck/fairway-depth/${featureName}?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`; + const { feature, from, to, frequency } = options; + const URL = `/data/bottleneck/fairway-depth/${ + feature.properties.name + }?from=${from}T00:00:00%2b00:00&to=${to}T23:59:59%2b07:00&mode=${frequency}`; HTTP.get(URL, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } })