Mercurial > gemma
changeset 4478:51dc4811a0e6
Gauges: Instead of dynamically scroll use crosshairs button
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 25 Sep 2019 16:52:40 +0200 |
parents | 3724298001f8 |
children | 2d2c9f98360a |
files | client/src/components/gauge/Gauges.vue client/src/store/gauges.js |
diffstat | 2 files changed, 39 insertions(+), 28 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Gauges.vue Wed Sep 25 16:11:23 2019 +0200 +++ b/client/src/components/gauge/Gauges.vue Wed Sep 25 16:52:40 2019 +0200 @@ -13,27 +13,32 @@ /> <div class="box-body"> <UISpinnerOverlay v-if="loading" /> - <select - v-model="selectedGaugeISRS" - class="form-control font-weight-bold" - > - <option :value="null"> - <translate>Select Gauge</translate> - </option> - <optgroup - v-for="(gaugesForCountry, cc) in orderedGauges" - :key="cc" - :label="cc" + <div class="d-flex"> + <select + v-model="selectedGaugeISRS" + class="form-control font-weight-bold" > - <option - v-for="g in gaugesForCountry" - :key="g.properties.isrs_code" - :value="g.properties.isrs_code" + <option :value="null"> + <translate>Select Gauge</translate> + </option> + <optgroup + v-for="(gaugesForCountry, cc) in orderedGauges" + :key="cc" + :label="cc" > - {{ gaugeLabel(g) }} - </option> - </optgroup> - </select> + <option + v-for="g in gaugesForCountry" + :key="g.properties.isrs_code" + :value="g.properties.isrs_code" + > + {{ gaugeLabel(g) }} + </option> + </optgroup> + </select> + <button @click="takeMeThere" class="btn btn-sm btn-info"> + <font-awesome-icon icon="crosshairs" /> + </button> + </div> <div v-if="selectedGaugeISRS" class="mt-2"> <hr class="mb-1" /> <div class="row no-gutters mb-2"> @@ -145,7 +150,7 @@ return this.$store.state.gauges.selectedGaugeISRS; }, set(isrs) { - this.$store.dispatch("gauges/selectedGaugeISRS", isrs); + this.$store.dispatch("gauges/setSelectedGaugeISRS", isrs); } }, dateFrom: { @@ -175,19 +180,20 @@ }, watch: { selectedGaugeISRS(gauge) { - if (gauge) { - let coordinates = this.selectedGauge.geometry.coordinates; - this.$store.dispatch("map/moveMap", { - coordinates, - zoom: 15, - preventZoomOut: true - }); - } else { + if (!gauge) { this.$store.commit("application/paneSetup", "DEFAULT"); } } }, methods: { + takeMeThere() { + let coordinates = this.selectedGauge.geometry.coordinates; + this.$store.dispatch("map/moveMap", { + coordinates, + zoom: 15, + preventZoomOut: true + }); + }, close() { this.$store.commit("application/showGauges", false); },
--- a/client/src/store/gauges.js Wed Sep 25 16:11:23 2019 +0200 +++ b/client/src/store/gauges.js Wed Sep 25 16:52:40 2019 +0200 @@ -131,6 +131,11 @@ }); }); }, + setSelectedGaugeISRS: ({ commit, state }, isrs) => { + if (state.selectedGaugeISRS !== isrs) { + commit("selectedGaugeISRS", isrs); + } + }, selectedGaugeISRS: ({ commit, dispatch, state }, isrs) => { if (state.selectedGaugeISRS !== isrs) { commit("selectedGaugeISRS", isrs);