/** * 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 */ 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.updateComplete.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} 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; } }; });