mirror of
https://github.com/EGroupware/egroupware.git
synced 2025-06-30 06:30:23 +02:00
WIP timesheet timer
This commit is contained in:
@ -29,15 +29,20 @@ egw.extend('timer', egw.MODULE_GLOBAL, function()
|
|||||||
{
|
{
|
||||||
timer_start = _state.start ? new Date(_state.start) : undefined;
|
timer_start = _state.start ? new Date(_state.start) : undefined;
|
||||||
timer_offset = _state.offset || 0;
|
timer_offset = _state.offset || 0;
|
||||||
if (timer_offset && timer_start)
|
timer_paused = _state.paused || false
|
||||||
|
if (timer_paused)
|
||||||
{
|
{
|
||||||
timer_start.setMilliseconds(timer_start.getMilliseconds()-timer_offset);
|
startTimer(); // to show offset / paused time
|
||||||
|
stopTimer(true);
|
||||||
}
|
}
|
||||||
if (timer_start || _state.paused)
|
else if (timer_start)
|
||||||
{
|
{
|
||||||
startTimer();
|
startTimer(_state.start);
|
||||||
|
}
|
||||||
if (_state.paused) stopTimer(true); // sets timer_paused
|
else
|
||||||
|
{
|
||||||
|
startTimer(); // to show offset / stopped time
|
||||||
|
stopTimer();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -77,31 +82,55 @@ egw.extend('timer', egw.MODULE_GLOBAL, function()
|
|||||||
egw.request('timesheet.timesheet_bo.ajax_event', [state])
|
egw.request('timesheet.timesheet_bo.ajax_event', [state])
|
||||||
}
|
}
|
||||||
|
|
||||||
function startTimer()
|
/**
|
||||||
|
* Enable/disable menu items based on timer state
|
||||||
|
*/
|
||||||
|
function setMenuState()
|
||||||
{
|
{
|
||||||
timer_paused = false;
|
const menu = document.querySelector('et2-select#timer_selectbox').menu;
|
||||||
timer_start = new Date();
|
// disable not matching / available menu-items
|
||||||
|
menu.getAllItems('et2-selectbox#timer_selecbox sl-menu-item').forEach(item =>
|
||||||
|
{
|
||||||
|
// timer running: disable only start, enable pause and stop
|
||||||
|
if (timer_start)
|
||||||
|
{
|
||||||
|
item.disabled = item.value === 'overall-start';
|
||||||
|
}
|
||||||
|
// timer paused: disable pause, enable start and stop
|
||||||
|
else if (timer_paused)
|
||||||
|
{
|
||||||
|
item.disabled = item.value === 'overall-pause';
|
||||||
|
}
|
||||||
|
// timer stopped: disable stop and pause, enable start
|
||||||
|
else
|
||||||
|
{
|
||||||
|
item.disabled = item.value !== 'overall-start';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function startTimer(_time)
|
||||||
|
{
|
||||||
|
if (_time)
|
||||||
|
{
|
||||||
|
timer_start = new Date(_time);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
timer_start = new Date();
|
||||||
|
}
|
||||||
if (timer_offset > 0)
|
if (timer_offset > 0)
|
||||||
{
|
{
|
||||||
timer_start.setMilliseconds(timer_start.getMilliseconds()-timer_offset);
|
timer_start.setMilliseconds(timer_start.getMilliseconds()-timer_offset);
|
||||||
}
|
}
|
||||||
|
timer_offset = 0; // it's now set in start-time
|
||||||
|
timer_paused = false;
|
||||||
const update = () =>
|
const update = () =>
|
||||||
{
|
{
|
||||||
if (!timer_start)
|
let diff = Math.round(((new Date()).valueOf() - timer_start.valueOf())/1000.0);
|
||||||
{
|
const sep = diff % 2 ? ' ' : ':';
|
||||||
timer.textContent = '0:00';
|
diff = Math.round(diff / 60.0);
|
||||||
}
|
timer.textContent = sprintf('%d%s%02d', Math.round(diff/60), sep, diff % 60);
|
||||||
else if (timer_paused)
|
|
||||||
{
|
|
||||||
// do nothing
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
let diff = Math.round(((new Date()).valueOf() - timer_start.valueOf())/1000.0);
|
|
||||||
const sep = diff % 2 ? ' ' : ':';
|
|
||||||
diff = Math.round(diff / 60.0);
|
|
||||||
timer.textContent = sprintf('%d%s%02d', Math.round(diff/60), sep, diff % 60);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
timer.classList.add('running');
|
timer.classList.add('running');
|
||||||
timer.classList.remove('paused');
|
timer.classList.remove('paused');
|
||||||
@ -123,9 +152,14 @@ egw.extend('timer', egw.MODULE_GLOBAL, function()
|
|||||||
timer.classList.add('paused');
|
timer.classList.add('paused');
|
||||||
timer_paused = true;
|
timer_paused = true;
|
||||||
}
|
}
|
||||||
timer_offset = (new Date()).valueOf() - timer_start.valueOf();
|
else
|
||||||
if (!_pause)
|
|
||||||
{
|
{
|
||||||
|
timer.classList.remove('paused');
|
||||||
|
timer_paused = false;
|
||||||
|
}
|
||||||
|
if (timer_start)
|
||||||
|
{
|
||||||
|
timer_offset = (new Date()).valueOf() - timer_start.valueOf();
|
||||||
timer_start = undefined;
|
timer_start = undefined;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -149,7 +183,8 @@ egw.extend('timer', egw.MODULE_GLOBAL, function()
|
|||||||
}
|
}
|
||||||
|
|
||||||
// create selectbox / menu
|
// create selectbox / menu
|
||||||
const select = document.createElement('et2-select', {id: 'timer_selectbox'});
|
const select = document.createElement('et2-select');
|
||||||
|
select.id = 'timer_selectbox';
|
||||||
timer_container.append(select);
|
timer_container.append(select);
|
||||||
|
|
||||||
// bind change handler
|
// bind change handler
|
||||||
@ -175,6 +210,7 @@ egw.extend('timer', egw.MODULE_GLOBAL, function()
|
|||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
setMenuState();
|
||||||
select.dropdown.show();
|
select.dropdown.show();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -4509,6 +4509,8 @@ span.overlayContainer img.overlay {
|
|||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
height: 39px;
|
height: 39px;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
/*active Tabs*/
|
/*active Tabs*/
|
||||||
}
|
}
|
||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 {
|
||||||
@ -4560,8 +4562,11 @@ span.overlayContainer img.overlay {
|
|||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
|
||||||
background-color: rgba(153, 204, 255, 0.4);
|
background-color: rgba(153, 204, 255, 0.4);
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
padding-top: 8px;
|
padding-top: 7px;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
width: -moz-available;
|
||||||
|
max-width: fit-content !important;
|
||||||
}
|
}
|
||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover .egw_fw_ui_tab_close_button {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover .egw_fw_ui_tab_close_button {
|
||||||
background-image: url(../../api/templates/default/images/close.svg);
|
background-image: url(../../api/templates/default/images/close.svg);
|
||||||
@ -4674,7 +4679,6 @@ span.overlayContainer img.overlay {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
border-right: 1px solid #bfbfbf;
|
|
||||||
}
|
}
|
||||||
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv {
|
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
@ -5019,7 +5023,7 @@ span.overlayContainer img.overlay {
|
|||||||
background-image: url(../../api/templates/default/images/splitter_vert.png);
|
background-image: url(../../api/templates/default/images/splitter_vert.png);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-color: transparent;
|
background-color: #E6E6E6;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -5487,10 +5491,15 @@ span.overlayContainer img.overlay {
|
|||||||
display: block;
|
display: block;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: #606060;
|
color: #606060;
|
||||||
|
height: 45px;
|
||||||
|
width: 45px;
|
||||||
}
|
}
|
||||||
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.paused {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -4489,6 +4489,8 @@ span.overlayContainer img.overlay {
|
|||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
height: 39px;
|
height: 39px;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
/*active Tabs*/
|
/*active Tabs*/
|
||||||
}
|
}
|
||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 {
|
||||||
@ -4540,8 +4542,11 @@ span.overlayContainer img.overlay {
|
|||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
|
||||||
background-color: rgba(153, 204, 255, 0.4);
|
background-color: rgba(153, 204, 255, 0.4);
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
padding-top: 8px;
|
padding-top: 7px;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
width: -moz-available;
|
||||||
|
max-width: fit-content !important;
|
||||||
}
|
}
|
||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover .egw_fw_ui_tab_close_button {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover .egw_fw_ui_tab_close_button {
|
||||||
background-image: url(../../api/templates/default/images/close.svg);
|
background-image: url(../../api/templates/default/images/close.svg);
|
||||||
@ -4654,7 +4659,6 @@ span.overlayContainer img.overlay {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
border-right: 1px solid #bfbfbf;
|
|
||||||
}
|
}
|
||||||
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv {
|
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
@ -4999,7 +5003,7 @@ span.overlayContainer img.overlay {
|
|||||||
background-image: url(../../api/templates/default/images/splitter_vert.png);
|
background-image: url(../../api/templates/default/images/splitter_vert.png);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-color: transparent;
|
background-color: #E6E6E6;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -5467,10 +5471,15 @@ span.overlayContainer img.overlay {
|
|||||||
display: block;
|
display: block;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: #606060;
|
color: #606060;
|
||||||
|
height: 45px;
|
||||||
|
width: 45px;
|
||||||
}
|
}
|
||||||
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.paused {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -5487,6 +5487,9 @@ span.overlayContainer img.overlay {
|
|||||||
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.paused {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -250,6 +250,9 @@
|
|||||||
#topmenu_timer.running {
|
#topmenu_timer.running {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
#topmenu_timer.paused {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -4520,6 +4520,8 @@ span.overlayContainer img.overlay {
|
|||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
height: 39px;
|
height: 39px;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
/*active Tabs*/
|
/*active Tabs*/
|
||||||
}
|
}
|
||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header h1 {
|
||||||
@ -4571,8 +4573,11 @@ span.overlayContainer img.overlay {
|
|||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
|
||||||
background-color: rgba(153, 204, 255, 0.4);
|
background-color: rgba(153, 204, 255, 0.4);
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
padding-top: 8px;
|
padding-top: 7px;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
width: -moz-available;
|
||||||
|
max-width: fit-content !important;
|
||||||
}
|
}
|
||||||
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover .egw_fw_ui_tab_close_button {
|
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover .egw_fw_ui_tab_close_button {
|
||||||
background-image: url(../../api/templates/default/images/close.svg);
|
background-image: url(../../api/templates/default/images/close.svg);
|
||||||
@ -4685,7 +4690,6 @@ span.overlayContainer img.overlay {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
border-right: 1px solid #bfbfbf;
|
|
||||||
}
|
}
|
||||||
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv {
|
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
@ -5030,7 +5034,7 @@ span.overlayContainer img.overlay {
|
|||||||
background-image: url(../../api/templates/default/images/splitter_vert.png);
|
background-image: url(../../api/templates/default/images/splitter_vert.png);
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-color: transparent;
|
background-color: #E6E6E6;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -5504,6 +5508,9 @@ span.overlayContainer img.overlay {
|
|||||||
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.running {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
#egw_fw_topmenu_info_items #topmenu_info_timer #topmenu_timer.paused {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
#egw_fw_topmenu_info_items #topmenu_info_timer:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user