Mercurial > gemma
changeset 2829:4a1211727d5f
client: spuc8: implemented year controls
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 27 Mar 2019 14:30:09 +0100 |
parents | c2b90cb426ed |
children | 0632d543a427 |
files | client/src/components/gauge/Gauges.vue client/src/components/gauge/HydrologicalConditions.vue client/src/store/gauges.js |
diffstat | 3 files changed, 48 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue Wed Mar 27 14:20:00 2019 +0100 +++ b/client/src/components/gauge/Gauges.vue Wed Mar 27 14:30:09 2019 +0100 @@ -67,7 +67,20 @@ > <translate>Show Waterlevels</translate> </button> - <hr /> + <hr class="mb-1" /> + <div class="row no-gutters mb-2"> + <small class="text-muted"> + <translate>Compare to</translate>: + </small> + <input + type="number" + step="1" + min="1900" + :max="new Date().getFullYear()" + class="form-control form-control-sm small" + v-model="yearCompare" + /> + </div> <button @click="showHydrologicalConditionsDiagram()" class="btn btn-sm btn-info d-block w-100 mt-2" @@ -145,6 +158,14 @@ set(date) { this.$store.commit("gauges/dateTo", date); } + }, + yearCompare: { + get() { + return this.$store.state.gauges.yearCompare; + }, + set(year) { + this.$store.commit("gauges/yearCompare", year); + } } }, watch: { @@ -254,10 +275,7 @@ Promise.all([ this.$store.dispatch("gauges/loadLongtermWaterlevels"), - this.$store.dispatch( - "gauges/loadYearWaterlevels", - new Date().getFullYear() - ) + this.$store.dispatch("gauges/loadYearWaterlevels") ]) .catch(error => { const { status, data } = error.response;
--- a/client/src/components/gauge/HydrologicalConditions.vue Wed Mar 27 14:20:00 2019 +0100 +++ b/client/src/components/gauge/HydrologicalConditions.vue Wed Mar 27 14:30:09 2019 +0100 @@ -123,7 +123,11 @@ }; }, computed: { - ...mapState("gauges", ["longtermWaterlevels", "yearWaterlevels"]), + ...mapState("gauges", [ + "longtermWaterlevels", + "yearWaterlevels", + "yearCompare" + ]), ...mapGetters("gauges", ["selectedGauge"]) }, methods: { @@ -622,7 +626,7 @@ .attr("dy", "1.3rem") .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle") - .text("Q75%: " + d.q75 + " cm"); + .text(`Q75%: ${d.q75} cm`); tooltipText .append("tspan") .attr("x", 0) @@ -630,7 +634,7 @@ .attr("dy", "2.3rem") .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle") - .text("Median: " + d.median + " cm"); + .text(`Median: ${d.median} cm`); tooltipText .append("tspan") .attr("x", 0) @@ -638,7 +642,7 @@ .attr("dy", "3.3rem") .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle") - .text("Q25%: " + d.q25 + " cm"); + .text(`Q25%: ${d.q25} cm`); tooltipText .append("tspan") .attr("x", 0) @@ -646,7 +650,7 @@ .attr("dy", "4.3rem") .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle") - .text("Max: " + d.max + " cm"); + .text(`Max: ${d.max} cm`); tooltipText .append("tspan") .attr("x", 0) @@ -654,7 +658,7 @@ .attr("dy", "5.3rem") .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle") - .text("Min: " + d.min + " cm"); + .text(`Min: ${d.min} cm`); const dYear = this.yearWaterlevels.find( ywl => ywl.date.getTime() === d.date.getTime() @@ -667,7 +671,7 @@ .attr("dy", "6.3rem") .attr("alignment-baseline", "hanging") .attr("text-anchor", "middle") - .text("Year: " + dYear.mean.toFixed(1) + " cm"); + .text(`${this.yearCompare}: ${dYear.mean.toFixed(1)} cm`); } // get text dimensions
--- a/client/src/store/gauges.js Wed Mar 27 14:20:00 2019 +0100 +++ b/client/src/store/gauges.js Wed Mar 27 14:30:09 2019 +0100 @@ -29,7 +29,8 @@ yearWaterlevels: [], nashSutcliffe: null, dateFrom: dateFrom, - dateTo: dateTo + dateTo: dateTo, + yearCompare: new Date().getFullYear() }; }; @@ -68,6 +69,9 @@ }, dateTo: (state, dateTo) => { state.dateTo = dateTo; + }, + yearCompare: (state, year) => { + state.yearCompare = year; } }, actions: { @@ -183,11 +187,16 @@ }); }); }, - loadYearWaterlevels({ state, commit }, year) { + loadYearWaterlevels({ state, commit }) { return new Promise((resolve, reject) => { - HTTP.get(`/data/year-waterlevels/${state.selectedGaugeISRS}/${year}`, { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) + HTTP.get( + `/data/year-waterlevels/${state.selectedGaugeISRS}/${ + state.yearCompare + }`, + { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + } + ) .then(response => { const now = new Date(); let data = response.data