OBS/Kostenpflichtige Module/RESTServer/Beispiel2: Unterschied zwischen den Versionen

Aus OBS Wiki
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(25 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
Dieses Script dient zur Zeiterfassung über den REST-Server. Bei Seitenaufruf wird eine Liste von kunden geladen und in einer Liste angezeigt. Durch Rechtsklick auf einen Eintrag wird eine Liste an zugehörigen Tätigkeiten geladen,
{{Kostenpflichtige Module}}


die nach Klick einen Timer starten.  
Dieses Script dient zur Zeiterfassung über den REST-Server. Bei Seitenaufruf wird eine Liste von Kunden geladen und in einer Liste angezeigt.
 
Durch Rechtsklick auf einen Eintrag wird eine Liste an zugehörigen Tätigkeiten geladen, die nach Klick einen Timer starten.


Per Javascript werden Startzeit, Startdatum und andere Informationen wie Kunde und Personalnummer über die PHP-Scripte und das Endpunkt-Script in einer Datenbank gespeichert.
Per Javascript werden Startzeit, Startdatum und andere Informationen wie Kunde und Personalnummer über die PHP-Scripte und das Endpunkt-Script in einer Datenbank gespeichert.
Zeile 11: Zeile 13:
Pausenzeit nachträglich zu bearbeiten. Durch Klick auf "Speichern" oder Druck auf F2 werden Endzeit und Enddatum gespeichert und der Status auf "21" gesetzt.
Pausenzeit nachträglich zu bearbeiten. Durch Klick auf "Speichern" oder Druck auf F2 werden Endzeit und Enddatum gespeichert und der Status auf "21" gesetzt.


Nach Reload der Webseite wird anhand des Status in der Datenbank nach laufenden Timern gesucht und diese gegebenenfalls gestartet.{{Kostenpflichtige Module}}
Nach Reload der Webseite wird anhand des Status in der Datenbank nach laufenden Timern gesucht und diese gegebenenfalls gestartet.


= Endpuntk-Script =
= Endpunkt-Script =
<syntaxhighlight lang="pascal">
<syntaxhighlight lang="pascal">
procedure _AddJob(oArr: TJSONArray; id: String);
procedure _AddJob(oArr: TJSONArray; id: String);
var oWert      : TJSONObject;
var cSql        : String;
    cSql        : String;
     A_Query    : TxFQuery;
     A_Query    : TxFQuery;
begin
begin
Zeile 33: Zeile 34:


procedure _AddCustomer(oArr: TJSONArray);
procedure _AddCustomer(oArr: TJSONArray);
var oWert      : TJSONObject;
var cSql        : String;
    cSql        : String;
     A_Query    : TxFQuery;
     A_Query    : TxFQuery;
begin
begin
Zeile 67: Zeile 67:


procedure _AddID(kunde: String; oArr: TJSONArray);
procedure _AddID(kunde: String; oArr: TJSONArray);
var oWert      : TJSONObject;
var cSql        : String;
    cSql        : String;
     A_Query    : TxFQuery;
     A_Query    : TxFQuery;
begin
begin
Zeile 102: Zeile 101:


procedure _AddCHECK(oArr: TJSONArray);
procedure _AddCHECK(oArr: TJSONArray);
var oWert      : TJSONObject;
var cSql        : String;
    cSql        : String;
     A_Query    : TxFQuery;
     A_Query    : TxFQuery;
begin
begin
Zeile 129: Zeile 127:


procedure _getPauseTime(sysuid: String; oArr: TJSONArray);
procedure _getPauseTime(sysuid: String; oArr: TJSONArray);
var oWert      : TJSONObject;
var cSql        : String;
    cSql        : String;
     A_Query    : TxFQuery;
     A_Query    : TxFQuery;
begin
begin
Zeile 150: Zeile 147:
oArr1                                  : TJSONArray;
oArr1                                  : TJSONArray;
cSql                                    : String;
cSql                                    : String;
startTime                              : TDateTime;
 
elapsedTime                            : Integer;
millisec, seconds, minutes, hours      : Word;
year, month, day                        : Word;
uhrzeit, datum                          : String;
begin
begin
     if (oParams.values['choice']='job') then begin
     if (oParams.values['choice']='job') then begin
Zeile 245: Zeile 238:
     begin
     begin
          
          
         cSql := 'UPDATE zeiterfuser SET ze_zeit = ' + oParams.values['elapsedTime'] +
         cSql := 'UPDATE zeiterfuser, zeiterfkomm '  +
                 ', ze_endtime = '                   + oParams.values['vergZeit'] +
                ' SET zeiterfuser.ze_zeit = '       + oParams.values['elapsedTime'] +  
                 ', ze_enddate = '                   + oParams.values['stopTimeValue'] +
                 ', zeiterfuser.ze_endtime = '       + oParams.values['vergZeit'] +
                 ', ze_pausezeit = '                 + oParams.values['elapsedPauseTime'] +
                 ', zeiterfuser.ze_enddate = '       + oParams.values['stopTimeValue'] +
                 ', ze_status = '                   + oParams.values['status'] +
                 ', zeiterfuser.ze_pausezeit = '     + oParams.values['elapsedPauseTime'] +
                 ' WHERE sys_uid = '                + DB_SQLVal(oParams.values['uid']);
                 ', zeiterfuser.ze_status = '         + oParams.values['status'] +
                ', zeiterfkomm.zk_kommentar = '      + oParams.values['comment'] +
                 ' WHERE zeiterfuser.sys_uid = '     + DB_SQLVal(oParams.values['uid']) +
                 ' AND zeiterfkomm.zk_messunguid = '  + DB_SQLVal(oParams.values['uid']);


         if DB_SQLExec(oDB,cSql) then
         if DB_SQLExec(oDB,cSql) then
Zeile 275: Zeile 271:
</syntaxhighlight>
</syntaxhighlight>


= Javascript =
= HTML-Datei index.php =
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="html">
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="de-DE">
<html lang="de-DE">
     <head>
     <head>
         <title>Ihr IT-Partner in Stade - Ernst Bergau GmbH</title>
         <title>Ihr IT-Partner in Stade - Ernst Bergau GmbH</title>
         <link rel="stylesheet" type="text/css" href="zeit.css">
         <link rel="stylesheet" type="text/css" href="timestyle.css">
     </head>
     </head>
     <script>
     <script>
        <?php
            include('timer.js');
        ?>
    </script>
    <body>
        <!-- //--------------------------------------------------------------------------------------------------------------// -->
        <!-- //---------------------------------------------------HTML-------------------------------------------------------// -->
        <!-- //--------------------------------------------------------------------------------------------------------------// -->


         var api_key            = 'Y00C75PODJ';
         <textarea id="search" type="text" rows="1" cols="50" oninput="searchCustomers(this.value)"></textarea>
        var url                = 'http://127.0.0.1:8099/Zeiterfa/zeiterfa/v1';
        var zaehler            = -1;
        var timerInterval;     
        var pauseTimerInterval;
        var startTimeValue;   
        var selectedID          = 0;
        var elapsedTime;       
        var uid;               
        var idStop;
        var time;
        var selID              = [];
        var job                = [];
        var sys_uid            = [];
        var timers              = [];   
        var pauseTimers        = []; 
        var pauseTime          = [];
        var startdate          = [];
        var uhrzeit            = [];
        var datum              = [];
        var statusTimer        = [];     
        var selectedJob        = [];
        var selectedKunde      = [];     
        var tempSelectedKunde  = [];
        var parameter          = [];


        <div class="kundenliste">
            <ul id="kundenListe"></ul>
        </div>
        <table class="timer">
            <tbody id="timerList"></tbody>
        </table>
        <table class="tabelleUeberschriften">
            <thead>
                <tr>
                    <th class="kunde">Kunde</th>
                    <th class="konto">Konto</th>
                    <th class="laufzeit">Laufzeit</th>
                    <th class="status">Status</th>
                </tr>
            </thead>
        </table>
       


         //-----------------------------------------------------------------------------------------------------------------------//
         <div class="lightbox" id="lightbox">
        //--------------------------------------------------Seitenaufruf---------------------------------------------------------//
            <label class="commLabel" id="commLabel" for="comment">Kommentar</label>
        //-----------------------------------------------------------------------------------------------------------------------//
            <textarea class="comment" id="comment" rows="4" cols="50"></textarea>


        //----Bei Seitenaufruf werden die Funktionen----//
            <div class="bezZeitkonto">Zeitkonto</div>
        //----getCustomer und checkTimer aufgerufen und----//
            <select class="dropButtonsLightbox" id="tätigkeit2Dropdown"></select>
        //----die Kundenliste gefüllt und geprüft,----//
        //----ob laufende timer vorhanden sind----//


        window.onload = function() {
            <div class="bezDatum">Startdatum</div>
            <input type="date" class="date" id="date">


             getCustomer();
             <textarea disabled class="uhrzeit" id="uhrzeit"></textarea>
            checkTimer();
 
        }
            <div class="bezPerson">Person</div>
            <textarea disabled class="eingPerson" id="eingPerson"></textarea>
            <textarea disabled class="eingPersonZusatz" id="eingPersonZusatz"></textarea>
 
            <div class="Std">Std</div>
            <input type="number" class="outStd" id="outStd">
            <div class="Min">Min</div>
            <input type="number" class="outMin" id="outMin">
            <div class="Sek">Sek</div>
            <input type="number" class="outSek" id="outSek">
 
            <div class="Pausenzeiten">Davon Pausenzeiten</div>
            <div class="Std2">Std</div>
            <input type="number" class="outStd2" id="outStd2">
            <div class="Min2">Min</div>
            <input type="number" class="outMin2" id="outMin2">
            <div class="Sek2">Sek</div>
            <input type="number" class="outSek2" id="outSek2">
 
            <button class="saveButton" id="saveButton">Speichern</button>
            <button class="closeButton" id="closeButton" onclick="closeLightboxOnSchliessen()">Schließen</button>
        </div>
       
        <div id="zweiteListe">
            <ul id="taetigkeitListe"></ul>
        </div>
    </body>
</html>
 
 
</syntaxhighlight>
 
= Javascript-Datei timer.js =
<syntaxhighlight lang="javascript">
var api_key            = 'Y00C75PODJ';
var url                = 'http://127.0.0.1:8099/Zeiterfa/zeiterfa/v1';
var zaehler            = -1;
var timerInterval;     
var pauseTimerInterval;
var startTimeValue;   
var selectedID          = 0;
var elapsedTime;       
var uid;               
var idStop;
var time;
var selID              = [];
var job                = [];
var sys_uid            = [];
var timers              = [];   
var pauseTimers        = []; 
var pauseTime          = [];
var startdate          = [];
var uhrzeit            = [];
var datum              = [];
var statusTimer        = [];     
var selectedJob        = [];
var selectedKunde      = [];     
var tempSelectedKunde  = [];
var parameter          = [];
 
 
//-----------------------------------------------------------------------------------------------------------------------//
//--------------------------------------------------Seitenaufruf---------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
 
//----Bei Seitenaufruf werden die Funktionen----//
//----getCustomer und checkTimer aufgerufen und----//
//----die Kundenliste gefüllt und geprüft,----//
//----ob laufende timer vorhanden sind----//
 
window.onload = function() {
 
    getCustomer();
    checkTimer();
}




        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
        //-------------------------------------------------Daten auslesen--------------------------------------------------------//
//-------------------------------------------------Daten auslesen--------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //----Eine Liste der Kunden wird ausgelesenund gespeichert----//
//----Eine Liste der Kunden wird ausgelesenund gespeichert----//


        function getCustomer() {
function getCustomer() {


            var method = 'POST';
    var method = 'POST';
            var choice = 'customer';
    var choice = 'customer';


            var params =    "api_key="              + encodeURIComponent(api_key) +
    var params =    "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice);
                    "&choice="              + encodeURIComponent(choice);


            var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "getData.php");
    request.open("POST", "getData.php");
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
        if (this.readyState === 4 && this.status === 200) {
                    var responseData = JSON.parse(request.responseText);
            var responseData = JSON.parse(request.responseText);
                    populateListeKunde(responseData);
            populateListeKunde(responseData);
                }
            };
            request.send(params);
         }
         }
    };
    request.send(params);
}




        //----Bei Rechtsklick auf Kunden wird----//
//----Bei Rechtsklick auf Kunden wird----//
        //----seine ID ausgelesen und gespeichert----//
//----seine ID ausgelesen und gespeichert----//


        function getCustomerID(selectedKunde, callback) {
function getCustomerID(selectedKunde, callback) {


            var method = 'POST';
    var method = 'POST';
            var choice = 'id';
    var choice = 'id';


            var params =    "api_key="              + encodeURIComponent(api_key) +
    var params =    "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice) +
                    "&choice="              + encodeURIComponent(choice) +
                            "&selectedKunde="      + encodeURIComponent(selectedKunde);
                    "&selectedKunde="      + encodeURIComponent(selectedKunde);


            var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "getData.php");
    request.open("POST", "getData.php");
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
        if (this.readyState === 4 && this.status === 200) {
                    selectedID = JSON.parse(request.responseText);
            selectedID = JSON.parse(request.responseText);
                    callback(selectedID);
            callback(selectedID);
                }
            };
            request.send(params);
         }
         }
    };
    request.send(params);
}




        //----Anhand der Kunden-ID wird eine Liste von Tätigkeiten----//
//----Anhand der Kunden-ID wird eine Liste von Tätigkeiten----//
        //----für jeden Kunden ausgelesen und gespeichert----//
//----für jeden Kunden ausgelesen und gespeichert----//


        function getJob(id, callback) {
function getJob(id, callback) {


            var method = 'POST';
    var method = 'POST';
            var choice = 'job';
    var choice = 'job';


            var params =    "api_key="              + encodeURIComponent(api_key) +
    var params =    "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice) +
                    "&choice="              + encodeURIComponent(choice) +
                            "&id="                  + encodeURIComponent(id);
                    "&id="                  + encodeURIComponent(id);


            var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "getData.php");
    request.open("POST", "getData.php");
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
        if (this.readyState === 4 && this.status === 200) {
                    var responseData = JSON.parse(request.responseText);
            var responseData = JSON.parse(request.responseText);
                    var Data        = responseData.toString();
            var Data        = responseData.toString();
                    var teile        = Data.split(",");
            var teile        = Data.split(",");
                    var jobid = [];
            var jobid = [];


                    for (i=0; i<teile.length; i++) {
            for (i=0; i<teile.length; i++) {
                        job[i]  = teile[i].split(":")[0];
                job[i]  = teile[i].split(":")[0];
                        jobid[i] = teile[i].split(":")[1];
                jobid[i] = teile[i].split(":")[1];
                    }
            }
                    callback(job, jobid);
            callback(job, jobid);
                }
            };
            request.send(params);
         }
         }
    };
    request.send(params);
}


//----Tätigkeitsliste wird nochmal zur Weiterverarbeitung gelesen----//


        //----Tätigkeitsliste wird nochmal zur Weiterverarbeitung gelesen----//
function getJobs(id) {


        function getJobs(id) {
    var method = 'POST';
       
    var choice = 'job';
            var method = 'POST';
            var choice = 'job';


            var params =    "api_key="              + encodeURIComponent(api_key) +
    var params =    "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice) +
                    "&choice="              + encodeURIComponent(choice) +
                            "&id="                  + encodeURIComponent(id);
                    "&id="                  + encodeURIComponent(id);


            var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "getData.php", false);
    request.open("POST", "getData.php", false);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
        if (this.readyState === 4 && this.status === 200) {
                    var responseData = JSON.parse(request.responseText);
            var responseData = JSON.parse(request.responseText);
                    var data = responseData.toString();
            var data = responseData.toString();
                    var teile = data.split(",");
            var teile = data.split(",");
                    var jobid = [];
            var jobid = [];


                    for (var i = 0; i < teile.length; i++) {
            for (var i = 0; i < teile.length; i++) {
                        job[i] = teile[i].split(":")[0];
                job[i] = teile[i].split(":")[0];
                        jobid[i] = teile[i].split(":")[1];
                jobid[i] = teile[i].split(":")[1];
                    }
             }
                }
             };
            request.send(params);
         }
         }
    };
    request.send(params);
}


        //----Gespeicherte Pausezeit wird ausgelesen----//
