Mercurial > gemma
changeset 3185:505414dfe3e7
available_fairway_depth: move statistic dialog to store
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 07 May 2019 17:38:25 +0200 |
parents | 1ba2a7d22fbb |
children | 928cdc06ff37 |
files | client/src/components/Statistics.vue client/src/components/fairway/AvailableFairwayDepth.vue client/src/store/diagram.js |
diffstat | 3 files changed, 84 insertions(+), 66 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Statistics.vue Tue May 07 16:59:11 2019 +0200 +++ b/client/src/components/Statistics.vue Tue May 07 17:38:25 2019 +0200 @@ -44,6 +44,28 @@ > </select> </div> + <div class="d-flex flex-column mt-3"> + <div class="d-flex flex-column mb-3"> + <small class="my-auto text-muted" + ><translate>Type</translate></small + > + <select class="form-control"> + <option>Monthly</option> + <option>Quaterly</option> + <option>Yearly</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" /> + </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" /> + </div> + </div> <div class="mt-3"> <button @click="openFairwaydepth"
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 07 16:59:11 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 07 17:38:25 2019 +0200 @@ -2,29 +2,8 @@ <div class="d-flex flex-column flex-fill"> <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> <UISpinnerOverlay v-if="loading" /> - <div class="mt-3 d-flex flex-row"> - <div class="d-flex flex-column mr-auto"> - <div class="d-flex flex-row"> - <div class="mr-3 my-auto ml-auto"> - <select class="form-control mr-3"> - <option>Monthly</option> - <option>Quaterly</option> - <option>Yearly</option> - </select> - </div> - <div class="d-flex flex-row mr-3"> - <label for="from" class="my-auto mr-3" - ><translate>from</translate></label - ><input class="form-control" type="date" /> - </div> - <div class="d-flex flex-row mr-auto"> - <label for="to" class="my-auto mr-3" - ><translate>to</translate></label - ><input class="form-control" type="date" /> - </div> - </div> - <div :id="containerId" class="diagram-container"></div> - </div> + <div class="mt-3 d-flex flex-row my-auto"> + <div :id="containerId" class="diagram-container"></div> </div> </div> </template> @@ -50,24 +29,15 @@ import app from "@/main"; import { displayError } from "@/lib/errors"; import debounce from "debounce"; -import { HTTP } from "@/lib/http"; import { diagram } from "@/lib/mixins"; import { mapState } from "vuex"; -const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h] -01-2019, 22.000,1.000, 4.000,6.000, 20.000 -02-2019, 24.000,0.000,0.000,0.000, 23.000 -03-2019, 30.000,0.000,0.000,0.000, 30.000 -04-2019, 30.000,0.000,0.000,0.000, 30.000 -05-2019, 30.000,0.000,0.000,0.000, 30.000`; - export default { mixins: [diagram], data() { return { containerId: "availablefairwaydepth", loading: false, - fwData: null, width: 1000, height: 600, paddingRight: 100, @@ -89,7 +59,7 @@ this.loadData(); }, computed: { - ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]), + ...mapState("diagram", ["selectedFairwayAvailabilityFeature", "fwData"]), availability() { return this.plainAvailability; }, @@ -104,40 +74,12 @@ close() { this.$store.commit("application/paneSetup", "DEFAULT"); }, - prepareLegend(header) { - const headerEntries = header.split(","); - headerEntries.shift(); - return headerEntries.map(x => { - return x.split("#")[1].trim(); - }); - }, - prepare(data) { - const csv = data.split("\n"); - this.legend = this.prepareLegend(csv.shift()); - let transformed = csv.map(e => { - const result = e.split(","); - const label = result.shift(); - const ldc = result.shift(); - const highestLevel = result.pop(); - return { - label: label, - ldc: ldc, - highestLevel: highestLevel, - lowerLevels: result - }; - }); - this.fwData = transformed; - }, loadData() { - const URL = `/data/bottleneck/fairway-depth/${ - this.featureName - }?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly`; - HTTP.get(URL, { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) + this.$store + .dispatch("diagram/loadAvailableFairwayDepth", { + featureName: this.featureName + }) .then(() => { - // const { data } = response; - this.prepare(MOCKDATA); this.drawDiagram(); }) .catch(error => {
--- a/client/src/store/diagram.js Tue May 07 16:59:11 2019 +0200 +++ b/client/src/store/diagram.js Tue May 07 17:38:25 2019 +0200 @@ -12,9 +12,20 @@ * Thomas Junk <thomas.junk@intevation.de> */ +import { HTTP } from "@/lib/http"; + +const MOCKDATA = `#label,# >= LDC [h],# < 200.00 [h],# >= 200.00 [h],# >= 230.00 [h],# >= 250.00 [h] +01-2019, 22.000,1.000, 4.000,6.000, 20.000 +02-2019, 24.000,0.000,0.000,0.000, 23.000 +03-2019, 30.000,0.000,0.000,0.000, 30.000 +04-2019, 30.000,0.000,0.000,0.000, 30.000 +05-2019, 30.000,0.000,0.000,0.000, 30.000`; + const init = () => { return { - selectedFairwayAvailabilityFeature: null + selectedFairwayAvailabilityFeature: null, + fwData: null, + legend: null }; }; @@ -25,6 +36,49 @@ mutations: { setSelectedFairwayAvailability: (state, feature) => { state.selectedFairwayAvailabilityFeature = feature; + }, + setFwData: (state, fwData) => { + state.fwData = fwData; + }, + setLegend: (state, header) => { + const headerEntries = header.split(","); + headerEntries.shift(); + state.legend = headerEntries.map(x => { + return x.split("#")[1].trim(); + }); + } + }, + 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`; + HTTP.get(URL, { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + const data = MOCKDATA; + const csv = data.split("\n"); + commit("setLegend", csv.shift()); + let transformed = csv.map(e => { + const result = e.split(","); + const label = result.shift(); + const ldc = result.shift(); + const highestLevel = result.pop(); + return { + label: label, + ldc: ldc, + highestLevel: highestLevel, + lowerLevels: result + }; + }); + commit("setFwData", transformed); + resolve(response); + }) + .catch(error => { + reject(error); + }); + }); } } };