Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthDialogue.vue @ 3320:1473e9e7cd0c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
merge
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 20 May 2019 09:41:32 +0200
parents 9dc7d803e51f c7b48272e11e
children 496cf0474e29
comparison
equal deleted inserted replaced
3319:9dc7d803e51f 3320:1473e9e7cd0c
7 > 7 >
8 <div style="width: 18rem"> 8 <div style="width: 18rem">
9 <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" /> 9 <UIBoxHeader icon="chart-line" :title="label" :closeCallback="close" />
10 <div class="box-body"> 10 <div class="box-body">
11 <UISpinnerOverlay v-if="loading" /> 11 <UISpinnerOverlay v-if="loading" />
12 <div 12 <div class="mb-2 d-flex justify-content-between align-items-center">
13 class="mb-3 d-flex flex-row justify-content-between align-items-center"
14 >
15 <div> 13 <div>
16 <input :value="$options.BOTTLENECKS" type="radio" v-model="type" /> 14 <input :value="$options.BOTTLENECKS" type="radio" v-model="type" />
17 <small class="ml-1 text-muted"> 15 <small class="ml-1 text-muted">
18 <translate>Bottlenecks</translate> 16 <translate>Bottlenecks</translate>
19 </small> 17 </small>
29 <small class="ml-1 text-muted"> 27 <small class="ml-1 text-muted">
30 <translate>Sections</translate> 28 <translate>Sections</translate>
31 </small> 29 </small>
32 </div> 30 </div>
33 </div> 31 </div>
34 <div class="d-flex flex-column"> 32 <select
35 <select 33 v-if="type === $options.BOTTLENECKS"
36 :key="1" 34 @change="entrySelected"
37 v-if="type === $options.BOTTLENECKS" 35 class="form-control font-weight-bold"
38 @change="entrySelected" 36 v-model="selectedEntry"
39 class="form-control form-control-sm font-weight-bold" 37 >
40 v-model="selectedEntry" 38 <option :value="null">{{ placeholder }}</option>
39 <optgroup
40 v-for="(bottlenecksForCountry, cc) in orderedBottlenecks"
41 :key="cc"
42 :label="cc"
41 > 43 >
42 <option :value="null">{{ empty }}</option> 44 <option
43 <optgroup 45 v-for="bn in bottlenecksForCountry"
44 v-for="(bottlenecksForCountry, cc) in orderedBottlenecks" 46 :key="bn.properties.name"
45 :key="cc" 47 :value="bn"
46 :label="cc" 48 >
49 {{ bn.properties.name }}
50 </option>
51 </optgroup>
52 </select>
53 <select
54 v-else-if="type === $options.STRETCHES"
55 @change="entrySelected"
56 class="form-control font-weight-bold"
57 v-model="selectedEntry"
58 >
59 <option :value="null">{{ placeholder }}</option>
60 <option
61 v-for="stretch in stretches"
62 :value="stretch"
63 :key="stretch.id"
64 >
65 {{ stretch.properties.name }}
66 </option>
67 </select>
68 <select
69 v-else-if="type === $options.SECTIONS"
70 @change="entrySelected"
71 class="form-control font-weight-bold"
72 v-model="selectedEntry"
73 >
74 <option :value="null">{{ placeholder }}</option>
75 <option
76 v-for="section in sections"
77 :value="section"
78 :key="section.id"
79 >
80 {{ section.properties.name }}
81 </option>
82 </select>
83 <div class="d-flex mt-2">
84 <div class="d-flex flex-column w-50 mr-1">
85 <small class="my-auto text-muted">
86 <translate>Type</translate>
87 </small>
88 <select
89 v-model="selectedFrequency"
90 class="form-control form-control-sm"
47 > 91 >
48 <option 92 <option
49 v-for="bn in bottlenecksForCountry" 93 v-for="(option, index) in $options.FREQUENCIES"
50 :key="bn.properties.name" 94 :value="option"
51 :value="bn" 95 :key="index"
52 > 96 >
53 {{ bn.properties.name }} 97 <translate>{{ option }}</translate>
54 </option> 98 </option>
55 </optgroup> 99 </select>
56 </select> 100 </div>
57 <select 101 <div class="d-flex flex-column w-50 ml-1">
58 :key="2" 102 <small class="my-auto text-muted"><translate>LOS</translate></small>
59 v-else 103 <select v-model="los" class="form-control form-control-sm">
60 @change="entrySelected" 104 <option value="1">1</option>
61 class="form-control form-control-sm font-weight-bold" 105 <option value="2">2</option>
62 v-model="selectedEntry" 106 <option value="3">3</option>
63 > 107 </select>
64 <option :value="null">{{ empty }}</option> 108 </div>
65 <option
66 v-for="(entry, index) in entries"
67 :value="entry"
68 :key="index"
69 >{{ entry.properties.name }}</option
70 >
71 </select>
72 </div> 109 </div>
73 <div class="d-flex flex-column mt-3"> 110 <div class="d-flex mt-2">
74 <div class="d-flex flex-row w-100"> 111 <div class="d-flex flex-column w-50 mr-1">
75 <div class="d-flex flex-column mb-3 w-50 mr-1"> 112 <small for="from" class="my-auto text-muted">
76 <small class="my-auto text-muted" 113 <translate>Date from</translate>
77 ><translate>Type</translate></small 114 </small>
78 > 115 <input
79 <select 116 id="from"
80 v-model="selectedFrequency" 117 v-model="fromDate"
81 class="form-control form-control-sm" 118 class="form-control form-control-sm"
82 > 119 type="date"
83 <option 120 />
84 v-for="(option, index) in $options.FREQUENCIES" 121 </div>
85 :value="option" 122 <div class="d-flex flex-column w-50 ml-1">
86 :key="index" 123 <small for="to" class="my-auto text-muted">
87 ><translate>{{ option }}</translate></option 124 <translate>Date to</translate>
88 > 125 </small>
89 </select> 126 <input
90 </div> 127 id="to"
91 <div class="d-flex flex-column mb-3 w-50 ml-1"> 128 v-model="toDate"
92 <small class="my-auto text-muted" 129 class="form-control form-control-sm"
93 ><translate>LOS</translate></small 130 type="date"
94 > 131 />
95 <select v-model="los" class="form-control form-control-sm">
96 <option value="1">1</option>
97 <option value="2">2</option>
98 <option value="3">3</option>
99 </select>
100 </div>
101 </div>
102 <div class="d-flex flex-row w-100">
103 <div class="d-flex flex-column w-50 mr-1">
104 <small for="from" class="my-auto text-muted"
105 ><translate>Date from</translate></small
106 ><input
107 id="from"
108 v-model="fromDate"
109 class="form-control form-control-sm"
110 type="date"
111 />
112 </div>
113 <div class="d-flex flex-column w-50 ml-1">
114 <small for="to" class="my-auto text-muted"
115 ><translate>Date to</translate></small
116 ><input
117 id="to"
118 v-model="toDate"
119 class="form-control form-control-sm"
120 type="date"
121 />
122 </div>
123 </div> 132 </div>
124 </div> 133 </div>
125 <div class="mt-3"> 134 <div class="mt-3">
126 <button 135 <button
127 @click="openFairwaydepth" 136 @click="openFairwaydepthDiagram"
128 :disabled="isComplete" 137 :disabled="!isComplete"
129 class="btn btn-info btn-sm w-100" 138 class="btn btn-info btn-sm d-block w-100"
130 > 139 >
131 <translate>Available fairway depth</translate> 140 <translate>Available fairway depth</translate>
132 </button> 141 </button>
133 </div>
134 <div class="mt-3">
135 <button 142 <button
136 @click="openFairwaydepthLNWL" 143 @click="openFairwaydepthLNWLDiagram"
137 :disabled="isInComplete" 144 :disabled="!isComplete"
138 class="btn btn-info btn-sm w-100" 145 class="btn btn-info btn-sm d-block w-100 mt-2"
139 > 146 >
140 <translate>Available fairway depth vs LNWL</translate> 147 <translate>Available fairway depth vs LNWL</translate>
141 </button> 148 </button>
142 </div> 149 </div>
143 </div> 150 </div>
176 data() { 183 data() {
177 return { 184 return {
178 loading: false 185 loading: false
179 }; 186 };
180 }, 187 },
181 methods: {
182 openFairwaydepthLNWL() {
183 this.loading = true;
184 this.$store
185 .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
186 feature: this.selectedFairwayAvailabilityFeature,
187 from: this.from,
188 to: this.to,
189 frequency: this.frequency,
190 LOS: this.los
191 })
192 .then(() => {
193 this.$store.commit(
194 "application/paneSetup",
195 "AVAILABLEFAIRWAYDEPTHLNWL"
196 );
197 })
198 .catch(error => {
199 console.log(error);
200 const { status, data } = error.response;
201 displayError({
202 title: this.$gettext("Backend Error"),
203 message: `${status}: ${data.message || data}`
204 });
205 })
206 .finally(() => {
207 this.loading = false;
208 });
209 },
210 openFairwaydepth() {
211 this.loading = true;
212 this.$store
213 .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
214 feature: this.selectedFairwayAvailabilityFeature,
215 from: this.from,
216 to: this.to,
217 frequency: this.frequency,
218 LOS: this.los
219 })
220 .then(() => {
221 this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
222 })
223 .catch(error => {
224 console.log(error);
225 const { status, data } = error.response;
226 displayError({
227 title: this.$gettext("Backend Error"),
228 message: `${status}: ${data.message || data}`
229 });
230 })
231 .finally(() => {
232 this.loading = false;
233 });
234 },
235 close() {
236 this.$store.commit("application/showFairwayDepth", false);
237 this.$store.commit("application/showFairwayDepthLNWL", false);
238 },
239 entrySelected() {
240 if (this.type === this.$options.BOTTLENECKS) {
241 this.openLayersMap()
242 .getLayer("BOTTLENECKS")
243 .setVisible(true);
244 if (this.showProfiles) {
245 this.$store.dispatch(
246 "bottlenecks/setSelectedBottleneck",
247 this.selectedFairwayAvailabilityFeature.properties.name
248 );
249 }
250 }
251 if (this.type === this.$options.STRETCHES) {
252 this.openLayersMap()
253 .getLayer("STRETCHES")
254 .setVisible(true);
255 }
256 if (this.selectedFairwayAvailabilityFeature) {
257 this.$store.dispatch("map/moveToFeauture", {
258 feature: this.selectedFairwayAvailabilityFeature,
259 zoom: 17,
260 preventZoomOut: true
261 });
262 }
263 },
264 setSelectedBottleneck() {
265 const bn = this.bottlenecksList.filter(
266 x => x.properties.name === this.selectedBottleneck
267 )[0];
268 this.$store.commit(
269 "fairwayavailability/setSelectedFairwayAvailability",
270 bn
271 );
272 },
273 setSelectedStretch() {
274 const stretch = this.stretches.find(x => x.id === this.selectedStretchId);
275 this.$store.commit(
276 "fairwayavailability/setSelectedFairwayAvailability",
277 stretch
278 );
279 }
280 },
281 computed: { 188 computed: {
282 ...mapState("application", [ 189 ...mapState("application", [
283 "showFairwayDepth", 190 "showFairwayDepth",
284 "paneSetup", 191 "paneSetup",
285 "showProfiles" 192 "showProfiles"
289 "from", 196 "from",
290 "to", 197 "to",
291 "frequency", 198 "frequency",
292 "LOS" 199 "LOS"
293 ]), 200 ]),
294 ...mapState("imports", ["stretches", "selectedStretchId"]), 201 ...mapState("imports", [
202 "stretches",
203 "sections",
204 "selectedStretchId",
205 "selectedSectionId"
206 ]),
295 ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]), 207 ...mapState("bottlenecks", ["bottlenecksList", "selectedBottleneck"]),
296 ...mapGetters("map", ["openLayersMap"]), 208 ...mapGetters("map", ["openLayersMap"]),
297 ...mapGetters("bottlenecks", ["orderedBottlenecks"]), 209 ...mapGetters("bottlenecks", ["orderedBottlenecks"]),
298 isInComplete() { 210 isComplete() {
299 return ( 211 return (
300 this.from == null || 212 this.from !== null &&
301 this.to == null || 213 this.to !== null &&
302 this.frequency == null || 214 this.frequency !== null &&
303 this.los == null || 215 this.los !== null &&
304 this.selectedFairwayAvailabilityFeature == null 216 this.selectedFairwayAvailabilityFeature !== null
305 ); 217 );
306 }, 218 },
307 type: { 219 type: {
308 get() { 220 get() {
309 return this.$store.state.fairwayavailability.type; 221 return this.$store.state.fairwayavailability.type;
353 "fairwayavailability/setSelectedFairwayAvailability", 265 "fairwayavailability/setSelectedFairwayAvailability",
354 feature 266 feature
355 ); 267 );
356 } 268 }
357 }, 269 },
358 entries() {
359 if (this.type === this.$options.BOTTLENECKS) return this.bottlenecksList;
360 if (this.type === this.$options.STRETCHES) return this.stretches;
361 return [];
362 },
363 label() { 270 label() {
364 return this.$gettext("Available fairway depth"); 271 return this.$gettext("Available fairway depth");
365 }, 272 },
366 empty() { 273 placeholder() {
367 if (this.type === this.$options.BOTTLENECKS) 274 if (this.type === this.$options.BOTTLENECKS)
368 return this.$gettext("Select bottleneck"); 275 return this.$gettext("Select bottleneck");
369 if (this.type === this.$options.STRETCHES) 276 if (this.type === this.$options.STRETCHES)
370 return this.$gettext("Select stretch"); 277 return this.$gettext("Select stretch");
371 return this.$gettext("Select section"); 278 return this.$gettext("Select section");
374 watch: { 281 watch: {
375 selectedBottleneck() { 282 selectedBottleneck() {
376 this.type = this.$options.BOTTLENECKS; 283 this.type = this.$options.BOTTLENECKS;
377 this.setSelectedBottleneck(); 284 this.setSelectedBottleneck();
378 }, 285 },
379 type() { 286 selectedStretchId() {
380 if (this.type === this.$options.BOTTLENECKS && this.selectedBottleneck) { 287 this.type = this.$options.STRETCHES;
288 this.setSelectedStretch();
289 },
290 selectedSectionId() {
291 this.type = this.$options.SECTIONS;
292 this.setSelectedSection();
293 },
294 type(type) {
295 if (type === this.$options.BOTTLENECKS && this.selectedBottleneck) {
296 this.openLayersMap()
297 .getLayer("BOTTLENECKS")
298 .setVisible(true);
381 this.setSelectedBottleneck(); 299 this.setSelectedBottleneck();
382 } else if ( 300 } else if (type === this.$options.STRETCHES && this.selectedStretchId) {
383 this.type === this.$options.STRETCHES && 301 this.openLayersMap()
384 this.selectedStretchId 302 .getLayer("STRETCHES")
385 ) { 303 .setVisible(true);
386 this.setSelectedStretch(); 304 this.setSelectedStretch();
305 } else if (type === this.$options.SECTIONS && this.selectedSectionId) {
306 this.openLayersMap()
307 .getLayer("SECTIONS")
308 .setVisible(true);
309 this.setSelectedSection();
387 } else { 310 } else {
388 this.$store.commit( 311 this.$store.commit(
389 "fairwayavailability/setSelectedFairwayAvailability", 312 "fairwayavailability/setSelectedFairwayAvailability",
390 null 313 null
391 ); 314 );
392 } 315 }
393 this.openLayersMap()
394 .getLayer("STRETCHES")
395 .setVisible(true);
396 }, 316 },
397 showFairwayDepth() { 317 showFairwayDepth() {
398 if (this.showFairwayDepth) { 318 if (this.showFairwayDepth) {
399 this.loading = true; 319 this.loading = true;
400 this.$store.dispatch("bottlenecks/loadBottlenecksList").then(() => { 320 Promise.all([
401 this.$store.dispatch("imports/loadStretches").then(() => { 321 this.$store.dispatch("bottlenecks/loadBottlenecksList"),
402 this.loading = false; 322 this.$store.dispatch("imports/loadStretches"),
323 this.$store.dispatch("imports/loadSections")
324 ])
325 .then(() => {
403 if (this.selectedBottleneck) this.setSelectedBottleneck(); 326 if (this.selectedBottleneck) this.setSelectedBottleneck();
327 })
328 .finally(() => (this.loading = false));
329 }
330 }
331 },
332 methods: {
333 openFairwaydepthLNWLDiagram() {
334 this.loading = true;
335 this.$store
336 .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
337 feature: this.selectedFairwayAvailabilityFeature,
338 from: this.from,
339 to: this.to,
340 frequency: this.frequency,
341 LOS: this.los
342 })
343 .then(() => {
344 this.$store.commit(
345 "application/paneSetup",
346 "AVAILABLEFAIRWAYDEPTHLNWL"
347 );
348 })
349 .catch(error => {
350 console.log(error);
351 const { status, data } = error.response;
352 displayError({
353 title: this.$gettext("Backend Error"),
354 message: `${status}: ${data.message || data}`
404 }); 355 });
356 })
357 .finally(() => {
358 this.loading = false;
405 }); 359 });
406 } 360 },
361 openFairwaydepthDiagram() {
362 this.loading = true;
363 this.$store
364 .dispatch("fairwayavailability/loadAvailableFairwayDepth", {
365 feature: this.selectedFairwayAvailabilityFeature,
366 from: this.from,
367 to: this.to,
368 frequency: this.frequency,
369 LOS: this.los
370 })
371 .then(() => {
372 this.$store.commit("application/paneSetup", "AVAILABLEFAIRWAYDEPTH");
373 })
374 .catch(error => {
375 console.log(error);
376 const { status, data } = error.response;
377 displayError({
378 title: this.$gettext("Backend Error"),
379 message: `${status}: ${data.message || data}`
380 });
381 })
382 .finally(() => {
383 this.loading = false;
384 });
385 },
386 close() {
387 this.$store.commit("application/showFairwayDepth", false);
388 this.$store.commit("application/showFairwayDepthLNWL", false);
389 },
390 entrySelected() {
391 if (this.type === this.$options.BOTTLENECKS) {
392 this.openLayersMap()
393 .getLayer("BOTTLENECKS")
394 .setVisible(true);
395 if (this.showProfiles) {
396 this.$store.dispatch(
397 "bottlenecks/setSelectedBottleneck",
398 this.selectedFairwayAvailabilityFeature.properties.name
399 );
400 }
401 }
402 if (this.type === this.$options.STRETCHES) {
403 this.openLayersMap()
404 .getLayer("STRETCHES")
405 .setVisible(true);
406 }
407 if (this.type === this.$options.SECTIONS) {
408 this.openLayersMap()
409 .getLayer("SECTIONS")
410 .setVisible(true);
411 }
412 if (this.selectedFairwayAvailabilityFeature) {
413 this.$store.dispatch("map/moveToFeauture", {
414 feature: this.selectedFairwayAvailabilityFeature,
415 zoom: 17,
416 preventZoomOut: true
417 });
418 }
419 },
420 setSelectedBottleneck() {
421 const bn = this.bottlenecksList.filter(
422 x => x.properties.name === this.selectedBottleneck
423 )[0];
424 this.$store.commit(
425 "fairwayavailability/setSelectedFairwayAvailability",
426 bn
427 );
428 },
429 setSelectedStretch() {
430 const stretch = this.stretches.find(x => x.id === this.selectedStretchId);
431 this.$store.commit(
432 "fairwayavailability/setSelectedFairwayAvailability",
433 stretch
434 );
435 },
436 setSelectedSection() {
437 const section = this.sections.find(x => x.id === this.selectedSectionId);
438 this.$store.commit(
439 "fairwayavailability/setSelectedFairwayAvailability",
440 section
441 );
407 } 442 }
408 }, 443 },
409 BOTTLENECKS: "bottlenecks", 444 BOTTLENECKS: "bottlenecks",
410 SECTIONS: "sections", 445 SECTIONS: "sections",
411 STRETCHES: "stretches", 446 STRETCHES: "stretches",