//----Gespeicherte Pausezeit wird ausgelesen----//


        function getPauseTime(sysuid, id) {
function getPauseTime(sysuid, id) {


            var method = 'POST';
    var method = 'POST';
            var choice = 'pauseTime';
    var choice = 'pauseTime';


            var params  =  "api_key="              + encodeURIComponent(api_key) +
    var params  =  "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice) +
                    "&choice="              + encodeURIComponent(choice) +
                            "&sysuid="              + encodeURIComponent(sysuid);
                    "&sysuid="              + encodeURIComponent(sysuid);


            var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "getData.php", false);
    request.open("POST", "getData.php", false);
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
        if (this.readyState === 4 && this.status === 200) {
                    pauseTime[id].value = JSON.parse(request.responseText);
            pauseTime[id].value = JSON.parse(request.responseText);


                }
            };
            request.send(params);
         }
         }
    };
    request.send(params);
}




        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
        //---------------------------------------------Listen--------------------------------------------------------------------//
//---------------------------------------------Listen--------------------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //----Eine Liste wird mit Kundendaten gefüllt und angezeigt----//
//----Eine Liste wird mit Kundendaten gefüllt und angezeigt----//


        function populateListeKunde(data) {
function populateListeKunde(data) {


            data.forEach(function(item) {
    data.forEach(function(item) {
                var listItem = document.createElement("li");
        var listItem = document.createElement("li");
                listItem.textContent = item;
        listItem.textContent = item;


                listItem.addEventListener("contextmenu", function(event) {
        listItem.addEventListener("contextmenu", function(event) {
                    event.preventDefault();
            event.preventDefault();


                    var selectedKunde = item;
            var selectedKunde = item;
                    getCustomerID(selectedKunde, function(selectedID) {
            getCustomerID(selectedKunde, function(selectedID) {
                        getJob(selectedID, function(job, jobid) {
                getJob(selectedID, function(job, jobid) {
                            showSecondList(job, jobid, item);
                    showSecondList(job, jobid, item);
                        });
                    });
                 });
                 });
            });
        });


                kundenListe.appendChild(listItem);
        kundenListe.appendChild(listItem);
            });
    });
        }
}




        //----Eine zweite Liste wird mit Jobs gefüllt,----//
//----Eine zweite Liste wird mit Jobs gefüllt,----//
        //----angezeigt und bei Klick auf einen Eintrag---//
//----angezeigt und bei Klick auf einen Eintrag---//
        //-------die Funktion startTimer aufgerufen-------//
//-------die Funktion startTimer aufgerufen-------//


        function showSecondList(job, jobid, kundeItem) {
function showSecondList(job, jobid, kundeItem) {


            var zweiteListe = document.getElementById("zweiteListe");
    var zweiteListe = document.getElementById("zweiteListe");
            zweiteListe.innerHTML = "";
    zweiteListe.innerHTML = "";


            job.forEach(function(item) {
    job.forEach(function(item) {
                var listItem = document.createElement("li");
        var listItem = document.createElement("li");
                listItem.textContent = item;
        listItem.textContent = item;
           
   
                (function(capturedItem) {
        (function(capturedItem) {
                    listItem.addEventListener("click", function() {
            listItem.addEventListener("click", function() {
                        startTimer(job, jobid, capturedItem, kundeItem);
                startTimer(job, jobid, capturedItem, kundeItem);
                    });
                }) (item);
                zweiteListe.appendChild(listItem);
             });
             });
        }) (item);
        zweiteListe.appendChild(listItem);
    });


            zweiteListe.style.display = "block";  
    zweiteListe.style.display = "block";  
            document.addEventListener('keydown', closeSecondList);
    document.addEventListener('keydown', closeSecondList);
            document.addEventListener('click', closeSecondList);
    document.addEventListener('click', closeSecondList);
        }
}




        //----Nach Klick auf Eintrag wird die Liste geschlossen----//
//----Nach Klick auf Eintrag wird die Liste geschlossen----//
        function closeSecondList() {
function closeSecondList() {


            var zweiteListe = document.getElementById("zweiteListe");
    var zweiteListe = document.getElementById("zweiteListe");
            zweiteListe.style.display = "none";  
    zweiteListe.style.display = "none";  
        }
}




        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
        //---------------------------------------------Daten speichern-----------------------------------------------------------//
//---------------------------------------------Daten speichern-----------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //----Startzeit, -datum, ID und Job werden gespeichert----//
//----Startzeit, -datum, ID und Job werden gespeichert----//


        function saveStartTime(user, uhrzeit, datum, endTime, endDate, status, psnr, Job, jobID) {
function saveStartTime(user, uhrzeit, datum, endTime, endDate, status, psnr, Job, jobID) {
           
   
            var method = 'PUT';
    var method = 'PUT';
            var choice = 'start';
    var choice = 'start';


            var params =    "api_key="              + encodeURIComponent(api_key) +
    var params =    "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice) +
                    "&choice="              + encodeURIComponent(choice) +
                            "&user="                + encodeURIComponent(user) +
                    "&user="                + encodeURIComponent(user) +
                            "&uhrzeit="            + encodeURIComponent(uhrzeit) +
                    "&uhrzeit="            + encodeURIComponent(uhrzeit) +
                            "&datum="              + encodeURIComponent(datum) +
                    "&datum="              + encodeURIComponent(datum) +
                            "&endTime="            + encodeURIComponent(endTime) +
                    "&endTime="            + encodeURIComponent(endTime) +
                            "&endDate="            + encodeURIComponent(endDate) +
                    "&endDate="            + encodeURIComponent(endDate) +
                            "&status="              + encodeURIComponent(status)+
                    "&status="              + encodeURIComponent(status)+
                            "&psnr="                + encodeURIComponent(psnr)+
                    "&psnr="                + encodeURIComponent(psnr)+
                            "&Job="                + encodeURIComponent(Job)+
                    "&Job="                + encodeURIComponent(Job)+
                            "&jobID="              + encodeURIComponent(jobID);
                    "&jobID="              + encodeURIComponent(jobID);


            var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "saveTime.php");
    request.open("POST", "saveTime.php");
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
        if (this.readyState === 4 && this.status === 200) {
                    sys_uid[zaehler].value = request.responseText;
            sys_uid[zaehler].value = request.responseText;
                }
            };
            request.send(params);
         }
         }
    };
    request.send(params);
}


        //----Pausezeit wird gespeichert----//
//----Pausezeit wird gespeichert----//


        function savePauseTime(pauseTime, id) {
function savePauseTime(pauseTime, id) {


            var method = 'PUT';
    var method = 'PUT';
            var choice = 'pause';
    var choice = 'pause';
           
   
            var params =    "api_key="      + encodeURIComponent(api_key) +
    var params =    "api_key="      + encodeURIComponent(api_key) +
                            "&url="        + encodeURIComponent(url) +
                    "&url="        + encodeURIComponent(url) +
                            "&method="      + encodeURIComponent(method) +
                    "&method="      + encodeURIComponent(method) +
                            "&choice="      + encodeURIComponent(choice) +
                    "&choice="      + encodeURIComponent(choice) +
                            "&pauseTime="  + encodeURIComponent(pauseTime) +
                    "&pauseTime="  + encodeURIComponent(pauseTime) +
                            "&sysuid="      + encodeURIComponent(sys_uid[id].value);
                    "&sysuid="      + encodeURIComponent(sys_uid[id].value);


            var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "saveTime.php");
    request.open("POST", "saveTime.php");
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {


                if (this.readyState === 4 && this.status === 200) {
        if (this.readyState === 4 && this.status === 200) {
                    // alert(request.responseText);
            // alert(request.responseText);
                }
            };
            request.send(params);
         }
         }
    };
    request.send(params);
}


        //----Stopzeit und -datum wird gespeichert----//
//----Stopzeit und -datum wird gespeichert----//


        function saveStopTime(stopTimeValue, elapsedTime, elapsedPauseTime, status, uid, vergZeit) {
function saveStopTime(stopTimeValue, elapsedTime, elapsedPauseTime, status, uid, vergZeit, comment) {


            var method = 'PUT';
    var method = 'PUT';
            var choice = 'stop';
    var choice = 'stop';
           
   
            var params =    "api_key="              + encodeURIComponent(api_key) +
    var params =    "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice) +
                    "&choice="              + encodeURIComponent(choice) +
                            "&stopTimeValue="      + encodeURIComponent(stopTimeValue) +
                    "&stopTimeValue="      + encodeURIComponent(stopTimeValue) +
                            "&elapsedTime="        + encodeURIComponent(elapsedTime) +
                    "&elapsedTime="        + encodeURIComponent(elapsedTime) +
                            "&elapsedPauseTime="    + encodeURIComponent(elapsedPauseTime) +
                    "&elapsedPauseTime="    + encodeURIComponent(elapsedPauseTime) +
                            "&status="              + encodeURIComponent(status) +
                    "&status="              + encodeURIComponent(status) +
                            "&uid="                + encodeURIComponent(uid) +
                    "&uid="                + encodeURIComponent(uid) +
                            "&vergZeit="            + encodeURIComponent(vergZeit);
                    "&vergZeit="            + encodeURIComponent(vergZeit)+
           
                    "&comment="            + encodeURIComponent(comment);
            var request = new XMLHttpRequest();
   
    var request = new XMLHttpRequest();


            request.open("POST", "saveTime.php");
    request.open("POST", "saveTime.php");
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200 && timers.length === 0) {
        if (this.readyState === 4 && this.status === 200 && timers.length === 0) {
                    location.reload();
            location.reload();
                }
            };
            request.send(params);
         }
         }
    };
    request.send(params);
}




        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
        //---------------------------------------------Like-Suche----------------------------------------------------------------//
//---------------------------------------------Like-Suche----------------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //----Durchsucht die Liste der Kunden auf alle einegegebenen Zeichen----//
//----Durchsucht die Liste der Kunden auf alle einegegebenen Zeichen----//


        function searchCustomers(text) {
function searchCustomers(text) {


            text = text.toLowerCase();
    text = text.toLowerCase();
            var kundenListe = document.getElementById("kundenListe");
    var kundenListe = document.getElementById("kundenListe");
            var listItems = kundenListe.getElementsByTagName("li");
    var listItems = kundenListe.getElementsByTagName("li");


            for (i=0; i<listItems.length; i++) {
    for (i=0; i<listItems.length; i++) {
                var item = listItems[i].textContent.toLowerCase();
        var item = listItems[i].textContent.toLowerCase();
                if (item.includes(text)) {
        if (item.includes(text)) {
                    listItems[i].style.display = "block";
            listItems[i].style.display = "block";
                }
        }
                else {
        else {
                    listItems[i].style.display = "none";
            listItems[i].style.display = "none";
                }
            }
         }
         }
    }
}




        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
        //------------------------------------------Vorhandenen Timer checken----------------------------------------------------//
//------------------------------------------Vorhandenen Timer checken----------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //----Überprüft, ob es Einträge in Datenbank ohne----//
//----Überprüft, ob es Einträge in Datenbank ohne----//
        //----Endzeit gibt und startet entsprechend Timer----//
//----Endzeit gibt und startet entsprechend Timer----//


        function checkTimer() {
function checkTimer() {


            var method = 'POST';
    var method = 'POST';
            var choice = 'check';
    var choice = 'check';


            var params =    "api_key="              + encodeURIComponent(api_key) +
    var params =    "api_key="              + encodeURIComponent(api_key) +
                            "&url="                + encodeURIComponent(url) +
                    "&url="                + encodeURIComponent(url) +
                            "&method="              + encodeURIComponent(method) +
                    "&method="              + encodeURIComponent(method) +
                            "&choice="              + encodeURIComponent(choice);
                    "&choice="              + encodeURIComponent(choice);


        var request = new XMLHttpRequest();
    var request = new XMLHttpRequest();


            request.open("POST", "getData.php");
    request.open("POST", "getData.php");
            request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            request.onreadystatechange = function() {
    request.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200 && timers.length === 0) {
        if (this.readyState === 4 && this.status === 200 && timers.length === 0) {
                    var responseData = JSON.parse(request.responseText);
            var responseData = JSON.parse(request.responseText);
                   
           
                    if (responseData.length !== 0) {
            if (responseData.length !== 0) {
                        startTimeValue = new Date();
                startTimeValue = new Date();
                        var minutes = startTimeValue.getMinutes();
                var minutes = startTimeValue.getMinutes();
                        var seconds = startTimeValue.getSeconds();
                var seconds = startTimeValue.getSeconds();
                        var month = startTimeValue.getMonth() + 1;
                var month = startTimeValue.getMonth() + 1;


                        responseData = responseData.toString();
                responseData = responseData.toString();
                        var teile = responseData.split(",");
                var teile = responseData.split(",");


                        for (var i=0; i<teile.length; i+=6) {
                for (var i=0; i<teile.length; i+=6) {
                            uhrzeit.push({value: startTimeValue.getHours() + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)});
                    uhrzeit.push({value: startTimeValue.getHours() + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)});
                            datum.push({value: startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + startTimeValue.getDate()});
                    datum.push({value: startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + startTimeValue.getDate()});


                            zaehler++;
                    zaehler++;


                            statusTimer.push({value: 'Running'});
                    statusTimer.push({value: 'Running'});
                            pauseTimers.push({value: 0});
                    pauseTimers.push({value: 0});
                            pauseTime.push({value: 0});
                    pauseTime.push({value: 0});
                            timers.push({value: teile[i]});
                    timers.push({value: teile[i]});
                        }
                }


                        var j=0;
                var j=0;
                        for (var i=1; i<teile.length; i+=6) {
                for (var i=1; i<teile.length; i+=6) {
                            selID.push({value: teile[i]});
                    selID.push({value: teile[i]});
                            getJobs(selID[j].value);
                    getJobs(selID[j].value);
                            j++;
                    j++;
                        }  
                }  


                        fillArray(2, selectedJob, teile);
                fillArray(2, selectedJob, teile);
                        fillArray(3, selectedKunde, teile);
                fillArray(3, selectedKunde, teile);
                        fillArray(4, sys_uid, teile);
                fillArray(4, sys_uid, teile);
                        fillArray(5, startdate, teile);
                fillArray(5, startdate, teile);


                        for (var i=0; i<timers.length; i++) {
                for (var i=0; i<timers.length; i++) {
                            var startZeitTeil = timers[i].value.split(":");
                    var startZeitTeil = timers[i].value.split(":");
                            var startDatumTeil = startdate[i].value.split(".");
                    var startDatumTeil = startdate[i].value.split(".");


                            var diffMilli = new Date() - getStartdatum(startDatumTeil, startZeitTeil);
                    var diffMilli = new Date() - getStartdatum(startDatumTeil, startZeitTeil);
                            timers[i].value = Math.floor(diffMilli / 1000);  
                    timers[i].value = Math.floor(diffMilli / 1000);  
                        }   
                }   


                        selecteID = 0;
                selecteID = 0;
                        startInterval(job);
                startInterval(job);
                    }
             }
                }
             };
            request.send(params);
         }
         }
    };
    request.send(params);
}




        //----Arrays werden an diese Funktion übergeben und gefüllt----//
//----Arrays werden an diese Funktion übergeben und gefüllt----//


        function fillArray(LZ, array, teile) {
function fillArray(LZ, array, teile) {


            var arrLZ = 0;
    var arrLZ = 0;
            for (var i=LZ; i<teile.length; i+=6) {
    for (var i=LZ; i<teile.length; i+=6) {
                array.push({value: teile[i]});
        array.push({value: teile[i]});
                arrLZ++;
        arrLZ++;
            }
    }
        }
}




        //----Startdatum wird errechnet----//
