Mercurial > gemma
changeset 3172:975efa874acf
statistic: choice between bottlenecks and stretches implemented
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 06 May 2019 16:54:46 +0200 |
parents | c8ded555c2a8 |
children | 1287b031424c |
files | client/src/components/Statistics.vue client/src/components/fairway/Profiles.vue |
diffstat | 2 files changed, 100 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Statistics.vue Mon May 06 16:36:03 2019 +0200 +++ b/client/src/components/Statistics.vue Mon May 06 16:54:46 2019 +0200 @@ -9,12 +9,46 @@ <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" /> <div class="box-body"> <UISpinnerOverlay v-if="loading" /> + <div class="mb-3 d-flex flex-row justify-content-between"> + <div> + <input :value="$options.BOTTLENECKS" type="radio" v-model="type" /> + <small class="ml-1 text-muted"> + <translate>Bottlenecks</translate> + </small> + </div> + <div> + <input :value="$options.STRETCHES" type="radio" v-model="type" /> + <small class="ml-1 text-muted"> + <translate>Stretches</translate> + </small> + </div> + <div> + <input :value="$options.SECTIONS" type="radio" v-model="type" /> + <small class="ml-1 text-muted"> + <translate>Sections</translate> + </small> + </div> + </div> <div class="d-flex flex-column"> - <select class="form-control font-weight-bold" v-model="type"> - <option :value="null">{{ $options.TYPES.EMPTY }}</option> - <option>{{ $options.TYPES.AVAILABLEFAIRWAYDEPTH }}</option> + <select + @change="entrySelected" + class="form-control font-weight-bold" + v-model="selectedEntry" + > + <option :value="null">{{ empty }}</option> + <option + v-for="(entry, index) in entries" + :value="index" + :key="index" + >{{ entry.properties.name }}</option + > </select> </div> + <div class="mt-3"> + <button :disabled="selectedEntry == null" class="btn btn-info w-100"> + <translate>Available Fairway Depth</translate> + </button> + </div> </div> </div> </div> @@ -37,30 +71,86 @@ */ import app from "@/main"; -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { data() { return { - type: null, + type: this.$options.BOTTLENECKS, + selectedEntry: null, loading: false }; }, methods: { close() { 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); + } + if (this.type === this.$options.STRETCHES) { + feature = this.stretches[this.selectedEntry]; + this.openLayersMap() + .getLayer("STRETCHES") + .setVisible(true); + } + if (feature) { + this.$store.dispatch("map/moveToFeauture", { + feature: feature, + zoom: 17, + preventZoomOut: true + }); + } } }, computed: { ...mapState("application", ["showStatistics", "paneSetup"]), + ...mapState("imports", ["stretches"]), + ...mapState("bottlenecks", ["bottlenecksList"]), + ...mapGetters("map", ["openLayersMap"]), + entries() { + if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList; + if (this.type === this.$options.STRETCHES) return this.stretches; + return []; + }, label() { return this.$gettext("Statistics"); + }, + empty() { + if (this.type === this.$options.BOTTLENECKS) + return this.$gettext("Please choose a bottleneck"); + if (this.type === this.$options.STRETCHES) + return this.$gettext("Please choose a strectch"); + return this.$gettext("Please choose a section"); } }, - TYPES: { - AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), - EMPTY: app.$gettext("Please choose statistic") - } + watch: { + type() { + this.selectedEntry = null; + this.openLayersMap() + .getLayer("STRETCHES") + .setVisible(true); + }, + showStatistics() { + if (this.showStatistics) { + this.loading = true; + this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => { + this.$store.dispatch("imports/loadStretches").then(() => { + this.loading = false; + }); + }); + } + } + }, + BOTTLENECKS: "bottlenecks", + SECTIONS: "sections", + STRETCHES: "stretches", + AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth") }; </script>
--- a/client/src/components/fairway/Profiles.vue Mon May 06 16:36:03 2019 +0200 +++ b/client/src/components/fairway/Profiles.vue Mon May 06 16:54:46 2019 +0200 @@ -330,7 +330,7 @@ return orderedGroups; }, profilesLable() { - return this.$gettext("Profiles"); + return this.$gettext("Bottleneck"); }, selectedBottleneck: { get() {