Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthDialogue.vue @ 4468:130e929bab8f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>