//----Startdatum wird errechnet----//
        function getStartdatum(startDatumTeil, startZeitTeil) {
function getStartdatum(startDatumTeil, startZeitTeil) {


            var startdatum = new Date(
    var startdatum = new Date(
                parseInt(startDatumTeil[2]),
        parseInt(startDatumTeil[2]),
                parseInt(startDatumTeil[1]) -1,
        parseInt(startDatumTeil[1]) -1,
                parseInt(startDatumTeil[0]),
        parseInt(startDatumTeil[0]),
                parseInt(startZeitTeil[0]),
        parseInt(startZeitTeil[0]),
                parseInt(startZeitTeil[1]),
        parseInt(startZeitTeil[1]),
                parseInt(startZeitTeil[2])
        parseInt(startZeitTeil[2])
            );
    );
            return startdatum;
    return startdatum;
        }
}




        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
        //-------------------------------------------------Interval--------------------------------------------------------------//
//-------------------------------------------------Interval--------------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //----Interval für Timer wird gestartet----//
//----Interval für Timer wird gestartet----//


        function startInterval(job, item, kundeItem, index) {
function startInterval(job, item, kundeItem, index) {


            timerInterval = setInterval(function() {
    timerInterval = setInterval(function() {


                for (i=0; i<timers.length; i++) {
        for (i=0; i<timers.length; i++) {


                    timers[i].value += 1;
            timers[i].value += 1;
                }
                updateUI(job, item, kundeItem, index);
            }, 1000);
         }
         }
        updateUI(job, item, kundeItem, index);
    }, 1000);
}




        //----Interval für Pausentimer wird gestartet----//  
//----Interval für Pausentimer wird gestartet----//  


        function pauseInterval(job, item, kundeItem, id) {
function pauseInterval(job, item, kundeItem, id) {


            pauseTimerInterval = setInterval(function() {
    pauseTimerInterval = setInterval(function() {


                for (i=0; i<pauseTimers.length; i++) {
        for (i=0; i<pauseTimers.length; i++) {


                    pauseTimers[i].value += 1;
            pauseTimers[i].value += 1;
                }
                updateUI(job, item, kundeItem);
            }, 1000);
         }
         }
        updateUI(job, item, kundeItem);
    }, 1000);
}




        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//
        //------------------------------------------------Timer starten----------------------------------------------------------//
//------------------------------------------------Timer starten----------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //----startTimer bereitet die nötigen Arrays vor,----//
//----startTimer bereitet die nötigen Arrays vor,----//
        //----speichert Startzeit und -datum,----//
//----speichert Startzeit und -datum,----//
        //----beschreibt Arrays und Variablen entsprechend----//
//----beschreibt Arrays und Variablen entsprechend----//
        //----und ruft die Funktion saveStartTime auf----//
//----und ruft die Funktion saveStartTime auf----//


        function startTimer(jobs, jobid, selJob, kundeItem) {
function startTimer(jobs, jobid, selJob, kundeItem) {


            var user = 999;
    var user = 999;
            var endTime = "00:00:00";
    var endTime = "00:00:00";
            var endDate = "0000-00-00";
    var endDate = "0000-00-00";
            var status = '01';
    var status = '01';
            zaehler++;
    zaehler++;
           
   
            startTimeValue = new Date();
    startTimeValue = new Date();


            var minutes = startTimeValue.getMinutes();
    var minutes = startTimeValue.getMinutes();
            var seconds = startTimeValue.getSeconds();
    var seconds = startTimeValue.getSeconds();
            uhrzeit.push({value: startTimeValue.getHours() + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)});
    uhrzeit.push({value: startTimeValue.getHours() + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)});
       
            var month = startTimeValue.getMonth() + 1;
            datum.push({value: startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + startTimeValue.getDate()});


            statusTimer.push({value: 'Running'});
    var month = startTimeValue.getMonth() + 1;
            pauseTimers.push({value: 0});
    datum.push({value: startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + startTimeValue.getDate()});
            pauseTime.push({value: 0});
            timers.push({value: 0});
            selectedKunde.push({value: kundeItem});
            selectedJob.push({value: selJob});
            sys_uid.push({value: 0});


            var index = jobs.indexOf(selJob);
    statusTimer.push({value: 'Running'});
           
    pauseTimers.push({value: 0});
            saveStartTime(user, uhrzeit[zaehler].value, datum[zaehler].value, endTime, endDate, status, selectedID, selJob, jobid[index]);
    pauseTime.push({value: 0});
           
    timers.push({value: 0});
            clearInterval(timerInterval);
    selectedKunde.push({value: kundeItem});
            startInterval(jobs, selJob, kundeItem, index);
    selectedJob.push({value: selJob});
    sys_uid.push({value: 0});


            zweiteListe.style.display = "none";
    var index = jobs.indexOf(selJob);
        }
   
    saveStartTime(user, uhrzeit[zaehler].value, datum[zaehler].value, endTime, endDate, status, selectedID, selJob, jobid[index]);
   
    clearInterval(timerInterval);
    startInterval(jobs, selJob, kundeItem, index);


    zweiteListe.style.display = "none";
}


        //-----------------------------------------------------------------------------------------------------------------------//
        //------------------------------------------------Timer stoppen----------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//


        //----Stopt den Timer, ändert den Status und ruft openLightbox auf----//
//-----------------------------------------------------------------------------------------------------------------------//
//------------------------------------------------Timer stoppen----------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        function stopTimer(job, item, kundeItem, index, id) {
//----Stopt den Timer, ändert den Status und ruft openLightbox auf----//


            idStop = id;
function stopTimer(job, item, kundeItem, index, id) {
            statusTimer[id].value = 'Stopped';
            openLightbox(job, item, kundeItem, index, id);
        }


    idStop = id;
    statusTimer[id].value = 'Stopped';
    openLightbox(job, item, kundeItem, index, id);
}


        //-----------------------------------------------------------------------------------------------------------------------//
        //------------------------------------------------Timer pausieren--------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//


        //----Pausiert den Timer und ändert den Status----//
//-----------------------------------------------------------------------------------------------------------------------//
//------------------------------------------------Timer pausieren--------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        function pauseTimer(job, item, kundeItem, id) {
//----Pausiert den Timer und ändert den Status----//


            pauseTimers[id].value = 0;
function pauseTimer(job, item, kundeItem, id) {
            clearInterval(pauseTimerInterval);
            pauseInterval(job, item, kundeItem, id);
        }


    pauseTimers[id].value = 0;
    clearInterval(pauseTimerInterval);
    pauseInterval(job, item, kundeItem, id);
}


        //-----------------------------------------------------------------------------------------------------------------------//
        //----------------------------------------------Button Pause-Start-------------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//


        //----Ruft die Funktion pauseTimer oder----//
//-----------------------------------------------------------------------------------------------------------------------//
        //----savePauseTimer auf----//
//----------------------------------------------Button Pause-Start-------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        function toggleButton(job, item, kundeItem, id) {
//----Ruft die Funktion pauseTimer oder----//
//----savePauseTimer auf----//


            var button = document.getElementById(id);
function toggleButton(job, item, kundeItem, id) {


            if (button.innerHTML === "Pause") {
    var button = document.getElementById(id);


                statusTimer[id].value = 'Paused';
    if (button.innerHTML === "Pause") {
                pauseTimer(job, item, kundeItem, id);
            }
            else {


                statusTimer[id].value = "Running";
        statusTimer[id].value = 'Paused';
                savePauseTime(pauseTimers[id].value, id);
        pauseTimer(job, item, kundeItem, id);
            }
    }  
        }
    else {


        statusTimer[id].value = "Running";
        savePauseTime(pauseTimers[id].value, id);
    }
}


        //-----------------------------------------------------------------------------------------------------------------------//
        //------------------------------------------------Ausgabe des Timers-----------------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//


        //----Zeigt eine Liste mit einem oder mehreren----//
//-----------------------------------------------------------------------------------------------------------------------//
        //----Timern und Buttons, verteilt dynamisch ID's----//
//------------------------------------------------Ausgabe des Timers-----------------------------------------------------//
        //----und ruft entsprechend der gedrückten----//
//-----------------------------------------------------------------------------------------------------------------------//
        //----Buttons Funktionen auf----//


        function updateUI(job, item, kundeItem, index) {
//----Zeigt eine Liste mit einem oder mehreren----//
            var timerList = document.getElementById("timerList");
//----Timern und Buttons, verteilt dynamisch ID's----//
            timerList.innerHTML = '';
//----und ruft entsprechend der gedrückten----//
           
//----Buttons Funktionen auf----//
            for (i=0; i<timers.length; i++) {
                var neueReihe = document.createElement('tr')


function updateUI(job, item, kundeItem, index) {
    var timerList = document.getElementById("timerList");
    timerList.innerHTML = '';
   
    for (i=0; i<timers.length; i++) {
        var neueReihe = document.createElement('tr')


                //----Name des Kunden wird ausgegeben----//


                var kundeEintrag = document.createElement('td');
        //----Name des Kunden wird ausgegeben----//
                kundeEintrag.style.top = (20 + i * 20) + "%";
                kundeEintrag.style.fontSize = "18px";
                kundeEintrag.classList.add('kunde_k');
                kundeEintrag.textContent = selectedKunde[i].value;
                timerList.appendChild(kundeEintrag);


        var kundeEintrag = document.createElement('td');
        kundeEintrag.style.position = "fixed";
        kundeEintrag.style.top = (12 + i * 14) + "%";
        kundeEintrag.style.width = "30%";
        kundeEintrag.style.left = "0%";
        kundeEintrag.style.textAlign = "center";
        kundeEintrag.classList.add('kunde_k');
        kundeEintrag.textContent = selectedKunde[i].value;
        timerList.appendChild(kundeEintrag);


                //----Gewählter Job wird ausgegeben----//


                var kontoEintrag = document.createElement('td');
        //----Gewählter Job wird ausgegeben----//
                kontoEintrag.style.top = (20 + i * 20) + "%";
                kontoEintrag.style.fontSize = "18px";
                kontoEintrag.classList.add('konto_k');
                kontoEintrag.textContent = selectedJob[i].value;
                timerList.appendChild(kontoEintrag);


        var kontoEintrag = document.createElement('td');
        kontoEintrag.style.position = "fixed";
        kontoEintrag.style.top = (12 + i * 14) + "%";
        kontoEintrag.style.width = "30%";
        kontoEintrag.style.left = "30%";
        kontoEintrag.style.textAlign = "center";
        kontoEintrag.classList.add('konto_k');
        kontoEintrag.textContent = selectedJob[i].value;
        timerList.appendChild(kontoEintrag);


                //----Gestartete Timer werden in Liste----//
                //----ausgegeben, pausierte Timer werden----//
                //----Liste ausgegeben, sobald Timer gestoppt----//
                //----wird Ausgabe in Lightbox----//


                if (statusTimer[i].value === "Running") {
        //----Gestartete Timer werden in Liste----//
                    var laufzeitElement = document.createElement('td');
        //----ausgegeben, pausierte Timer werden----//
                    laufzeitElement.style.top = (20 + i * 20) + "%";
        //----Liste ausgegeben, sobald Timer gestoppt----//
                    laufzeitElement.style.fontSize = "18px";
        //----wird Ausgabe in Lightbox----//
                    laufzeitElement.classList.add('laufzeit_l');
                    laufzeitElement.textContent = formatElapsedTime(timers[i].value);
                    timerList.appendChild(laufzeitElement);
                }
                else if (statusTimer[i].value === 'Paused') {
                    var laufzeitElement = document.createElement('td');
                    laufzeitElement.style.top = (20 + i * 20) + "%";
                    laufzeitElement.style.fontSize = "18px";
                    laufzeitElement.classList.add('laufzeit_l');
                    laufzeitElement.textContent = formatElapsedTime(pauseTimers[i].value);
                    timerList.appendChild(laufzeitElement);
                }
                else if (statusTimer[i].value === 'Stopped') {
                    var zeit = formatElapsedTime(timers[i].value);
                    zeit = zeit.toString();
                    var teile = zeit.split(":");


                    var h = teile[0];
        if (statusTimer[i].value === "Running") {
                    var m = teile[1];
            var laufzeitElement = document.createElement('td');
                    var s = teile[2];
            laufzeitElement.style.position = "fixed";
   
            laufzeitElement.style.top = (12 + i * 14) + "%";
                    var outStdField = document.getElementById("outStd");
            laufzeitElement.style.width = "15%";
                    var outMinField = document.getElementById("outMin");
            laufzeitElement.style.left = "60%";  
                    var outSekField = document.getElementById("outSek");
            laufzeitElement.style.textAlign = "center";
            laufzeitElement.classList.add('laufzeit_l');
            laufzeitElement.textContent = formatElapsedTime(timers[i].value);
            timerList.appendChild(laufzeitElement);
        }
        else if (statusTimer[i].value === 'Paused') {
            var laufzeitElement = document.createElement('td');
            laufzeitElement.style.position = "fixed";
            laufzeitElement.style.top = (12 + i * 14) + "%";  
            laufzeitElement.style.width = "15%";
            laufzeitElement.style.left = "60%";
            laufzeitElement.style.textAlign = "center";
            laufzeitElement.classList.add('laufzeit_l');
            laufzeitElement.textContent = formatElapsedTime(pauseTimers[i].value);
            timerList.appendChild(laufzeitElement);
        }
        else if (statusTimer[i].value === 'Stopped') {
            var laufzeitElement = document.createElement('td');
            laufzeitElement.style.position = "fixed";
            laufzeitElement.style.top = (12 + i * 14) + "%";
            laufzeitElement.style.width = "15%";
            laufzeitElement.style.left = "60%";
            laufzeitElement.style.textAlign = "center";
            laufzeitElement.classList.add('laufzeit_l');
            laufzeitElement.textContent = formatElapsedTime(pauseTimers[i].value);
            timerList.appendChild(laufzeitElement);


                    if (document.activeElement !== outStdField && document.activeElement !== outMinField && document.activeElement !== outSekField) {
            var zeit = formatElapsedTime(timers[i].value);
                        document.getElementById("outStd").value = h;  
            zeit = zeit.toString();
                        document.getElementById("outMin").value = m;
            var teile = zeit.split(":");
                        document.getElementById("outSek").value = s;
                    }


                    var hEnd = document.getElementById("outStd").value;
            var h = teile[0];
                    var mEnd = document.getElementById("outMin").value;
            var m = teile[1];
                    var sEnd = document.getElementById("outSek").value;
            var s = teile[2];
                    time = hEnd + ":" + mEnd + ":" + sEnd;
                }


            var outStdField = document.getElementById("outStd");
            var outMinField = document.getElementById("outMin");
            var outSekField = document.getElementById("outSek");


                 //----Status (Running, Paused, Stopped) wird ausgegeben----//
            if (document.activeElement !== outStdField && document.activeElement !== outMinField && document.activeElement !== outSekField) {
                document.getElementById("outStd").value = h;
                document.getElementById("outMin").value = m;
                 document.getElementById("outSek").value = s;
            }


                var statusTimerElement = document.createElement('td');
            var hEnd = document.getElementById("outStd").value;
                statusTimerElement.style.top = (20 + i * 20) + "%";  
            var mEnd = document.getElementById("outMin").value;
                statusTimerElement.style.fontSize = "18px";
            var sEnd = document.getElementById("outSek").value;
                statusTimerElement.classList.add('status_s');
            time = hEnd + ":" + mEnd + ":" + sEnd;
                statusTimerElement.textContent = statusTimer[i].value;
        }
                timerList.appendChild(statusTimerElement);




                //----Pause Button mit dynamisch vergebener ID wird ausgegeben----//
        //----Status (Running, Paused, Stopped) wird ausgegeben----//


                if (statusTimer[i].value === "Running") {
        var statusTimerElement = document.createElement('td');
                    var pauseButton = document.createElement('button')
        statusTimerElement.style.position = "fixed";
                    pauseButton.id = i;
        statusTimerElement.style.top = (12 + i * 14) + "%";  
                    pauseButton.classList.add('pauseButton');
        statusTimerElement.style.width = "15%";
                    pauseButton.style.top = (20 + i * 20) + "%";
        statusTimerElement.style.left = "75%";  
                    pauseButton.style.height = "22px";
        statusTimerElement.style.textAlign = "center";
                    pauseButton.textContent = 'Pause';
        statusTimerElement.classList.add('status_s');
                    pauseButton.addEventListener('click', function() {toggleButton(job, item, kundeItem, this.id)});
        statusTimerElement.textContent = statusTimer[i].value;
                    timerList.appendChild(pauseButton);
        timerList.appendChild(statusTimerElement);
                }
                else if (statusTimer[i].value === "Paused") {
                    var pauseButton = document.createElement('button')
                    pauseButton.id = i;
                    pauseButton.classList.add('pauseButton');
                    pauseButton.style.top = (20 + i * 20) + "%";
                    pauseButton.style.height = "22px";
                    pauseButton.textContent = 'Start';
                    pauseButton.addEventListener('click', function() {toggleButton(job, item, kundeItem, this.id)});
                    timerList.appendChild(pauseButton);
                }




                //----Stop Button mit dynamisch vergebener ID wird ausgegeben----//
        //----Pause Button mit dynamisch vergebener ID wird ausgegeben----//


                var stopButton = document.createElement('button')
        if (statusTimer[i].value === "Running") {
                stopButton.id = i;
            var pauseButton = document.createElement('button')
                stopButton.classList.add('stopButton');
            pauseButton.id = i;
                stopButton.style.top = (20 + i * 20) + "%";
            pauseButton.classList.add('pauseButton');
                stopButton.style.height = "22px";
            pauseButton.style.position = "fixed";
                stopButton.textContent = 'Stop';
            pauseButton.style.top = (12 + i * 14) + "%";
                stopButton.addEventListener('click', function() {stopTimer(job, item, kundeItem, index, this.id)});
            pauseButton.style.left = "90%";
                timerList.appendChild(stopButton);
            pauseButton.style.height = "9.4%";
               
            pauseButton.style.minWidth = "3%";
                //----Für jeden aufgerufenen Timer wird----//
            pauseButton.style.fontSize = "80%";
                //----eine neue Reihe ausgegeben----//
            pauseButton.textContent = "Pause"
 
            pauseButton.addEventListener('click', function() {toggleButton(job, item, kundeItem, this.id)});
                timerList.appendChild(neueReihe);
            timerList.appendChild(pauseButton);
             }
        }
        else if (statusTimer[i].value === "Paused") {
            var pauseButton = document.createElement('button')
            pauseButton.id = i;
            pauseButton.classList.add('pauseButton');
            pauseButton.style.position = "fixed";
            pauseButton.style.top = (12 + i * 14) + "%";
            pauseButton.style.left = "90%";
            pauseButton.style.height = "9.4%";
            pauseButton.style.minWidth = "3%";
            pauseButton.style.fontSize = "80%";
             pauseButton.textContent = "Start"
            pauseButton.addEventListener('click', function() {toggleButton(job, item, kundeItem, this.id)});
            timerList.appendChild(pauseButton);
         }
         }




         //-----------------------------------------------------------------------------------------------------------------------//
         //----Stop Button mit dynamisch vergebener ID wird ausgegeben----//
        //-----------------------------------------------Sekunden in Uhrzeit umrechnen-------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//


         //----Rechnet übergebene Sekunden in Stunden,----//
         var stopButton = document.createElement('button')
         //----Minuten und Sekunden und gibt diese----//
        stopButton.id = i;
         //----an aufrufende Funktion zurück----//
        stopButton.classList.add('stopButton');
        stopButton.style.position = "fixed";
        stopButton.style.top = (12 + i * 14) + "%";
        stopButton.style.left = "94%";
        stopButton.style.height = "9.4%";
        stopButton.style.width = "3%";
        stopButton.style.fontSize = "80%";
        stopButton.textContent = "Stop"
        stopButton.addEventListener('click', function() {stopTimer(job, item, kundeItem, index, this.id)});
        timerList.appendChild(stopButton);
       
         //----Für jeden aufgerufenen Timer wird----//
         //----eine neue Reihe ausgegeben----//


         function formatElapsedTime(seconds) {
         timerList.appendChild(neueReihe);
    }
}


            var minutes = Math.floor(seconds / 60);
            seconds %= 60;
            var hours = Math.floor(minutes / 60);
            minutes %= 60;
            function addLeadingZero(n) {
                return (n < 10 ? '0' : '') + n;
            }


            return addLeadingZero(hours) + ":" + addLeadingZero(minutes) + ":" + addLeadingZero(seconds);
//-----------------------------------------------------------------------------------------------------------------------//
        }
