469 lines
16 KiB
HTML
469 lines
16 KiB
HTML
<html>
|
|
<head>
|
|
<title>Ansicht Zeiterfassung</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="author" content="Stefan Pichel">
|
|
<link rel="stylesheet" type="text/css" href="css/bestformat.css?v=2.0.0">
|
|
<link rel="stylesheet" href="php/contenthandler.php?module=admin&command=getmobilecss" />
|
|
<link rel="stylesheet" href="php/3rdparty/orderstyle/jquery.mobile.icons.min.css" />
|
|
|
|
<link rel="stylesheet" href="php/3rdparty/jquery.mobile-1.4.0.min.css" type="text/css" />
|
|
<script src="php/3rdparty/jquery-1.11.3.min.js"></script>
|
|
<script src="php/3rdparty/jquery.mobile-1.4.5.min.js"></script>
|
|
|
|
<script src="utilities.js?v=2.0.0"></script>
|
|
|
|
<link rel="stylesheet" href="php/3rdparty/jqueryui1-11-4/jquery-ui.min.css" />
|
|
<script src="php/3rdparty/jqueryui1-11-4/jquery-ui.min.js"></script>
|
|
<script src="php/3rdparty/jqueryui1-11-4/jquery-ui-i18n.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="php/3rdparty/jquerymobiledatepicker/jquery.mobile.datepicker.css" />
|
|
<script src="php/3rdparty/jquerymobiledatepicker/jquery.mobile.datepicker.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<script>
|
|
|
|
var TIME_DATE_START = ["Startdatum","Start date","Fecha de inicio"];
|
|
var TIME_DATE_END = ["Enddatum","End date","Fecha del fin"];
|
|
var TIME_USER_ACTIONS_TITLE = ["Benutzeraktionen","User actions","Acciones del usario"];
|
|
var TIME_COME = ["Kommen","Coming","Venir"];
|
|
var TIME_GO = ["Gehen","Go","Irse"];
|
|
var TIME_OVERVIEW = ["Übersicht","Overview","Resumen"];
|
|
var TIME_ACTION_FAILED = ["Aktion konnte nicht ausgeführt werden","Action failed","Error en accion"];
|
|
var TIME_ACTION_OK = ["Aktion wurde ausgeführt","Action was executed","Completado"];
|
|
var TIME_DAYNAMES = [
|
|
["Montag","Monday","Lunes"],
|
|
["Dienstag","Tuesday","Martes"],
|
|
["Mittwoch","Wednesday","Miércoles"],
|
|
["Donnerstag","Thursday","Jueves"],
|
|
["Freitag","Friday","Viernes"],
|
|
["Samstag","Saturday","Sábado"],
|
|
["Sonntag","Sunday","Domingo"]
|
|
];
|
|
var TIME_NEW_OVERVIEW_TABLE = ["Liste der Einträge für","List of entries für","Lista de las entradas para"];
|
|
var TIME_NEW_ENTRY = ["Neuen Eintrag erstellen","Create new entry","Crear entrada nueva"];
|
|
var TIME_TIME = ["Uhrzeit","Time","Hora"];
|
|
var TIME_NO_TIME_ERROR = ["Zeitangabe fehlt","Missing time entry","No tiempo"];
|
|
var TIME_SUM = ["Arbeitszeit","Work time","Horas de trabajo"];
|
|
var TIME_NON_CALCULABLE = ["nicht berechenbar","not calculable","no posible calcular"];
|
|
var TIME_TOTAL_SUM = ["Gesamte Arbeitszeit im gewählten Zeitraum","Total work time in chosen date frame","Horas de trabajo total"];
|
|
var TIME_ALL_USERS_TIMES = ["Arbeitszeiten aller Benutzer","Work times of all users","Horas de trabajos de cada usario"];
|
|
|
|
var lang = 0;
|
|
var maymanageusers = 0;
|
|
var activeuserid = 0;
|
|
var activeusername = "";
|
|
var allusers = null;
|
|
|
|
function setLanguage(language) {
|
|
lang = language;
|
|
|
|
$("#datestarttxt").html(TIME_DATE_START[lang]);
|
|
$("#dateendtxt").html(TIME_DATE_END[lang]);
|
|
$("#useractionstitle").html(TIME_USER_ACTIONS_TITLE[lang]);
|
|
$(".comebtntxt").html(TIME_COME[lang]);
|
|
$(".gobtntxt").html(TIME_GO[lang]);
|
|
$("#useroverview").html(TIME_OVERVIEW[lang]);
|
|
$("#newentrytxt").html(TIME_NEW_ENTRY[lang]);
|
|
$("#listofentriestxt").html(TIME_NEW_OVERVIEW_TABLE[lang]);
|
|
$("#timetxt").html(TIME_TIME[lang]);
|
|
$("#listofalluserstimestxt").html(TIME_ALL_USERS_TIMES[lang]);
|
|
}
|
|
|
|
function initializeOverviewDateFields() {
|
|
var langtxt = "de";
|
|
if (lang == 1) {
|
|
langtxt = "en";
|
|
} else if (lang == 2) {
|
|
langtxt = "es";
|
|
};
|
|
|
|
var currentYear = new Date().getFullYear();
|
|
var yearRangeTxt = (currentYear-1) + ":" + (currentYear+1);
|
|
|
|
$("#datepickerstart").datepicker($.datepicker.regional[langtxt]).datepicker("option", {
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
yearRange: yearRangeTxt,
|
|
});
|
|
|
|
var date = new Date();
|
|
var firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
$('#datepickerstart').datepicker('setDate', firstDayOfMonth);
|
|
|
|
$("#datepickerend").datepicker($.datepicker.regional[langtxt]).datepicker("option", {
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
yearRange: yearRangeTxt,
|
|
});
|
|
|
|
$('#datepickerend').datepicker('setDate', new Date());
|
|
|
|
$("#datepickernew").datepicker($.datepicker.regional[langtxt]).datepicker("option", {
|
|
changeMonth: true,
|
|
changeYear: true,
|
|
yearRange: yearRangeTxt,
|
|
});
|
|
|
|
$('#datepickernew').datepicker('setDate', new Date());
|
|
}
|
|
|
|
function getGeneralConfigItems() {
|
|
doAjax("GET", "php/contenthandler.php?module=admin&command=getGeneralConfigItems", null, insertGenConfigStartRest, "Fehler Konfigurationsdaten");
|
|
}
|
|
|
|
function insertGenConfigStartRest(configResult) {
|
|
if (configResult.status == "OK") {
|
|
var values = configResult.msg;
|
|
setLanguage(values.userlanguage);
|
|
} else {
|
|
setTimeout(function(){document.location.href = "index.html";},250); // not logged in
|
|
}
|
|
}
|
|
|
|
|
|
function bindComeGoBtns() {
|
|
$(".actionsbtn").off("click").on("click", function (e) {
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
var id = this.id;
|
|
|
|
var comment = $("#comment").val();
|
|
var data = {
|
|
comment: comment
|
|
};
|
|
if (id == "comebtn") {
|
|
doAjax("POST","php/contenthandler.php?module=timetracking&command=come",data,handleActionAnswer,"Problem Zeiterfassung");
|
|
} else if (id == "gobtn") {
|
|
doAjax("POST","php/contenthandler.php?module=timetracking&command=go",data,handleActionAnswer,"Problem Zeiterfassung");
|
|
}
|
|
});
|
|
}
|
|
|
|
function bindUserSelection() {
|
|
$("#userselbox").off("change").on("change", function (e) {
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
activeuserid = $("#userselbox").val();
|
|
activeusername = $("#userselbox option:selected").text();
|
|
updateUserSelBox();
|
|
getOverview();
|
|
});
|
|
}
|
|
|
|
function bindNewEntryBtns() {
|
|
$(".newactionsbtn").off("click").on("click", function (e) {
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
var id = this.id;
|
|
|
|
var date = $("#datepickernew").datepicker("getDate");
|
|
|
|
var userid = $("#userselbox").val();
|
|
var comment = $("#commentnewentry").val();
|
|
var time = $("#timenew").val().trim();
|
|
|
|
if (time == '') {
|
|
alert(TIME_NO_TIME_ERROR[lang]);
|
|
return;
|
|
}
|
|
|
|
var data = {
|
|
day: date.getDate(),
|
|
month: (date.getMonth() + 1),
|
|
year: date.getFullYear(),
|
|
userid: userid,
|
|
time: time,
|
|
comment: comment
|
|
};
|
|
if (id == "newcomebtn") {
|
|
doAjax("POST","php/contenthandler.php?module=timetracking&command=newadmincome",data,handleActionAnswer,"Problem Zeiterfassung");
|
|
} else if (id == "newgobtn") {
|
|
doAjax("POST","php/contenthandler.php?module=timetracking&command=newadmingo",data,handleActionAnswer,"Problem Zeiterfassung");
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleActionAnswer(answer) {
|
|
if (answer.status != "OK") {
|
|
alert(TIME_ACTION_FAILED[lang] + ": " + answer.msg);
|
|
} else {
|
|
clearNewEntryFields();
|
|
alert(TIME_ACTION_OK[lang] + ".");
|
|
$("#comment").val("");
|
|
getOverview();
|
|
}
|
|
}
|
|
|
|
function handleDateChangeEvents() {
|
|
$(".overviewdatepicker").off("change").on("change", function (e) {
|
|
getOverview();
|
|
});
|
|
}
|
|
|
|
function createUsersSelectBox() {
|
|
var txt = "<select id='userselbox' data-theme='f'>";
|
|
allusers.forEach(function(aUser, index) {
|
|
var userid = aUser.id;
|
|
var username = aUser.username;
|
|
var selected = "";
|
|
if (userid == activeuserid) {
|
|
selected = " selected ";
|
|
}
|
|
txt += "<option value='" + userid + "' " + selected + ">" + toHtml(username) + "</option>";
|
|
});
|
|
txt += "</select>";
|
|
return txt;
|
|
}
|
|
|
|
function getAllowedOverviewUsers() {
|
|
doAjax("GET","php/contenthandler.php?module=timetracking&command=getusers",null,handleUsersAnswer,null);
|
|
}
|
|
|
|
function updateUserSelBox() {
|
|
var userSelBox = createUsersSelectBox();
|
|
$("#userselpart").html(userSelBox);
|
|
$('#userselpart').trigger('create');
|
|
$("#selectedusername").html(activeusername);
|
|
}
|
|
|
|
function handleUsersAnswer(answer) {
|
|
if (answer.status == "OK") {
|
|
maymanageusers = answer.msg.maymanageusers;
|
|
if (maymanageusers == 1) {
|
|
showCreateNewEntryAreaAndAllUsersList();
|
|
}
|
|
activeuserid = answer.msg.ownuserid;
|
|
activeusername = answer.msg.username;
|
|
allusers = answer.msg.users;
|
|
updateUserSelBox();
|
|
initializeOverviewDateFields();
|
|
getOverview();
|
|
bindUserSelection();
|
|
bindNewEntryBtns();
|
|
}
|
|
}
|
|
|
|
function showCreateNewEntryAreaAndAllUsersList() {
|
|
$("#newentrypart").show();
|
|
$("#listofalluserspart").show();
|
|
}
|
|
|
|
function getOverview() {
|
|
var startdate = $("#datepickerstart").datepicker("getDate");
|
|
var enddate = $("#datepickerend").datepicker("getDate");
|
|
var userid = activeuserid;
|
|
var data = {
|
|
startday: startdate.getDate(),
|
|
startmonth: (startdate.getMonth() + 1),
|
|
startyear: startdate.getFullYear(),
|
|
endday: enddate.getDate(),
|
|
endmonth: (enddate.getMonth() + 1),
|
|
endyear: enddate.getFullYear(),
|
|
userid: userid
|
|
};
|
|
|
|
doAjax("POST","php/contenthandler.php?module=timetracking&command=getoverview",data,handleOverviewAnswer,null);
|
|
}
|
|
|
|
function handleOverviewAnswer(answer) {
|
|
if (answer.status == "OK") {
|
|
var txt = "";
|
|
|
|
txt += "<p><i><b><span class='timeline'>" + TIME_TOTAL_SUM[lang] + ": <u>";
|
|
if (answer.msg.totalduration.status == "OK") {
|
|
txt += minutesToHourMin(answer.msg.totalduration.minutes);
|
|
} else {
|
|
txt += TIME_NON_CALCULABLE[lang];
|
|
}
|
|
|
|
txt += "</u></i></span><b><p>";
|
|
|
|
answer.msg.times.forEach(function(aTimeEntry, index) {
|
|
var aDate = aTimeEntry.date;
|
|
var dayno = aTimeEntry.dayno;
|
|
|
|
var dayname = TIME_DAYNAMES[dayno-1][lang];
|
|
|
|
var timesofdate = aTimeEntry.timesofdate;
|
|
|
|
if (timesofdate.length > 0) {
|
|
txt += "<p><table class='infotable'>";
|
|
txt += "<tr><th colspan=2 class='heading'>" + aDate + " (" + dayname + ")</tr>";
|
|
|
|
timesofdate.forEach(function(aTime,index2) {
|
|
txt += "<tr>";
|
|
var id = aTime.id;
|
|
var actionid = aTime.action;
|
|
var thetime = aTime.thetime;
|
|
var timeparts = thetime.split(':');
|
|
thetime = timeparts[0] + ":" + timeparts[1];
|
|
var comment = toHtml(aTime.comment);
|
|
var actiontxt = TIME_COME[lang];
|
|
if (actionid == 2) {
|
|
actiontxt = TIME_GO[lang];
|
|
}
|
|
txt += "<td>" + thetime + " - " + actiontxt;
|
|
if (comment != '') {
|
|
txt += " (" + comment + ")";
|
|
}
|
|
if (maymanageusers == 1) {
|
|
txt += '<td><img src=img/delete.png class="deltimeentry" id="timeentry_' + id + '" />';
|
|
}
|
|
txt += "</tr>";
|
|
});
|
|
var workMinutesOfDay = aTimeEntry.workminutes;
|
|
if (workMinutesOfDay.status == "OK") {
|
|
txt += "<tr><td class='relevantdata' colspan=2>" + TIME_SUM[lang] + ": " + minutesToHourMin(workMinutesOfDay.minutes) + "</tr>";
|
|
} else {
|
|
txt += "<tr><td class='relevantdata' colspan=2>" + TIME_SUM[lang] + ": " + TIME_NON_CALCULABLE[lang] + "</tr>";
|
|
}
|
|
|
|
txt += "</table>";
|
|
}
|
|
});
|
|
|
|
$("#overviewtable").html(txt);
|
|
|
|
if (answer["allusertimes"] != undefined) {
|
|
txt = "<table class='infotable'>";
|
|
var allusers = answer.allusertimes;
|
|
allusers.forEach(function(aUserEntry,index) {
|
|
var username = aUserEntry.username;
|
|
var minutes = aUserEntry.minutes;
|
|
if (minutes != "-1") {
|
|
txt += "<tr><td>" + username + "<td>" + minutesToHourMin(minutes) + "</tr>";
|
|
} else {
|
|
txt += "<tr><td>" + username + "<td>" + TIME_NON_CALCULABLE[lang] + "</tr>";
|
|
}
|
|
});
|
|
txt += "</table>";
|
|
$("#allusersoverviewtable").html(txt);
|
|
};
|
|
|
|
bindUserSelection();
|
|
bindDelTimeEntry();
|
|
}
|
|
}
|
|
|
|
function bindDelTimeEntry() {
|
|
$(".deltimeentry").off("click").on("click", function (e) {
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
|
|
var id = this.id.split("_")[1];
|
|
doAjax("POST","php/contenthandler.php?module=timetracking&command=delentry",{id:id},handleActionAnswer,null);
|
|
});
|
|
}
|
|
|
|
function clearNewEntryFields() {
|
|
$("#timenew").val("");
|
|
$("#commentnewentry").val("");
|
|
}
|
|
|
|
function minutesToHourMin(minutes) {
|
|
var hour = Math.floor(minutes/60);
|
|
var min = minutes % 60;
|
|
return hour + "h " + min + " min";
|
|
}
|
|
|
|
$(document).on("pageinit", "#time-page", function () {
|
|
initializeMainMenu("#modulemenu");
|
|
hideMenu();
|
|
$.ajaxSetup({ cache: false });
|
|
$("#time-page").data("date",new Date());
|
|
$("#comment").val("");
|
|
clearNewEntryFields();
|
|
getGeneralConfigItems();
|
|
bindComeGoBtns();
|
|
getAllowedOverviewUsers();
|
|
handleDateChangeEvents();
|
|
});
|
|
|
|
|
|
</script>
|
|
<div data-role="page" id="time-page" data-theme="c">
|
|
<div data-role="panel" id="modulepanel" data-position="right" data-display="overlay">
|
|
<ul data-role="listview" id="modulemenu" data-divider-theme="a" data-inset="true">
|
|
<li data-theme="b" data-role="heading">Hauptmenü</li>
|
|
</ul>
|
|
</div><!-- /panel -->
|
|
<div data-role="header" data-theme="b" data-position="fixed" id="theheader" style="background-color:black;">
|
|
<h1><span id="timetitletxt">Zeiterfassung</span> <img src="img/connection.png" class="connectionstatus" style="display:none;" /> <img src="img/printerstatus.png" class="printerstatus" style="display:none;" /> <img src="img/tsestatus.png" class="tsestatus" style="display:none;" /> <img src="img/tasksstatus.png" class="tasksstatus" style="display:none;" /></h1>
|
|
<div data-type="horizontal" style="top:0px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
|
|
<a href="#" data-role="button" data-icon="arrow-d" data-ajax="false" id="menuswitch"><span id="modulstxt2">Hauptmenü</span></a>
|
|
</div>
|
|
</div>
|
|
<div data-role="content" id="fullcontent">
|
|
|
|
<div data-role="collapsible" data-content-theme="c" data-collapsed="false" data-theme="e" id="useractions">
|
|
<H2><span id="useractionstitle">Aktionen</span></H2>
|
|
<p>
|
|
<input name="comment" id="comment" type="text" class="whiteinput" placeholder="Kommentar" />
|
|
<div class="ui-grid-a" >
|
|
<div class="ui-block-a"><button id="comebtn" type="submit" data-theme="f" class="actionsbtn" ><span class="comebtntxt">Kommen</span></button></div>
|
|
<div class="ui-block-b"><button id="gobtn" type="submit" data-theme="f" class="actionsbtn" ><span class="gobtntxt">Gehen</span></button></div>
|
|
</div>
|
|
</div> <!-- useractions -->
|
|
|
|
<div data-role="collapsible" data-content-theme="c" data-collapsed="false" data-theme="e" id="timeoverview">
|
|
<H2><span id="useroverview">Übersicht</span></H2>
|
|
<div id="userselpart"></div>
|
|
<div data-role="fieldcontain">
|
|
<label for="datepickerstart"><span id=datestarttxt>Datum S</span>: </label>
|
|
<input data-role="date" data-inline="true" type="text" id="datepickerstart" data-theme="d" class="overviewdatepicker">
|
|
</div>
|
|
<div data-role="fieldcontain">
|
|
<label for="datepickerend"><span id=dateendtxt>Datum E</span>: </label>
|
|
<input data-role="date" data-inline="true" type="text" id="datepickerend" data-theme="d" class="overviewdatepicker">
|
|
</div>
|
|
|
|
<p><div class="roundedborderarea">
|
|
<h2><span id="listofentriestxt" class="timeline">Liste</span> <span id="selectedusername" class="timeline"></span></h2>
|
|
<div id="overviewtable"></div>
|
|
</div>
|
|
|
|
<p><div id="newentrypart" style="display:none;" class="roundedborderarea">
|
|
<h2><span id="newentrytxt" class="timeline">Neueintrag</span></h2>
|
|
<div data-role="fieldcontain" >
|
|
<label for="datepickernew"><span id=datetxt class="timeline">Datum </span>: </label>
|
|
<input data-role="date" data-inline="true" type="text" id="datepickernew" data-theme="d" >
|
|
</div>
|
|
<div data-role="fieldcontain" >
|
|
<label for="timenew"><span id=timetxt class="timeline">Uhrzeit</span>: </label>
|
|
<input type="text" id="timenew" name="timenew" class="whiteinput" placeholder="hh:mm" >
|
|
</div>
|
|
<input name="commentnewentry" id="commentnewentry" type="text" class="whiteinput" placeholder="Kommentar" />
|
|
<div class="ui-grid-a" >
|
|
<div class="ui-block-a"><button id="newcomebtn" type="submit" data-theme="f" class="newactionsbtn" ><span class="comebtntxt">Kommen</span></button></div>
|
|
<div class="ui-block-b"><button id="newgobtn" type="submit" data-theme="f" class="newactionsbtn" ><span class="gobtntxt">Gehen</span></button></div>
|
|
</div>
|
|
</div> <!-- newentrypart -->
|
|
|
|
<p><div id="listofalluserspart" class="roundedborderarea" style="display:none;">
|
|
<h2><span id="listofalluserstimestxt" class="timeline">Liste</span></h2>
|
|
<div id="allusersoverviewtable"></div>
|
|
</div>
|
|
|
|
</div> <!-- time overview -->
|
|
|
|
<br>
|
|
</div>
|
|
|
|
<div data-role="footer" data-theme="b" id="thefooterr" style="background-color:black;">
|
|
<div class="ui-grid-a">
|
|
<div class="ui-block-a userinfo" id="loggedinuser"></div>
|
|
<div class="ui-block-b grid_right" id="versioninfo"></div>
|
|
</div><!-- /grid-a -->
|
|
</div> <!-- footer -->
|
|
|
|
</div> <!-- first page -->
|
|
|
|
</body>
|
|
</html> |