egroupware/api/js/jsapi/egw_timer.js

/**
 * EGroupware clientside API object
 *
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package etemplate
 * @subpackage api
 * @link https://www.egroupware.org
 * @author Ralf Becker <RalfBecker@outdoor-training.de>
 */

import './egw_core.js';
import {sprintf} from "../egw_action/egw_action_common";

egw.extend('timer', egw.MODULE_GLOBAL, function()
{
	"use strict";

	/**
	 * Overall timer state
	 */
	let overall = {};
	/**
	 * Specific timer state
	 */
	let specific = {};
	/**
	 * Disable config with values "overall", "specific" or "overwrite"
	 * @type {string[]}
	 */
	let disable = [];
	/**
	 * Timer container in top-menu
	 * @type {Element}
	 */
	const timer = document.querySelector('#topmenu_timer');
	/**
	 * Reference from setInterval to stop periodic update
	 */
	let timer_interval;
	/**
	 * Reference to open dialog or undefined if not open
	 * @type {Et2-dialog}
	 */
	let dialog;

	/**
	 * Set state of timer
	 *
	 * @param _state
	 */
	function setState(_state)
	{
		disable = _state.disable;
		// initiate overall timer
		startTimer(overall, _state.overall?.start, _state.overall?.offset);	// to show offset / paused time
		overall.started = _state.overall?.started ? new Date(_state.overall.started) : undefined;
		overall.started_id = _state.overall?.started_id;
		if (_state.overall?.paused)
		{
			stopTimer(overall, true);
		}
		else if (!_state.overall?.start)
		{
			stopTimer(overall);
		}
		overall.last = _state.overall.last ? new Date(_state.overall.last) : undefined;
		overall.id = _state.overall?.id;

		// initiate specific timer, only if running or paused
		if (_state.specific?.start || _state.specific?.paused)
		{
			startTimer(specific, _state.specific?.start, _state.specific?.offset, _state.specific.app_id);	// to show offset / paused time
			specific.started = _state.specific?.started ? new Date(_state.specific.started) : undefined;
			specific.started_id = _state.specific?.started_id;
			specific.id = _state.specific.id;
			if (_state.specific?.paused)
			{
				stopTimer(specific, true);
			}
			else if (!_state.specific?.start)
			{
				stopTimer(specific);
			}
		}
		specific.last = _state.specific.last ? new Date(_state.specific.last) : undefined;
		specific.id = _state.specific?.id;
	}

	/**
	 * Get state of timer
	 * @param string _action last action
	 * @param string|Date|undefined _time time to report
	 * @returns {{action: string, overall: {}, specific: {}, ts: Date}}
	 */
	function getState(_action, _time)
	{
		return {
			action: _action,
			ts: new Date(_time || new Date),
			overall: overall,
			specific: specific
		}
	}

	/**
	 * Run timer action eg. start/stop
	 *
	 * @param {string} _action
	 * @param {string} _time
	 * @param {string} _app_id
	 * @return Promise from egw.request() to wait for state being persisted on server
	 * @throws string error-message
	 */
	function timerAction(_action, _time, _app_id)
	{
		const [type, action] = _action.split('-');
		switch(_action)
		{
			case 'overall-start':
				startTimer(overall, _time);
				break;

			case 'overall-pause':
				stopTimer(overall,true, _time);
				if (specific?.start) stopTimer(specific, true, _time);
				break;

			case 'overall-stop':
				stopTimer(overall, false, _time);
				if (specific?.start) stopTimer(specific, false, _time);
				break;

			case 'specific-start':
				if (overall?.paused) startTimer(overall, _time);
				startTimer(specific, _time);
				break;

			case 'specific-pause':
				stopTimer(specific,true, _time);
				break;

			case 'specific-stop':
				stopTimer(specific, false, _time);
				break;
		}
		// set _app_id on timer, if specified
		if (_app_id && type === 'specific')
		{
			specific.app_id = _app_id;
		}
		// persist state
		return egw.request('timesheet.EGroupware\\Timesheet\\Events.ajax_event', [getState(_action, _time)]).then((tse_id) =>
		{
			const timer = type === 'specific' ? specific : overall;
			// do NOT set/change timer.id, if a paused timer get stopped (to show and update paused time, not irrelevant stop)
			if (timer.start || typeof timer.paused !== 'undefined')
			{
				timer.id = tse_id;
			}
			if (action === 'start')
			{
				timer.started_id = tse_id;
			}
			if (_action === 'specific-stop')
			{
				let type = 'add';
				let extra = {events: 'specific'};
				if (specific.app_id && specific.app_id.substring(0, 11) === 'timesheet::')
				{
					extra.ts_id = specific.app_id.substring(11);
					type = 'edit';
				}
				egw.open(null, 'timesheet', type, extra);

				// unset the app_id and the tse_id to not associate the next start with it
				specific.app_id = undefined;
			}
		});
	}

	/**
	 * Enable/disable buttons based on timer state
	 */
	function setButtonState()
	{
		if (!dialog) return;

		// disable not matching / available menu-items
		dialog.querySelectorAll('et2-button').forEach(button =>
		{
			if (button.id.substring(0, 7) === 'overall')
			{
				// timer running: disable only start, enable pause and stop
				if (overall?.start)
				{
					button.disabled = button.id === 'overall[start]';
				}
				// timer paused: disable pause, enable start and stop
				else if (overall?.paused)
				{
					button.disabled = button.id === 'overall[pause]';
				}
				// timer stopped: disable stop and pause, enable start
				else
				{
					button.disabled = button.id !== 'overall[start]';
				}
			}
			else if (button.id.substring(0, 8) === 'specific')
			{
				// timer running: disable only start, enable pause and stop
				if (specific?.start)
				{
					button.disabled = button.id === 'specific[start]';
				}
				// timer paused: disable pause, enable start and stop
				else if (specific?.paused)
				{
					button.disabled = button.id === 'specific[pause]';
				}
				// timer stopped: disable stop and pause, enable start
				else
				{
					button.disabled = button.id !== 'specific[start]';
				}
			}
		});
	}

	/**
	 * Update the timer DOM node according to _timer state
	 *
	 * @param {DOMNode} _node
	 * @param {object} _timer
	 */
	function updateTimer(_node, _timer)
	{
		let sep = ':';
		let diff = Math.round((_timer.offset || 0) / 60000.0)
		if (_timer.start)
		{
			const now = Math.round((new Date()).valueOf() / 1000.0);
			sep = now % 2 ? ' ' : ':';
			diff = Math.round((now - Math.round(_timer.start.valueOf() / 1000.0)) / 60.0);
		}
		_node.textContent = sprintf('%d%s%02d', (diff / 60)|0, sep, diff % 60);
		// set CSS classes accordingly
		_node.classList.toggle('running', !!_timer.start);
		_node.classList.toggle('paused', _timer.paused || false);
		_node.classList.toggle('overall', _timer === overall);
	}

	/**
	 * Update all timers: topmenu and dialog (if open)
	 */
	function update()
	{
		// topmenu only shows either specific, if running or paused, or the overall timer
		updateTimer(timer, specific.start || specific.paused ? specific : overall);

		// if dialog is open, it shows both timers
		if (dialog)
		{
			const specific_timer = dialog.querySelector('div#_specific_timer');
			const overall_timer = dialog.querySelector('div#_overall_timer');
			if (specific_timer)
			{
				updateTimer(specific_timer, specific);
			}
			if (overall_timer)
			{
				updateTimer(overall_timer, overall);
			}
		}
	}


	/**
	 * Start given timer
	 *
	 * @param object _timer
	 * @param string|Date|undefined _start to initialise with time different from current time
	 * @param number|undefined _offset to set an offset
	 */
	function startTimer(_timer, _start, _offset)
	{
		_timer.started = _start ? new Date(_start) : new Date();
		_timer.started.setSeconds(0);	// only use full minutes, as this is what we display
		if (_timer.last && _timer.started.valueOf() < _timer.last.valueOf())
		{
			throw egw.lang('Start-time can not be before last stop- or pause-time %1!', formatUTCTime(_timer.last));
		}
		// update _timer state object
		_timer.start = new Date(_timer.last = _timer.started);

		if (_offset || _timer.offset && _timer.paused)
		{
			_timer.start.setMilliseconds(_timer.start.getMilliseconds()-(_offset || _timer.offset));
		}
		_timer.offset = 0;	// it's now set in start-time
		_timer.paused = false;
		_timer.app_id = undefined;

		// update now
		update();

		// initiate periodic update, if not already runing
		if (!timer_interval)
		{
			timer_interval = window.setInterval(update, 1000);
		}
	}

	/**
	 * Stop or pause timer
	 *
	 * If specific timer is stopped, it will automatically display the overall timer, if running or paused
	 *
	 * @param object _timer
	 * @param bool|undefined _pause true: pause, else: stop
	 * @param string|Date|undefined _time stop-time, default current time
	 * @throws string error-message when timer.start < _time
	 */
	function stopTimer(_timer, _pause, _time)
	{
		const time = _time ? new Date(_time) : new Date();
		time.setSeconds(0);	// only use full minutes, as this is what we display
		if (time.valueOf() < _timer.last.valueOf())
		{
			const last_time = formatUTCTime(_timer.last);
			if (_timer.start)
			{
				throw egw.lang('Stop- or pause-time can not be before the start-time %1!', last_time);
			}
			else
			{
				throw egw.lang('Start-time can not be before last stop- or pause-time %1!', last_time);
			}
		}
		// update _timer state object
		if (_timer.start)
		{
			if (time.valueOf() < _timer.start.valueOf())
			{
			}
			_timer.offset = time.valueOf() - _timer.start.valueOf();
			_timer.start = undefined;
		}
		// if we stop an already paused timer, we keep the paused event as last, not the stop
		if (_timer.paused)
		{
			_timer.paused = _pause || undefined;
		}
		else
		{
			_timer.last = time;
			_timer.paused = _pause || false;
		}
		// update timer display
		updateTimer(timer, _timer);

		// if dialog is shown, update its timer(s) too
		if (dialog)
		{
			const specific_timer = dialog.querySelector('div#_specific_timer');
			const overall_timer = dialog?.querySelector('div#_overall_timer');
			if (specific_timer && _timer === specific)
			{
				updateTimer(specific_timer, specific)
			}
			if (overall_timer && _timer === overall)
			{
				updateTimer(overall_timer, overall);
			}
		}

		// stop periodic update, only if NO more timer is running
		if (timer_interval && !specific.start && !overall.start)
		{
			window.clearInterval(timer_interval);
			timer_interval = undefined;
		}
	}

	/**
	 * Format a time according to user preference
	 *
	 * Cant import from DateTime.ts, gives an error ;)
	 *
	 * @param {Date} date
	 * @param {Object|undefined} options object containing attribute timeFormat=12|24, default user preference
	 * @returns {string}
	 */
	function formatTime(date, options)
	{
		if(!date || !(date instanceof Date))
		{
			return "";
		}
		let _value = '';

		let timeformat = options?.timeFormat || egw.preference("timeformat") || "24";
		let hours = (timeformat == "12" && date.getUTCHours() > 12) ? (date.getUTCHours() - 12) : date.getUTCHours();
		if(timeformat == "12" && hours == 0)
		{
			// 00:00 is 12:00 am
			hours = 12;
		}

		_value = (timeformat == "24" && hours < 10 ? "0" : "") + hours + ":" +
			(date.getUTCMinutes() < 10 ? "0" : "") + (date.getUTCMinutes()) +
			(timeformat == "24" ? "" : (date.getUTCHours() < 12 ? " am" : " pm"));

		return _value;
	}

	/**
	 * Format a UTC time according to user preference
	 *
	 * @param {Date} date
	 * @returns {string}
	 */
	function formatUTCTime(date)
	{
		// eT2 operates in user-time, while timers here always operate in UTC
		return formatTime(new Date(date.valueOf() - egw.getTimezoneOffset() * 60000));
	}

	/**
	 * Open the timer dialog to start/stop timers
	 *
	 * @param {string} _title default "Start & stop timer"
	 */
	function timerDialog(_title)
	{
		// Pass egw in the constructor
		dialog = new Et2Dialog(egw);

		// Set attributes.  They can be set in any way, but this is convenient.
		dialog.transformAttributes({
			// If you use a template, the second parameter will be the value of the template, as if it were submitted.
			callback: (button_id, value) =>		// return false to prevent dialog closing
			{
				dialog = undefined;
			},
			title: _title || 'Start & stop timer',
			template: egw.webserverUrl + '/timesheet/templates/default/timer.xet',
			buttons: [
				{label: egw.lang("Close"), id: "close", default: true, image: "cancel"},
			],
			value: {
				content: {
					disable: disable.join(':'),
					times: {
						specific: getTimes(specific),
						overall: getTimes(overall)
					}
				},
				sel_options: {}
			}
		});
		// Add to DOM, dialog will auto-open
		document.body.appendChild(dialog);
		dialog.getUpdateComplete().then(() => {
			// enable/disable buttons based on timer state
			setButtonState();
			// update timers in dialog
			update();
		});
	}

	/**
	 * Update times displayed under buttons
	 */
	function updateTimes()
	{
		if (!dialog) return;

		const times = {
			specific: getTimes(specific),
			overall: getTimes(overall)
		};

		// disable not matching / available menu-items
		dialog.querySelectorAll('et2-date-time-today').forEach(_widget =>
		{
			const [, timer, action] = _widget.id.match(/times\[([^\]]+)\]\[([^\]]+)\]/);
			_widget.value = times[timer][action];
		});
	}

	/**
	 * Get start, pause and stop time of timer to display in UI
	 *
	 * @param {Object} _timer
	 * @return {Object} with attributes start, pause, stop
	 */
	function getTimes(_timer)
	{
		const started = _timer.started ? new Date(_timer.started.valueOf() - egw.getTimezoneOffset() * 60000) : undefined;
		const last = _timer.last ? new Date(_timer.last.valueOf() - egw.getTimezoneOffset() * 60000) : undefined;
		return {
			start: started,
			paused: _timer.paused ? last : undefined,
			stop: !_timer.start && !_timer.paused ? last : undefined
		};
	}

	return {
		/**
		 * Change/overwrite time
		 *
		 * @param {PointerEvent} _ev
		 * @param {Et2DateTimeToday} _widget
		 */
		change_timer: function(_ev, _widget)
		{
			// if there is no value, or timer overwrite is disabled --> ignore click
			if (!_widget?.value || disable.indexOf('overwrite') !== -1) {
				return;
			}
			const [, which, action] = _widget.id.match(/times\[([^\]]+)\]\[([^\]]+)\]/);
			const timer = which === 'overall' ? overall : specific;
			const tse_id = timer[action === 'start' ? 'started_id' : 'id'];
			const dialog = new Et2Dialog(egw);

			// Set attributes.  They can be set in any way, but this is convenient.
			dialog.transformAttributes({
				callback: (_button, _values) => {
					const change = (new Date(_widget.value)).valueOf() - (new Date(_values.time)).valueOf();
					if (_button === Et2Dialog.OK_BUTTON && change)
					{
						_widget.value = _values.time;
						timer[action === 'start' ? 'started' : action] = new Date((new Date(_values.time)).valueOf() + egw.getTimezoneOffset() * 60000);
						// for a stopped or paused timer, we need to adjust the offset (duration) and the displayed timer too
						if (timer.offset)
						{
							timer.offset -= action === 'start' ? -change : change;
							update();
							// for stop/pause set last time, otherwise we might not able to start again directly after
							if (action !== 'start')
							{
								timer.last = new Date(timer[action]);
							}
						}
						// for a running timer, we need to adjust the (virtual) start too
						else if (timer.start)
						{
							timer.start = new Date(timer.start.valueOf() - change);
							// for running timer set last time, otherwise we might not able to stop directly after
							timer.last = new Date(timer.start);
						}
						egw.request('timesheet.EGroupware\\Timesheet\\Events.ajax_updateTime',
							[tse_id, new Date((new Date(_values.time)).valueOf() + egw.getTimezoneOffset() * 60000)])
					}
				},
				title: egw.lang('Change time'),
				template: 'timesheet.timer.change',
				buttons: Et2Dialog.BUTTONS_OK_CANCEL,
				value: {
					content: { time: _widget.value }
				}
			});
			// Add to DOM, dialog will auto-open
			document.body.appendChild(dialog);
		},

		/**
		 * Start, Pause or Stop clicked in timer-dialog
		 *
		 * @param {Event} _ev
		 * @param {Et2Button} _button
		 */
		timer_button: function(_ev, _button)
		{
			const value = dialog.value;
			try {
				timerAction(_button.id.replace(/^([a-z]+)\[([a-z]+)\]$/, '$1-$2'),
					// eT2 operates in user-time, while timers here always operate in UTC
					value.time ? new Date((new Date(value.time)).valueOf() + egw.getTimezoneOffset() * 60000) : undefined);
			}
			catch (e) {
				Et2Dialog.alert(e, egw.lang('Invalid Input'), Et2Dialog.ERROR_MESSAGE);
			}
			setButtonState();
			updateTimes();
			return false;
		},

		/**
		 * Start timer for given app and id
		 *
		 * @param {Object} _action
		 * @param {Array} _senders
		 */
		start_timer: function(_action, _senders)
		{
			if (_action.parent.data.nextmatch?.getSelection().all || _senders.length !== 1)
			{
				egw.message(egw.lang('You must select a single entry!'), 'error');
				return;
			}
			// timer already running, ask user if he wants to associate it with the entry, or cancel
			if (specific.start || specific.paused)
			{
				Et2Dialog.show_dialog((_button) => {
						if (_button === Et2Dialog.OK_BUTTON)
						{
							if (specific.paused)
							{
								timerAction('specific-start', undefined, _senders[0].id);
							}
							else
							{
								specific.app_id = _senders[0].id;
								egw.request('timesheet.EGroupware\\Timesheet\\Events.ajax_updateAppId', [specific.id, specific.app_id]);
							}
						}
					},
					egw.lang('Do you want to associate it with the selected %1 entry?', egw.lang(_senders[0].id.split('::')[0])),
					egw.lang('Timer already running or paused'), {},
					Et2Dialog.BUTTONS_OK_CANCEL, Et2Dialog.QUESTION_MESSAGE, undefined, egw);
				return;
			}
			timerAction('specific-start', undefined, _senders[0].id);
		},

		/**
		 * Create timer in top-menu
		 *
		 * @param {string} _parent parent to create selectbox in
		 */
		add_timer: function(_parent)
		{
			const timer_container = document.getElementById(_parent);
			if (!timer_container) return;

			// set state if given
			const timer = document.getElementById('topmenu_timer');
			const state = timer && timer.getAttribute('data-state') ? JSON.parse(timer.getAttribute('data-state')) : undefined;
			if (timer && state)
			{
				setState(state);
			}

			// bind click handler
			timer_container.addEventListener('click', (ev) => {
				timerDialog();
			});

			// check if overall working time is not disabled
			if (state.disable.indexOf('overall') === -1)
			{
				// we need to wait that all JS is loaded
				window.egw_ready.then(() => { window.setTimeout(() =>
				{
					// check if we should ask on login to start working time
					this.preference('workingtime_session', 'timesheet', true).then(pref =>
					{
						if (pref === 'no') return;

						// overall timer not running, ask to start
						if (overall && !overall.start && !state.overall.dont_ask)
						{
							Et2Dialog.show_dialog((button) => {
								if (button === Et2Dialog.YES_BUTTON)
								{
									timerAction('overall-start');
								}
								else
								{
									egw.request('EGroupware\\Timesheet\\Events::ajax_dontAskAgainWorkingTime');
								}
							}, 'Do you want to start your working time?', 'Working time', {}, Et2Dialog.BUTTONS_YES_NO);
						}
						// overall timer running for more than 16 hours, ask to stop
						else if (overall?.start && (((new Date()).valueOf() - overall.start.valueOf()) / 3600000) >= 16)
						{
							timerDialog('Forgot to switch off working time?');
						}
					});

				}, 2000)});
			}
		},

		/**
		 * Ask user to stop working time
		 *
		 * @returns {Promise<void>} resolved once user answered, to continue logout
		 */
		onLogout_timer: function()
		{
			let promise;
			if (overall.start || overall.paused)
			{
				promise = new Promise((_resolve, _reject) =>
				{
					Et2Dialog.show_dialog((button) => {
						if (button === Et2Dialog.YES_BUTTON)
						{
							timerAction('overall-stop').then(_resolve);
						}
						else
						{
							_resolve();
						}
					}, 'Do you want to stop your working time?', 'Working time', {}, Et2Dialog.BUTTONS_YES_NO);
				});
			}
			else
			{
				promise = Promise.resolve();
			}
			return promise;
		}
	};
});