//-----------------------------------------------Sekunden in Uhrzeit umrechnen-------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


//----Rechnet übergebene Sekunden in Stunden,----//
//----Minuten und Sekunden und gibt diese----//
//----an aufrufende Funktion zurück----//


        //-----------------------------------------------------------------------------------------------------------------------//
function formatElapsedTime(seconds) {
        //--------------------------------------------Uhrzeit in Sekunden umrechnen----------------------------------------------//
        //-----------------------------------------------------------------------------------------------------------------------//


        //----Rechnet übergebene Stunden, Minuten----//
    var minutes = Math.floor(seconds / 60);
         //----und Sekunden in Sekunden um und----//
    seconds %= 60;
        //----gibt diese an aufrufende Funktion zurück----//
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    function addLeadingZero(n) {
         return (n < 10 ? '0' : '') + n;
    }


        function timeInSeconds(zeit) {
    return addLeadingZero(hours) + ":" + addLeadingZero(minutes) + ":" + addLeadingZero(seconds);
}


            var teile = zeit.split(':');
            var Stunden = parseInt(teile[0], 10);
            var Minuten = parseInt(teile[1], 10);
            var Sekunden = parseInt(teile[2], 10);
            return Stunden * 3600 + Minuten * 60 + Sekunden;
        }


//-----------------------------------------------------------------------------------------------------------------------//
//--------------------------------------------Uhrzeit in Sekunden umrechnen----------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//


        //-----------------------------------------------------------------------------------------------------------------------//
//----Rechnet übergebene Stunden, Minuten----//
        //--------------------------------------------------Lightbox-------------------------------------------------------------//
//----und Sekunden in Sekunden um und----//
        //-----------------------------------------------------------------------------------------------------------------------//
//----gibt diese an aufrufende Funktion zurück----//


        //----Öffnet eine Lightbox und zeigt Kunde----//
function timeInSeconds(zeit) {
        //----Job, vergangene Zeit und evtl Pausenzeit an----//
        //----und gibt Möglichkeit alle Zeiten anzupassen----//


        function openLightbox(job, item, kundeItem, index, id) {
    var teile = zeit.split(':');
    var Stunden = parseInt(teile[0], 10);
    var Minuten = parseInt(teile[1], 10);
    var Sekunden = parseInt(teile[2], 10);
    return Stunden * 3600 + Minuten * 60 + Sekunden;
}


            document.getElementById('lightbox').style.display = 'block';


            var dateField = document.getElementById("date");
//-----------------------------------------------------------------------------------------------------------------------//
            dateField.value = datum[id].value;
//--------------------------------------------------Lightbox-------------------------------------------------------------//
            document.getElementById("uhrzeit").innerHTML = uhrzeit[id].value;
//-----------------------------------------------------------------------------------------------------------------------//


            var commentTextarea = document.getElementById("comment");
//----Öffnet eine Lightbox und zeigt Kunde----//
            commentTextarea.value = selectedJob[id].value;
//----Job, vergangene Zeit und evtl Pausenzeit an----//
//----und gibt Möglichkeit alle Zeiten anzupassen----//


            document.getElementById("eingPersonZusatz").innerHTML = selectedKunde[id].value;
function openLightbox(job, item, kundeItem, index, id) {


            if (selectedID.length !== undefined) {
    document.getElementById('lightbox').style.display = 'block';
                document.getElementById("eingPerson").innerHTML = selectedID;
            }
            else {
                document.getElementById("eingPerson").innerHTML = selID[id].value;
            }


    var dateField = document.getElementById("date");
    dateField.value = datum[id].value;
    document.getElementById("uhrzeit").innerHTML = uhrzeit[id].value;


            //----Ausgabe der vergangenen Zeit in Lightbox----//
    var commentTextarea = document.getElementById("comment");
    commentTextarea.value = selectedJob[id].value;


            document.getElementById("outStd").value = 00;                     
    document.getElementById("eingPersonZusatz").innerHTML = selectedKunde[id].value;
            document.getElementById("outMin").value = 00;                     
            document.getElementById("outSek").value = 00;                    


    if (selectedID.length !== undefined) {
        document.getElementById("eingPerson").innerHTML = selectedID;
    }
    else {
        document.getElementById("eingPerson").innerHTML = selID[id].value;
    }


            //----Ausgabe der Pausenzeiten in Lightbox----//


            document.getElementById("outStd2").value = 00;                     
    //----Ausgabe der vergangenen Zeit in Lightbox----//
            document.getElementById("outMin2").value = 00;                     
            document.getElementById("outSek2").value = 00;                         
            getPauseTime(sys_uid[id].value, id);                               
                                                                               
            var secondsPause = pauseTime[id].value;                           
            secondsPause %= 60; 


            var minutesPause = Math.floor(pauseTime[id].value / 60);          
    document.getElementById("outStd").value = 00;                     
            minutesPause %= 60;  
    document.getElementById("outMin").value = 00;                    
    document.getElementById("outSek").value = 00;                    


            var hoursPause = Math.floor(minutesPause / 60);                   
            hoursPause %= 60; 


            document.getElementById("outStd2").value = hoursPause;             
    //----Ausgabe der Pausenzeiten in Lightbox----//
            document.getElementById("outMin2").value = minutesPause;     


            if (secondsPause > 0) {
    document.getElementById("outStd2").value = 00;                     
                document.getElementById("outSek2").value = secondsPause;      
    document.getElementById("outMin2").value = 00;                    
            }                                                                 
    document.getElementById("outSek2").value = 00;                         
            else {
    getPauseTime(sys_uid[id].value, id);                               
                document.getElementById("outSek2").value = 0;                  
                                                                       
            }                                                                 
    var secondsPause = pauseTime[id].value;                            
    secondsPause %= 60; 


            var dropdown2 = document.getElementById("tätigkeit2Dropdown");
    var minutesPause = Math.floor(pauseTime[id].value / 60);          
           
    minutesPause %= 60;  
            job.forEach(function(item, index) {
                var option = document.createElement("option");
                option.textContent = item;
                dropdown2.add(option)


                if (item === selectedJob[id].value) {
    var hoursPause = Math.floor(minutesPause / 60);                   
                    option.selected = true;
    hoursPause %= 60;  
                }
            });


            document.addEventListener('keydown', closeLightboxOnEscape);
    document.getElementById("outStd2").value = hoursPause;            
            document.addEventListener('keydown', closeLightboxOnF2);
    document.getElementById("outMin2").value = minutesPause;      
        } 


    if (secondsPause > 0) {
        document.getElementById("outSek2").value = secondsPause;       
    }                                                                 
    else {
        document.getElementById("outSek2").value = 0;                 
    }                                                                 


         //----Lightbox schließen----//
    var dropdown2 = document.getElementById("tätigkeit2Dropdown");
   
    job.forEach(function(item, index) {
         var option = document.createElement("option");
        option.textContent = item;
        dropdown2.add(option)


         function closeLightbox() {
         if (item === selectedJob[id].value) {
 
             option.selected = true;
             document.getElementById('lightbox').style.display = 'none';
         }
         }
    });


    document.addEventListener('keydown', closeLightboxOnEscape);
    document.addEventListener('keydown', closeLightboxOnF2);


        //----Funktion closeLightbox wird aufgerufen,----//
        //----wenn der Schließen-Button gedrückt wird----//


        function closeLightboxOnSchliessen() {
//----Lightbox schließen----//


            statusTimer[idStop].value = 'Running';
function closeLightbox() {
            closeLightbox();
        }


    document.getElementById('lightbox').style.display = 'none';
}


        //----Funktion closeLightbox wird aufgerufen,----//
        //----wenn Escape gedrückt wird----//


        function closeLightboxOnEscape() {
//----Funktion closeLightbox wird aufgerufen,----//
//----wenn der Schließen-Button gedrückt wird----//


            if (event.key === 'Escape') {
function closeLightboxOnSchliessen() {
                statusTimer[idStop].value = 'Running';
                closeLightbox();
            }
        }


    statusTimer[idStop].value = 'Running';
    closeLightbox();
}


        //----Funktion closeLightbox wird aufgerufen,----//
        //----wenn F2 gedrückt wird----//


        function closeLightboxOnF2(event) {
//----Funktion closeLightbox wird aufgerufen,----//
//----wenn Escape gedrückt wird----//


            if (event.key === 'F2') {
function closeLightboxOnEscape() {
                saveBox();
                closeLightbox();
            }
        }


    if (event.key === 'Escape') {
        statusTimer[idStop].value = 'Running';
        closeLightbox();
    }
}


        //----Alle Daten in Lightbox werden gespeichert----//


        function saveBox() {
//----Funktion closeLightbox wird aufgerufen,----//
//----wenn F2 gedrückt wird----//


            var vergZeit = '"' + time + '"';
function closeLightboxOnF2(event) {


            var teile = time.split(":");
    if (event.key === 'F2') {
            var stunden = parseInt(teile[0]);
        saveBox();
            var minuten = parseInt(teile[1]);
        closeLightbox();
            var sekunden = parseInt(teile[2]);
    }
            time = stunden * 3600 + minuten * 60 + sekunden;
}


            elapsedTime = time;


            var Job = selectedJob[idStop].value;
//----Alle Daten in Lightbox werden gespeichert----//
            var Kunde = selectedKunde[idStop].value;


            var hPEnd = document.getElementById("outStd2").value;
function saveBox() {
            var mPEnd = document.getElementById("outMin2").value;
            var sPEnd = document.getElementById("outSek2").value;
            var pTime = hPEnd + ":" + mPEnd + ":" + sPEnd;
            pTime = timeInSeconds(pTime);


            var uid = sys_uid[idStop].value;
    var vergZeit = '"' + time + '"';
            var month = startTimeValue.getMonth();
            var day = startTimeValue.getDate();
            month += 1;
            stopTimeValue = '"' + startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day) + '"';
           
            var status = 21;


            timers.splice(idStop, 1);
    var teile = time.split(":");
            pauseTimers.splice(idStop, 1);
    var stunden = parseInt(teile[0]);
            pauseTime.splice(idStop, 1);
    var minuten = parseInt(teile[1]);
            selectedKunde.splice(idStop, 1);
    var sekunden = parseInt(teile[2]);
            selectedJob.splice(idStop, 1);
    time = stunden * 3600 + minuten * 60 + sekunden;
            statusTimer[idStop].value = 'Running';
            sys_uid.splice(idStop, 1);


            if (zaehler > 0) {
    elapsedTime = time;
                zaehler -= 1;
            }


            closeLightbox();
    var comment = '"' + document.getElementById("comment").value + '"';
   
    var hPEnd = document.getElementById("outStd2").value;
    var mPEnd = document.getElementById("outMin2").value;
    var sPEnd = document.getElementById("outSek2").value;
    var pTime = hPEnd + ":" + mPEnd + ":" + sPEnd;
    pTime = timeInSeconds(pTime);


            if (timers.length === 0) {
    var uid = sys_uid[idStop].value;
                clearInterval(timerInterval);
    var month = startTimeValue.getMonth();
            }
    var day = startTimeValue.getDate();
    month += 1;
    var stopTimeValue = '"' + startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day) + '"';
   
    var status = 21;


            saveStopTime(stopTimeValue, elapsedTime, pTime, status, uid, vergZeit);
    timers.splice(idStop, 1);
        }
    pauseTimers.splice(idStop, 1);
    pauseTime.splice(idStop, 1);
    selectedKunde.splice(idStop, 1);
    selectedJob.splice(idStop, 1);
    statusTimer[idStop].value = 'Running';
    sys_uid.splice(idStop, 1);


    if (zaehler > 0) {
        zaehler -= 1;
    }


        //----Funktion saveBox wird aufgerufen,----//
    closeLightbox();
        //----wenn der Save-Button gedrückt wird----//


        document.addEventListener('DOMContentLoaded', function() {
    if (timers.length === 0) {
                const saveButton = document.getElementById('saveButton');
        clearInterval(timerInterval);
                saveButton.addEventListener('click', function() {
    }
                    saveBox();
                })
        });


     </script>
     saveStopTime(stopTimeValue, elapsedTime, pTime, status, uid, vergZeit, comment);
    <body>
}


        <!-- //--------------------------------------------------------------------------------------------------------------// -->
        <!-- //---------------------------------------------------HTML-------------------------------------------------------// -->
        <!-- //--------------------------------------------------------------------------------------------------------------// -->
        <textarea id="search" rows="1" cols="50" oninput="searchCustomers(this.value)"></textarea>
        <div class="tabelleKundenliste">
            <ul id="kundenListe"></ul>
        </div>
        <div>
            <table class="tabelleUeberschriften">
                <thead>
                    <tr>
                        <td>
                            <div class="kunde">Kunde</div>
                        </td>
                        <td>
                            <div class="konto">Konto</div>
                        </td>
                        <td>
                            <div class="laufzeit">Laufzeit</div>
                        </td>
                        <td>
                            <div class="status">Status</div>
                        </td>
                        <td>
                            <div class="buttons"></div>
                        </td>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="ausgabe">
            <table class="tabelleAusgabe">
                <thead id="timerList"></thead>
            </table>
        </div>
        <div class="lightbox" id="lightbox">
            <div class="lightbox-table">
                <table>
                    <tr>
                        <td>
                            <label class="commLabel" id="commLabel" for="comment">Kommentar</label>
                            <textarea id="comment" name="comment" rows="4" cols="50"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="bezZeitkonto">Zeitkonto</div>
                        </td>
                        <td>
                            <select class="dropButtonsLightbox" id="tätigkeit2Dropdown"></select>
                        </td>
                        <td>
                            <div class="bezDatum">Startdatum</div>
                        </td>
                        <td>
                            <input type="date" class="date" id="date">
                        </td>
                        <td>
                            <div class="uhrzeit" id="uhrzeit"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="bezPerson">Person</div>
                        </td>
                        <td>
                            <div class="eingPerson" id="eingPerson"></div>
                        </td>
                        <td>
                            <div class="eingPersonZusatz" id="eingPersonZusatz"></div>
                        </td>
                        <td>
                            <div class="Std">Std</div>
                        </td>
                        <td>
                            <input type="number" class="outStd" id="outStd">
                        </td>
                        <td>
                            <div class="Min">Min</div>
                        </td>
                        <td>
                            <input type="number" class="outMin" id="outMin">
                        </td>
                        <td>
                            <div class="Sek">Sek</div>
                        </td>
                        <td>
                            <input type="number" class="outSek" id="outSek">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="Pausenzeiten">Davon Pausenzeiten</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="Std2">Std</div>
                        </td>
                        <td>
                            <input type="number" class="outStd2" id="outStd2">
                        </td>
                        <td>
                            <div class="Min2">Min</div>
                        </td>
                        <td>
                            <input type="number" class="outMin2" id="outMin2">
                        </td>
                        <td>
                            <div class="Sek2">Sek</div>
                        </td>
                        <td>
                            <input type="number" class="outSek2" id="outSek2">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button class="saveButton" id="saveButton">F2 Speichern</button>
                        </td>
                        <td>
                            <button class="closeButton" id="closeButton" onclick="closeLightboxOnSchliessen()">Schließen</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="zweiteListe">
                <ul id="taetigkeitListe"></ul>
        </div>
        <!-- //--------------------------------------------------------------------------------------------------------------// -->
    </body>
