tsiclient/DateTimePicker-570b44a6.js

import { a as __extends } from './tslib.es6-f952ba6f.js';
import { U as Utils } from './Utils-38a0872e.js';
import { select } from 'd3';
import { C as ChartComponent } from './ChartComponent-ed6f3c6d.js';
import { p as pikaday } from './pikaday-40a24035.js';
import moment from 'moment';
import { T as TimezonePicker } from './TimezonePicker-354a93a2.js';

var DateTimePicker = /** @class */ (function (_super) {
    __extends(DateTimePicker, _super);
    function DateTimePicker(renderTarget) {
        var _this = _super.call(this, renderTarget) || this;
        _this.isValid = true;
        _this.isSettingStartTime = true;
        _this.quickTimeArray = [
            ["Last 15 mins", 15 * 60 * 1000],
            ["Last 30 mins", 30 * 60 * 1000],
            ["Last Hour", 60 * 60 * 1000],
            ["Last 2 Hours", 2 * 60 * 60 * 1000],
            ["Last 4 Hours", 4 * 60 * 60 * 1000],
            ["Last 12 Hours", 12 * 60 * 60 * 1000],
            ["Last 24 Hours", 24 * 60 * 60 * 1000],
            ["Last 7 Days", 7 * 24 * 60 * 60 * 1000],
            ["Last 30 Days", 30 * 24 * 60 * 60 * 1000],
            ["Last 90 Days", 90 * 24 * 60 * 60 * 1000]
        ];
        _this.onSaveOrCancel = function () {
            _this.isSettingStartTime = true;
        };
        return _this;
    }
    // returns -1 if not currently a quicktime
    DateTimePicker.prototype.getCurrentQuickTime = function () {
        var _this = this;
        var matchingQuickTime = this.quickTimeArray.filter(function (quickTimeTuple) {
            return (_this.toMillis - _this.fromMillis === quickTimeTuple[1]);
        });
        if (matchingQuickTime.length !== 1 || this.toMillis !== this.maxMillis) {
            return -1;
        }
        return matchingQuickTime[0][1];
    };
    DateTimePicker.prototype.getQuickTimeText = function (quickTimeMillis) {
        var filteredQuickTime = this.quickTimeArray.filter(function (quickTimeTuple) {
            return (quickTimeMillis === quickTimeTuple[1]);
        });
        if (filteredQuickTime.length !== 1) {
            return null;
        }
        return filteredQuickTime[0][0];
    };
    DateTimePicker.prototype.convertToCalendarDate = function (millis) {
        return this.roundDay(Utils.adjustDateFromTimezoneOffset(Utils.offsetFromUTC(new Date(millis), this.chartOptions.offset)));
    };
    DateTimePicker.prototype.setNewOffset = function (oldOffset) {
        var _this = this;
        var valuesToUpdate = ['fromMillis', 'toMillis'];
        valuesToUpdate.forEach(function (currValue) {
            var oldOffsetMinutes = Utils.getMinutesToUTC(oldOffset, _this[currValue]);
            var utcMillis = _this[currValue] - (oldOffsetMinutes * 60 * 1000);
            _this[currValue] = utcMillis - Utils.getOffsetMinutes(_this.chartOptions.offset, utcMillis) * 60 * 1000;
        });
        this.setFromMillis(this.fromMillis);
        this.setToMillis(this.toMillis);
        this.updateDisplayedFromDateTime();
        this.updateDisplayedToDateTime();
        this.startRange = new Date(this.fromMillis);
        this.endRange = new Date(this.toMillis);
        this.calendarPicker.config({ minDate: this.convertToCalendarDate(this.minMillis) });
        this.calendarPicker.config({ maxDate: this.convertToCalendarDate(this.maxMillis) });
        this.calendarPicker.draw();
        var rangeErrorCheck = this.rangeIsValid(this.fromMillis, this.toMillis);
        this.setIsSaveable(rangeErrorCheck.isSaveable);
        this.displayRangeErrors(rangeErrorCheck.errors);
    };
    DateTimePicker.prototype.render = function (chartOptions, minMillis, maxMillis, fromMillis, toMillis, onSet, onCancel) {
        var _this = this;
        if (chartOptions === void 0) { chartOptions = {}; }
        if (fromMillis === void 0) { fromMillis = null; }
        if (toMillis === void 0) { toMillis = null; }
        if (onSet === void 0) { onSet = null; }
        if (onCancel === void 0) { onCancel = null; }
        this.isSettingStartTime = true;
        this.minMillis = minMillis;
        this.maxMillis = maxMillis;
        if (chartOptions.offset && (typeof chartOptions.offset === "string")) {
            this.offsetName = chartOptions.offset;
        }
        if (toMillis == null) {
            toMillis = this.maxMillis;
        }
        if (fromMillis == null) {
            fromMillis = Math.max(toMillis - (24 * 60 * 60 * 1000), minMillis);
        }
        this.chartOptions.setOptions(chartOptions);
        moment.locale(this.chartOptions.dateLocale);
        this.fromMillis = fromMillis;
        this.toMillis = toMillis;
        this.onSet = onSet;
        this.onCancel = onCancel;
        this.targetElement = select(this.renderTarget)
            .classed("tsi-dateTimePicker", true);
        this.targetElement.html('');
        _super.prototype.themify.call(this, this.targetElement, this.chartOptions.theme);
        var group = this.targetElement.append('div')
            .classed('tsi-dateTimeGroup', true)
            .on('keydown', function (event) {
            if (event.keyCode <= 40 && event.keyCode >= 37) { //arrow key
                event.stopPropagation();
            }
            if (event.keyCode === 27 && _this.chartOptions.dTPIsModal) { //escape
                _this.onCancel();
                _this.onSaveOrCancel();
            }
        });
        this.quickTimesPanel = group.append('div')
            .classed('tsi-quickTimesPanel', true);
        this.buildQuickTimesPanel();
        this.dateTimeSelectionPanel = group.append('div')
            .classed('tsi-dateTimeSelectionPanel', true);
        this.timeControls = this.dateTimeSelectionPanel.append("div").classed("tsi-timeControlsContainer", true);
        this.calendar = this.dateTimeSelectionPanel.append("div").classed("tsi-calendarPicker", true);
        this.createTimezonePicker();
        var saveButtonContainer = this.dateTimeSelectionPanel.append("div").classed("tsi-saveButtonContainer", true);
        var self = this;
        var saveButton = saveButtonContainer.append("button").classed("tsi-saveButton", true).text(this.getString("Save"))
            .on("click", function () {
            self.onSet(self.fromMillis, self.toMillis, self.chartOptions.offset, self.maxMillis === self.toMillis, self.getCurrentQuickTime());
            self.onSaveOrCancel();
        });
        var cancelButton = saveButtonContainer.append('button')
            .attr('class', 'tsi-cancelButton')
            .text(this.getString('Cancel'))
            .on('click', function () {
            _this.onCancel();
            _this.onSaveOrCancel();
        })
            .on('keydown', function (event) {
            if (event.keyCode === 9 && !event.shiftKey && _this.chartOptions.dTPIsModal) { // tab
                _this.quickTimesPanel.selectAll('.tsi-quickTime')
                    .filter(function (d, i) { return i === 0; })
                    .node()
                    .focus();
                event.preventDefault();
            }
        });
        //originally set toMillis to last possible time
        this.toMillis = this.maxMillis;
        this.setFromMillis(fromMillis);
        this.setToMillis(toMillis);
        this.targetElement.append("div").classed("tsi-errorMessageContainer", true);
        this.createTimePicker();
        this.createCalendar();
        this.calendarPicker.draw();
        this.updateDisplayedFromDateTime();
        this.updateDisplayedToDateTime();
        this.startRange = new Date(this.fromMillis);
        this.endRange = new Date(this.toMillis);
        this.calendarPicker.draw();
        return;
    };
    DateTimePicker.prototype.updateDisplayedDateTimes = function () {
        var _this = this;
        ['from', 'to'].forEach(function (fromOrTo) {
            var selectedDate = new Date(_this[fromOrTo + 'Millis']);
            _this.calendarPicker.setDate(_this.roundDay(Utils.offsetFromUTC(selectedDate)));
            _this[fromOrTo + 'Input'].node().value = _this.createTimeString(Utils.offsetFromUTC(selectedDate));
        });
    };
    DateTimePicker.prototype.setFromQuickTimes = function (relativeMillis) {
        this.isSettingStartTime = true;
        this.setToMillis(this.maxMillis);
        this.setFromMillis(this.maxMillis - relativeMillis);
        this.updateDisplayedFromDateTime();
        this.updateDisplayedToDateTime();
        this.calendarPicker.draw();
    };
    DateTimePicker.prototype.buildQuickTimesPanel = function () {
        var _this = this;
        var quickTimes = this.quickTimesPanel.selectAll('.tsi-quickTime')
            .data(this.quickTimeArray);
        var enteredQuickTimes = quickTimes.enter()
            .append('button')
            .attr('class', 'tsi-quickTime')
            .on('click', function (event, d) {
            _this.setFromQuickTimes(d[1]);
        })
            .text(function (d) { return d[0]; })
            .attr('aria-label', function (d) { return _this.getString('select quick time of') + " " + d[0]; });
        // wrap around tab order if dTP in modal form
        var firstQuickTime = enteredQuickTimes.filter(function (d, i) {
            return (i === 0);
        })
            .on('keydown', function (event) {
            if (event.keyCode === 9 && event.shiftKey && _this.chartOptions.dTPIsModal) { // shift tab
                _this.dateTimeSelectionPanel.select(".tsi-saveButtonContainer").select(".tsi-cancelButton").node().focus();
                event.preventDefault();
            }
        });
        if (this.chartOptions.dTPIsModal) {
            firstQuickTime.node().focus();
        }
    };
    DateTimePicker.prototype.createTimeString = function (currDate) {
        return this.getTimeFormat()(currDate);
    };
    DateTimePicker.prototype.getTimeFormat = function () {
        return Utils.timeFormat(true, true, this.chartOptions.offset, true, 0, null, this.chartOptions.dateLocale);
    };
    DateTimePicker.prototype.updateFromAndTo = function (fromMillis, toMillis) {
        this.setFromMillis(fromMillis);
        this.setToMillis(toMillis);
        this.updateDisplayedFromDateTime();
        this.updateDisplayedToDateTime();
        this.startRange = new Date(this.fromMillis);
        this.endRange = new Date(this.toMillis);
        this.calendarPicker.draw();
    };
    DateTimePicker.prototype.createTimezonePicker = function () {
        var _this = this;
        var offset = this.chartOptions.offset;
        if (this.chartOptions.includeTimezones && (typeof offset == "string" || offset == 0)) {
            var timezoneContainer = this.dateTimeSelectionPanel.append("div").attr("class", "tsi-timezoneContainer");
            var timezoneSelectionLabelID = Utils.guid();
            var timezoneSelectionID = timezoneSelectionLabelID + 'Tz';
            timezoneContainer.append("label")
                .classed("tsi-timeLabel", true)
                .attr('aria-label', this.getString('timezone selection'))
                .attr('id', timezoneSelectionLabelID)
                .attr('for', timezoneSelectionID)
                .text(this.getString('timezone'));
            var timezonePickerContainer = timezoneContainer.append("div").classed("tsi-timezonePickerContainer", true);
            var timezonePicker = new TimezonePicker(timezonePickerContainer.node());
            timezonePicker.render(function (newOffset) {
                var matchingQuickTime = _this.getCurrentQuickTime();
                var oldOffset = _this.chartOptions.offset;
                _this.chartOptions.offset = newOffset;
                _this.setNewOffset(oldOffset);
                if (matchingQuickTime !== -1) {
                    _this.setFromQuickTimes(matchingQuickTime);
                }
            }, (typeof offset == "string" ? offset : "UTC"));
            select(timezonePicker.renderTarget).select('select')
                .attr('aria-labelledBy', timezoneSelectionLabelID)
                .attr('id', timezoneSelectionID);
        }
    };
    //zero out everything but year, month and day
    DateTimePicker.prototype.roundDay = function (d) {
        return new Date(d.getFullYear(), d.getMonth(), d.getDate());
    };
    DateTimePicker.prototype.setTimeRange = function (d, isFromSelect) {
        if (this.isSettingStartTime) {
            this.calendarPicker.setStartRange(d);
            this.calendarPicker.setEndRange(null);
            this.startRange = d;
            this.anchorDate = d;
        }
        else {
            if (d.valueOf() > this.anchorDate.valueOf()) {
                if (isFromSelect) {
                    this.setFromDate(this.anchorDate);
                    this.setToDate(d);
                }
                this.calendarPicker.setEndRange(d);
                this.calendarPicker.setStartRange(this.anchorDate);
                this.startRange = this.anchorDate;
                this.endRange = d;
            }
            else {
                if (isFromSelect) {
                    this.setFromDate(d);
                    this.setToDate(this.anchorDate);
                }
                this.calendarPicker.setStartRange(d);
                this.calendarPicker.setEndRange(this.anchorDate);
                this.endRange = this.anchorDate;
                this.startRange = d;
            }
            this.setTimeInputBox(this.fromMillis, true);
            this.setTimeInputBox(this.toMillis, false);
        }
    };
    DateTimePicker.prototype.createCalendar = function () {
        var _this = this;
        var i18nOptions = {
            previousMonth: this.getString('Previous Month'),
            nextMonth: this.getString('Next Month'),
            months: moment.localeData().months(),
            weekdays: moment.localeData().weekdays(),
            weekdaysShort: moment.localeData().weekdaysMin()
        };
        //@ts-ignore
        this.calendarPicker = new pikaday({
            bound: false,
            container: this.calendar.node(),
            field: this.calendar.node(),
            i18n: i18nOptions,
            numberOfMonths: 2,
            onSelect: function (d) {
                _this.setTimeRange(d, true);
                _this.isSettingStartTime = !_this.isSettingStartTime;
                _this.calendarPicker.draw();
            },
            onDraw: function (d) {
                if (_this.isSettingStartTime)
                    return;
                var self = _this;
                _this.calendar.select(".pika-single").selectAll(".pika-day")
                    .on("mouseover", function () {
                    var date = new Date(Number(select(this).attr("data-pika-year")), Number(select(this).attr("data-pika-month")), Number(select(this).attr("data-pika-day")));
                    if (!self.isSettingStartTime) {
                        if (date.valueOf() < self.anchorDate.valueOf() && self.startRange.valueOf() != date.valueOf()) {
                            self.setTimeRange(date, false);
                            self.calendarPicker.draw();
                            return;
                        }
                        if (date.valueOf() >= self.anchorDate.valueOf() && (self.endRange == undefined || self.endRange.valueOf() != date.valueOf())) {
                            self.setTimeRange(date, false);
                            self.calendarPicker.draw();
                            return;
                        }
                    }
                });
            },
            minDate: this.convertToCalendarDate(this.minMillis),
            maxDate: this.convertToCalendarDate(this.maxMillis),
            defaultDate: Utils.adjustDateFromTimezoneOffset(new Date(this.fromMillis))
        });
    };
    DateTimePicker.prototype.setSelectedQuickTimes = function () {
        var _this = this;
        var isSelected = function (d) {
            return (_this.toMillis === _this.maxMillis && (_this.toMillis - _this.fromMillis === d[1]));
        };
        this.quickTimesPanel.selectAll('.tsi-quickTime')
            .classed('tsi-isSelected', isSelected)
            .attr('aria-pressed', isSelected);
    };
    DateTimePicker.prototype.setFromDate = function (calendarDate) {
        var convertedFrom = new Date(Utils.offsetFromUTC(new Date(this.fromMillis), this.chartOptions.offset));
        convertedFrom.setUTCFullYear(calendarDate.getFullYear());
        convertedFrom.setUTCMonth(calendarDate.getMonth());
        convertedFrom.setUTCDate(calendarDate.getDate());
        this.setFromMillis(Utils.offsetToUTC(convertedFrom, this.chartOptions.offset).valueOf());
    };
    DateTimePicker.prototype.setToDate = function (calendarDate) {
        var convertedTo = new Date(Utils.offsetFromUTC(new Date(this.toMillis), this.chartOptions.offset));
        convertedTo.setUTCFullYear(calendarDate.getFullYear());
        convertedTo.setUTCMonth(calendarDate.getMonth());
        convertedTo.setUTCDate(calendarDate.getDate());
        this.setToMillis(Utils.offsetToUTC(convertedTo, this.chartOptions.offset).valueOf());
    };
    DateTimePicker.prototype.setIsSaveable = function (isSaveable) {
        // For now, lets allow users to save the time even in the presence of errors
        this.dateTimeSelectionPanel.select(".tsi-saveButtonContainer").select(".tsi-saveButton")
            .attr("disabled", isSaveable ? null : true)
            .classed("tsi-buttonDisabled", !isSaveable);
        this.isValid = isSaveable;
    };
    //line up the seconds and millis with the second and millis of the max date
    DateTimePicker.prototype.adjustSecondsAndMillis = function (rawMillis) {
        var currDate = new Date(rawMillis);
        var maxDate = new Date(this.maxMillis);
        currDate.setUTCSeconds(maxDate.getUTCSeconds());
        currDate.setUTCMilliseconds(maxDate.getUTCMilliseconds());
        return currDate.valueOf();
    };
    DateTimePicker.prototype.setFromMillis = function (millis) {
        var rangeErrorCheck = this.rangeIsValid(millis, this.toMillis);
        this.fromMillis = millis;
        this.setIsSaveable(rangeErrorCheck.isSaveable);
        this.displayRangeErrors(rangeErrorCheck.errors);
        this.setSelectedQuickTimes();
    };
    DateTimePicker.prototype.setToMillis = function (millis) {
        var rangeErrorCheck = this.rangeIsValid(this.fromMillis, millis);
        this.toMillis = millis;
        this.setIsSaveable(rangeErrorCheck.isSaveable);
        this.displayRangeErrors(rangeErrorCheck.errors);
        this.setSelectedQuickTimes();
    };
    DateTimePicker.prototype.displayRangeErrors = function (rangeErrors) {
        this.targetElement.select(".tsi-errorMessageContainer").selectAll(".tsi-errorMessage").remove();
        if (rangeErrors.length != 0) {
            this.targetElement.select(".tsi-errorMessageContainer").selectAll(".tsi-errorMessages")
                .data(rangeErrors)
                .enter()
                .append("div")
                .classed("tsi-errorMessage", true)
                .attr('role', 'alert')
                .attr('aria-live', 'assertive')
                .text(function (d) { return d; });
        }
    };
    DateTimePicker.prototype.rangeIsValid = function (prospectiveFromMillis, prospectiveToMillis) {
        var accumulatedErrors = [];
        var isSaveable = true;
        var bothTimesValid = !isNaN(prospectiveFromMillis) && !isNaN(prospectiveToMillis);
        if (isNaN(prospectiveFromMillis)) {
            accumulatedErrors.push("*Invalid Start date/time");
            isSaveable = false;
        }
        if (isNaN(prospectiveToMillis)) {
            accumulatedErrors.push("*Invalid end date/time");
            isSaveable = false;
        }
        if (bothTimesValid) {
            if (prospectiveFromMillis > prospectiveToMillis) {
                accumulatedErrors.push("*Start time must be before end time");
                isSaveable = false;
            }
            if (prospectiveFromMillis < this.minMillis) {
                accumulatedErrors.push("*Start time is before first possible time (" + this.getTimeFormat()(this.minMillis) + ")");
            }
            if (prospectiveFromMillis > this.maxMillis) {
                accumulatedErrors.push("*Start time is after last possible time (" + this.getTimeFormat()(this.maxMillis) + ")");
            }
            if (prospectiveToMillis > this.maxMillis) {
                accumulatedErrors.push("*End time is after last possible time (" + this.getTimeFormat()(this.maxMillis) + ")");
            }
            if (prospectiveToMillis < this.minMillis) {
                accumulatedErrors.push("*End time is before first possible time (" + this.getTimeFormat()(this.minMillis) + ")");
            }
        }
        return {
            rangeIsValid: (accumulatedErrors.length == 0),
            errors: accumulatedErrors,
            isSaveable: isSaveable
        };
    };
    DateTimePicker.prototype.updateDisplayedFromDateTime = function (fromInput) {
        if (fromInput === void 0) { fromInput = false; }
        this.calendarPicker.setStartRange(this.convertToCalendarDate(this.fromMillis));
        if (!fromInput)
            this.setTimeInputBox(new Date(this.fromMillis), true);
    };
    DateTimePicker.prototype.updateDisplayedToDateTime = function (fromInput) {
        if (fromInput === void 0) { fromInput = false; }
        this.calendarPicker.setEndRange(this.convertToCalendarDate(this.toMillis));
        if (!fromInput)
            this.setTimeInputBox(new Date(this.toMillis), false);
    };
    DateTimePicker.prototype.offsetUTC = function (date) {
        var dateCopy = new Date(date.valueOf());
        dateCopy.setTime(dateCopy.getTime() - dateCopy.getTimezoneOffset() * 60 * 1000);
        return dateCopy;
    };
    DateTimePicker.prototype.offsetFromUTC = function (date) {
        var dateCopy = new Date(date.valueOf());
        dateCopy.setTime(dateCopy.getTime() + dateCopy.getTimezoneOffset() * 60 * 1000);
        return dateCopy;
    };
    DateTimePicker.prototype.checkDateTimeValidity = function () {
        var parsedFrom = Utils.parseUserInputDateTime(this.fromInput.node().value, this.chartOptions.offset);
        var parsedTo = Utils.parseUserInputDateTime(this.toInput.node().value, this.chartOptions.offset);
        var rangeErrorCheck = this.rangeIsValid(parsedFrom, parsedTo);
        this.setIsSaveable(rangeErrorCheck.isSaveable);
        this.displayRangeErrors(rangeErrorCheck.errors);
    };
    DateTimePicker.prototype.setTimeInputBox = function (utcDate, isFrom) {
        if (isFrom) {
            this.fromInput.node().value = this.createTimeString(utcDate);
        }
        else {
            this.toInput.node().value = this.createTimeString(utcDate);
        }
    };
    DateTimePicker.prototype.createTimePicker = function () {
        var _this = this;
        var timeInputContainer = this.timeControls.append("div").attr("class", "tsi-timeInputContainer");
        var createTimePicker = function (startOrEnd) {
            var fromOrToContainer = timeInputContainer.append("div").classed("tsi-" + startOrEnd + "Container", true);
            var inputLabelID = Utils.guid();
            var inputID = inputLabelID + 'Input';
            var timeLabel = fromOrToContainer.append("label")
                .classed("tsi-timeLabel", true)
                .attr('id', inputLabelID)
                .attr('for', inputID)
                .attr('aria-label', "" + (startOrEnd === 'start' ? _this.getString('Start time input') : _this.getString('End time input')))
                .text(_this.getString(startOrEnd));
            timeLabel.append("span")
                .classed("tsi-timeRequired", true)
                .text(_this.getString('*'));
            var inputName = startOrEnd === 'start' ? 'fromInput' : 'toInput';
            _this[inputName] = fromOrToContainer.append('input')
                .attr('class', 'tsi-dateTimeInput', true)
                .attr('aria-labelledby', inputLabelID)
                .attr('required', true)
                .attr('id', inputID)
                .on('input', function () {
                var rangeErrorCheck = _this.checkDateTimeValidity();
                _this.isSettingStartTime = true;
                if (_this.isValid) {
                    if (startOrEnd === 'start') {
                        var parsedFrom = Utils.parseUserInputDateTime(_this.fromInput.node().value, _this.chartOptions.offset);
                        _this.setFromMillis(parsedFrom);
                        _this.updateDisplayedFromDateTime(true);
                        _this.calendarPicker.draw();
                    }
                    else {
                        var parsedTo = Utils.parseUserInputDateTime(_this.toInput.node().value, _this.chartOptions.offset);
                        _this.setToMillis(parsedTo);
                        _this.updateDisplayedToDateTime(true);
                        _this.calendarPicker.draw();
                    }
                }
            });
            if (startOrEnd == 'end') {
                fromOrToContainer.append("button")
                    .attr("class", "tsi-snapToEndRangeButton")
                    .text(_this.getString("Latest"))
                    .attr('aria-label', _this.getString('snap end time to latest'))
                    .on("click", function () {
                    if (!_this.isSettingStartTime) {
                        _this.setFromDate(_this.startRange);
                    }
                    _this.setToMillis(_this.maxMillis);
                    _this.updateDisplayedFromDateTime();
                    _this.updateDisplayedToDateTime();
                    _this.isSettingStartTime = true;
                    _this.calendarPicker.draw();
                });
            }
        };
        createTimePicker("start");
        createTimePicker("end");
    };
    return DateTimePicker;
}(ChartComponent));

export { DateTimePicker as D };