import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core'; import {ConfigService} from '../../config.service'; import {BaseComponent} from '../base-page/base.component'; import {DOCUMENT} from '@angular/common'; @Component({ selector: 'framadate-dates', templateUrl: './dates.component.html', styleUrls: ['./dates.component.scss'] }) export class DatesComponent extends BaseComponent implements OnInit { showDateInterval: boolean = true; startDateInterval: any; intervalDays: any; intervalDaysDefault: number = 7; endDateInterval: any; constructor(public config: ConfigService, private cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: any ) { super(config); } countDays() { // compute the number of days in the date interval if (this.endDateInterval && this.startDateInterval) { this.intervalDays = (this.dayDiff(this.endDateInterval, this.startDateInterval)).toFixed(0) } } /** * set the interval options */ ngOnInit() { let dateCurrent = new Date(); const dateJson = dateCurrent.toISOString(); this.startDateInterval = dateJson.substring(0, 10); this.endDateInterval = this.addDaysToDate(this.intervalDaysDefault, dateCurrent).toISOString().substring(0, 10); } addDate() { this.config.dateList.push({literal: '', timeList: []}); let selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]'; this.cd.detectChanges(); const elem = this.document.querySelector(selector); if (elem) { elem.focus(); } } addTime() { this.config.timeList.push({literal: '', timeList: []}); } /** * add some days to a date, to compute intervals * @param days * @param date */ addDaysToDate(days: number, date: Date) { date = new Date(date.valueOf()); date.setDate(date.getDate() + days); return date; }; /** * add a time period to a specific date choice, * focus on the new input * @param config * @param id */ addTimeToDate(config: any, id: number) { config.timeList.push({literal: ''}); let selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]'; this.cd.detectChanges(); const elem = this.document.querySelector(selector); if (elem) { elem.focus(); } } /** * remove all input contents, does not reset to default */ emptyAll() { this.config.dateList.forEach(element => { element.literal = ''; element.timeList = ['', '', '']; }); this.config.timeList.forEach(element => { element.literal = ''; }); } /** * add all the dates between the start and end dates in the interval section */ addIntervalOfDates() { let newIntervalArray = this.getDatesInRange(this.startDateInterval, this.endDateInterval, 1); const converted = []; newIntervalArray.forEach(element => { converted.push({literal: element, timeList: []}); }); this.config.dateList = [...new Set(converted)]; // add only dates that are not already present with a Set of unique items this.showDateInterval = false; } /** * * @param d1 * @param d2 * @param interval */ getDatesInRange(d1: Date, d2: Date, interval: number) { d1 = new Date(d1); d2 = new Date(d2); const dates = []; while (+d1 < +d2) { dates.push(this.formateDate(d1)); d1.setDate(d1.getDate() + interval) } return dates.slice(0) } /** * get the number of days between two dates * @param d1 * @param d2 */ dayDiff(d1: Date, d2: Date): Number { return Number(((d2.getTime()) - (d1.getTime()) / 31536000000)); } /** * format a date object to the date format used by the inputs of type date * YYYY-MM-DD * @param date */ formateDate(date) { return [ date.getFullYear(), this.getDoubleDigits(date.getMonth() + 1), this.getDoubleDigits(date.getDate()), ].join('-') } getDoubleDigits(str) { return ("00" + str).slice(-2); } }