</html>


//----Funktion saveBox wird aufgerufen,----//
//----wenn der Save-Button gedrückt wird----//


document.addEventListener('DOMContentLoaded', function() {
        const saveButton = document.getElementById('saveButton');
        saveButton.addEventListener('click', function() {
            saveBox();
        })
});
</syntaxhighlight>
</syntaxhighlight>


= PHP-Script 1 =
= PHP-Script saveTime.php =
<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
<?php
<?php
Zeile 1.419: Zeile 1.387:
     $comm              = 0;
     $comm              = 0;
     $jobID              = 0;
     $jobID              = 0;
     $pauseTime          = 0;
     $pauseTime          = 0;
     $sysuid            = 0;
     $sysuid            = 0;
     $stopTimeValue      = 0;
     $stopTimeValue      = 0;
     $elapsedTime        = 0;
     $elapsedTime        = 0;
Zeile 1.527: Zeile 1.493:
</syntaxhighlight>
</syntaxhighlight>


= PHP-Script 2 =
= PHP-Script getData.php =
<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
<?php
<?php
Zeile 1.573: Zeile 1.539:
     }
     }
?>
?>
</syntaxhighlight>
= CSS-Datei timestyle.css =
<syntaxhighlight lang="css">
/*-------------------------------------------------------------------------------------------------*/
/*-----------------------------------------Allgemein-----------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
body
{
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: right;
    align-items: flex-start;
    height: 100%;
    background-image: url('web_background_3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
ul
{
    list-style-type: none;
}
li
{
    padding: 0.5em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
}
/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------Suche-------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
#search
{
    position: fixed;
    top: 8%;
    left: 42%;
    width: 15%;
    height: 2.8%;
    resize: none;
    border: 0.04em solid #e4e4e4;
    border-radius: 0.1em;
    background-color: white;
    font-size: 2em;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------------------*/
