Mercurial > gemma

comparison client/src/components/gauge/Gauges.vue @ 4478:51dc4811a0e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 acb21e7362ce
children 008bc1ae8897
comparison
equal deleted inserted replaced
4477:3724298001f8 4478:51dc4811a0e6
11 :title="gaugesLabel" 11 :title="gaugesLabel"
12 :closeCallback="close" 12 :closeCallback="close"
13 /> 13 />
14 <div class="box-body"> 14 <div class="box-body">
15 <UISpinnerOverlay v-if="loading" /> 15 <UISpinnerOverlay v-if="loading" />
16 <select 16 <div class="d-flex">
17 v-model="selectedGaugeISRS" 17 <select
18 class="form-control font-weight-bold" 18 v-model="selectedGaugeISRS"
19 > 19 class="form-control font-weight-bold"
20 <option :value="null">
21 <translate>Select Gauge</translate>
22 </option>
23 <optgroup
24 v-for="(gaugesForCountry, cc) in orderedGauges"
25 :key="cc"
26 :label="cc"
27 > 20 >
28 <option 21 <option :value="null">
29 v-for="g in gaugesForCountry" 22 <translate>Select Gauge</translate>
30 :key="g.properties.isrs_code" 23 </option>
31 :value="g.properties.isrs_code" 24 <optgroup
25 v-for="(gaugesForCountry, cc) in orderedGauges"
26 :key="cc"
27 :label="cc"
32 > 28 >
33 {{ gaugeLabel(g) }} 29 <option
34 </option> 30 v-for="g in gaugesForCountry"
35 </optgroup> 31 :key="g.properties.isrs_code"
36 </select> 32 :value="g.properties.isrs_code"
33 >
34 {{ gaugeLabel(g) }}
35 </option>
36 </optgroup>
37 </select>
38 <button @click="takeMeThere" class="btn btn-sm btn-info">
39 <font-awesome-icon icon="crosshairs" />
40 </button>
41 </div>
37 <div v-if="selectedGaugeISRS" class="mt-2"> 42 <div v-if="selectedGaugeISRS" class="mt-2">
38 <hr class="mb-1" /> 43 <hr class="mb-1" />
39 <div class="row no-gutters mb-2"> 44 <div class="row no-gutters mb-2">
40 <div class="col-6 pr-1"> 45 <div class="col-6 pr-1">
41 <small class="text-muted"><translate>From</translate>:</small> 46 <small class="text-muted"><translate>From</translate>:</small>
143 selectedGaugeISRS: { 148 selectedGaugeISRS: {
144 get() { 149 get() {
145 return this.$store.state.gauges.selectedGaugeISRS; 150 return this.$store.state.gauges.selectedGaugeISRS;
146 }, 151 },
147 set(isrs) { 152 set(isrs) {
148 this.$store.dispatch("gauges/selectedGaugeISRS", isrs); 153 this.$store.dispatch("gauges/setSelectedGaugeISRS", isrs);
149 } 154 }
150 }, 155 },
151 dateFrom: { 156 dateFrom: {
152 get() { 157 get() {
153 return this.$store.state.gauges.dateFrom; 158 return this.$store.state.gauges.dateFrom;
173 } 178 }
174 } 179 }
175 }, 180 },
176 watch: { 181 watch: {
177 selectedGaugeISRS(gauge) { 182 selectedGaugeISRS(gauge) {
178 if (gauge) { 183 if (!gauge) {
179 let coordinates = this.selectedGauge.geometry.coordinates;
180 this.$store.dispatch("map/moveMap", {
181 coordinates,
182 zoom: 15,
183 preventZoomOut: true
184 });
185 } else {
186 this.$store.commit("application/paneSetup", "DEFAULT"); 184 this.$store.commit("application/paneSetup", "DEFAULT");
187 } 185 }
188 } 186 }
189 }, 187 },
190 methods: { 188 methods: {
189 takeMeThere() {
190 let coordinates = this.selectedGauge.geometry.coordinates;
191 this.$store.dispatch("map/moveMap", {
192 coordinates,
193 zoom: 15,
194 preventZoomOut: true
195 });
196 },
191 close() { 197 close() {
192 this.$store.commit("application/showGauges", false); 198 this.$store.commit("application/showGauges", false);
193 }, 199 },
194 showWaterlevelDiagram() { 200 showWaterlevelDiagram() {
195 this.loading = true; 201 this.loading = true;