Mercurial > gemma
diff 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 |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Mon Sep 23 15:41:46 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue Mon Sep 23 16:16:42 2019 +0200 @@ -135,30 +135,117 @@ </div> </div> <div class="d-flex mt-2"> - <div class="d-flex flex-column w-50 mr-1"> + <div + :key="new Date().getTime()" + v-if="selectedFrequency === $options.FREQUENCIES.monthly" + class="d-flex flex-column w-50 mr-1" + > <small for="from" class="my-auto text-muted"> - <translate>Date from</translate> + <translate>Starting Month</translate> </small> - <input - id="from" - v-model="fromDate" - class="form-control form-control-sm" - type="date" - /> + <select v-model="startMonth" class="form-control form-control-sm"> + <option + v-for="month in Object.keys($options.MONTHS)" + :key="'start' + month" + :value="month" + >{{ $options.MONTHS[month] }}</option + > + </select> </div> - <div class="d-flex flex-column w-50 ml-1"> - <small for="to" class="my-auto text-muted"> - <translate>Date to</translate> + <div + :key="new Date().getTime()" + v-if="selectedFrequency === $options.FREQUENCIES.quarterly" + class="d-flex flex-column w-50 mr-1" + > + <small for="from" class="my-auto text-muted"> + <translate>Starting Quarter</translate> </small> - <input - id="to" - v-model="toDate" - class="form-control form-control-sm" - type="date" - /> + <select v-model="startQuarter" class="form-control form-control-sm"> + <option + v-for="month in [1, 2, 3, 4]" + :key="'qstart' + month" + :value="month" + >Q{{ month }}</option + > + </select> + </div> + <div + :class="[ + 'd-flex', + 'flex-column', + 'w-50', + { 'ml-1': selectedFrequency !== $options.FREQUENCIES.yearly } + ]" + > + <small for="from" class="my-auto text-muted"> + <translate>Starting Year</translate> + </small> + <select v-model="startYear" class="form-control form-control-sm"> + <option + v-for="year in $options.YEARS" + :key="'start' + year" + :value="year" + >{{ year }}</option + > + </select> </div> </div> - + <div class="d-flex mt-2"> + <div + :key="new Date().getTime()" + class="d-flex flex-column w-50 mr-1" + v-if="selectedFrequency === $options.FREQUENCIES.monthly" + > + <small for="to" class="my-auto text-muted"> + <translate>Ending Month</translate> + </small> + <select v-model="endMonth" class="form-control form-control-sm"> + <option + v-for="month in Object.keys($options.MONTHS)" + :key="'end' + month" + :value="month" + >{{ $options.MONTHS[month] }}</option + > + </select> + </div> + <div + :key="new Date().getTime()" + v-if="selectedFrequency === $options.FREQUENCIES.quarterly" + class="d-flex flex-column w-50 mr-1" + > + <small for="from" class="my-auto text-muted"> + <translate>Ending Quarter</translate> + </small> + <select v-model="endQuarter" class="form-control form-control-sm"> + <option + v-for="month in [1, 2, 3, 4]" + :key="'qend' + month" + :value="month" + >Q{{ month }}</option + > + </select> + </div> + <div + :class="[ + 'd-flex', + 'flex-column', + 'w-50', + { 'ml-1': selectedFrequency !== $options.FREQUENCIES.yearly } + ]" + > + <small for="to" class="my-auto text-muted"> + <translate>Ending Year</translate> + </small> + <select v-model="endYear" class="form-control form-control-sm"> + <option + v-for="year in $options.YEARS" + :key="'end' + year" + :value="year" + >{{ year }}</option + > + </select> + </div> + </div> <div v-if="depthLimitVisible" class="d-flex mt-2" :key="1"> <div class="d-flex flex-column w-50 mr-1"> <small for="from" class="my-auto text-muted"> @@ -221,7 +308,18 @@ /> </div> </div> - + <div class="d-flex mt-2"> + <div class="d-flex flex-column w-50 ml-1"> + <small for="from" class="my-auto text-muted"> + <translate>From</translate> {{ fromDate | surveyDate }} + </small> + </div> + <div class="d-flex flex-column w-50 ml-1"> + <small for="to" class="my-auto text-muted"> + <translate>To</translate> {{ toDate | surveyDate }} + </small> + </div> + </div> <div class="mt-3"> <button @click="openFairwaydepthDiagram" @@ -276,11 +374,35 @@ import { displayError } from "@/lib/errors"; import { mapState, mapGetters } from "vuex"; import { LIMITINGFACTORS } from "@/store/fairwayavailability"; +import { + subYears, + getMonth, + startOfYear, + startOfMonth, + endOfMonth, + endOfYear, + format, + getQuarter, + startOfQuarter, + endOfQuarter, + setQuarter, + getYear +} from "date-fns"; + +const isoFormat = date => { + return format(date, "YYYY-MM-DD"); +}; export default { data() { return { - loading: false + loading: false, + startMonth: null, + endMonth: null, + startQuarter: null, + endQuarter: null, + startYear: null, + endYear: null }; }, computed: { @@ -339,13 +461,7 @@ ]; }, isComplete() { - return ( - !!this.from && - !!this.to && - !!this.frequency && - !!this.los && - this.selectedFairwayAvailabilityFeature !== null - ); + return this.selectedFairwayAvailabilityFeature !== null; }, type: { get() { @@ -448,6 +564,57 @@ } }, watch: { + selectedFrequency() { + const now = new Date(); + switch (this.selectedFrequency) { + case this.$options.FREQUENCIES.monthly: + this.startMonth = getMonth(now) + 1; + this.endMonth = getMonth(now) + 1; + this.startYear = getYear(subYears(now, 1)); + this.endYear = getYear(now); + this.fromDate = isoFormat(subYears(startOfMonth(now), 1)); + this.toDate = isoFormat(endOfMonth(now)); + break; + case this.$options.FREQUENCIES.quarterly: + this.startQuarter = this.dateToQuarter(now); + this.endQuarter = this.dateToQuarter(now); + this.startYear = getYear(subYears(now, 1)); + this.endYear = getYear(now); + this.fromDate = isoFormat(subYears(startOfQuarter(now), 1)); + this.toDate = this.toDate = isoFormat(endOfQuarter(now)); + break; + case this.$options.FREQUENCIES.yearly: + this.startYear = getYear(subYears(now, 1)); + this.endYear = getYear(now); + this.fromDate = isoFormat(subYears(startOfYear(now), 1)); + this.toDate = isoFormat(endOfYear(now)); + break; + default: + throw new Error("undefined frequency"); + } + }, + startQuarter() { + this.fromDate = isoFormat( + startOfQuarter(this.quarterToDate(this.startYear, this.startQuarter)) + ); + }, + endQuarter() { + this.toDate = isoFormat( + endOfQuarter(this.quarterToDate(this.endYear, this.endQuarter)) + ); + }, + startMonth() { + this.calcStart(); + }, + startYear() { + this.calcStart(); + }, + endMonth() { + this.calcEnd(); + }, + endYear() { + this.calcEnd(); + }, depthLimitVisible() { if (this.depthLimitVisible) { this.depthLimit1 = 2.3; @@ -506,6 +673,34 @@ } }, methods: { + dateToQuarter(date) { + return getQuarter(date); + }, + quarterToDate(year, quarter) { + return setQuarter(new Date(year, 1, 1), quarter); + }, + calcStart() { + this.fromDate = isoFormat( + startOfMonth(new Date(this.startYear, this.startMonth - 1)) + ); + }, + calcEnd() { + this.toDate = isoFormat( + endOfMonth(new Date(this.endYear, this.endMonth - 1)) + ); + }, + initDates() { + const endDate = new Date(); + const startDate = subYears(new Date(), 1); + this.startMonth = getMonth(startDate) + 1; + this.endMonth = getMonth(endDate) + 1; + this.startYear = getYear(startDate); + this.endYear = getYear(endDate); + this.fromDate = isoFormat(startOfMonth(startDate)); + this.toDate = isoFormat(endOfMonth(endDate)); + this.startQuarter = this.dateToQuarter(startDate); + this.endQuarter = this.dateToQuarter(endDate); + }, openFairwaydepthLNWLDiagram() { this.clearInvisibleFormValues(); this.loading = true; @@ -639,6 +834,9 @@ ); } }, + mounted() { + this.initDates(); + }, BOTTLENECK: "bottleneck", SECTION: "section", STRETCH: "stretch", @@ -648,6 +846,58 @@ quarterly: app.$gettext("quarterly"), yearly: app.$gettext("yearly") }, + YEARS: [ + 2015, + 2016, + 2017, + 2018, + 2019, + 2020, + 2021, + 2022, + 2023, + 2024, + 2025, + 2026, + 2027, + 2028, + 2029, + 2030, + 2031, + 2032, + 2033, + 2034, + 2035, + 2036, + 2037, + 2038, + 2039, + 2040, + 2041, + 2042, + 2043, + 2044, + 2045, + 2046, + 2047, + 2048, + 2049, + 2050 + ], + MONTHS: { + 1: "January", + 2: "February", + 3: "March", + 4: "April", + 5: "May", + 6: "June", + 7: "July", + 8: "August", + 9: "September", + 10: "October", + 11: "November", + 12: "December" + }, LIMITINGFACTORS: LIMITINGFACTORS }; </script>