Mercurial > gemma
changeset 3173:1287b031424c
statistics: sprinkled fairy dust on to bottleneck selection
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 06 May 2019 17:36:20 +0200 |
parents | 975efa874acf |
children | aeb9d6fc640a |
files | client/src/components/Statistics.vue |
diffstat | 1 files changed, 30 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Statistics.vue Mon May 06 16:54:46 2019 +0200 +++ b/client/src/components/Statistics.vue Mon May 06 17:36:20 2019 +0200 @@ -38,14 +38,17 @@ <option :value="null">{{ empty }}</option> <option v-for="(entry, index) in entries" - :value="index" + :value="entry" :key="index" >{{ entry.properties.name }}</option > </select> </div> <div class="mt-3"> - <button :disabled="selectedEntry == null" class="btn btn-info w-100"> + <button + :disabled="selectedEntry == null" + class="btn btn-info btn-sm w-100" + > <translate>Available Fairway Depth</translate> </button> </div> @@ -86,32 +89,39 @@ this.$store.commit("application/showStatistics", false); }, entrySelected() { - let feature = null; if (this.type === this.$options.BOTTLENECKS) { - feature = this.bottlenecksList[this.selectedEntry]; this.openLayersMap() .getLayer("BOTTLENECKS") .setVisible(true); + this.$store.dispatch( + "bottlenecks/setSelectedBottleneck", + this.selectedEntry.properties.name + ); } if (this.type === this.$options.STRETCHES) { - feature = this.stretches[this.selectedEntry]; this.openLayersMap() .getLayer("STRETCHES") .setVisible(true); } - if (feature) { + if (this.selectedEntry) { this.$store.dispatch("map/moveToFeauture", { - feature: feature, + feature: this.selectedEntry, zoom: 17, preventZoomOut: true }); } + }, + setSelectedBottleneck() { + const bn = this.bottlenecksList.filter( + x => x.properties.name === this.selectedBottleneck + )[0]; + this.selectedEntry = bn; } }, computed: { ...mapState("application", ["showStatistics", "paneSetup"]), ...mapState("imports", ["stretches"]), - ...mapState("bottlenecks", ["bottlenecksList"]), + ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), ...mapGetters("map", ["openLayersMap"]), entries() { if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList; @@ -123,15 +133,22 @@ }, empty() { if (this.type === this.$options.BOTTLENECKS) - return this.$gettext("Please choose a bottleneck"); + return this.$gettext("Select bottleneck"); if (this.type === this.$options.STRETCHES) - return this.$gettext("Please choose a strectch"); - return this.$gettext("Please choose a section"); + return this.$gettext("Select strectch"); + return this.$gettext("Select section"); } }, watch: { + selectedBottleneck() { + this.setSelectedBottleneck(); + }, type() { - this.selectedEntry = null; + if (this.selectedBottleneck) { + this.setSelectedBottleneck(); + } else { + this.selectedEntry = null; + } this.openLayersMap() .getLayer("STRETCHES") .setVisible(true); @@ -142,6 +159,7 @@ this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => { this.$store.dispatch("imports/loadStretches").then(() => { this.loading = false; + if (this.selectedBottleneck) this.setSelectedBottleneck(); }); }); }