mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add a UI to render proper time picker

This commit is contained in:
Morris Jobke 2016-07-29 10:44:38 +02:00 committed by Joas Schilling
parent f1869cd183
commit e978c39b13
No known key found for this signature in database
GPG Key ID: E166FD8976B3BAC8
1 changed files with 97 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
apps/workflowengine/js/requesttimeplugin.js
View File

@ -24,6 +24,11 @@
OCA.WorkflowEngine.Plugins = OCA.WorkflowEngine.Plugins || {};
OCA.WorkflowEngine.Plugins.RequestTimePlugin = {
timezones: [
"Europe/Berlin",
"Europe/London"
],
_$element: null,
getCheck: function() {
return {
'class': 'OCA\\WorkflowEngine\\Check\\RequestTime',
@ -39,14 +44,98 @@
return;
}
var placeholder = '["10:00 Europe\\/Berlin","16:00 Europe\\/Berlin"]'; // FIXME need a time picker JS plugin
$(element).css('width', '300px')
.attr('placeholder', placeholder)
.attr('title', t('workflowengine', 'Example: {placeholder}', {placeholder: placeholder}, undefined, {escape: false}))
.addClass('has-tooltip')
.tooltip({
placement: 'bottom'
var startTime = '16:00',
endTime = '18:00',
timezone = 'Europe/London',
$element = $(element);
if (_.isString(check['value']) && check['value'] !== '') {
var value = JSON.parse(check['value']),
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));
}
};
})();