/*-----------------------------------------Timerausgabe--------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
.kundenliste
{
    width: 70%;
    height: 30%;
    position: fixed;
    top: 43.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    overflow: auto;
    background-color: white;
    font-size: 0.85vw;
}
.tabelleUeberschriften
{
    width: 70%;
    min-height: 3%;
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border-top: 0.14em solid #ccc;
    border-bottom: 0.14em solid #ccc; */
    background-color: white;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    font-size: 0.9vw;
}
#timerList
{
    width: 70%;
    height: 25%;
    position: fixed;
    top: 73.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    border-bottom-left-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    /* border: 0.14em solid red; */
    background-color: white;
    font-size: 0.85vw;
}
.kunde
{
    width: 30%;
    position: fixed;
    left: 0%;
}
.konto
{
    width: 30%;
    position: fixed;
    left: 30%;
}
.laufzeit
{
    width: 15%;
    position: fixed;
    left: 60%;
}
.status
{
    width: 15%;
    position: fixed;
    left: 75%;
}
.buttons
{
    width: 10%;
    position: fixed;
    left: 90%;
}
/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------Lightbox----------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
.lightbox
{
    display: none;
    width: 52%;
    height: 62%;
    position: fixed;
    top: 61.5%;
    left: 67%;
    border-radius: 0.15em;
    background-color: white;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 2000px rgba(0, 0, 0, 0.5);
}
/*-----------------------------------------Lightbox-Inhalt-----------------------------------------*/
.commLabel
{
    position: fixed;
    top: 5%;
    left: 5%; 
    font-weight: bold;
    font-size: 0.8vw;
}
.comment
{
    width: 90%;
    height: 38%;
    position: fixed;
    top: 10%;
    left: 5%;
    resize: none;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.9vw;
}
.bezZeitkonto
{
    position: fixed;
    top: 55%;
    left: 5%;
    font-size: 0.8vw;
}
.dropButtonsLightbox
{
    width: 37%;
    height: 4.4%;
    position: fixed;
    top: 54%;
    left: 15%;
    font-size: 0.7vw;
}
.bezDatum
{
    position: fixed;
    top: 55%;
    left: 58%;
    font-size: 0.7vw;
}
.date
{
    position: fixed;
    top: 54%;
    left: 68%;
    width: 15%;
    height: 4%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
}
.uhrzeit
{
    position: fixed;
    top: 54%;
    left: 85.5%;
    width: 10%;
    height: 3.9%;
    padding: 0.1em;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
    color: gray;
    text-align: center;
    resize: none;
}
.bezPerson
{
    position: fixed;
    top: 68%;
    left: 5%;
    font-size: 0.8vw;
}
.eingPerson
{
    position: fixed;
    top: 68%;
    left: 15%;
    width: 10%;
    height: 4.4%;
    resize: none;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
    color: gray;
    text-align: center;
}
.eingPersonZusatz
{
    position: fixed;
    top: 68%;
    left: 26%;
    width: 25.7%;
    height: 4.4%;
    overflow: auto;
    resize: none;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
    color: gray;
    text-align: center;
}
.Std
{
    position: fixed;
    top: 63%;
    left: 66%;
    font-size: 0.7vw;
}
.Min
{
    position: fixed;
    top: 63%;
    left: 78%;
    font-size: 0.7vw;
}
.Sek
{
    position: fixed;
    top: 63%;
    left: 91%;
    font-size: 0.7vw;
}
.outStd
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 68%;
    left: 64%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outMin
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 68%;
    left: 76.5%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outSek
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 68%;
    left: 89%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.Pausenzeiten
{
    position: absolute;
    top: 79%;
    left: 71%;
    font-weight: bold;
    font-size: 0.8vw;
}
.Std2
{
    position: fixed;
    top: 84%;
    left: 66%;
    font-size: 0.7vw;
}
.Min2
{
    position: fixed;
    top: 84%;
    left: 78%;
    font-size: 0.7vw;
}
.Sek2
{
    position: fixed;
    top: 84%;
    left: 91%;
    font-size: 0.7vw;
}
.outStd2
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 64%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outMin2
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 76.5%;
    border: 0.1em  solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outSek2
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 89%;
    border: 0.1em  solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.saveButton
{
    min-width: 8%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 5%;
    font-size: 0.7vw;
}
.closeButton
{
    min-width: 8%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 14%;
    font-size: 0.7vw;
}
/*-------------------------------------------------------------------------------------------------*/
/*--------------------------------Tätigkeitenliste (zweite Liste)----------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
#zweiteListe
{
    display: none;
    width: 25%;
    max-height: 50%;
    position: fixed;
    top: 47%;
    left: 44%;
    padding: 1%;
    overflow: auto;
    border-radius: 0.2em;
    transform: translate(-50%, -50%);
    background-color: #FAFAFA;
    box-shadow: 0 10px 2000px rgba(0, 0, 0, 0.5);
    font-size: 0.85vw;
}
</syntaxhighlight>
</syntaxhighlight>

Aktuelle Version vom 18. Oktober 2023, 09:39 Uhr

Kostenpflichtige Module

UPS
IMS Professional
SMS
Mehrlager-Verwaltung
Mehrsprachen Modul
Multilanguage Modul
EVA Marketing Tool
Termin-Projekte
Edifact-Schnittstelle
Backup Überwachung Email
OBS Geo Daten
DeliSprint / DPD
Filialen
Cashback
Moebelschnittstelle
Dokumenten Manager
DocuWare-Schnittstelle
OFML-Kalkulation
Versicherungsschaden
Gutschriftsanzeigen
Kameraverwaltung
DataInOut


Dieses Script dient zur Zeiterfassung über den REST-Server. Bei Seitenaufruf wird eine Liste von Kunden geladen und in einer Liste angezeigt.

Durch Rechtsklick auf einen Eintrag wird eine Liste an zugehörigen Tätigkeiten geladen, die nach Klick einen Timer starten.

Per Javascript werden Startzeit, Startdatum und andere Informationen wie Kunde und Personalnummer über die PHP-Scripte und das Endpunkt-Script in einer Datenbank gespeichert.

Der Status wird hierbei auf "1" gesetzt. Pausenzeiten werden nach Beenden einer Pause in der Datenbank gespeichert.

Durch Drücken des Stop-Buttons wird eine Lightbox mit einer Zusammenfassung aller zum Timer gehörenden Daten angezeigt. Hier hat man die Möglichkeit Tätigkeiten, abgelaufene Zeit und

Pausenzeit nachträglich zu bearbeiten. Durch Klick auf "Speichern" oder Druck auf F2 werden Endzeit und Enddatum gespeichert und der Status auf "21" gesetzt.

Nach Reload der Webseite wird anhand des Status in der Datenbank nach laufenden Timern gesucht und diese gegebenenfalls gestartet.

Endpunkt-Script

procedure _AddJob(oArr: TJSONArray; id: String);
var cSql        : String;
    A_Query     : TxFQuery;
begin
    cSql    :=  'SELECT CONCAT(za_text, ":",sys_uid) AS Job FROM zeiterfart ' +
                'WHERE za_psnr = ' + DB_SQLVal(id) + ' AND za_inaktiv <> "1" ' +
                'ORDER BY za_order';
    if (DB_xSOpen('Y009LHNBTY', oDB, cSql, A_Query, False)) then begin
        while (not A_Query.EoF) do begin
            oArr.Add(A_Query.A2C('Job'));
            A_Query.Next();
        end;
    end;
    DB_Close(A_Query);
end;

procedure _AddCustomer(oArr: TJSONArray);
var cSql        : String;
    A_Query     : TxFQuery;
begin
    cSql    :='  SELECT * FROM' + 
              '  (SELECT' +
              '  ps_nr,' +
              '  ps_such AS Kunde,' +
              '  perssta.sys_uid AS ps_sys_uid,' +
              '  "PE" AS TYP' +
              '  FROM eigenschaften' +
              '  LEFT JOIN perssta ON se_ref1 AND perssta.sys_uid = se_ref2' +
              '  WHERE se_nr = 0087' + 
              '  AND ps_nr <> 100000' +
              '  UNION SELECT p_nr AS ps_nr,' +
              '  p_name1 AS ps_such,' +
              '  projekte.sys_uid AS ps_sys_uid,' +
              '  "PR" AS TYP' +
              '  FROM eigenschaften' +
              '  LEFT JOIN projekte ON se_ref1 = p_nr' +
              '  AND projekte.sys_uid = se_ref2 WHERE se_nr = 0087)' +
              '  A WHERE ps_nr IS NOT NULL' +
              '  ORDER BY Kunde ';
              
    if (DB_xSOpen('Y009LHNBTY', oDB, cSql, A_Query, False)) then begin
        while (not A_Query.EoF) do begin
            oArr.Add(A_Query.A2C('Kunde'));
            A_Query.Next();
        end;
    end;
    DB_Close(A_Query);
end;

procedure _AddID(kunde: String; oArr: TJSONArray);
var cSql        : String;
    A_Query     : TxFQuery;
begin
    cSql    :='  SELECT * FROM' + 
              '  (SELECT' +
              '  ps_nr,' +
              '  ps_such AS Kunde,' +
              '  perssta.sys_uid AS ps_sys_uid,' +
              '  "PE" AS TYP' +
              '  FROM eigenschaften' +
              '  LEFT JOIN perssta ON se_ref1 AND perssta.sys_uid = se_ref2' +
              '  WHERE se_nr = 0087' + 
              '  AND ps_nr <> 100000' +
              '  UNION SELECT p_nr AS ps_nr,' +
              '  p_name1 AS ps_such,' +
              '  projekte.sys_uid AS ps_sys_uid,' +
              '  "PR" AS TYP' +
              '  FROM eigenschaften' +
              '  LEFT JOIN projekte ON se_ref1 = p_nr' +
              '  AND projekte.sys_uid = se_ref2 WHERE se_nr = 0087)' +
              '  A WHERE ps_nr IS NOT NULL' +
              '  AND Kunde = ' + DB_SQLVal(kunde) +
              '  ORDER BY Kunde ';
              
    if (DB_xSOpen('Y009LHNBTY', oDB, cSql, A_Query, False)) then begin
        while (not A_Query.EoF) do begin
            oArr.Add(A_Query.A2C('ps_nr'));
            A_Query.Next();
        end;
    end;
    DB_Close(A_Query);
end;

procedure _AddCHECK(oArr: TJSONArray);
var cSql        : String;
    A_Query     : TxFQuery;
begin
    cSql    :=  'SELECT ze_starttime, zeiterfuser.sys_uid AS sysuid, zk_psnr, ' +
                'za_text, ps_such, ze_startdate FROM ' +
                'zeiterfuser LEFT JOIN zeiterfkomm ON ' +
                'zk_messunguid = zeiterfuser.SYS_UID LEFT JOIN zeiterfart ' +
                'ON zeiterfart.sys_uid = zeiterfuser.ze_uid AND ' +
                'za_psnr = zeiterfkomm.zk_psnr LEFT JOIN perssta ON ' +
                'ps_nr = zeiterfkomm.zk_psnr WHERE ze_status = 01 ';
              
    if (DB_xSOpen('Y009LHNBTY', oDB, cSql, A_Query, False)) then begin
        while (not A_Query.EoF) do begin
            oArr.Add(A_Query.A2C('ze_starttime'));
            oArr.Add(A_Query.A2C('zk_psnr'));
            oArr.Add(A_Query.A2C('za_text'));
            oArr.Add(A_Query.A2C('ps_such'));
            oArr.Add(A_Query.A2C('sysuid'));
            oArr.Add(A_Query.A2C('ze_startdate'));
            A_Query.Next();
        end;
    end;
    DB_Close(A_Query);
end;

procedure _getPauseTime(sysuid: String; oArr: TJSONArray);
var cSql        : String;
    A_Query     : TxFQuery;
begin
    cSql    :=  'SELECT * FROM zeiterfuser WHERE sys_uid = ' + DB_SQLVal(sysuid);
    
    if (DB_xSOpen('Y009LHNBTY', oDB, cSql, A_Query, False)) then begin
        while (not A_Query.EoF) do begin
            oArr.Add(A_Query.A2C('ze_pausezeit'));
            A_Query.Next();
        end;
    end;
    DB_Close(A_Query);
end;

//----------------Funktionen----------------------------------//

function POST(oParams: TStrings): string;
var 
oArr1                                   : TJSONArray;
cSql                                    : String;

begin
    if (oParams.values['choice']='job') then begin
        oArr1 := TJSONArray.Create();
        _AddJob(oArr1, oParams.values['id']);
        result := oArr1.ToJSON();
    end else if (oParams.values['choice']='customer') then begin
        oArr1 := TJSONArray.Create();
        _AddCustomer(oArr1);
        result := oArr1.ToJSON();
    end else if (oParams.values['choice']='id') then begin
        oArr1 := TJSONArray.Create();
        _AddID(oParams.values['selectedKunde'], oArr1);
        result := oArr1.ToJSON();
    end else if (oParams.values['choice']='check') then begin
        oArr1 := TJSONArray.Create();
        _AddCHECK(oArr1);
        result := oArr1.ToJSON();
    end else if (oParams.values['choice']='pauseTime') then begin    
        oArr1 := TJSONArray.Create();
        _GetPauseTime(oParams.values['sysuid'], oArr1);
        result := oArr1.ToJSON();
    end;
end;

function PUT(oParams: TStrings): string;
var 
xZeit           : TqSQL;
cUSER_SYSUID    : String;
cKOMM_SYSUID    : String;
lNew            : Boolean;
cSql            : String;
dDBNow          : TDateTime;
begin  
    writeln('Choice: ' + oParams.values['choice']);
    if (oParams.values['choice']='start') then
    begin
        dDBNow  := DB_Now(oDB); 
        lNew    := True;
        if (empty(cUSER_SYSUID)) then begin
            cUSER_SYSUID := GetNewId(oDB);
        end;
    
        xZeit           := qSqlInit(oDB, 'zeiterfuser');
        xZeit.lNoSysUID := True;
    
        writeln('SYSUID: ' + oParams.values['jobID']);
    
        xZeit.qSet('ze_user'            , oParams.values['user']);
        xZeit.qSet('ze_starttime'       , oParams.values['uhrzeit']);
        xZeit.qSet('ze_eigen'           , '0101');
        xZeit.qSet('ze_startdate'       , oParams.values['datum']);
        xZeit.qSet('ze_endtime'         , oParams.values['endTime']);
        xZeit.qSet('ze_enddate'         , oParams.values['endDate']);
        xZeit.qSet('ze_zeit'            , '0');
        xZeit.qSet('ze_pausezeit'       , '0');
        xZeit.qSet('ze_status'          , oParams.values['status']);
        xZeit.qSet('ze_berechnen'       , 0);
        xZeit.qSet('ze_officestar'      , 0);
        xZeit.qSet('ze_repa'            , 0);
        xZeit.qSet('ze_vorbereitung'    , 0);
        xZeit.qSet('ze_uid'             , oParams.values['jobID']);
        xZeit.qSet('sys_uid'            , cUSER_SYSUID);
    
        xZeit.SaveData(lNew);
        qSQLFree(xZeit);
        
        //---------------------------------------------------------------------
        
        xZeit := qSqlInit(oDB,'ZEITERFKOMM');
        xZeit.lNoSysUID := True;
        
        if (empty(cKOMM_SYSUID)) then begin
            cKOMM_SYSUID := GetNewId(oDB);
        end;

        xZeit.qSet('zk_psnr'       , oParams.values['psnr']);
        xZeit.qSet('zk_starttime'  , oParams.values['uhrzeit']);
        xZeit.qSet('zk_startdate'  , oParams.values['datum']);
        xZeit.qSet('zk_kommentar'  , oParams.values['comm']);
        xZeit.qSet('zk_messunguid' , cUSER_SYSUID);
        xZeit.qSet('sys_uid'       , cKOMM_SYSUID);

        xZeit.SaveData(lNew);
        qSQLFree(xZeit);
        
        result  := cUser_SYSUID;
        
    end else if (oParams.values['choice']='stop') then
    begin
        
        cSql := 'UPDATE zeiterfuser, zeiterfkomm '   +
                ' SET zeiterfuser.ze_zeit = '       + oParams.values['elapsedTime'] + 
                ', zeiterfuser.ze_endtime = '        + oParams.values['vergZeit'] +
                ', zeiterfuser.ze_enddate = '        + oParams.values['stopTimeValue'] +
                ', zeiterfuser.ze_pausezeit = '      + oParams.values['elapsedPauseTime'] +
                ', zeiterfuser.ze_status = '         + oParams.values['status'] +
                ', zeiterfkomm.zk_kommentar = '      + oParams.values['comment'] +
                ' WHERE zeiterfuser.sys_uid = '      + DB_SQLVal(oParams.values['uid']) +
                ' AND zeiterfkomm.zk_messunguid = '  + DB_SQLVal(oParams.values['uid']);

        if DB_SQLExec(oDB,cSql) then
        begin
            result := 'Die Daten wurden erfolgreich gespeichert!';
        end else begin
            result := 'Fehler!';
        end;
    end else if (oParams.values['choice']='pause') then
    begin     
        writeln('Pausezeit: ' + oParams.values['pauseTime']);
        cSql := 'UPDATE zeiterfuser SET ze_pausezeit ' + 
                '= ze_pausezeit + '    + oParams.values['pauseTime'] +
                ' WHERE sys_uid = '    + DB_SQLVal(oParams.values['sysuid']);

        if DB_SQLExec(oDB,cSql) then
        begin
            result := 'Die Daten wurden erfolgreich gespeichert!';
        end else begin
            result := 'Fehler!';
        end;
    end;
end;

HTML-Datei index.php

<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <title>Ihr IT-Partner in Stade - Ernst Bergau GmbH</title>
        <link rel="stylesheet" type="text/css" href="timestyle.css">
    </head>
    <script>
        <?php
            include('timer.js');
        ?>
    </script>
    <body>
        <!-- //--------------------------------------------------------------------------------------------------------------// -->
        <!-- //---------------------------------------------------HTML-------------------------------------------------------// -->
        <!-- //--------------------------------------------------------------------------------------------------------------// -->

        <textarea id="search" type="text" rows="1" cols="50" oninput="searchCustomers(this.value)"></textarea>

        <div class="kundenliste">
            <ul id="kundenListe"></ul>
        </div>
        <table class="timer">
            <tbody id="timerList"></tbody>
        </table>
        <table class="tabelleUeberschriften">
            <thead>
                <tr>
                    <th class="kunde">Kunde</th>
                    <th class="konto">Konto</th>
                    <th class="laufzeit">Laufzeit</th>
                    <th class="status">Status</th>
                </tr>
            </thead>
        </table>
        

        <div class="lightbox" id="lightbox">
            <label class="commLabel" id="commLabel" for="comment">Kommentar</label>
            <textarea class="comment" id="comment" rows="4" cols="50"></textarea>

            <div class="bezZeitkonto">Zeitkonto</div>
            <select class="dropButtonsLightbox" id="tätigkeit2Dropdown"></select>

            <div class="bezDatum">Startdatum</div>
            <input type="date" class="date" id="date">

            <textarea disabled class="uhrzeit" id="uhrzeit"></textarea>

            <div class="bezPerson">Person</div>
            <textarea disabled class="eingPerson" id="eingPerson"></textarea>
            <textarea disabled class="eingPersonZusatz" id="eingPersonZusatz"></textarea>

            <div class="Std">Std</div>
            <input type="number" class="outStd" id="outStd">
            <div class="Min">Min</div>
            <input type="number" class="outMin" id="outMin">
            <div class="Sek">Sek</div>
            <input type="number" class="outSek" id="outSek">

            <div class="Pausenzeiten">Davon Pausenzeiten</div>
            <div class="Std2">Std</div>
            <input type="number" class="outStd2" id="outStd2">
            <div class="Min2">Min</div>
            <input type="number" class="outMin2" id="outMin2">
            <div class="Sek2">Sek</div>
            <input type="number" class="outSek2" id="outSek2">

            <button class="saveButton" id="saveButton">Speichern</button>
            <button class="closeButton" id="closeButton" onclick="closeLightboxOnSchliessen()">Schließen</button> 
        </div>
        
        <div id="zweiteListe">
            <ul id="taetigkeitListe"></ul>
        </div>
    </body>
</html>

Javascript-Datei timer.js

var api_key             = 'Y00C75PODJ';
var url                 = 'http://127.0.0.1:8099/Zeiterfa/zeiterfa/v1';
var zaehler             = -1;
var timerInterval;      
var pauseTimerInterval; 
var startTimeValue;     
var selectedID          = 0;
var elapsedTime;        
var uid;                
var idStop; 
var time;
var selID               = [];
var job                 = [];
var sys_uid             = [];
var timers              = [];    
var pauseTimers         = [];  
var pauseTime           = [];
var startdate           = [];
var uhrzeit             = [];
var datum               = [];
var statusTimer         = [];       
var selectedJob         = [];
var selectedKunde       = [];      
var tempSelectedKunde   = [];
var parameter           = [];


//-----------------------------------------------------------------------------------------------------------------------//
//--------------------------------------------------Seitenaufruf---------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Bei Seitenaufruf werden die Funktionen----//
//----getCustomer und checkTimer aufgerufen und----//
//----die Kundenliste gefüllt und geprüft,----//
//----ob laufende timer vorhanden sind----//

window.onload = function() {

    getCustomer();
    checkTimer();
}


//-----------------------------------------------------------------------------------------------------------------------//
//-------------------------------------------------Daten auslesen--------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Eine Liste der Kunden wird ausgelesenund gespeichert----//

function getCustomer() {

    var method = 'POST';
    var choice = 'customer';

    var params =    "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice);

    var request = new XMLHttpRequest();

    request.open("POST", "getData.php");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var responseData = JSON.parse(request.responseText);
            populateListeKunde(responseData);
        }
    };
    request.send(params);
}


//----Bei Rechtsklick auf Kunden wird----//
//----seine ID ausgelesen und gespeichert----//

function getCustomerID(selectedKunde, callback) {

    var method = 'POST';
    var choice = 'id';

    var params =    "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice) +
                    "&selectedKunde="       + encodeURIComponent(selectedKunde);

    var request = new XMLHttpRequest();

    request.open("POST", "getData.php");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            selectedID = JSON.parse(request.responseText);
            callback(selectedID);
        }
    };
    request.send(params);
}


//----Anhand der Kunden-ID wird eine Liste von Tätigkeiten----//
//----für jeden Kunden ausgelesen und gespeichert----//

function getJob(id, callback) {

    var method = 'POST';
    var choice = 'job';

    var params =    "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice) +
                    "&id="                  + encodeURIComponent(id);

    var request = new XMLHttpRequest();

    request.open("POST", "getData.php");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var responseData = JSON.parse(request.responseText);
            var Data         = responseData.toString();
            var teile        = Data.split(",");
            var jobid = [];

            for (i=0; i<teile.length; i++) {
                job[i]   = teile[i].split(":")[0];
                jobid[i] = teile[i].split(":")[1];
            }
            callback(job, jobid);
        }
    };
    request.send(params);
}


//----Tätigkeitsliste wird nochmal zur Weiterverarbeitung gelesen----//

function getJobs(id) {

    var method = 'POST';
    var choice = 'job';

    var params =    "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice) +
                    "&id="                  + encodeURIComponent(id);

    var request = new XMLHttpRequest();

    request.open("POST", "getData.php", false);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var responseData = JSON.parse(request.responseText);
            var data = responseData.toString();
            var teile = data.split(",");
            var jobid = [];

            for (var i = 0; i < teile.length; i++) {
                job[i] = teile[i].split(":")[0];
                jobid[i] = teile[i].split(":")[1];
            }
        }
    };
    request.send(params);
}

//----Gespeicherte Pausezeit wird ausgelesen----//

function getPauseTime(sysuid, id) {

    var method = 'POST';
    var choice = 'pauseTime';

    var params  =   "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice) +
                    "&sysuid="              + encodeURIComponent(sysuid);

    var request = new XMLHttpRequest();

    request.open("POST", "getData.php", false);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            pauseTime[id].value = JSON.parse(request.responseText);

        }
    };
    request.send(params);
}


//-----------------------------------------------------------------------------------------------------------------------//
//---------------------------------------------Listen--------------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Eine Liste wird mit Kundendaten gefüllt und angezeigt----//

function populateListeKunde(data) {

    data.forEach(function(item) {
        var listItem = document.createElement("li");
        listItem.textContent = item;

        listItem.addEventListener("contextmenu", function(event) {
            event.preventDefault();

            var selectedKunde = item;
            getCustomerID(selectedKunde, function(selectedID) {
                getJob(selectedID, function(job, jobid) {
                    showSecondList(job, jobid, item);
                });
            });
        });

        kundenListe.appendChild(listItem);
    });
}


//----Eine zweite Liste wird mit Jobs gefüllt,----//
//----angezeigt und bei Klick auf einen Eintrag---//
//-------die Funktion startTimer aufgerufen-------//

function showSecondList(job, jobid, kundeItem) {

    var zweiteListe = document.getElementById("zweiteListe");
    zweiteListe.innerHTML = "";

    job.forEach(function(item) {
        var listItem = document.createElement("li");
        listItem.textContent = item;
    
        (function(capturedItem) {
            listItem.addEventListener("click", function() {
                startTimer(job, jobid, capturedItem, kundeItem);
            });
        }) (item);
        zweiteListe.appendChild(listItem);
    });

    zweiteListe.style.display = "block"; 
    document.addEventListener('keydown', closeSecondList);
    document.addEventListener('click', closeSecondList);
}


//----Nach Klick auf Eintrag wird die Liste geschlossen----//
function closeSecondList() {

    var zweiteListe = document.getElementById("zweiteListe");
    zweiteListe.style.display = "none"; 
}


//-----------------------------------------------------------------------------------------------------------------------//
//---------------------------------------------Daten speichern-----------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Startzeit, -datum, ID und Job werden gespeichert----//

function saveStartTime(user, uhrzeit, datum, endTime, endDate, status, psnr, Job, jobID) {
    
    var method = 'PUT';
    var choice = 'start';

    var params =    "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice) +
                    "&user="                + encodeURIComponent(user) +
                    "&uhrzeit="             + encodeURIComponent(uhrzeit) +
                    "&datum="               + encodeURIComponent(datum) +
                    "&endTime="             + encodeURIComponent(endTime) +
                    "&endDate="             + encodeURIComponent(endDate) +
                    "&status="              + encodeURIComponent(status)+
                    "&psnr="                + encodeURIComponent(psnr)+
                    "&Job="                 + encodeURIComponent(Job)+
                    "&jobID="               + encodeURIComponent(jobID);

    var request = new XMLHttpRequest();

    request.open("POST", "saveTime.php");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            sys_uid[zaehler].value = request.responseText;
        }
    };
    request.send(params);
}

//----Pausezeit wird gespeichert----//

function savePauseTime(pauseTime, id) {

    var method = 'PUT';
    var choice = 'pause';
    
    var params =    "api_key="      + encodeURIComponent(api_key) +
                    "&url="         + encodeURIComponent(url) +
                    "&method="      + encodeURIComponent(method) +
                    "&choice="      + encodeURIComponent(choice) +
                    "&pauseTime="   + encodeURIComponent(pauseTime) +
                    "&sysuid="      + encodeURIComponent(sys_uid[id].value);

    var request = new XMLHttpRequest();

    request.open("POST", "saveTime.php");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {

        if (this.readyState === 4 && this.status === 200) {
            // alert(request.responseText);
        }
    };
    request.send(params);
}

//----Stopzeit und -datum wird gespeichert----//

function saveStopTime(stopTimeValue, elapsedTime, elapsedPauseTime, status, uid, vergZeit, comment) {

    var method = 'PUT';
    var choice = 'stop';
    
    var params =    "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice) +
                    "&stopTimeValue="       + encodeURIComponent(stopTimeValue) +
                    "&elapsedTime="         + encodeURIComponent(elapsedTime) +
                    "&elapsedPauseTime="    + encodeURIComponent(elapsedPauseTime) +
                    "&status="              + encodeURIComponent(status) +
                    "&uid="                 + encodeURIComponent(uid) +
                    "&vergZeit="            + encodeURIComponent(vergZeit)+
                    "&comment="            + encodeURIComponent(comment);
    
    var request = new XMLHttpRequest();

    request.open("POST", "saveTime.php");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200 && timers.length === 0) {
            location.reload();
        }
    };
    request.send(params);
}


//-----------------------------------------------------------------------------------------------------------------------//
//---------------------------------------------Like-Suche----------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Durchsucht die Liste der Kunden auf alle einegegebenen Zeichen----//

function searchCustomers(text) {

    text = text.toLowerCase();
    var kundenListe = document.getElementById("kundenListe");
    var listItems = kundenListe.getElementsByTagName("li");

    for (i=0; i<listItems.length; i++) {
        var item = listItems[i].textContent.toLowerCase();
        if (item.includes(text)) {
            listItems[i].style.display = "block";
        }
        else {
            listItems[i].style.display = "none";
        }
    }
}


//-----------------------------------------------------------------------------------------------------------------------//
//------------------------------------------Vorhandenen Timer checken----------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Überprüft, ob es Einträge in Datenbank ohne----//
//----Endzeit gibt und startet entsprechend Timer----//

function checkTimer() {

    var method = 'POST';
    var choice = 'check';

    var params =    "api_key="              + encodeURIComponent(api_key) +
                    "&url="                 + encodeURIComponent(url) +
                    "&method="              + encodeURIComponent(method) +
                    "&choice="              + encodeURIComponent(choice);

    var request = new XMLHttpRequest();

    request.open("POST", "getData.php");
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200 && timers.length === 0) {
            var responseData = JSON.parse(request.responseText);
            
            if (responseData.length !== 0) {
                startTimeValue = new Date();
                var minutes = startTimeValue.getMinutes();
                var seconds = startTimeValue.getSeconds();
                var month = startTimeValue.getMonth() + 1;

                responseData = responseData.toString();
                var teile = responseData.split(",");

                for (var i=0; i<teile.length; i+=6) {
                    uhrzeit.push({value: startTimeValue.getHours() + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)});
                    datum.push({value: startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + startTimeValue.getDate()});

                    zaehler++;

                    statusTimer.push({value: 'Running'});
                    pauseTimers.push({value: 0});
                    pauseTime.push({value: 0});
                    timers.push({value: teile[i]});
                }

                var j=0;
                for (var i=1; i<teile.length; i+=6) {
                    selID.push({value: teile[i]});
                    getJobs(selID[j].value);
                    j++;
                } 

                fillArray(2, selectedJob, teile);
                fillArray(3, selectedKunde, teile);
                fillArray(4, sys_uid, teile);
                fillArray(5, startdate, teile);

                for (var i=0; i<timers.length; i++) {
                    var startZeitTeil = timers[i].value.split(":");
                    var startDatumTeil = startdate[i].value.split(".");

                    var diffMilli = new Date() - getStartdatum(startDatumTeil, startZeitTeil);
                    timers[i].value = Math.floor(diffMilli / 1000); 
                }   

                selecteID = 0;
                startInterval(job);
            }
        }
    };
    request.send(params);
}


//----Arrays werden an diese Funktion übergeben und gefüllt----//

function fillArray(LZ, array, teile) {

    var arrLZ = 0;
    for (var i=LZ; i<teile.length; i+=6) {
        array.push({value: teile[i]});
        arrLZ++;
    }
}


//----Startdatum wird errechnet----//
function getStartdatum(startDatumTeil, startZeitTeil) {

    var startdatum = new Date(
        parseInt(startDatumTeil[2]),
        parseInt(startDatumTeil[1]) -1,
        parseInt(startDatumTeil[0]),
        parseInt(startZeitTeil[0]),
        parseInt(startZeitTeil[1]),
        parseInt(startZeitTeil[2])
    );
    return startdatum;
}


//-----------------------------------------------------------------------------------------------------------------------//
//-------------------------------------------------Interval--------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Interval für Timer wird gestartet----//

function startInterval(job, item, kundeItem, index) {

    timerInterval = setInterval(function() {

        for (i=0; i<timers.length; i++) {

            timers[i].value += 1;
        }
        updateUI(job, item, kundeItem, index);
    }, 1000);
}


//----Interval für Pausentimer wird gestartet----// 

function pauseInterval(job, item, kundeItem, id) {

    pauseTimerInterval = setInterval(function() {

        for (i=0; i<pauseTimers.length; i++) {

            pauseTimers[i].value += 1;
        }
        updateUI(job, item, kundeItem);
    }, 1000);
}


//-----------------------------------------------------------------------------------------------------------------------//
//------------------------------------------------Timer starten----------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----startTimer bereitet die nötigen Arrays vor,----//
//----speichert Startzeit und -datum,----//
//----beschreibt Arrays und Variablen entsprechend----//
//----und ruft die Funktion saveStartTime auf----//

function startTimer(jobs, jobid, selJob, kundeItem) {

    var user = 999;
    var endTime = "00:00:00";
    var endDate = "0000-00-00";
    var status = '01';
    zaehler++;
    
    startTimeValue = new Date();

    var minutes = startTimeValue.getMinutes();
    var seconds = startTimeValue.getSeconds();
    uhrzeit.push({value: startTimeValue.getHours() + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)});

    var month = startTimeValue.getMonth() + 1;
    datum.push({value: startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + startTimeValue.getDate()});

    statusTimer.push({value: 'Running'});
    pauseTimers.push({value: 0});
    pauseTime.push({value: 0});
    timers.push({value: 0});
    selectedKunde.push({value: kundeItem});
    selectedJob.push({value: selJob});
    sys_uid.push({value: 0});

    var index = jobs.indexOf(selJob);
    
    saveStartTime(user, uhrzeit[zaehler].value, datum[zaehler].value, endTime, endDate, status, selectedID, selJob, jobid[index]);
    
    clearInterval(timerInterval);
    startInterval(jobs, selJob, kundeItem, index);

    zweiteListe.style.display = "none";
}


//-----------------------------------------------------------------------------------------------------------------------//
//------------------------------------------------Timer stoppen----------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Stopt den Timer, ändert den Status und ruft openLightbox auf----//

function stopTimer(job, item, kundeItem, index, id) {

    idStop = id;
    statusTimer[id].value = 'Stopped';
    openLightbox(job, item, kundeItem, index, id);
}


//-----------------------------------------------------------------------------------------------------------------------//
//------------------------------------------------Timer pausieren--------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Pausiert den Timer und ändert den Status----//

function pauseTimer(job, item, kundeItem, id) {

    pauseTimers[id].value = 0;
    clearInterval(pauseTimerInterval);
    pauseInterval(job, item, kundeItem, id);
}


//-----------------------------------------------------------------------------------------------------------------------//
//----------------------------------------------Button Pause-Start-------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Ruft die Funktion pauseTimer oder----//
//----savePauseTimer auf----//

function toggleButton(job, item, kundeItem, id) {

    var button = document.getElementById(id);

    if (button.innerHTML === "Pause") {

        statusTimer[id].value = 'Paused';
        pauseTimer(job, item, kundeItem, id);
    } 
    else {

        statusTimer[id].value = "Running";
        savePauseTime(pauseTimers[id].value, id);
    }
}


//-----------------------------------------------------------------------------------------------------------------------//
//------------------------------------------------Ausgabe des Timers-----------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Zeigt eine Liste mit einem oder mehreren----//
//----Timern und Buttons, verteilt dynamisch ID's----//
//----und ruft entsprechend der gedrückten----//
//----Buttons Funktionen auf----//

function updateUI(job, item, kundeItem, index) {
    var timerList = document.getElementById("timerList");
    timerList.innerHTML = '';
    
    for (i=0; i<timers.length; i++) {
        var neueReihe = document.createElement('tr')


        //----Name des Kunden wird ausgegeben----//

        var kundeEintrag = document.createElement('td');
        kundeEintrag.style.position = "fixed";
        kundeEintrag.style.top = (12 + i * 14) + "%";
        kundeEintrag.style.width = "30%";
        kundeEintrag.style.left = "0%"; 
        kundeEintrag.style.textAlign = "center";
        kundeEintrag.classList.add('kunde_k');
        kundeEintrag.textContent = selectedKunde[i].value;
        timerList.appendChild(kundeEintrag);


        //----Gewählter Job wird ausgegeben----//

        var kontoEintrag = document.createElement('td');
        kontoEintrag.style.position = "fixed";
        kontoEintrag.style.top = (12 + i * 14) + "%"; 
        kontoEintrag.style.width = "30%";
        kontoEintrag.style.left = "30%"; 
        kontoEintrag.style.textAlign = "center";
        kontoEintrag.classList.add('konto_k');
        kontoEintrag.textContent = selectedJob[i].value;
        timerList.appendChild(kontoEintrag);


        //----Gestartete Timer werden in Liste----//
        //----ausgegeben, pausierte Timer werden----//
        //----Liste ausgegeben, sobald Timer gestoppt----//
        //----wird Ausgabe in Lightbox----//

        if (statusTimer[i].value === "Running") {
            var laufzeitElement = document.createElement('td');
            laufzeitElement.style.position = "fixed";
            laufzeitElement.style.top = (12 + i * 14) + "%"; 
            laufzeitElement.style.width = "15%";
            laufzeitElement.style.left = "60%"; 
            laufzeitElement.style.textAlign = "center";
            laufzeitElement.classList.add('laufzeit_l');
            laufzeitElement.textContent = formatElapsedTime(timers[i].value);
            timerList.appendChild(laufzeitElement);
        }
        else if (statusTimer[i].value === 'Paused') {
            var laufzeitElement = document.createElement('td');
            laufzeitElement.style.position = "fixed";
            laufzeitElement.style.top = (12 + i * 14) + "%"; 
            laufzeitElement.style.width = "15%";
            laufzeitElement.style.left = "60%"; 
            laufzeitElement.style.textAlign = "center";
            laufzeitElement.classList.add('laufzeit_l');
            laufzeitElement.textContent = formatElapsedTime(pauseTimers[i].value);
            timerList.appendChild(laufzeitElement);
        }
        else if (statusTimer[i].value === 'Stopped') {
            var laufzeitElement = document.createElement('td');
            laufzeitElement.style.position = "fixed";
            laufzeitElement.style.top = (12 + i * 14) + "%"; 
            laufzeitElement.style.width = "15%";
            laufzeitElement.style.left = "60%"; 
            laufzeitElement.style.textAlign = "center";
            laufzeitElement.classList.add('laufzeit_l');
            laufzeitElement.textContent = formatElapsedTime(pauseTimers[i].value);
            timerList.appendChild(laufzeitElement);

            var zeit = formatElapsedTime(timers[i].value);
            zeit = zeit.toString();
            var teile = zeit.split(":");

            var h = teile[0];
            var m = teile[1];
            var s = teile[2];

            var outStdField = document.getElementById("outStd");
            var outMinField = document.getElementById("outMin");
            var outSekField = document.getElementById("outSek");

            if (document.activeElement !== outStdField && document.activeElement !== outMinField && document.activeElement !== outSekField) {
                document.getElementById("outStd").value = h; 
                document.getElementById("outMin").value = m;
                document.getElementById("outSek").value = s;
            }

            var hEnd = document.getElementById("outStd").value;
            var mEnd = document.getElementById("outMin").value;
            var sEnd = document.getElementById("outSek").value;
            time = hEnd + ":" + mEnd + ":" + sEnd;
        }


        //----Status (Running, Paused, Stopped) wird ausgegeben----//

        var statusTimerElement = document.createElement('td');
        statusTimerElement.style.position = "fixed";
        statusTimerElement.style.top = (12 + i * 14) + "%"; 
        statusTimerElement.style.width = "15%";
        statusTimerElement.style.left = "75%"; 
        statusTimerElement.style.textAlign = "center";
        statusTimerElement.classList.add('status_s');
        statusTimerElement.textContent = statusTimer[i].value;
        timerList.appendChild(statusTimerElement);


        //----Pause Button mit dynamisch vergebener ID wird ausgegeben----//

        if (statusTimer[i].value === "Running") {
            var pauseButton = document.createElement('button')
            pauseButton.id = i;
            pauseButton.classList.add('pauseButton');
            pauseButton.style.position = "fixed";
            pauseButton.style.top = (12 + i * 14) + "%";
            pauseButton.style.left = "90%"; 
            pauseButton.style.height = "9.4%";
            pauseButton.style.minWidth = "3%";
            pauseButton.style.fontSize = "80%";
            pauseButton.textContent = "Pause"
            pauseButton.addEventListener('click', function() {toggleButton(job, item, kundeItem, this.id)});
            timerList.appendChild(pauseButton);
        }
        else if (statusTimer[i].value === "Paused") {
            var pauseButton = document.createElement('button')
            pauseButton.id = i;
            pauseButton.classList.add('pauseButton');
            pauseButton.style.position = "fixed";
            pauseButton.style.top = (12 + i * 14) + "%";
            pauseButton.style.left = "90%";
            pauseButton.style.height = "9.4%";
            pauseButton.style.minWidth = "3%";
            pauseButton.style.fontSize = "80%";
            pauseButton.textContent = "Start"
            pauseButton.addEventListener('click', function() {toggleButton(job, item, kundeItem, this.id)});
            timerList.appendChild(pauseButton);
        }


        //----Stop Button mit dynamisch vergebener ID wird ausgegeben----//

        var stopButton = document.createElement('button')
        stopButton.id = i;
        stopButton.classList.add('stopButton');
        stopButton.style.position = "fixed";
        stopButton.style.top = (12 + i * 14) + "%";
        stopButton.style.left = "94%";
        stopButton.style.height = "9.4%";
        stopButton.style.width = "3%";
        stopButton.style.fontSize = "80%";
        stopButton.textContent = "Stop"
        stopButton.addEventListener('click', function() {stopTimer(job, item, kundeItem, index, this.id)});
        timerList.appendChild(stopButton);
        
        //----Für jeden aufgerufenen Timer wird----//
        //----eine neue Reihe ausgegeben----//

        timerList.appendChild(neueReihe);
    }
}


//-----------------------------------------------------------------------------------------------------------------------//
//-----------------------------------------------Sekunden in Uhrzeit umrechnen-------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Rechnet übergebene Sekunden in Stunden,----//
//----Minuten und Sekunden und gibt diese----//
//----an aufrufende Funktion zurück----//

function formatElapsedTime(seconds) {

    var minutes = Math.floor(seconds / 60);
    seconds %= 60;
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    function addLeadingZero(n) {
        return (n < 10 ? '0' : '') + n;
    }

    return addLeadingZero(hours) + ":" + addLeadingZero(minutes) + ":" + addLeadingZero(seconds);
}


//-----------------------------------------------------------------------------------------------------------------------//
//--------------------------------------------Uhrzeit in Sekunden umrechnen----------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Rechnet übergebene Stunden, Minuten----//
//----und Sekunden in Sekunden um und----//
//----gibt diese an aufrufende Funktion zurück----//

function timeInSeconds(zeit) {

    var teile = zeit.split(':');
    var Stunden = parseInt(teile[0], 10);
    var Minuten = parseInt(teile[1], 10);
    var Sekunden = parseInt(teile[2], 10);
    return Stunden * 3600 + Minuten * 60 + Sekunden;
}


//-----------------------------------------------------------------------------------------------------------------------//
//--------------------------------------------------Lightbox-------------------------------------------------------------//
//-----------------------------------------------------------------------------------------------------------------------//

//----Öffnet eine Lightbox und zeigt Kunde----//
//----Job, vergangene Zeit und evtl Pausenzeit an----//
//----und gibt Möglichkeit alle Zeiten anzupassen----//

function openLightbox(job, item, kundeItem, index, id) {

    document.getElementById('lightbox').style.display = 'block';

    var dateField = document.getElementById("date");
    dateField.value = datum[id].value;
    document.getElementById("uhrzeit").innerHTML = uhrzeit[id].value;

    var commentTextarea = document.getElementById("comment");
    commentTextarea.value = selectedJob[id].value;

    document.getElementById("eingPersonZusatz").innerHTML = selectedKunde[id].value;

    if (selectedID.length !== undefined) {
        document.getElementById("eingPerson").innerHTML = selectedID;
    }
    else {
        document.getElementById("eingPerson").innerHTML = selID[id].value;
    }


    //----Ausgabe der vergangenen Zeit in Lightbox----//

    document.getElementById("outStd").value = 00;                      
    document.getElementById("outMin").value = 00;                      
    document.getElementById("outSek").value = 00;                      


    //----Ausgabe der Pausenzeiten in Lightbox----//

    document.getElementById("outStd2").value = 00;                      
    document.getElementById("outMin2").value = 00;                      
    document.getElementById("outSek2").value = 00;                           
    getPauseTime(sys_uid[id].value, id);                                
                                                                        
    var secondsPause = pauseTime[id].value;                             
    secondsPause %= 60;  

    var minutesPause = Math.floor(pauseTime[id].value / 60);            
    minutesPause %= 60;    

    var hoursPause = Math.floor(minutesPause / 60);                     
    hoursPause %= 60;   

    document.getElementById("outStd2").value = hoursPause;              
    document.getElementById("outMin2").value = minutesPause;       

    if (secondsPause > 0) {
        document.getElementById("outSek2").value = secondsPause;        
    }                                                                   
    else {
        document.getElementById("outSek2").value = 0;                   
    }                                                                   

    var dropdown2 = document.getElementById("tätigkeit2Dropdown");
    
    job.forEach(function(item, index) {
        var option = document.createElement("option");
        option.textContent = item;
        dropdown2.add(option)

        if (item === selectedJob[id].value) {
            option.selected = true;
        }
    });

    document.addEventListener('keydown', closeLightboxOnEscape);
    document.addEventListener('keydown', closeLightboxOnF2);
}  


//----Lightbox schließen----//

function closeLightbox() {

    document.getElementById('lightbox').style.display = 'none';
}


//----Funktion closeLightbox wird aufgerufen,----//
//----wenn der Schließen-Button gedrückt wird----//

function closeLightboxOnSchliessen() {

    statusTimer[idStop].value = 'Running';
    closeLightbox();
}


//----Funktion closeLightbox wird aufgerufen,----//
//----wenn Escape gedrückt wird----//

function closeLightboxOnEscape() {

    if (event.key === 'Escape') {
        statusTimer[idStop].value = 'Running';
        closeLightbox();
    }
}


//----Funktion closeLightbox wird aufgerufen,----//
//----wenn F2 gedrückt wird----//

function closeLightboxOnF2(event) {

    if (event.key === 'F2') {
        saveBox();
        closeLightbox();
    }
}


//----Alle Daten in Lightbox werden gespeichert----//

function saveBox() {

    var vergZeit = '"' + time + '"';

    var teile = time.split(":");
    var stunden = parseInt(teile[0]);
    var minuten = parseInt(teile[1]);
    var sekunden = parseInt(teile[2]);
    time = stunden * 3600 + minuten * 60 + sekunden;

    elapsedTime = time;

    var comment = '"' + document.getElementById("comment").value + '"';
    
    var hPEnd = document.getElementById("outStd2").value;
    var mPEnd = document.getElementById("outMin2").value;
    var sPEnd = document.getElementById("outSek2").value;
    var pTime = hPEnd + ":" + mPEnd + ":" + sPEnd;
    pTime = timeInSeconds(pTime);

    var uid = sys_uid[idStop].value;
    var month = startTimeValue.getMonth();
    var day = startTimeValue.getDate();
    month += 1;
    var stopTimeValue = '"' + startTimeValue.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day) + '"';
    
    var status = 21;

    timers.splice(idStop, 1);
    pauseTimers.splice(idStop, 1);
    pauseTime.splice(idStop, 1);
    selectedKunde.splice(idStop, 1);
    selectedJob.splice(idStop, 1);
    statusTimer[idStop].value = 'Running';
    sys_uid.splice(idStop, 1);

    if (zaehler > 0) {
        zaehler -= 1;
    }

    closeLightbox();

    if (timers.length === 0) {
        clearInterval(timerInterval);
    }

    saveStopTime(stopTimeValue, elapsedTime, pTime, status, uid, vergZeit, comment);
} 


//----Funktion saveBox wird aufgerufen,----//
//----wenn der Save-Button gedrückt wird----//

document.addEventListener('DOMContentLoaded', function() {
        const saveButton = document.getElementById('saveButton');
        saveButton.addEventListener('click', function() {
            saveBox();
        })
});

PHP-Script saveTime.php

<?php
    $user               = 0;
    $uhrzeit            = 0;
    $datum              = 0;
    $endTime            = 0;
    $endDate            = 0;
    $status             = 0;
    $psnr               = 0;
    $comm               = 0;
    $jobID              = 0;
    $pauseTime          = 0;
    $sysuid             = 0;
    $stopTimeValue      = 0;
    $elapsedTime        = 0;
    $elapsedPauseTime   = 0;
    $status             = 0;
    $uid                = 0;
    $vergZeit           = 0;

    if ($_SERVER['REQUEST_METHOD'] === 'POST') 
    {
        $api_key            = $_POST['api_key'];
        $url                = $_POST['url'];
        $method             = $_POST['method'];
        $choice             = $_POST['choice'];

        if (isset($_POST['user'])) {
            $user               = $_POST['user'];
        }
        if (isset($_POST['uhrzeit'])) {
            $uhrzeit            = $_POST['uhrzeit'];    
        }
        if (isset($_POST['datum'])) {
            $datum              = $_POST['datum'];    
        }
        if (isset($_POST['endTime'])) {
            $endTime            = $_POST['endTime'];    
        }
        if (isset($_POST['endDate'])) {
            $endDate            = $_POST['endDate'];    
        }
        if (isset($_POST['status'])) {
            $status             = $_POST['status'];    
        }
        if (isset($_POST['psnr'])) {
            $psnr               = $_POST['psnr'];    
        }
        if (isset($_POST['Job'])) {
            $comm               = $_POST['Job'];    
        }
        if (isset($_POST['jobID'])) {
            $jobID              = $_POST['jobID'];    
        }
        if (isset($_POST['pauseTime'])) {
            $pauseTime          = $_POST['pauseTime'];    
        }
        if (isset($_POST['sysuid'])) {
            $sysuid             = $_POST['sysuid'];    
        }
        if (isset($_POST['stopTimeValue'])) {
            $stopTimeValue      = $_POST['stopTimeValue'];    
        }
        if (isset($_POST['elapsedTime'])) {
            $elapsedTime        = $_POST['elapsedTime'];    
        }
        if (isset($_POST['elapsedPauseTime'])) {
            $elapsedPauseTime   = $_POST['elapsedPauseTime'];    
        }
        if (isset($_POST['status'])) {
            $status             = $_POST['status'];    
        }
        if (isset($_POST['uid'])) {
            $uid                = $_POST['uid'];
        }
        if (isset($_POST['vergZeit'])) {
            $vergZeit           = $_POST['vergZeit'];
        }

        $params = array(    'user'              => $user, 
                            'uhrzeit'           => $uhrzeit, 
                            'datum'             => $datum, 
                            'endTime'           => $endTime, 
                            'endDate'           => $endDate, 
                            'status'            => $status, 
                            'psnr'              => $psnr,
                            'comm'              => $comm,
                            'jobID'             => $jobID,
                            'pauseTime'         => $pauseTime,
                            'sysuid'            => $sysuid,
                            'stopTimeValue'     => $stopTimeValue,
                            'elapsedTime'       => $elapsedTime,
                            'elapsedPauseTime'  => $elapsedPauseTime,
                            'status'            => $status,
                            'uid'               => $uid,
                            'vergZeit'          => $vergZeit,
                            'choice'            => $choice);

        $curl = curl_init($url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_HTTPHEADER, array('apikey: '.$api_key));
        curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($params));
        $response = curl_exec($curl);

        if ($response === false) {
            if($error) {
                echo "curl_Fehler: ".$error;
            }
        } 
        else {
            echo $response;
        }
    }
?>

PHP-Script getData.php

<?php
    $sysuid             = 0;
    $id                 = 0;
    $selectedKunde      = 0;
            
    if ($_SERVER['REQUEST_METHOD'] === 'POST') 
    {
        $api_key        = $_POST['api_key'];
        $url            = $_POST['url'];
        $method         = $_POST['method'];
        $choice         = $_POST['choice'];
        
        if (isset($_POST['id'])) {
            $id = $_POST['id'];
        }
        if (isset($_POST['sysuid'])) {
            $sysuid = $_POST['sysuid'];
        }
        if (isset($_POST['selectedKunde'])) {
            $selectedKunde  = $_POST['selectedKunde'];
        }

        $params = array(    'sysuid'            => $sysuid,
                            'id'                => $id, 
                            'selectedKunde'     => $selectedKunde,
                            'choice'            => $choice);
        
        $curl = curl_init($url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_HTTPHEADER, array('apikey: '.$api_key));
        curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);
        curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($params));
        $response = curl_exec($curl);

        if ($response === false) {
            if($error) {
                echo "curl_Fehler: ".$error;
            }
        } 
        else {
            echo $response;
        }
    }
?>

CSS-Datei timestyle.css

/*-------------------------------------------------------------------------------------------------*/
/*-----------------------------------------Allgemein-----------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

body 
{
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: right;
    align-items: flex-start;
    height: 100%;
    background-image: url('web_background_3.png');
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
}
ul 
{
    list-style-type: none;
}
li 
{
    padding: 0.5em;
    cursor: pointer;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
} 


/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------Suche-------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

#search
{
    position: fixed;
    top: 8%;
    left: 42%;
    width: 15%;
    height: 2.8%;
    resize: none;
    border: 0.04em solid #e4e4e4;
    border-radius: 0.1em;
    background-color: white;
    font-size: 2em;
    overflow: hidden;
}


/*-------------------------------------------------------------------------------------------------*/
/*-----------------------------------------Timerausgabe--------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.kundenliste
{
    width: 70%;
    height: 30%;
    position: fixed;
    top: 43.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    overflow: auto;
    background-color: white;
    font-size: 0.85vw;
}
.tabelleUeberschriften
{
    width: 70%;
    min-height: 3%;
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border-top: 0.14em solid #ccc;
    border-bottom: 0.14em solid #ccc; */
    background-color: white;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.5);
    font-size: 0.9vw;
}
#timerList
{
    width: 70%;
    height: 25%;
    position: fixed;
    top: 73.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    border-bottom-left-radius: 0.2em;
    border-bottom-right-radius: 0.2em;
    /* border: 0.14em solid red; */
    background-color: white;
    font-size: 0.85vw;
} 
.kunde
{
    width: 30%;
    position: fixed;
    left: 0%;
}
.konto
{
    width: 30%;
    position: fixed;
    left: 30%;
}
.laufzeit
{
    width: 15%;
    position: fixed;
    left: 60%;
}
.status
{
    width: 15%;
    position: fixed;
    left: 75%;
}
.buttons
{
    width: 10%;
    position: fixed;
    left: 90%;
}

