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

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;
}

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