add a UI to render proper time picker

1 files changed, 97 insertions, 8 deletions

diff --git a/apps/workflowengine/js/requesttimeplugin.js b/apps/workflowengine/js/requesttimeplugin.js
index aee0e773c9e..96cb8a40f7f 100644
--- a/apps/workflowengine/js/requesttimeplugin.js
+++ b/apps/workflowengine/js/requesttimeplugin.js
@@ -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));
 		}
 	};
 })();