/*-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------Lightbox----------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

.lightbox
{
    display: none;
    width: 52%;
    height: 62%;
    position: fixed;
    top: 61.5%;
    left: 67%;
    border-radius: 0.15em;
    background-color: white;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 2000px rgba(0, 0, 0, 0.5);
}


/*-----------------------------------------Lightbox-Inhalt-----------------------------------------*/

.commLabel
{
    position: fixed;
    top: 5%;
    left: 5%;   
    font-weight: bold;
    font-size: 0.8vw;
}
.comment
{
    width: 90%;
    height: 38%;
    position: fixed;
    top: 10%;
    left: 5%;
    resize: none;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.9vw;
}


.bezZeitkonto
{
    position: fixed;
    top: 55%;
    left: 5%;
    font-size: 0.8vw;
}
.dropButtonsLightbox
{
    width: 37%;
    height: 4.4%;
    position: fixed;
    top: 54%;
    left: 15%;
    font-size: 0.7vw;
}
.bezDatum
{
    position: fixed;
    top: 55%;
    left: 58%;
    font-size: 0.7vw;
}
.date
{
    position: fixed;
    top: 54%;
    left: 68%;
    width: 15%;
    height: 4%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
}
.uhrzeit
{
    position: fixed;
    top: 54%;
    left: 85.5%;
    width: 10%;
    height: 3.9%;
    padding: 0.1em;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
    color: gray;
    text-align: center;
    resize: none;
}


