OBS/Kostenpflichtige Module/RESTServer/Beispiel2

Endpuntk-Script

procedure _AddJob(oArr: TJSONArray; id: String);
var oWert       : TJSONObject;
    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 oWert       : TJSONObject;
    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 oWert       : TJSONObject;
    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 oWert       : TJSONObject;
    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 oWert       : TJSONObject;
    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;
startTime                               : TDateTime;
elapsedTime                             : Integer;
millisec, seconds, minutes, hours       : Word;
year, month, day                        : Word;
uhrzeit, datum                          : 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 SET ze_zeit = ' + oParams.values['elapsedTime'] +
                ', ze_endtime = '                   + oParams.values['vergZeit'] +
                ', ze_enddate = '                   + oParams.values['stopTimeValue'] +
                ', ze_pausezeit = '                 + oParams.values['elapsedPauseTime'] +
                ', ze_status = '                    + oParams.values['status'] +
                ' WHERE sys_uid = '                 + 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;

Javascript

<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <title>Ihr IT-Partner in Stade - Ernst Bergau GmbH</title>
        <link rel="stylesheet" type="text/css" href="zeit.css">
    </head>
    <script>

        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) {

            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);
            
            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.top = (20 + i * 20) + "%"; 
                kundeEintrag.style.fontSize = "18px";
                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.top = (20 + i * 20) + "%"; 
                kontoEintrag.style.fontSize = "18px";
                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.top = (20 + i * 20) + "%"; 
                    laufzeitElement.style.fontSize = "18px";
                    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];
                    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.top = (20 + i * 20) + "%"; 
                statusTimerElement.style.fontSize = "18px";
                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.top = (20 + i * 20) + "%";
                    pauseButton.style.height = "22px";
                    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.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----//

                var stopButton = document.createElement('button')
                stopButton.id = i;
                stopButton.classList.add('stopButton');
                stopButton.style.top = (20 + i * 20) + "%";
                stopButton.style.height = "22px";
                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 Job = selectedJob[idStop].value;
            var Kunde = selectedKunde[idStop].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;
            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);
        } 


        //----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();
                })
        });

    </script>
    <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>