add a UI to render proper time picker
This commit is contained in:
parent
e0b5949a9f
commit
2734ff7d4e
|
@ -24,6 +24,11 @@
|
||||||
OCA.WorkflowEngine.Plugins = OCA.WorkflowEngine.Plugins || {};
|
OCA.WorkflowEngine.Plugins = OCA.WorkflowEngine.Plugins || {};
|
||||||
|
|
||||||
OCA.WorkflowEngine.Plugins.RequestTimePlugin = {
|
OCA.WorkflowEngine.Plugins.RequestTimePlugin = {
|
||||||
|
timezones: [
|
||||||
|
"Europe/Berlin",
|
||||||
|
"Europe/London"
|
||||||
|
],
|
||||||
|
_$element: null,
|
||||||
getCheck: function() {
|
getCheck: function() {
|
||||||
return {
|
return {
|
||||||
'class': 'OCA\\WorkflowEngine\\Check\\RequestTime',
|
'class': 'OCA\\WorkflowEngine\\Check\\RequestTime',
|
||||||
|
@ -39,14 +44,98 @@
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var placeholder = '["10:00 Europe\\/Berlin","16:00 Europe\\/Berlin"]'; // FIXME need a time picker JS plugin
|
var startTime = '16:00',
|
||||||
$(element).css('width', '300px')
|
endTime = '18:00',
|
||||||
.attr('placeholder', placeholder)
|
timezone = 'Europe/London',
|
||||||
.attr('title', t('workflowengine', 'Example: {placeholder}', {placeholder: placeholder}, undefined, {escape: false}))
|
$element = $(element);
|
||||||
.addClass('has-tooltip')
|
if (_.isString(check['value']) && check['value'] !== '') {
|
||||||
.tooltip({
|
var value = JSON.parse(check['value']),
|
||||||
placement: 'bottom'
|
splittedStart = value[0].split(' ', 2),
|
||||||
});
|
splittedEnd = value[1].split(' ', 2);
|
||||||
|
|
||||||
|
startTime = splittedStart[0];
|
||||||
|
endTime = splittedEnd[0];
|
||||||
|
timezone = splittedStart[1];
|
||||||
|
}
|
||||||
|
var valueJSON = JSON.stringify([startTime + ' ' + timezone, endTime + ' ' + timezone]);
|
||||||
|
if (check['value'] !== valueJSON) {
|
||||||
|
check['value'] = valueJSON;
|
||||||
|
$element.val(valueJSON);
|
||||||
|
}
|
||||||
|
|
||||||
|
$element.css('display', 'none');
|
||||||
|
|
||||||
|
$('<input>')
|
||||||
|
.attr('type', 'text')
|
||||||
|
.attr('placeholder', t('workflowengine', 'Start'))
|
||||||
|
.addClass('start')
|
||||||
|
.val(startTime)
|
||||||
|
.insertBefore($element);
|
||||||
|
$('<input>')
|
||||||
|
.attr('type', 'text')
|
||||||
|
.attr('placeholder', t('workflowengine', 'End'))
|
||||||
|
.addClass('end')
|
||||||
|
.val(endTime)
|
||||||
|
.insertBefore($element);
|
||||||
|
|
||||||
|
var timezoneSelect = $('<select>')
|
||||||
|
.addClass('timezone');
|
||||||
|
_.each(this.timezones, function(timezoneName){
|
||||||
|
var timezoneElement = $('<option>').val(timezoneName).html(timezoneName);
|
||||||
|
|
||||||
|
if (timezoneName === timezone) {
|
||||||
|
timezoneElement.attr('selected', 'selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
timezoneSelect.append(timezoneElement);
|
||||||
|
});
|
||||||
|
timezoneSelect.insertBefore($element);
|
||||||
|
|
||||||
|
$element.parent()
|
||||||
|
.on('change', '.start', _.bind(this.update, this))
|
||||||
|
.on('change', '.end', _.bind(this.update, this))
|
||||||
|
.on('change', '.timezone', _.bind(this.update, this));
|
||||||
|
|
||||||
|
this._$element = $element;
|
||||||
|
},
|
||||||
|
update: function(event) {
|
||||||
|
var value = event.target.value,
|
||||||
|
key = null;
|
||||||
|
|
||||||
|
for (var i = 0; i < event.target.classList.length; i++) {
|
||||||
|
key = event.target.classList[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === null) {
|
||||||
|
console.warn('update triggered but element doesn\'t have any class');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var data = JSON.parse(this._$element.val()),
|
||||||
|
startTime = moment(data[0].split(' ', 2)[0], 'H:m Z'),
|
||||||
|
endTime = moment(data[1].split(' ', 2)[0], 'H:m Z'),
|
||||||
|
timezone = data[0].split(' ', 2)[1];
|
||||||
|
|
||||||
|
if (key === 'start' || key === 'end') {
|
||||||
|
var parsedDate = moment(value, ['H:m', 'h:m a'], true).format('HH:mm');
|
||||||
|
|
||||||
|
if (parsedDate === 'Invalid date') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var indexValue = 0;
|
||||||
|
if (key === 'end') {
|
||||||
|
indexValue = 1;
|
||||||
|
}
|
||||||
|
data[indexValue] = parsedDate + ' ' + timezone;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (key === 'timezone') {
|
||||||
|
data[0] = startTime.format('HH:mm') + ' ' + value;
|
||||||
|
data[1] = endTime.format('HH:mm') + ' ' + value;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._$element.val(JSON.stringify(data));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in New Issue