Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthDialogue.vue @ 3233:9a02b770c2e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
show_statistics: refac to fairwayavailability
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 10 May 2019 10:34:09 +0200
parents client/src/components/Statistics.vue@2dab20bed284
children 5914d615f703
comparison
equal deleted inserted replaced
3232:86231e847762 3233:9a02b770c2e6
1 <template>
2 <div
3 :class="[
4 'box ui-element rounded bg-white text-nowrap',
5 { expanded: showFairwayDepth }
6 ]"
7 >
8 <div style="width: 18rem">
9 <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" />
10 <div class="box-body">
11 <UISpinnerOverlay v-if="loading" />
12 <div
13 class="mb-3 d-flex flex-row justify-content-between align-items-center"
14 >
15 <div>
16 <input :value="$options.BOTTLENECKS" type="radio" v-model="type" />
17 <small class="ml-1 text-muted">
18 <translate>Bottlenecks</translate>
19 </small>
20 </div>
21 <div>
22 <input :value="$options.STRETCHES" type="radio" v-model="type" />
23 <small class="ml-1 text-muted">
24 <translate>Stretches</translate>
25 </small>
26 </div>
27 <div>
28 <input :value="$options.SECTIONS" type="radio" v-model="type" />
29 <small class="ml-1 text-muted">
30 <translate>Sections</translate>
31 </small>
32 </div>
33 </div>
34 <div class="d-flex flex-column">
35 <select
36 @change="entrySelected"
37 class="form-control form-control-sm font-weight-bold"
38 v-model="selectedEntry"
39 >
40 <option :value="null">{{ empty }}</option>
41 <option
42 v-for="(entry, index) in entries"
43 :value="entry"
44 :key="index"
45 >{{ entry.properties.name }}</option
46 >
47 </select>
48 </div>
49 <div class="d-flex flex-column mt-3">
50 <div class="d-flex flex-row w-100">
51 <div class="d-flex flex-column mb-3 w-50 mr-1">
52 <small class="my-auto text-muted"
53 ><translate>Type</translate></small
54 >
55 <select
56 v-model="selectedFrequency"
57 class="form-control form-control-sm"
58 >
59 <option
60 v-for="(option, index) in $options.FREQUENCIES"
61 :value="option"
62 :key="index"
63 ><translate>{{ option }}</translate></option
64 >
65 </select>
66 </div>
67 <div class="d-flex flex-column mb-3 w-50 ml-1">
68 <small class="my-auto text-muted"
69 ><translate>LOS</translate></small
70 >
71 <select v-model="los" class="form-control form-control-sm">
72 <option value="1">1</option>
73 <option value="2">2</option>
74 <option value="3">3</option>
75 </select>
76 </div>
77 </div>
78 <div class="d-flex flex-row w-100">
79 <div class="d-flex flex-column w-50 mr-1">
80 <small for="from" class="my-auto text-muted"
81 ><translate>Date from</translate></small
82 ><input
83 id="from"
84 v-model="fromDate"
85 class="form-control form-control-sm"
86 type="date"
87 />
88 </div>
89 <div class="d-flex flex-column w-50 ml-1">
90 <small for="to" class="my-auto text-muted"
91 ><translate>Date to</translate></small
92 ><input
93 id="to"
94 v-model="toDate"
95 class="form-control form-control-sm"
96 type="date"
97 />
98 </div>
99 </div>
100 </div>
101 <div class="mt-3">
102 <button
103 @click="openFairwaydepth"
104 :disabled="isComplete"
105 class="btn btn-info btn-sm w-100"
106 >
107 <translate>Available Fairway Depth</translate>
108 </button>
109 </div>
110 </div>
111 </div>
112 </div>
113 </template>
114
115 <style lang="scss" scoped>
116 input,
117 select {
118 font-size: 0.8em;
119 }
120 </style>
121
122 <script>
123 /* This is Free Software under GNU Affero General Public License v >= 3.0
124 * without warranty, see README.md and license for details.
125 *
126 * SPDX-License-Identifier: AGPL-3.0-or-later
127 * License-Filename: LICENSES/AGPL-3.0.txt
128 *
129 * Copyright (C) 2018 by via donau
130 * – Österreichische Wasserstraßen-Gesellschaft mbH
131 * Software engineering by Intevation GmbH
132 *
133 * Author(s):
134 * Markus Kottländer <markus.kottlaender@intevation.de>
135 * Thomas Junk <thomas.junk@intevation.de>
136 */
137
138 import app from "@/main";
139 import { displayError } from "@/lib/errors";
140 import { mapState, mapGetters } from "vuex";
141
142 export default {
143 data() {
144 return {
145 loading: false
146 };
147 },
148 methods: {
149 openFairwaydepth() {
150 this.loading = true;
151 this.$store
152 .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
153 feature: this.selectedFairwayAvailabilityFeature,
154 from: this.from,
155 to: this.to,
156 frequency: this.frequency,
157 LOS: this.los
158 })
159 .then(() => {
160 this.loading = false;
161 this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
162 })
163 .catch(error => {
164 console.log(error);
165 const { status, data } = error.response;
166 displayError({
167 title: this.$gettext("Backend Error"),
168 message: `${status}: ${data.message || data}`
169 });
170 });
171 },
172 close() {
173 this.$store.commit("application/showFairwayDepth", false);
174 },
175 entrySelected() {
176 if (this.type === this.$options.BOTTLENECKS) {
177 this.openLayersMap()
178 .getLayer("BOTTLENECKS")
179 .setVisible(true);
180 if (this.showProfiles) {
181 this.$store.dispatch(
182 "bottlenecks/setSelectedBottleneck",
183 this.selectedFairwayAvailabilityFeature.properties.name
184 );
185 }
186 }
187 if (this.type === this.$options.STRETCHES) {
188 this.openLayersMap()
189 .getLayer("STRETCHES")
190 .setVisible(true);
191 }
192 if (this.selectedFairwayAvailabilityFeature) {
193 this.$store.dispatch("map/moveToFeauture", {
194 feature: this.selectedFairwayAvailabilityFeature,
195 zoom: 17,
196 preventZoomOut: true
197 });
198 }
199 },
200 setSelectedBottleneck() {
201 const bn = this.bottlenecksList.filter(
202 x => x.properties.name === this.selectedBottleneck
203 )[0];
204 this.$store.commit(
205 "fairwayavailability/setSelectedFairwayAvailability",
206 bn
207 );
208 }
209 },
210 computed: {
211 ...mapState("application", [
212 "showFairwayDepth",
213 "paneSetup",
214 "showProfiles"
215 ]),
216 ...mapState("fairwayavailability", [
217 "selectedFairwayAvailabilityFeature",
218 "from",
219 "to",
220 "frequency",
221 "LOS"
222 ]),
223 ...mapState("imports", ["stretches"]),
224 ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
225 ...mapGetters("map", ["openLayersMap"]),
226 isComplete() {
227 return (
228 this.from == null ||
229 this.to == null ||
230 this.frequency == null ||
231 this.los == null ||
232 this.selectedFairwayAvailabilityFeature == null
233 );
234 },
235 type: {
236 get() {
237 return this.$store.state.fairwayavailability.type;
238 },
239 set(type) {
240 this.$store.commit("fairwayavailability/type", type);
241 }
242 },
243 los: {
244 get() {
245 return this.LOS;
246 },
247 set(value) {
248 this.$store.commit("fairwayavailability/setLOS", value);
249 }
250 },
251 fromDate: {
252 get() {
253 return this.from;
254 },
255 set(value) {
256 this.$store.commit("fairwayavailability/setFrom", value);
257 }
258 },
259 toDate: {
260 get() {
261 return this.to;
262 },
263 set(value) {
264 this.$store.commit("fairwayavailability/setTo", value);
265 }
266 },
267 selectedFrequency: {
268 get() {
269 return this.frequency;
270 },
271 set(value) {
272 this.$store.commit("fairwayavailability/setFrequency", value);
273 }
274 },
275 selectedEntry: {
276 get() {
277 return this.selectedFairwayAvailabilityFeature;
278 },
279 set(feature) {
280 this.$store.commit(
281 "fairwayavailability/setSelectedFairwayAvailability",
282 feature
283 );
284 }
285 },
286 entries() {
287 if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList;
288 if (this.type === this.$options.STRETCHES) return this.stretches;
289 return [];
290 },
291 label() {
292 return this.$gettext("Statistics");
293 },
294 empty() {
295 if (this.type === this.$options.BOTTLENECKS)
296 return this.$gettext("Select bottleneck");
297 if (this.type === this.$options.STRETCHES)
298 return this.$gettext("Select strectch");
299 return this.$gettext("Select section");
300 }
301 },
302 watch: {
303 selectedBottleneck() {
304 this.type = this.$options.BOTTLENECKS;
305 this.setSelectedBottleneck();
306 },
307 type() {
308 if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) {
309 this.setSelectedBottleneck();
310 } else {
311 this.$store.commit(
312 "fairwayavailability/setSelectedFairwayAvailability",
313 null
314 );
315 }
316 this.openLayersMap()
317 .getLayer("STRETCHES")
318 .setVisible(true);
319 },
320 showStatistics() {
321 if (this.showStatistics) {
322 this.loading = true;
323 this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => {
324 this.$store.dispatch("imports/loadStretches").then(() => {
325 this.loading = false;
326 if (this.selectedBottleneck) this.setSelectedBottleneck();
327 });
328 });
329 }
330 }
331 },
332 BOTTLENECKS: "bottlenecks",
333 SECTIONS: "sections",
334 STRETCHES: "stretches",
335 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"),
336 FREQUENCIES: {
337 MONTHLY: "monthly",
338 QUARTERLY: "quarterly",
339 YEARLY: "yearly"
340 }
341 };
342 </script>