.bezPerson
{
    position: fixed;
    top: 68%;
    left: 5%;
    font-size: 0.8vw;
}
.eingPerson
{
    position: fixed;
    top: 68%;
    left: 15%;
    width: 10%;
    height: 4.4%;
    resize: none;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
    color: gray;
    text-align: center;
}
.eingPersonZusatz
{
    position: fixed;
    top: 68%;
    left: 26%;
    width: 25.7%;
    height: 4.4%;
    overflow: auto;
    resize: none;
    border: 0.1em solid black;
    border-radius: 0.2em;
    font-size: 0.8vw;
    color: gray;
    text-align: center;
}
.Std
{
    position: fixed;
    top: 63%;
    left: 66%;
    font-size: 0.7vw;
}
.Min
{
    position: fixed;
    top: 63%;
    left: 78%;
    font-size: 0.7vw;
}
.Sek
{
    position: fixed;
    top: 63%;
    left: 91%;
    font-size: 0.7vw;
}
.outStd
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 68%;
    left: 64%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outMin
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 68%;
    left: 76.5%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outSek
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 68%;
    left: 89%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}


.Pausenzeiten
{
    position: absolute;
    top: 79%;
    left: 71%;
    font-weight: bold;
    font-size: 0.8vw;
}
.Std2
{
    position: fixed;
    top: 84%;
    left: 66%;
    font-size: 0.7vw;
}
.Min2
{
    position: fixed;
    top: 84%;
    left: 78%;
    font-size: 0.7vw;
}
.Sek2
{
    position: fixed;
    top: 84%;
    left: 91%;
    font-size: 0.7vw;
}
.outStd2
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 64%;
    border: 0.1em solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outMin2
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 76.5%;
    border: 0.1em  solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.outSek2
{
    width: 6%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 89%;
    border: 0.1em  solid black;
    border-radius: 0.2em;
    text-align: center;
    font-size: 0.7vw;
}
.saveButton
{
    min-width: 8%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 5%;
    font-size: 0.7vw;
}
.closeButton
{
    min-width: 8%;
    height: 4.4%;
    position: fixed;
    top: 89%;
    left: 14%;
    font-size: 0.7vw;
}


/*-------------------------------------------------------------------------------------------------*/
/*--------------------------------Tätigkeitenliste (zweite Liste)----------------------------------*/
/*-------------------------------------------------------------------------------------------------*/

#zweiteListe 
{
    display: none;
    width: 25%;
    max-height: 50%;
    position: fixed;
    top: 47%;
    left: 44%;
    padding: 1%;
    overflow: auto;
    border-radius: 0.2em;
    transform: translate(-50%, -50%);
    background-color: #FAFAFA;
    box-shadow: 0 10px 2000px rgba(0, 0, 0, 0.5);
    font-size: 0.85vw;
}