318 lines
11 KiB
JavaScript
318 lines
11 KiB
JavaScript
var icon = "";
|
|
var realtimediv = "";
|
|
var starttime_view = false;
|
|
var startbreaktime_view = false;
|
|
var isbreak = false;
|
|
var breaktime = 0;
|
|
|
|
function loadTMIcon(){
|
|
icon = $('<a id="timeicon" href="#" class="header-menu" style="margin-right: 20px; margin-top: 3px; display: none;"><div style="width: 22px; height: 22px; color: #BDBDBD"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-clock" class="svg-inline--fa fa-user-clock fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M496 224c-79.6 0-144 64.4-144 144s64.4 144 144 144 144-64.4 144-144-64.4-144-144-144zm64 150.3c0 5.3-4.4 9.7-9.7 9.7h-60.6c-5.3 0-9.7-4.4-9.7-9.7v-76.6c0-5.3 4.4-9.7 9.7-9.7h12.6c5.3 0 9.7 4.4 9.7 9.7V352h38.3c5.3 0 9.7 4.4 9.7 9.7v12.6zM320 368c0-27.8 6.7-54.1 18.2-77.5-8-1.5-16.2-2.5-24.6-2.5h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h347.1c-45.3-31.9-75.1-84.5-75.1-144zm-96-112c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128z"></path></svg></div></a>');
|
|
$('.header-right').prepend(icon);
|
|
}
|
|
|
|
function parseDate(input) {
|
|
if(input != undefined){
|
|
var today = new Date();
|
|
newdate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), parseInt(input.split(":")[0]), parseInt(input.split(":")[1]));
|
|
return newdate;
|
|
}
|
|
else{
|
|
return false;
|
|
}
|
|
}
|
|
|
|
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
|
|
// User does not use time
|
|
if(responsedata['usetime'] == false){
|
|
$("#timeicon").hide();
|
|
}
|
|
else{
|
|
$("#timeicon").show();
|
|
}
|
|
|
|
if(responsedata['workdaydata_workday'] == 0){
|
|
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>';
|
|
|
|
|
|
// TALK BUTTON
|
|
function remTalkButton(){
|
|
counter = 0;
|
|
window.setInterval(function(){
|
|
if(counter < 200){
|
|
$( ".icon-start-call" ).each(function() {
|
|
$(this).parent().hide();
|
|
});
|
|
}
|
|
counter = counter + 1;
|
|
}, 100);
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
remTalkButton();
|
|
})
|
|
|