Mercurial > gemma
changeset 3184:1ba2a7d22fbb
available_fairway_depth: display selected feature
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 07 May 2019 16:59:11 +0200 |
parents | f64cc98746a1 |
children | 505414dfe3e7 |
files | client/src/components/Statistics.vue client/src/components/fairway/AvailableFairwayDepth.vue client/src/store/diagram.js client/src/store/fairway.js client/src/store/index.js |
diffstat | 5 files changed, 57 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Statistics.vue Tue May 07 16:30:20 2019 +0200 +++ b/client/src/components/Statistics.vue Tue May 07 16:59:11 2019 +0200 @@ -120,12 +120,12 @@ const bn = this.bottlenecksList.filter( x => x.properties.name === this.selectedBottleneck )[0]; - this.$store.commit("fairwayprofile/setSelectedFairwayAvailability", bn); + this.$store.commit("diagram/setSelectedFairwayAvailability", bn); } }, computed: { ...mapState("application", ["showStatistics", "paneSetup", "showProfiles"]), - ...mapState("fairwayprofile", ["selectedFairwayAvailabilityFeature"]), + ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]), ...mapState("imports", ["stretches"]), ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), ...mapGetters("map", ["openLayersMap"]), @@ -134,10 +134,7 @@ return this.selectedFairwayAvailabilityFeature; }, set(feature) { - this.$store.commit( - "fairwayprofile/setSelectedFairwayAvailability", - feature - ); + this.$store.commit("diagram/setSelectedFairwayAvailability", feature); } }, entries() { @@ -165,10 +162,7 @@ if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) { this.setSelectedBottleneck(); } else { - this.$store.commit( - "fairwayprofile/setSelectedFairwayAvailability", - null - ); + this.$store.commit("diagram/setSelectedFairwayAvailability", null); } this.openLayersMap() .getLayer("STRETCHES")
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 07 16:30:20 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue May 07 16:59:11 2019 +0200 @@ -1,8 +1,8 @@ <template> - <div> - <h1>Available Fairway Depth</h1> + <div class="d-flex flex-column flex-fill"> + <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> <UISpinnerOverlay v-if="loading" /> - <div class="d-flex flex-row"> + <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"> @@ -52,6 +52,7 @@ 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 @@ -88,11 +89,21 @@ this.loadData(); }, computed: { + ...mapState("diagram", ["selectedFairwayAvailabilityFeature"]), availability() { return this.plainAvailability; + }, + title() { + return `Available Fairway Depth: ${this.featureName}`; + }, + featureName() { + return this.selectedFairwayAvailabilityFeature.properties.name; } }, methods: { + close() { + this.$store.commit("application/paneSetup", "DEFAULT"); + }, prepareLegend(header) { const headerEntries = header.split(","); headerEntries.shift(); @@ -118,8 +129,9 @@ this.fwData = transformed; }, loadData() { - const URL = - "/data/bottleneck/fairway-depth/Furt%20Wendeplatz%20Theben?from=2019-01-01T15:04:05%2b00:00&to=2019-05-02T15:04:05%2b07:00&mode=monthly"; + 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") } })
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/store/diagram.js Tue May 07 16:59:11 2019 +0200 @@ -0,0 +1,32 @@ +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + */ + +const init = () => { + return { + selectedFairwayAvailabilityFeature: null + }; +}; + +const diagram = { + init, + namespaced: true, + state: init(), + mutations: { + setSelectedFairwayAvailability: (state, feature) => { + state.selectedFairwayAvailabilityFeature = feature; + } + } +}; + +export { diagram };
--- a/client/src/store/fairway.js Tue May 07 16:30:20 2019 +0200 +++ b/client/src/store/fairway.js Tue May 07 16:59:11 2019 +0200 @@ -37,8 +37,7 @@ previousCuts: [], profileLoading: false, selectedCut: null, - differencesLoading: false, - selectedFairwayAvailabilityFeature: null + differencesLoading: false }; }; @@ -58,9 +57,6 @@ } }, mutations: { - setSelectedFairwayAvailability: (state, feature) => { - state.selectedFairwayAvailabilityFeature = feature; - }, additionalSurvey: (state, additionalSurvey) => { state.additionalSurvey = additionalSurvey; },
--- a/client/src/store/index.js Tue May 07 16:30:20 2019 +0200 +++ b/client/src/store/index.js Tue May 07 16:59:11 2019 +0200 @@ -23,6 +23,7 @@ import bottlenecks from "./bottlenecks"; import { imports } from "./imports"; import { importschedule } from "./importschedule"; +import { diagram } from "./diagram"; import gauges from "./gauges"; Vue.use(Vuex); @@ -32,6 +33,7 @@ reset() { this.replaceState({ application: application.init(), + diagram: diagram.init(), fairwayprofile: fairwayprofile.init(), imports: imports.init(), importschedule: importschedule.init(), @@ -45,6 +47,7 @@ }, modules: { application, + diagram, fairwayprofile, imports, importschedule,