Mercurial > gemma

comparison client/src/components/gauge/Gauges.vue @ 2604:85f9bf4a6eba

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: gauge waterlevel diagram: draw reference waterlevels
author Markus Kottlaender <markus@intevation.de>
date Tue, 12 Mar 2019 17:08:07 +0100
parents 5fa1ad39e1bc
children ffef5f89b31c
comparison
equal deleted inserted replaced
2603:8d767359fddb 2604:85f9bf4a6eba
18 > 18 >
19 <font-awesome-icon icon="spinner" spin /> 19 <font-awesome-icon icon="spinner" spin />
20 </div> 20 </div>
21 <select 21 <select
22 @change="moveToGauge" 22 @change="moveToGauge"
23 v-model="selectedGauge" 23 v-model="selectedGaugeName"
24 class="form-control font-weight-bold" 24 class="form-control font-weight-bold"
25 > 25 >
26 <option :value="null"> 26 <option :value="null">
27 <translate>Select Gauge</translate> 27 <translate>Select Gauge</translate>
28 </option> 28 </option>
32 :value="g.properties.objname" 32 :value="g.properties.objname"
33 > 33 >
34 {{ g.properties.objname }} 34 {{ g.properties.objname }}
35 </option> 35 </option>
36 </select> 36 </select>
37 <div v-if="selectedGauge" class="mt-2"> 37 <div v-if="selectedGaugeName" class="mt-2">
38 <hr class="mb-1" /> 38 <hr class="mb-1" />
39 <small class="text-muted"> 39 <small class="text-muted">
40 <translate>Time period</translate>: 40 <translate>Time period</translate>:
41 </small> 41 </small>
42 <select 42 <select
88 * Software engineering by Intevation GmbH 88 * Software engineering by Intevation GmbH
89 * 89 *
90 * Author(s): 90 * Author(s):
91 * Markus Kottländer <markus.kottlaender@intevation.de> 91 * Markus Kottländer <markus.kottlaender@intevation.de>
92 */ 92 */
93 import { mapState } from "vuex"; 93 import { mapState, mapGetters } from "vuex";
94 94
95 export default { 95 export default {
96 data() { 96 data() {
97 return { 97 return {
98 loading: false, 98 loading: false,
99 waterlevelsTimePeriod: "day" 99 waterlevelsTimePeriod: "day"
100 }; 100 };
101 }, 101 },
102 computed: { 102 computed: {
103 ...mapState("application", ["showGauges"]), 103 ...mapState("application", ["showGauges"]),
104 ...mapState("gauges", ["gauges", "selectedGauge"]), 104 ...mapState("gauges", ["gauges"]),
105 selectedGauge: { 105 ...mapGetters("gauges", ["selectedGauge"]),
106 selectedGaugeName: {
106 get() { 107 get() {
107 return this.$store.state.gauges.selectedGauge; 108 return this.$store.state.gauges.selectedGaugeName;
108 }, 109 },
109 set(name) { 110 set(name) {
110 this.$store.dispatch("gauges/selectedGauge", name); 111 this.$store.dispatch("gauges/selectedGaugeName", name);
111 } 112 }
112 } 113 }
113 }, 114 },
114 methods: { 115 methods: {
115 close() { 116 close() {
116 this.$store.commit("application/showGauges", false); 117 this.$store.commit("application/showGauges", false);
117 }, 118 },
118 moveToGauge() { 119 moveToGauge() {
119 let gauge = this.gauges.find( 120 if (!this.selectedGauge) return;
120 g => g.properties.objname === this.selectedGauge
121 );
122 if (!gauge) return;
123 this.$store.commit("map/moveToExtent", { 121 this.$store.commit("map/moveToExtent", {
124 feature: gauge, 122 feature: this.selectedGauge,
125 zoom: 17, 123 zoom: 17,
126 preventZoomOut: true 124 preventZoomOut: true
127 }); 125 });
128 }, 126 },
129 showWaterlevelDiagram() { 127 showWaterlevelDiagram() {
130 let gauge = this.gauges.find(
131 g => g.properties.objname === this.selectedGauge
132 );
133
134 // configure splitscreen 128 // configure splitscreen
135 let splitscreenConf = { 129 let splitscreenConf = {
136 id: "gauge-waterlevel", 130 id: "gauge-waterlevel",
137 component: "waterlevel", 131 component: "waterlevel",
138 title: this.selectedGauge, 132 title: this.selectedGaugeName,
139 icon: "ruler-vertical", 133 icon: "ruler-vertical",
140 closeCallback: () => { 134 closeCallback: () => {
141 this.$store.commit("gauges/selectedGauge", null); 135 this.$store.commit("gauges/selectedGaugeName", null);
142 this.$store.commit("gauges/waterlevels", []); 136 this.$store.commit("gauges/waterlevels", []);
143 }, 137 },
144 expandCallback: () => { 138 expandCallback: () => {
145 this.$store.commit("map/moveMap", { 139 this.$store.commit("map/moveMap", {
146 coordinates: gauge.geometry.coordinates, 140 coordinates: this.selectedGauge.geometry.coordinates,
147 zoom: 17, 141 zoom: 17,
148 preventZoomOut: true 142 preventZoomOut: true
149 }); 143 });
150 } 144 }
151 }; 145 };