Mercurial > gemma
changeset 4477:3724298001f8
AFDialogue: Instead of dynamically scroll use crosshairs button
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Wed, 25 Sep 2019 16:11:23 +0200 |
| parents | c1a02623f043 |
| children | 51dc4811a0e6 |
| files | client/src/components/fairway/AvailableFairwayDepthDialogue.vue |
| diffstat | 1 files changed, 76 insertions(+), 97 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Wed Sep 25 11:35:00 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Wed Sep 25 16:11:23 2019 +0200 @@ -56,57 +56,59 @@ </label> </div> </div> - <select - v-if="type === $options.BOTTLENECK" - @change="entrySelected" - class="form-control font-weight-bold" - v-model="selectedEntry" - > - <option :value="null">{{ placeholder }}</option> - <optgroup - v-for="(bottlenecksForCountry, cc) in orderedBottlenecks" - :key="cc" - :label="cc" + <div class="d-flex"> + <select + v-if="type === $options.BOTTLENECK" + class="form-control font-weight-bold" + v-model="selectedEntry" > + <option :value="null">{{ placeholder }}</option> + <optgroup + v-for="(bottlenecksForCountry, cc) in orderedBottlenecks" + :key="cc" + :label="cc" + > + <option + v-for="bn in bottlenecksForCountry" + :key="bn.properties.id" + :value="bn" + > + {{ bn.properties.name }} + </option> + </optgroup> + </select> + <select + v-else-if="type === $options.STRETCH" + class="form-control font-weight-bold" + v-model="selectedEntry" + > + <option :value="null">{{ placeholder }}</option> <option - v-for="bn in bottlenecksForCountry" - :key="bn.properties.id" - :value="bn" + v-for="stretch in stretches" + :value="stretch" + :key="stretch.id" > - {{ bn.properties.name }} + {{ stretch.properties.name }} </option> - </optgroup> - </select> - <select - v-else-if="type === $options.STRETCH" - @change="entrySelected" - class="form-control font-weight-bold" - v-model="selectedEntry" - > - <option :value="null">{{ placeholder }}</option> - <option - v-for="stretch in stretches" - :value="stretch" - :key="stretch.id" + </select> + <select + v-else-if="type === $options.SECTION" + class="form-control font-weight-bold" + v-model="selectedEntry" > - {{ stretch.properties.name }} - </option> - </select> - <select - v-else-if="type === $options.SECTION" - @change="entrySelected" - class="form-control font-weight-bold" - v-model="selectedEntry" - > - <option :value="null">{{ placeholder }}</option> - <option - v-for="section in sections" - :value="section" - :key="section.id" - > - {{ section.properties.name }} - </option> - </select> + <option :value="null">{{ placeholder }}</option> + <option + v-for="section in sections" + :value="section" + :key="section.id" + > + {{ section.properties.name }} + </option> + </select> + <button @click="takeMeThere" class="btn btn-sm btn-info"> + <font-awesome-icon icon="crosshairs" /> + </button> + </div> <div class="d-flex mt-2"> <div class="d-flex flex-column w-50 mr-1"> <small class="my-auto text-muted"> @@ -633,29 +635,6 @@ this.type = this.$options.SECTION; this.setSelectedSection(); }, - type(type) { - if (type === this.$options.BOTTLENECK && this.selectedBottleneck) { - this.openLayersMap() - .getLayer("BOTTLENECKS") - .setVisible(true); - this.setSelectedBottleneck(); - } else if (type === this.$options.STRETCH && this.selectedStretchId) { - this.openLayersMap() - .getLayer("STRETCHES") - .setVisible(true); - this.setSelectedStretch(); - } else if (type === this.$options.SECTION && this.selectedSectionId) { - this.openLayersMap() - .getLayer("SECTIONS") - .setVisible(true); - this.setSelectedSection(); - } else { - this.$store.commit( - "fairwayavailability/setSelectedFairwayAvailability", - null - ); - } - }, showFairwayDepth() { if (this.showFairwayDepth) { this.loading = true; @@ -673,6 +652,34 @@ } }, methods: { + takeMeThere() { + if (this.type === this.$options.BOTTLENECK) { + this.openLayersMap() + .getLayer("BOTTLENECKS") + .setVisible(true); + this.$store.dispatch( + "bottlenecks/setSelectedBottleneck", + this.selectedFairwayAvailabilityFeature.properties.name + ); + } + if (this.type === this.$options.STRETCH) { + this.openLayersMap() + .getLayer("STRETCHES") + .setVisible(true); + } + if (this.type === this.$options.SECTION) { + this.openLayersMap() + .getLayer("SECTIONS") + .setVisible(true); + } + if (this.selectedFairwayAvailabilityFeature) { + this.$store.dispatch("map/moveToFeauture", { + feature: this.selectedFairwayAvailabilityFeature, + zoom: 17, + preventZoomOut: true + }); + } + }, dateToQuarter(date) { return getQuarter(date); }, @@ -812,34 +819,6 @@ this.$store.commit("application/showFairwayDepth", false); this.$store.commit("application/showFairwayDepthLNWL", false); }, - entrySelected() { - if (this.type === this.$options.BOTTLENECK) { - this.openLayersMap() - .getLayer("BOTTLENECKS") - .setVisible(true); - this.$store.dispatch( - "bottlenecks/setSelectedBottleneck", - this.selectedFairwayAvailabilityFeature.properties.name - ); - } - if (this.type === this.$options.STRETCH) { - this.openLayersMap() - .getLayer("STRETCHES") - .setVisible(true); - } - if (this.type === this.$options.SECTION) { - this.openLayersMap() - .getLayer("SECTIONS") - .setVisible(true); - } - if (this.selectedFairwayAvailabilityFeature) { - this.$store.dispatch("map/moveToFeauture", { - feature: this.selectedFairwayAvailabilityFeature, - zoom: 17, - preventZoomOut: true - }); - } - }, setSelectedBottleneck() { const bn = this.bottlenecksList.filter( x => x.properties.name === this.selectedBottleneck