mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-15 20:44:28 +01:00
436 lines
12 KiB
JavaScript
436 lines
12 KiB
JavaScript
/**
|
|
* 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 = {};
|
|
/**
|
|
* 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)
|
|
{
|
|
// initiate overall timer
|
|
startTimer(overall, _state.overall?.start, _state.overall?.offset); // to show offset / paused time
|
|
if (_state.overall?.paused)
|
|
{
|
|
stopTimer(overall, true);
|
|
}
|
|
else if (!_state.overall?.start)
|
|
{
|
|
stopTimer(overall);
|
|
}
|
|
|
|
// 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.id = _state.specific.id;
|
|
if (_state.specific?.paused)
|
|
{
|
|
stopTimer(specific, true);
|
|
}
|
|
else if (!_state.specific?.start)
|
|
{
|
|
stopTimer(specific);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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
|
|
* @throws string error-message
|
|
*/
|
|
function timerAction(_action, _time)
|
|
{
|
|
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;
|
|
}
|
|
// persist state
|
|
egw.request('timesheet.EGroupware\\Timesheet\\Events.ajax_event', [getState(_action, _time)]).then((tse_id) => {
|
|
if (_action.substring(8) === 'specific')
|
|
{
|
|
specific.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;
|
|
specific.id = undefined;
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Enable/disable buttons based on timer state
|
|
*/
|
|
function setButtonState()
|
|
{
|
|
if (!dialog) return;
|
|
|
|
// disable not matching / available menu-items
|
|
dialog._overlayContentNode.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', Math.round(diff / 60), 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._overlayContentNode.querySelector('div#_specific_timer');
|
|
const overall_timer = dialog._overlayContentNode.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
|
|
* @param string|undefined _app_id
|
|
*/
|
|
function startTimer(_timer, _start, _offset, _app_id)
|
|
{
|
|
// update _timer state object
|
|
if (_start)
|
|
{
|
|
_timer.start = new Date(_start);
|
|
}
|
|
else if(typeof _timer.start === 'undefined')
|
|
{
|
|
_timer.start = new Date();
|
|
}
|
|
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 = _app_id;
|
|
|
|
// 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();
|
|
// update _timer state object
|
|
if (_timer.start)
|
|
{
|
|
if (time.valueOf() < _timer.start.valueOf())
|
|
{
|
|
throw egw.lang('Stop- or pause-time can not be before the start-time!');
|
|
}
|
|
_timer.offset = time.valueOf() - _timer.start.valueOf();
|
|
_timer.start = undefined;
|
|
}
|
|
_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._overlayContentNode.querySelector('div#_specific_timer');
|
|
const overall_timer = dialog?._overlayContentNode.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;
|
|
}
|
|
}
|
|
|
|
return {
|
|
/**
|
|
* Start timer for given app and id
|
|
*
|
|
* @param {Object} _action
|
|
* @param {Array} _senders
|
|
*/
|
|
start_timer(_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)
|
|
{
|
|
startTimer(specific, undefined, 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;
|
|
}
|
|
startTimer(specific, undefined, 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) => {
|
|
// 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
|
|
{
|
|
if (button_id !== 'close') {
|
|
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);
|
|
dialog._overlayContentNode.querySelector('et2-date-time').value = '';
|
|
}
|
|
catch (e) {
|
|
Et2Dialog.alert(e, egw.lang('Invalid Input'), Et2Dialog.ERROR_MESSAGE);
|
|
}
|
|
setButtonState();
|
|
return false;
|
|
}
|
|
dialog = undefined;
|
|
},
|
|
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: state.disable.join(':')
|
|
},
|
|
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();
|
|
});
|
|
});
|
|
}
|
|
};
|
|
}); |