@senx/discovery-widgets
Version:
Discovery Widgets Elements
288 lines (287 loc) • 12.1 kB
JavaScript
import { h } from "@stencil/core";
import { DTPickerOptions } from "./datetimerange-picker/options";
import moment from "moment/min/moment-with-locales";
import { DateRangePicker } from "./datetimerange-picker/datetimerange-picker";
import { Param } from "../../../model/param";
import { GTSLib } from "../../../utils/gts.lib";
import { Utils } from "../../../utils/utils";
import { tz } from "moment-timezone";
export class DiscoveryInputDateRange {
constructor() {
this.options = new Param();
this.dateRange = [];
this.opts = new DTPickerOptions();
this.cbProxy = (start, end) => this.selected(start, end);
}
onDateRangeChange() {
this.setOptions();
}
onOptionsChange() {
this.setOptions();
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
var _a;
if (((_a = this.dateRange) !== null && _a !== void 0 ? _a : []).length > 0) {
this.setOptions();
}
}
selected(start, end) {
if (!this.opts.singleDatePicker) {
if ((!start.isSame(this.previousStart) || !end.isSame(this.previousEnd))) {
this.previousStart = start.clone();
this.previousEnd = end.clone();
this.valueChanged.emit([
GTSLib.toTimestamp(this.previousStart.toISOString(true), this.divider, this.options.timeZone, undefined),
GTSLib.toTimestamp(this.previousEnd.toISOString(true), this.divider, this.options.timeZone, undefined),
]);
}
}
else {
if ((!start.isSame(this.previousStart))) {
this.previousStart = start.clone();
this.valueChanged.emit(GTSLib.toTimestamp(this.previousStart.toISOString(true), this.divider, this.options.timeZone, undefined));
}
}
}
setOptions() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
this.divider = GTSLib.getDivider((_a = this.options.timeUnit) !== null && _a !== void 0 ? _a : 'us');
if (!GTSLib.isArray(this.dateRange))
return;
if (!this.dateRange[0])
return;
this.opts = Object.assign(Object.assign({}, this.opts), { parentEl: this.wrapper, timePicker: !((_b = this.options.input) === null || _b === void 0 ? void 0 : _b.disableTime), singleDatePicker: (((_c = this.dateRange) !== null && _c !== void 0 ? _c : []).length === 1), cancelButtonClasses: 'discovery-btn', buttonClasses: 'discovery-btn', timePicker24Hour: true, timePickerSeconds: true, alwaysShowCalendars: true, autoUpdateInput: true,
// opens: 'left',
// drops: 'auto',
ranges: ((_d = this.options.input) === null || _d === void 0 ? void 0 : _d.ranges)
? this.convertRange((_f = (_e = this.options.input) === null || _e === void 0 ? void 0 : _e.ranges) !== null && _f !== void 0 ? _f : {})
: {
'Today': [moment().startOf('day'), moment().endOf('day')],
'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
'Last 7 Days': [moment().subtract(6, 'days').startOf('day'), moment().endOf('day')],
'This Month': [moment().startOf('month').startOf('day'), moment().endOf('month').endOf('day')],
}, wrapperClasses: '' });
if (this.opts.singleDatePicker) {
this.opts.ranges = undefined;
}
if (this.opts.ranges) {
this.opts.wrapperClasses = 'with-range';
}
if (document.body.offsetWidth < 1024 || this.opts.singleDatePicker) {
this.opts.wrapperClasses += ' sm';
}
if (!!this.options.input && !!this.options.input.min) {
this.opts.minDate = this.toMoment(this.options.input.min);
}
if (!!this.options.input && !!this.options.input.max) {
this.opts.maxDate = this.toMoment(this.options.input.max);
}
let locale = (_h = (_g = this.options.input) === null || _g === void 0 ? void 0 : _g.locale) !== null && _h !== void 0 ? _h : 'default';
if (locale === 'AUTO') {
locale = Utils.getNavigatorLanguage();
}
const timeZone = this.options.timeZone === 'AUTO' ? tz.guess() : this.options.timeZone;
this.opts.locale = {
locale: locale,
format: (_j = this.options.timeFormat) !== null && _j !== void 0 ? _j : 'YYYY-MM-DDTHH:mm:ssZ',
timeZone,
customRangeLabel: (_k = this.options.input) === null || _k === void 0 ? void 0 : _k.customRangeLabel,
applyLabel: (_l = this.options.input) === null || _l === void 0 ? void 0 : _l.applyLabel,
cancelLabel: (_m = this.options.input) === null || _m === void 0 ? void 0 : _m.cancelLabel,
};
if (((_o = this.dateRange) !== null && _o !== void 0 ? _o : []).length > 1) {
this.opts.singleDatePicker = false;
this.previousStart = this.toMoment(this.dateRange[0]);
this.previousEnd = this.toMoment(this.dateRange[1]);
this.opts.startDate = this.previousStart.clone();
this.opts.endDate = this.previousEnd.clone();
}
if (((_p = this.dateRange) !== null && _p !== void 0 ? _p : []).length === 1) {
this.opts.singleDatePicker = true;
this.previousStart = this.toMoment(this.dateRange[0]);
this.previousEnd = this.toMoment(this.dateRange[0]);
this.opts.startDate = this.previousStart.clone();
this.opts.endDate = this.previousEnd.clone();
}
if (this.drp) {
this.drp.remove();
}
this.drp = new DateRangePicker(this.input, this.opts, this.cbProxy);
}
toMoment(timestamp) {
const timeZone = this.options.timeZone === 'AUTO' ? tz.guess() : this.options.timeZone;
if (timeZone !== null && timeZone !== void 0 ? timeZone : 'UTC' !== 'UTC') {
return tz(timestamp / this.divider, timeZone !== null && timeZone !== void 0 ? timeZone : 'UTC');
}
else {
return moment.utc(timestamp / this.divider);
}
}
convertRange(ranges) {
const r = {};
Object.keys(ranges).forEach(k => {
r[k] = ranges[k].map((time) => this.toMoment(time));
});
return r;
}
render() {
return h("div", { key: '037ee22a4f737d87e8eb70c5656cf8d461242dbd', ref: el => this.wrapper = el, class: "wrapper" }, h("button", { key: '89305bb36697d62b19ee6553d7e1f7fb46bd0cc3', class: "discovery-btn prev", onClick: () => this.previousPeriod(), disabled: this.disabled }, "<"), h("input", { key: 'da3065a20efe690b1bd3084a023211cc07110bd2', type: "text", ref: el => this.input = el, required: this.required, disabled: this.disabled, class: "discovery-input" }), h("button", { key: 'c2889321be4761842fe25ede7fd1a72e2c9ae7be', class: "discovery-btn next", onClick: () => this.nextPeriod(), disabled: this.disabled }, ">"));
}
previousPeriod() {
let start;
let end;
if (this.opts.singleDatePicker) {
start = this.previousStart.clone().subtract(1, 'd');
end = this.previousEnd.clone().subtract(1, 'd');
}
else {
const diff = this.previousEnd.diff(this.previousStart);
start = this.previousStart.clone().subtract(diff, 'ms');
end = this.previousEnd.clone().subtract(diff, 'ms');
}
this.selected(start, end);
this.drp.setStartDate(start);
this.drp.setEndDate(end);
}
nextPeriod() {
let start;
let end;
if (this.opts.singleDatePicker) {
start = this.previousStart.clone().add(1, 'd');
end = this.previousEnd.clone().add(1, 'd');
}
else {
const diff = this.previousEnd.diff(this.previousStart);
start = this.previousStart.clone().add(diff, 'ms');
end = this.previousEnd.clone().add(diff, 'ms');
}
this.selected(start, end);
this.drp.setStartDate(start);
this.drp.setEndDate(end);
}
static get is() { return "discovery-input-date-range"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-input-date-range.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-input-date-range.css"]
};
}
static get properties() {
return {
"options": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Param",
"resolved": "Param",
"references": {
"Param": {
"location": "import",
"path": "../../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "new Param()"
},
"dateRange": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "number[]",
"resolved": "number[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "required",
"reflect": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false
}
};
}
static get events() {
return [{
"method": "valueChanged",
"name": "valueChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number[] | number",
"resolved": "number | number[]",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "dateRange",
"methodName": "onDateRangeChange"
}, {
"propName": "options",
"methodName": "onOptionsChange"
}];
}
}
//# sourceMappingURL=discovery-input-date-range.js.map