import declare from 'dojo/_base/declare';
import _WidgetBase from 'dijit/_WidgetBase';
import _Templated from './_Templated';
import _ActionMixin from './_ActionMixin';
import _CustomizationMixin from './_CustomizationMixin';
import DateTimePicker from './DateTimePicker';
import getResource from './I18n';
const resource = getResource('relativeDateTimePicker');
const dtFormatResource = getResource('relativeDateTimePickerDateTimeFormat');
/**
* @class argos.DateTimePicker
*/
const __class = declare('argos.RelativeDateTimePicker', [_WidgetBase, _Templated, _ActionMixin, _CustomizationMixin], {
widgetTemplate: new Simplate([
'<div class="relative-datetime-select" data-dojo-attach-point="relativeDateTimeNode">',
'<div class="relative-datetime-select__title">{%: $.titleText %}</div>',
'<ul class="simpleList" data-dojo-attach-point="listNode"></ul>',
'</div>',
]),
listItemTemplate: new Simplate([
'<li class="simpleList__item" data-time="{%: $.time %}" data-action="select">',
'<div class="item__text--left"><span>{%: $.textLeft %}</span></div>',
'<div class="item__text--right"><span>{%: $.textRight %}</span></div>',
'</li>',
]),
_deferred: null,
_selectedTime: null,
_widgetName: 'relativeDateTimePicker',
_dateTimeModal: null,
customizationSet: 'relativeDateTimePicker',
layout: null,
morningHours: 8,
eveningHours: 15,
showThisEveningUntil: 12,
isModal: false,
showTimePicker: true,
titleText: resource.titleText,
pickDateTimeText: resource.pickDateTimeText,
thisEveningText: resource.thisEveningText,
tomorrowMorningText: resource.tomorrowMorningText,
tomorrowAfternoonText: resource.tomorrowAfternoonText,
nextWeekText: resource.nextWeekText,
nextMonthText: resource.nextMonthText,
hoursFormat: dtFormatResource.hoursFormat,
dayHoursFormat: dtFormatResource.dayHoursFormat,
hoursFormat24: dtFormatResource.hoursFormat24,
dayHoursFormat24: dtFormatResource.dayHoursFormat24,
createLayout: function createLayout() {
return [{
title: this.titleText,
children: [{
label: this.thisEveningText,
time: moment()
.clone()
.hours(this.eveningHours)
.minutes(0)
.seconds(0),
format: (App.is24HourClock()) ? this.hoursFormat24 : this.hoursFormat,
}, {
label: this.tomorrowMorningText,
time: moment()
.clone()
.add(1, 'days')
.hours(this.morningHours)
.minutes(0)
.seconds(0),
format: (App.is24HourClock()) ? this.hoursFormat24 : this.hoursFormat,
}, {
label: this.tomorrowAfternoonText,
time: moment()
.clone()
.add(1, 'days')
.hours(this.eveningHours)
.minutes(0)
.seconds(0),
format: (App.is24HourClock()) ? this.hoursFormat24 : this.hoursFormat,
}, {
label: this.nextWeekText,
time: moment()
.clone()
.startOf('week')
.add(7, 'days')
.hours(this.morningHours)
.minutes(0)
.seconds(0),
format: (App.is24HourClock()) ? this.dayHoursFormat24 : this.dayHoursFormat,
}, {
label: this.nextMonthText,
time: moment()
.clone()
.startOf('month')
.add(1, 'month')
.hours(this.morningHours)
.minutes(0)
.seconds(0),
format: (App.is24HourClock()) ? this.dayHoursFormat24 : this.dayHoursFormat,
}],
}];
},
init: function init() {
this.inherited(arguments);
},
getContent: function getContent() {
return this._selectedTime;
},
makeItem: function makeItem({ label, time, format }) {
const item = $(this.listItemTemplate.apply({ textLeft: label, textRight: time.format(format) }));
item[0].time = time;
$(this.listNode).append(item);
},
makeListItems: function makeListItems({ title, children }) {
let startIndex = 0;
if (title === this.titleText) {
const currentTime = moment();
if (currentTime.hours() <= this.showThisEveningUntil) {
this.makeItem(children[startIndex]);
}
startIndex++;
}
for (let i = startIndex; i < children.length; i++) {
this.makeItem(children[i]);
}
return this;
},
processLayout: function processLayout() {
for (let i = 0; i < this.layout.length; i++) {
this.makeListItems(this.layout[i]);
}
},
select: function select(evt) {
this._selectedTime = evt.$source.time;
if (this.isModal) {
this._modalNode.resolveDeferred();
this._selectedTime = null;
}
},
show: function show(options = {}) {
this.options = options;
this.showTimePicker = options.showTimePicker;
this.layout = this.layout || this._createCustomizedLayout(this.createLayout());
if (!this.listNode.children.length) {
this.processLayout();
}
return;
},
toDateTimePicker: function toDateTimePicker() {
App.modal.hide();
const dateTimePicker = new DateTimePicker({ isModal: true });
const toolbar = [
{
action: 'cancel',
className: 'button--flat button--flat--split',
text: resource.cancelText,
}, {
action: 'resolve',
className: 'button--flat button--flat--split',
text: resource.confirmText,
},
];
App.modal.add(dateTimePicker, toolbar, this.options).then(this._deferred.resolve);
},
});
export default __class;