Mercurial > gemma
comparison client/src/components/fairway/AvailableFairwayDepthDialogue.vue @ 4468:130e929bab8f
available_fairway_depth_dialogue: more intuitive date selection
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 23 Sep 2019 16:16:42 +0200 |
parents | 69166db6ba8a |
children | 063f7a48904e |
comparison
equal
deleted
inserted
replaced
4467:1518289c5168 | 4468:130e929bab8f |
---|---|
133 <option value="3">3</option> | 133 <option value="3">3</option> |
134 </select> | 134 </select> |
135 </div> | 135 </div> |
136 </div> | 136 </div> |
137 <div class="d-flex mt-2"> | 137 <div class="d-flex mt-2"> |
138 <div class="d-flex flex-column w-50 mr-1"> | 138 <div |
139 :key="new Date().getTime()" | |
140 v-if="selectedFrequency === $options.FREQUENCIES.monthly" | |
141 class="d-flex flex-column w-50 mr-1" | |
142 > | |
139 <small for="from" class="my-auto text-muted"> | 143 <small for="from" class="my-auto text-muted"> |
140 <translate>Date from</translate> | 144 <translate>Starting Month</translate> |
141 </small> | 145 </small> |
142 <input | 146 <select v-model="startMonth" class="form-control form-control-sm"> |
143 id="from" | 147 <option |
144 v-model="fromDate" | 148 v-for="month in Object.keys($options.MONTHS)" |
145 class="form-control form-control-sm" | 149 :key="'start' + month" |
146 type="date" | 150 :value="month" |
147 /> | 151 >{{ $options.MONTHS[month] }}</option |
148 </div> | 152 > |
149 <div class="d-flex flex-column w-50 ml-1"> | 153 </select> |
154 </div> | |
155 <div | |
156 :key="new Date().getTime()" | |
157 v-if="selectedFrequency === $options.FREQUENCIES.quarterly" | |
158 class="d-flex flex-column w-50 mr-1" | |
159 > | |
160 <small for="from" class="my-auto text-muted"> | |
161 <translate>Starting Quarter</translate> | |
162 </small> | |
163 <select v-model="startQuarter" class="form-control form-control-sm"> | |
164 <option | |
165 v-for="month in [1, 2, 3, 4]" | |
166 :key="'qstart' + month" | |
167 :value="month" | |
168 >Q{{ month }}</option | |
169 > | |
170 </select> | |
171 </div> | |
172 <div | |
173 :class="[ | |
174 'd-flex', | |
175 'flex-column', | |
176 'w-50', | |
177 { 'ml-1': selectedFrequency !== $options.FREQUENCIES.yearly } | |
178 ]" | |
179 > | |
180 <small for="from" class="my-auto text-muted"> | |
181 <translate>Starting Year</translate> | |
182 </small> | |
183 <select v-model="startYear" class="form-control form-control-sm"> | |
184 <option | |
185 v-for="year in $options.YEARS" | |
186 :key="'start' + year" | |
187 :value="year" | |
188 >{{ year }}</option | |
189 > | |
190 </select> | |
191 </div> | |
192 </div> | |
193 <div class="d-flex mt-2"> | |
194 <div | |
195 :key="new Date().getTime()" | |
196 class="d-flex flex-column w-50 mr-1" | |
197 v-if="selectedFrequency === $options.FREQUENCIES.monthly" | |
198 > | |
150 <small for="to" class="my-auto text-muted"> | 199 <small for="to" class="my-auto text-muted"> |
151 <translate>Date to</translate> | 200 <translate>Ending Month</translate> |
152 </small> | 201 </small> |
153 <input | 202 <select v-model="endMonth" class="form-control form-control-sm"> |
154 id="to" | 203 <option |
155 v-model="toDate" | 204 v-for="month in Object.keys($options.MONTHS)" |
156 class="form-control form-control-sm" | 205 :key="'end' + month" |
157 type="date" | 206 :value="month" |
158 /> | 207 >{{ $options.MONTHS[month] }}</option |
208 > | |
209 </select> | |
210 </div> | |
211 <div | |
212 :key="new Date().getTime()" | |
213 v-if="selectedFrequency === $options.FREQUENCIES.quarterly" | |
214 class="d-flex flex-column w-50 mr-1" | |
215 > | |
216 <small for="from" class="my-auto text-muted"> | |
217 <translate>Ending Quarter</translate> | |
218 </small> | |
219 <select v-model="endQuarter" class="form-control form-control-sm"> | |
220 <option | |
221 v-for="month in [1, 2, 3, 4]" | |
222 :key="'qend' + month" | |
223 :value="month" | |
224 >Q{{ month }}</option | |
225 > | |
226 </select> | |
227 </div> | |
228 <div | |
229 :class="[ | |
230 'd-flex', | |
231 'flex-column', | |
232 'w-50', | |
233 { 'ml-1': selectedFrequency !== $options.FREQUENCIES.yearly } | |
234 ]" | |
235 > | |
236 <small for="to" class="my-auto text-muted"> | |
237 <translate>Ending Year</translate> | |
238 </small> | |
239 <select v-model="endYear" class="form-control form-control-sm"> | |
240 <option | |
241 v-for="year in $options.YEARS" | |
242 :key="'end' + year" | |
243 :value="year" | |
244 >{{ year }}</option | |
245 > | |
246 </select> | |
159 </div> | 247 </div> |
160 </div> | 248 </div> |
161 | |
162 <div v-if="depthLimitVisible" class="d-flex mt-2" :key="1"> | 249 <div v-if="depthLimitVisible" class="d-flex mt-2" :key="1"> |
163 <div class="d-flex flex-column w-50 mr-1"> | 250 <div class="d-flex flex-column w-50 mr-1"> |
164 <small for="from" class="my-auto text-muted"> | 251 <small for="from" class="my-auto text-muted"> |
165 <translate>Depthlimit 1 [m]</translate> | 252 <translate>Depthlimit 1 [m]</translate> |
166 </small> | 253 </small> |
219 type="number" | 306 type="number" |
220 min="0" | 307 min="0" |
221 /> | 308 /> |
222 </div> | 309 </div> |
223 </div> | 310 </div> |
224 | 311 <div class="d-flex mt-2"> |
312 <div class="d-flex flex-column w-50 ml-1"> | |
313 <small for="from" class="my-auto text-muted"> | |
314 <translate>From</translate> {{ fromDate | surveyDate }} | |
315 </small> | |
316 </div> | |
317 <div class="d-flex flex-column w-50 ml-1"> | |
318 <small for="to" class="my-auto text-muted"> | |
319 <translate>To</translate> {{ toDate | surveyDate }} | |
320 </small> | |
321 </div> | |
322 </div> | |
225 <div class="mt-3"> | 323 <div class="mt-3"> |
226 <button | 324 <button |
227 @click="openFairwaydepthDiagram" | 325 @click="openFairwaydepthDiagram" |
228 :disabled="!isComplete" | 326 :disabled="!isComplete" |
229 class="btn btn-info btn-sm d-block w-100" | 327 class="btn btn-info btn-sm d-block w-100" |
274 | 372 |
275 import app from "@/main"; | 373 import app from "@/main"; |
276 import { displayError } from "@/lib/errors"; | 374 import { displayError } from "@/lib/errors"; |
277 import { mapState, mapGetters } from "vuex"; | 375 import { mapState, mapGetters } from "vuex"; |
278 import { LIMITINGFACTORS } from "@/store/fairwayavailability"; | 376 import { LIMITINGFACTORS } from "@/store/fairwayavailability"; |
377 import { | |
378 subYears, | |
379 getMonth, | |
380 startOfYear, | |
381 startOfMonth, | |
382 endOfMonth, | |
383 endOfYear, | |
384 format, | |
385 getQuarter, | |
386 startOfQuarter, | |
387 endOfQuarter, | |
388 setQuarter, | |
389 getYear | |
390 } from "date-fns"; | |
391 | |
392 const isoFormat = date => { | |
393 return format(date, "YYYY-MM-DD"); | |
394 }; | |
279 | 395 |
280 export default { | 396 export default { |
281 data() { | 397 data() { |
282 return { | 398 return { |
283 loading: false | 399 loading: false, |
400 startMonth: null, | |
401 endMonth: null, | |
402 startQuarter: null, | |
403 endQuarter: null, | |
404 startYear: null, | |
405 endYear: null | |
284 }; | 406 }; |
285 }, | 407 }, |
286 computed: { | 408 computed: { |
287 ...mapState("application", [ | 409 ...mapState("application", [ |
288 "showFairwayDepth", | 410 "showFairwayDepth", |
337 return this.limitingFactorsPerBottleneck[ | 459 return this.limitingFactorsPerBottleneck[ |
338 this.selectedEntry.properties.name | 460 this.selectedEntry.properties.name |
339 ]; | 461 ]; |
340 }, | 462 }, |
341 isComplete() { | 463 isComplete() { |
342 return ( | 464 return this.selectedFairwayAvailabilityFeature !== null; |
343 !!this.from && | |
344 !!this.to && | |
345 !!this.frequency && | |
346 !!this.los && | |
347 this.selectedFairwayAvailabilityFeature !== null | |
348 ); | |
349 }, | 465 }, |
350 type: { | 466 type: { |
351 get() { | 467 get() { |
352 return this.$store.state.fairwayavailability.type; | 468 return this.$store.state.fairwayavailability.type; |
353 }, | 469 }, |
446 return this.$gettext("Select stretch"); | 562 return this.$gettext("Select stretch"); |
447 return this.$gettext("Select section"); | 563 return this.$gettext("Select section"); |
448 } | 564 } |
449 }, | 565 }, |
450 watch: { | 566 watch: { |
567 selectedFrequency() { | |
568 const now = new Date(); | |
569 switch (this.selectedFrequency) { | |
570 case this.$options.FREQUENCIES.monthly: | |
571 this.startMonth = getMonth(now) + 1; | |
572 this.endMonth = getMonth(now) + 1; | |
573 this.startYear = getYear(subYears(now, 1)); | |
574 this.endYear = getYear(now); | |
575 this.fromDate = isoFormat(subYears(startOfMonth(now), 1)); | |
576 this.toDate = isoFormat(endOfMonth(now)); | |
577 break; | |
578 case this.$options.FREQUENCIES.quarterly: | |
579 this.startQuarter = this.dateToQuarter(now); | |
580 this.endQuarter = this.dateToQuarter(now); | |
581 this.startYear = getYear(subYears(now, 1)); | |
582 this.endYear = getYear(now); | |
583 this.fromDate = isoFormat(subYears(startOfQuarter(now), 1)); | |
584 this.toDate = this.toDate = isoFormat(endOfQuarter(now)); | |
585 break; | |
586 case this.$options.FREQUENCIES.yearly: | |
587 this.startYear = getYear(subYears(now, 1)); | |
588 this.endYear = getYear(now); | |
589 this.fromDate = isoFormat(subYears(startOfYear(now), 1)); | |
590 this.toDate = isoFormat(endOfYear(now)); | |
591 break; | |
592 default: | |
593 throw new Error("undefined frequency"); | |
594 } | |
595 }, | |
596 startQuarter() { | |
597 this.fromDate = isoFormat( | |
598 startOfQuarter(this.quarterToDate(this.startYear, this.startQuarter)) | |
599 ); | |
600 }, | |
601 endQuarter() { | |
602 this.toDate = isoFormat( | |
603 endOfQuarter(this.quarterToDate(this.endYear, this.endQuarter)) | |
604 ); | |
605 }, | |
606 startMonth() { | |
607 this.calcStart(); | |
608 }, | |
609 startYear() { | |
610 this.calcStart(); | |
611 }, | |
612 endMonth() { | |
613 this.calcEnd(); | |
614 }, | |
615 endYear() { | |
616 this.calcEnd(); | |
617 }, | |
451 depthLimitVisible() { | 618 depthLimitVisible() { |
452 if (this.depthLimitVisible) { | 619 if (this.depthLimitVisible) { |
453 this.depthLimit1 = 2.3; | 620 this.depthLimit1 = 2.3; |
454 this.depthLimit2 = 2.5; | 621 this.depthLimit2 = 2.5; |
455 } | 622 } |
504 .finally(() => (this.loading = false)); | 671 .finally(() => (this.loading = false)); |
505 } | 672 } |
506 } | 673 } |
507 }, | 674 }, |
508 methods: { | 675 methods: { |
676 dateToQuarter(date) { | |
677 return getQuarter(date); | |
678 }, | |
679 quarterToDate(year, quarter) { | |
680 return setQuarter(new Date(year, 1, 1), quarter); | |
681 }, | |
682 calcStart() { | |
683 this.fromDate = isoFormat( | |
684 startOfMonth(new Date(this.startYear, this.startMonth - 1)) | |
685 ); | |
686 }, | |
687 calcEnd() { | |
688 this.toDate = isoFormat( | |
689 endOfMonth(new Date(this.endYear, this.endMonth - 1)) | |
690 ); | |
691 }, | |
692 initDates() { | |
693 const endDate = new Date(); | |
694 const startDate = subYears(new Date(), 1); | |
695 this.startMonth = getMonth(startDate) + 1; | |
696 this.endMonth = getMonth(endDate) + 1; | |
697 this.startYear = getYear(startDate); | |
698 this.endYear = getYear(endDate); | |
699 this.fromDate = isoFormat(startOfMonth(startDate)); | |
700 this.toDate = isoFormat(endOfMonth(endDate)); | |
701 this.startQuarter = this.dateToQuarter(startDate); | |
702 this.endQuarter = this.dateToQuarter(endDate); | |
703 }, | |
509 openFairwaydepthLNWLDiagram() { | 704 openFairwaydepthLNWLDiagram() { |
510 this.clearInvisibleFormValues(); | 705 this.clearInvisibleFormValues(); |
511 this.loading = true; | 706 this.loading = true; |
512 this.$store | 707 this.$store |
513 .dispatch("fairwayavailability/loadAvailableFairwayDepthLNWLDiagram", { | 708 .dispatch("fairwayavailability/loadAvailableFairwayDepthLNWLDiagram", { |
637 "fairwayavailability/setSelectedFairwayAvailability", | 832 "fairwayavailability/setSelectedFairwayAvailability", |
638 section | 833 section |
639 ); | 834 ); |
640 } | 835 } |
641 }, | 836 }, |
837 mounted() { | |
838 this.initDates(); | |
839 }, | |
642 BOTTLENECK: "bottleneck", | 840 BOTTLENECK: "bottleneck", |
643 SECTION: "section", | 841 SECTION: "section", |
644 STRETCH: "stretch", | 842 STRETCH: "stretch", |
645 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), | 843 AVAILABLEFAIRWAYDEPTH: app.$gettext("Available Fairway Depth"), |
646 FREQUENCIES: { | 844 FREQUENCIES: { |
647 monthly: app.$gettext("monthly"), | 845 monthly: app.$gettext("monthly"), |
648 quarterly: app.$gettext("quarterly"), | 846 quarterly: app.$gettext("quarterly"), |
649 yearly: app.$gettext("yearly") | 847 yearly: app.$gettext("yearly") |
650 }, | 848 }, |
849 YEARS: [ | |
850 2015, | |
851 2016, | |
852 2017, | |
853 2018, | |
854 2019, | |
855 2020, | |
856 2021, | |
857 2022, | |
858 2023, | |
859 2024, | |
860 2025, | |
861 2026, | |
862 2027, | |
863 2028, | |
864 2029, | |
865 2030, | |
866 2031, | |
867 2032, | |
868 2033, | |
869 2034, | |
870 2035, | |
871 2036, | |
872 2037, | |
873 2038, | |
874 2039, | |
875 2040, | |
876 2041, | |
877 2042, | |
878 2043, | |
879 2044, | |
880 2045, | |
881 2046, | |
882 2047, | |
883 2048, | |
884 2049, | |
885 2050 | |
886 ], | |
887 MONTHS: { | |
888 1: "January", | |
889 2: "February", | |
890 3: "March", | |
891 4: "April", | |
892 5: "May", | |
893 6: "June", | |
894 7: "July", | |
895 8: "August", | |
896 9: "September", | |
897 10: "October", | |
898 11: "November", | |
899 12: "December" | |
900 }, | |
651 LIMITINGFACTORS: LIMITINGFACTORS | 901 LIMITINGFACTORS: LIMITINGFACTORS |
652 }; | 902 }; |
653 </script> | 903 </script> |