292 lines
9.6 KiB
JavaScript
292 lines
9.6 KiB
JavaScript
var icon = "";
|
|
var realtimediv = "";
|
|
var starttime_view = false;
|
|
var startbreaktime_view = false;
|
|
var isbreak = false;
|
|
var breaktime = 0;
|
|
|
|
function loadTMIcon(){
|
|
var iconBaseUrl = OC.generateUrl('/svg/core/actions/user-admin');
|
|
icon = $('<a href="#" class="header-menu" style="margin-right: 20px; margin-top: 2px;"><img src="'+iconBaseUrl+'"></a>');
|
|
$('.header-right').prepend(icon);
|
|
}
|
|
|
|
function parseDate(input) {
|
|
var today = new Date();
|
|
newdate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), parseInt(input.split(":")[0]), parseInt(input.split(":")[1]));
|
|
return newdate;
|
|
}
|
|
|
|
function addTMDiv(){
|
|
//Realtime-DIV
|
|
realtimediv = $("<div style='position: fixed; z-index: 2000;top: 50px;right: 0;box-sizing: border-box;margin: 0;border-radius: 0 0 var(--border-radius) var(--border-radius);background-color: var(--color-main-background);filter: drop-shadow(0 1px 5px var(--color-box-shadow));'></div>");
|
|
realtimediv.html(html_content);
|
|
realtimediv.css("width", "300px");
|
|
realtimediv.css("height", "125px");
|
|
realtimediv.css("right", "50px");
|
|
realtimediv.css("position", "fixed");
|
|
realtimediv.css("overflow", "hidden");
|
|
realtimediv.css("display", "none");
|
|
realtimediv.css("text-align", "center");
|
|
$('.header-right').append(realtimediv);
|
|
|
|
// Adding Listener
|
|
// Start WorkDay
|
|
$("#startWorkDay").click(function(){
|
|
startWorkDay();
|
|
$("#activeDay").show();
|
|
$("#start_workday").hide();
|
|
})
|
|
|
|
// End WorkDay
|
|
$("#end_workday").click(function(){
|
|
endWorkDay();
|
|
})
|
|
|
|
// Start Break
|
|
$("#start_break").click(function(){
|
|
startBreak();
|
|
})
|
|
|
|
// Start Break
|
|
$("#end_break").click(function(){
|
|
endBreak();
|
|
})
|
|
|
|
// ACTUAL TIME INFO
|
|
// Load Time
|
|
$.ajax({
|
|
url: "/apps/da_agency/loadtime",
|
|
type: 'GET',
|
|
}).success(function (response) {
|
|
$("#td_content").show();
|
|
$("#loader").hide();
|
|
|
|
responsedata = JSON.parse(response);
|
|
$("#actualTime").html(responsedata['actualtime']);
|
|
// No workday found
|
|
if(responsedata['workdaydata_workday'] == 0 || response == false){
|
|
starttime_view = false;
|
|
startbreaktime_view = false;
|
|
isbreak = false;
|
|
breaktime = 0;
|
|
$("#breaksum").html("00:00:00");
|
|
$("#activeDay").hide();
|
|
}
|
|
// Workday found
|
|
else{
|
|
realtimediv.css("height", "250px");
|
|
$("#breaksum").html(convertMS(responsedata['breaksum']));
|
|
var breaktime = responsedata['breaksum'];
|
|
// Break found
|
|
if(responsedata['breakstatus']){
|
|
isbreak = true;
|
|
startbreaktime_view = responsedata['breaktimer'];
|
|
starttime_view = Date.parse(responsedata['workdaydata_workday']);
|
|
$("#start_workday").hide();
|
|
$("#activeDay").show();
|
|
$("#worktime").hide();
|
|
$("#breaktimeclock").show();
|
|
$("#end_break").show();
|
|
$("#start_break").hide();
|
|
$("#starttime").html(responsedata['workdaydata_starttime']);
|
|
}
|
|
// NO BREAK - Day is active
|
|
else{
|
|
isbreak = false;
|
|
start = responsedata['workdaydata_workday'];
|
|
startbreaktime_view = 0;
|
|
starttime_view = parseDate(responsedata['workdaydata_workday']);
|
|
$("#start_workday").hide();
|
|
$("#activeDay").show();
|
|
$("#starttime").html(responsedata['workdaydata_starttime']);
|
|
}
|
|
}
|
|
});
|
|
|
|
// ICON CLICK
|
|
icon.click(function(){
|
|
if(realtimediv.css("display") == "none"){
|
|
realtimediv.css("display", "block");
|
|
}
|
|
else {
|
|
realtimediv.css("display", "none");
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
window.setInterval(function(){
|
|
if(starttime_view != false && isbreak == false){
|
|
realTimeClock();
|
|
}
|
|
else if(isbreak == true){
|
|
realTimeBreakClock();
|
|
}
|
|
}, 1000);
|
|
|
|
function convertMS(ms) {
|
|
var d, h, m, s;
|
|
s = Math.floor(ms / 1000);
|
|
m = Math.floor(s / 60);
|
|
s = s % 60;
|
|
h = Math.floor(m / 60);
|
|
m = m % 60;
|
|
d = Math.floor(h / 24);
|
|
h = h % 24;
|
|
h += d * 24;
|
|
|
|
if(s < 10){
|
|
s = "0" + s;
|
|
}
|
|
if(m < 10){
|
|
m = "0" + m;
|
|
}
|
|
if(h < 10){
|
|
h = "0" + h;
|
|
}
|
|
|
|
return h + ':' + m + ':' + s;
|
|
}
|
|
|
|
start = false;
|
|
|
|
function realTimeClock()
|
|
{
|
|
if(start != false){
|
|
startDate = Date.parse(start);
|
|
starttime_view = startDate;
|
|
start = false;
|
|
realTimeClock();
|
|
}
|
|
else{
|
|
now = new Date();
|
|
viewtime = now - starttime_view - breaktime;
|
|
$("#realtimeclock").html(convertMS(viewtime));
|
|
}
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
loadTMIcon();
|
|
addTMDiv();
|
|
})
|
|
function startWorkDay(){
|
|
realtimediv.css("height", "250px");
|
|
$("#td_content").hide();
|
|
$("#loader").show();
|
|
|
|
$.ajax({
|
|
url: "/apps/da_agency/startday",
|
|
type: 'GET',
|
|
}).success(function (response) {
|
|
$("#td_content").show();
|
|
$("#loader").hide();
|
|
responsedata = JSON.parse(response);
|
|
|
|
if(responsedata["success"]){
|
|
$("#starttime").html(responsedata["wd_starttime"])
|
|
$("#endtime").html("00:00:00");
|
|
$("#breaksum").html("00:00:00");
|
|
}
|
|
start = responsedata["wd_starttime_complete"];
|
|
realTimeClock();
|
|
});
|
|
}
|
|
|
|
function endWorkDay(){
|
|
$("#td_content").hide();
|
|
$("#loader").show();
|
|
$.ajax({
|
|
url: "/apps/da_agency/endday",
|
|
type: 'GET',
|
|
}).success(function (response) {
|
|
realtimediv.css("height", "125px");
|
|
$("#td_content").show();
|
|
$("#loader").hide();
|
|
responsedata = JSON.parse(response);
|
|
if(responsedata["success"]){
|
|
$("#breaktimeclock").hide();
|
|
$("#realtimeclock").show();
|
|
$("#end_break").hide();
|
|
$("#start_break").show();
|
|
$("#worktime").show();
|
|
|
|
$("#endtime").html(responsedata["wd_endtime"]);
|
|
$("#activeDay").hide();
|
|
$("#start_workday").show();
|
|
$("#breaksum").html(convertMS(responsedata["actualbreaktime"]));
|
|
starttime_view = false;
|
|
isbreak = false;
|
|
start = false;
|
|
breaktime = 0;
|
|
}
|
|
realTimeClock();
|
|
});
|
|
|
|
}
|
|
|
|
function startBreak(){
|
|
$("#td_content").hide();
|
|
$("#loader").show();
|
|
|
|
$.ajax({
|
|
url: "/apps/da_agency/startbreak",
|
|
type: 'GET',
|
|
}).success(function (response) {
|
|
responsedata = JSON.parse(response);
|
|
isbreak = true;
|
|
$("#td_content").show();
|
|
$("#loader").hide();
|
|
//$("#timemanagement_clock").click(function(e){
|
|
// e.stopPropagation();
|
|
//})
|
|
$("#breaktimeclock").show();
|
|
$("#realtimeclock").hide();
|
|
$("#end_break").show();
|
|
$("#start_break").hide();
|
|
$("#worktime").hide();
|
|
startbreaktime_view = -1000;
|
|
realTimeBreakClock();
|
|
});
|
|
}
|
|
|
|
function endBreak(){
|
|
$("#td_content").hide();
|
|
$("#loader").show();
|
|
$.ajax({
|
|
url: "/apps/da_agency/endbreak",
|
|
type: 'GET',
|
|
}).success(function (response) {
|
|
$("#td_content").show();
|
|
$("#loader").hide();
|
|
responsedata = JSON.parse(response);
|
|
|
|
isbreak = false;
|
|
|
|
$("#breaktimeclock").hide();
|
|
$("#realtimeclock").show();
|
|
$("#end_break").hide();
|
|
$("#start_break").show();
|
|
$("#worktime").show();
|
|
|
|
breaktime = responsedata["actualbreaktime"];
|
|
startbreaktime_view = responsedata["actualbreaktime"];
|
|
starttime_view = Date.parse(responsedata["wdtime"]);
|
|
$("#breaksum").html(convertMS(responsedata["actualbreaktime"]));
|
|
|
|
});
|
|
}
|
|
|
|
function realTimeBreakClock(){
|
|
breaktime = startbreaktime_view + 1000;
|
|
startbreaktime_view = startbreaktime_view + 1000;
|
|
$("#realtimeclock_break").html(convertMS(startbreaktime_view));
|
|
}
|
|
|
|
var html_content = '<style>.arrow-up {position: absolute; left:150px; top: -10px; width: 0; display: none; height: 0; border-left: 15px solid transparent;border-right: 15px solid transparent;border-bottom: 15px solid red;}</style><div class="arrow-up"></div><div id="td_content" style="display: none";><style>hr.hr_style { border: 1px solid #dadada; margin: 10px; }</style><div id="activeDay" style="display: none;"><span id="worktime"><h3>Heutiger Arbeitstag</h3><h2 id="realtimeclock">00:00</h2><hr class="hr_style"></span><span id="breaktimeclock" style="display: none"><h3>Aktuelle Pause</h3><h2 id="realtimeclock_break">00:00</h2><hr class="hr_style"></span><span><button type="button" id="end_break" class="btn btn-success" style="display: none;">Pause Ende</i></button><button type="button" id="start_break" class="btn btn-primary">Pause</button><button type="button" id="end_workday" class="btn btn-secondary">Arbeitstag beenden</button></span><hr class="hr_style">Arbeitsbeginn: <span id="starttime">00:00:00</span><br /> Arbeitsende: <span id="endtime">00:00:00</span><br />Pausenzeit: <span id="breaksum">00:00:00</span></div><div id="start_workday"><hr class="hr_style"><button type="button" id="startWorkDay" class="btn btn-success">Arbeitstag starten</button><hr class="hr_style">Gleitzeitkonto: <b><span id="actualTime">00:00</span> Stunden</b></div></div><style> .loader {border: 3px solid #f3f3f3; /* Light grey */border-top: 3px solid grey; border-radius: 50%;width: 30px;height: 30px;animation: spin 1s linear infinite;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style><div id="loader" class="loader" style="margin: auto; margin-top: 18%; "></div>';
|
|
|
|
|
|
|
|
|