lumini_p30_control/firmware/html/bottom.js

function addTabListener() {
    //console.log("Try to add tab listener");
    try {
        var tabMain = document.getElementById("tab-lights");
        var tabConfig = document.getElementById("tab-config");
        var tabTDE = document.getElementById("tab-tde");

        var amain = document.getElementById("tab-a-lights");
        var acfg = document.getElementById("tab-a-config");
        var atde = document.getElementById("tab-a-tde");


        amain.addEventListener("click", function() {
            //console.log("Switch to main lights tab");
            tabMain.classList.add("visible");
            tabConfig.classList.remove("visible");
            tabTDE.classList.remove("visible");

            amain.classList.add("pure-button-primary");
            acfg.classList.remove("pure-button-primary");
            atde.classList.remove("pure-button-primary");

            loadGraphData(); // reload the graph
        });

        acfg.addEventListener("click", function() {
            //console.log("Switch to config tab");
            tabMain.classList.remove("visible");
            tabConfig.classList.add("visible");
            tabTDE.classList.remove("visible");

            amain.classList.remove("pure-button-primary");
            acfg.classList.add("pure-button-primary");
            atde.classList.remove("pure-button-primary");
        });

        atde.addEventListener("click", function() {
            //console.log("Switch to TDE tab");
            tabMain.classList.remove("visible");
            tabConfig.classList.remove("visible");
            tabTDE.classList.add("visible");

            amain.classList.remove("pure-button-primary");
            acfg.classList.remove("pure-button-primary");
            atde.classList.add("pure-button-primary");

            createTable(); // recreate the table on timing data editor tab
            fillTableFromJson();
        });
    } catch (error) {
        console.log("Error: load listener of the tab action listener management: " + error.message);
    }
}
window.addEventListener('load', function() {
    addTabListener();
});

function loadGraphData() {
    console.log('----> generate graph <----');
    $.getJSON('/tc_data_blocks_read', function(data) {
        var currenttime = [];
        var time = [];
        var channel1 = [];
        var channel2 = [];
        var channel3 = [];
        var channel4 = [];
        for (var i = 0; i < data['tcdata'].length; i++) {
            time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
            channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
            channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
            channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
            channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
        }
        currenttime.push(data['currenttime']['hour']);
        currenttime.push(data['currenttime']['min']);
        //console.log(currenttime);
        var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
        var index = time.indexOf(currentTimeStr);
        if (index === -1) {
            var lowerIndex = -1;
            var upperIndex = -1;
            for (var i = 0; i < time.length - 1; i++) {
                //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
                const currentDate = new Date();
                const year = currentDate.getFullYear();
                const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
                const day = currentDate.getDate().toString().padStart(2, '0');
                const dateString = `${year}-${month}-${day}`;
                const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
                const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
                const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
                //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
                //console.log(curr.isBetween(start, end));
                if (curr.isBetween(start, end)) {
                    lowerIndex = i;
                    upperIndex = i + 1;
                    break;
                }
            }
            //console.log('lowerIndex=' + lowerIndex);
            //console.log('upperIndex=' + upperIndex);
            if (lowerIndex === -1 || upperIndex === -1) {
                console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
                lowerIndex = 0;
                upperIndex = 1;
                var tmp1 = time[0].split(':');
                //console.log('tmp1 = ' + tmp1);
                currenttime[0] = tmp1[0];
                currenttime[1] = tmp1[1];
            }
            var lowerTime = time[lowerIndex].split(":");
            var upperTime = time[upperIndex].split(":");
            var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
            var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
            //console.log("Index (float): " + indexFloat);
        } else {
            //console.log("Index (integer): " + index);
            //console.log("Index (float): " + index);
        }
        if (indexFloat > index) {
            index = indexFloat;
        }
        //console.log("index in graph >>>" + index);
        var trace1 = {
            x: time,
            y: channel1,
            name: 'Channel 1',
            type: 'scatter',
            mode: 'lines+markers',
        };
        var trace2 = {
            x: time,
            y: channel2,
            name: 'Channel 2',
            type: 'scatter',
            mode: 'lines+markers',
        };
        var trace3 = {
            x: time,
            y: channel3,
            name: 'Channel 3',
            type: 'scatter',
            mode: 'lines+markers',
        };
        var trace4 = {
            x: time,
            y: channel4,
            name: 'Channel 4',
            type: 'scatter',
            mode: 'lines+markers',
        };
        var layout = {
            title: 'Timing Control Data Blocks',
            xaxis: {
                title: 'Time',
                tickangle: -45,
            },
            yaxis: {
                title: 'Brightness',
                range: [0, 100],
            },
            shapes: [{
                type: 'line',
                x0: index,
                y0: 0,
                x1: index,
                y1: 255,
                line: {
                    color: 'lightgrey',
                    width: 3,
                    dash: 'dot'
                }
            }]
        };
        Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
    });
}
setInterval(loadGraphData, 10000);
loadGraphData();

function loadTCGraphData() {
    console.log('----> generate tc data graph <----');

    var data = JSON.parse(createJsonFromTable());
    //console.log(data);
    var currenttime = [];
    var time = [];
    var channel1 = [];
    var channel2 = [];
    var channel3 = [];
    var channel4 = [];
    for (var i = 0; i < data['tcdata'].length; i++) {
        time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
        channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
        channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
        channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
        channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
    }
    currenttime.push(data['currenttime']['hour']);
    currenttime.push(data['currenttime']['min']);
    //console.log(currenttime);
    var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
    var index = time.indexOf(currentTimeStr);
    if (index === -1) {
        var lowerIndex = -1;
        var upperIndex = -1;
        for (var i = 0; i < time.length - 1; i++) {
            //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
            const day = currentDate.getDate().toString().padStart(2, '0');
            const dateString = `${year}-${month}-${day}`;
            const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
            const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
            const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
            //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
            //console.log(curr.isBetween(start, end));
            if (curr.isBetween(start, end)) {
                lowerIndex = i;
                upperIndex = i + 1;
                break;
            }
        }
        //console.log('lowerIndex=' + lowerIndex);
        //console.log('upperIndex=' + upperIndex);
        if (lowerIndex === -1 || upperIndex === -1) {
            console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
            lowerIndex = 0;
            upperIndex = 1;
            var tmp1 = time[0].split(':');
            //console.log('tmp1 = ' + tmp1);
            currenttime[0] = tmp1[0];
            currenttime[1] = tmp1[1];
        }
        var lowerTime = time[lowerIndex].split(":");
        var upperTime = time[upperIndex].split(":");
        var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
        var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
        //console.log("Index (float): " + indexFloat);
    } else {
        //console.log("Index (integer): " + index);
        //console.log("Index (float): " + index);
    }
    if (indexFloat > index) {
        index = indexFloat;
    }
    //console.log("index in graph >>>" + index);
    var trace1 = {
        x: time,
        y: channel1,
        name: 'Channel 1',
        type: 'scatter',
        mode: 'lines+markers',
    };
    var trace2 = {
        x: time,
        y: channel2,
        name: 'Channel 2',
        type: 'scatter',
        mode: 'lines+markers',
    };
    var trace3 = {
        x: time,
        y: channel3,
        name: 'Channel 3',
        type: 'scatter',
        mode: 'lines+markers',
    };
    var trace4 = {
        x: time,
        y: channel4,
        name: 'Channel 4',
        type: 'scatter',
        mode: 'lines+markers',
    };
    var layout = {
        title: 'Timing Control Data Blocks',
        xaxis: {
            title: 'Time',
            tickangle: -45,
        },
        yaxis: {
            title: 'Brightness',
            range: [0, 100],
        },
        shapes: [{
            type: 'line',
            x0: index,
            y0: 0,
            x1: index,
            y1: 255,
            line: {
                color: 'lightgrey',
                width: 3,
                dash: 'dot'
            }
        }]
    };
    Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);

    var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
}

function rgbaToHex(rgba) {
    var hex = rgba.map(function (value) {
        var hexValue = Math.round(value * 255).toString(16);
        return hexValue.length === 1 ? '0' + hexValue : hexValue;
    });

    return '#' + hex.join('').toUpperCase();
}

setInterval(function() {
    if (document.getElementById('tab-tde').classList.contains('visible')) {
        loadTCGraphData();
    }
}, 2000);

function updateLightState() {
    console.log('----> setting bri and power switch <----');
    for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
        const lightURL = `http://{{IP_ADDRESS}}/state?light=${i}`;
        fetch(lightURL).then(response => response.json()).then(data => {
            const briSlider = document.getElementById(`bri${i - 1}`);
            const briSliderVal = document.getElementById(`bri${i - 1}_val`);
            const onLinkOn = document.getElementById(`on${i - 1}_on`);
            const onLinkOff = document.getElementById(`on${i - 1}_off`);
            briSlider.value = data.bri;
            briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
            //console.log('data.on ' + i + ' = ' + data.on);
            if (data.on == true) {
                onLinkOn.classList.add('pure-button-primary');
                onLinkOff.classList.remove('pure-button-primary');
            } else {
                onLinkOn.classList.remove('pure-button-primary');
                onLinkOff.classList.add('pure-button-primary');
            }
        }).catch(error => console.error(error));
    }
}
setInterval(updateLightState, 10000);
updateLightState();

function updatePWMValues() {
    console.log('----> setting pwm data <----');
    for (let i = 0; i < {{LIGHT_COUNT}}; i++) {
        const lightID = i + 1;
        const pwmElement = document.getElementById(`light${i}_pwm`);
        const pwmElementTxt = document.getElementById(`light${i}_pwm_txt`);
        if (pwmElement) {
            const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
            fetch(url).then(response => response.json()).then(data => {
                const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
                //console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
                pwmElement.innerText = pwmValue.toString();
                pwmElement.value = pwmValue;
                pwmElementTxt.innerText = pwmValue.toString();
            }).catch(error => console.error(error));
        }
    }
}
updatePWMValues();
setInterval(updatePWMValues, 5000);

// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
var links = document.querySelectorAll('[id^="on"][id$="_off"]');
// Füge einen Klick-Listener zu jedem Link hinzu
links.forEach(function(link) {
    link.addEventListener('click', function(event) {
        // Verhindere, dass der Link die Seite neu lädt
        event.preventDefault();
        // Extrahiere die Zahl aus der ID des Links
        var id_full = this.id;
        var id = this.id.replace('on', '').replace('_off', '');
        // Erstelle eine neue Anfrage an die entsprechende URL
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=false&transition=' + document.getElementById('transition').value, true);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                var button = document.getElementById(id_full);
                if (xhr.status === 200) {
                    button.classList.remove("pure-button-primary");
                    button.classList.add("success");
                    button.innerHTML = "Disabled!";
                    setTimeout(function () {
                        button.classList.remove("success");
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "OFF";
                    }, 2000);
                    console.log('Data successfully sent to server!');
                } else {
                    button.classList.remove("pure-button-primary");
                    button.classList.add("error");
                    button.innerHTML = "Error!";
                    setTimeout(function () {
                        button.classList.remove("error");
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "OFF";
                    }, 2000);
                    showToast('Error while sending data to server.', 'error');
                    console.log('Error while sending data to server.');
                }
            }
        };

        // Sende die Anfrage im Hintergrund
        xhr.send();
        updateLightState();
        this.classList.add('pure-button-primary');
        document.getElementById('on'+id+'_on').classList.remove('pure-button-primary');
    });
});
// Suche nach allen Links auf der Seite mit IDs von on0_off bis on3_off
var links = document.querySelectorAll('[id^="on"][id$="_on"]');
// Füge einen Klick-Listener zu jedem Link hinzu
links.forEach(function(link) {
    link.addEventListener('click', function(event) {
        // Verhindere, dass der Link die Seite neu lädt
        event.preventDefault();
        // Extrahiere die Zahl aus der ID des Links
        var id_full = this.id;
        var id = this.id.replace('on', '').replace('_on', '');
        // Erstelle eine neue Anfrage an die entsprechende URL
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://{{IP_ADDRESS}}/?on' + id + '=true&transition=' + document.getElementById('transition').value, true);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                var button = document.getElementById(id_full);
                if (xhr.status === 200) {
                    button.classList.remove("pure-button-primary");
                    button.classList.add("success");
                    button.innerHTML = "Enabled!";
                    setTimeout(function () {
                        button.classList.remove("success");
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "ON";
                    }, 2000);
                    console.log('Data successfully sent to server!');
                } else {
                    button.classList.remove("pure-button-primary");
                    button.classList.add("error");
                    button.innerHTML = "Error!";
                    setTimeout(function () {
                        button.classList.remove("error");
                        button.classList.add("pure-button-primary");
                        button.innerHTML = "ON";
                    }, 2000);
                    showToast('Error while sending data to server.', 'error');
                    console.log('Error while sending data to server.');
                }
            }
        };

        // Sende die Anfrage im Hintergrund
        xhr.send();
        updateLightState();
        this.classList.add('pure-button-primary');
        document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
    });
});

function createTable() {
    // Erstelle eine Tabelle
    var table = document.createElement("table");
    table.border = "1";
  
    // Erstelle eine Kopfzeile
    var headerRow = document.createElement("tr");
  
    // Füge die Spaltenüberschriften hinzu
    var headers = ["Hour", "Minute", "Ch1", "Ch2", "Ch3", "Ch4"];
    headers.forEach(header => {
      var th = document.createElement("th");
      th.innerHTML = header;
      headerRow.appendChild(th);
    });
    table.appendChild(headerRow);
  
    // Erstelle Zeilen mit Zellen für jedes Element
    for (var i = 1; i <= 10; i++) {
      var tr = document.createElement("tr");
  
      // Stunde
      var tdHour = createSelectCell(23, 0, 1);
      tdHour.id = "hour" + i;
      tr.appendChild(tdHour);
  
      // Minute
      var tdMinute = createSelectCell(59, 0, 10);
      tdMinute.id = "minute" + i;
      tr.appendChild(tdMinute);
  
      for (var j = 1; j <=4; j++)
      {
        // chj_i
        var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
        tr.appendChild(tdCh);
      }
  
      table.appendChild(tr);
    }
  
    var container = document.getElementById("table-container");
    container.innerHTML = "";
    container.classList.add("pure-form");
    container.appendChild(table);
}

function createSlider(id, max, value, step) {
    // Create a new input element of type range
    var input = document.createElement("input");
    input.type = "range";
    input.min = 0;
    input.max = max;
    input.step = step;
    input.value = value;
    input.style = "1px solod darkgray";
    input.classList.add("pure-slider-range");
    // Change the color of the slider based on the id
    if (id.startsWith("ch1_")) {
        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)";
    } else if (id.startsWith("ch2_")) {
        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)";
    } else if (id.startsWith("ch3_")) {
        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)";
    } else if (id.startsWith("ch4_")) {
        input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)";
    }

    div = document.createElement("div");
    div.appendChild(input);

    // Create a new span element to contain the value of the slider
    var span = document.createElement("span");
    span.innerHTML = "&nbsp;" + value + " %";
    div.appendChild(span);

    // Update the span element when the value of the slider changes
    input.oninput = function() {
        span.innerHTML = "&nbsp;" + this.value + " %";
    };

    // Create a new td element to contain the div element
    var td = document.createElement("td");
    td.id = id;
    td.appendChild(div);

    // Return the td element
    return td;
}

function createSelectCell(max, value, step) {
    // Erstelle ein neues select-Element
    var select = document.createElement("select");

    // Füge Optionen hinzu
    for (var i = 0; i <= max; i += step) {
        var option = document.createElement("option");
        option.value = i;
        option.text = i;
        select.appendChild(option);
    }

    // Wähle die Option aus, die dem übergebenen Wert entspricht
    select.value = value;

    // Erstelle eine neue Zellenreihe und -zelle
    var row = document.createElement("td");
    row.appendChild(select);

    // Gib die Zelle zurück
    return row;
}

function fillTableFromJson() {
    // Lade JSON-Daten
    fetch('http://{{IP_ADDRESS}}/tc_data_blocks_read')
        .then(response => response.json())
        .then(data => {
        // Fülle die Tabelle mit Daten
        var tcdata = data.tcdata;
        for (var i = 0; i < tcdata.length; i++) {
            var row = document.getElementById("hour" + (i+1)).parentNode;
            row.cells[0].childNodes[0].value = tcdata[i].hour;
            row.cells[1].childNodes[0].value = tcdata[i].min;

            row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
            row.cells[2].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[2].childNodes[0].childNodes[0].value + " %";

            row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
            row.cells[3].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[3].childNodes[0].childNodes[0].value + " %";

            row.cells[4].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
            row.cells[4].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[4].childNodes[0].childNodes[0].value + " %";

            row.cells[5].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
            row.cells[5].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[5].childNodes[0].childNodes[0].value + " %";
        }

        loadTCGraphData();
    });
}

function createJsonFromTable() {
    var tableRows = document.querySelectorAll("table tr");
    var tcdata = [];
  
    // Speichert die Zeitangaben (hour, minute) in einem Array
    var timeArr = [];
    for (var i = 1; i <= 10; i++) {
      var row = document.getElementById("hour" + i).parentNode;
      var hour = parseInt(row.cells[0].childNodes[0].value);
      var min = parseInt(row.cells[1].childNodes[0].value);
      timeArr.push(hour * 60 + min); // Speichert die Zeitangaben als Minuten seit Mitternacht
      var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55);
      var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55);
      var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].childNodes[0].value) * 2.55);
      var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].childNodes[0].value) * 2.55);
      tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
    }
  
    // Überprüft, ob die Zeitangaben von datensatz i=0 bis i=9 aufsteigend sind
    for (var i = 0; i < timeArr.length - 1; i++) {
      if (timeArr[i] >= timeArr[i + 1]) {
        showToast('Error while verifying timing control data. The timestamps are not incrementing.', 'error');
        return null;
      }
    }
  
    var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
    var jsonData = {tcdata: tcdata, currenttime: currentTime};
    //console.log("jsonData = " + JSON.stringify(jsonData));
    return JSON.stringify(jsonData);
  }

function sendDataToServer() {
    var jsonData = createJsonFromTable();

    if (!jsonData) {
        button.classList.remove("pure-button-primary");
        button.classList.add("error");
        button.innerHTML = "Error!";
        setTimeout(function () {
          button.classList.remove("error");
          button.classList.add("pure-button-primary");
          button.innerHTML = "save";
        }, 2000);
        console.log('Error while generating timing control data.');
        return;
    }

    var urlEncodedData = encodeURIComponent(jsonData);
    var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            var button = document.getElementById("save-button");
            if (xhr.status === 200) {
                button.classList.remove("pure-button-primary");
                button.classList.add("success");
                button.innerHTML = "Saved!";
                setTimeout(function () {
                    button.classList.remove("success");
                    button.classList.add("pure-button-primary");
                    button.innerHTML = "save";
                }, 2000);
                console.log('Data successfully sent to server!');
            } else {
                button.classList.remove("pure-button-primary");
                button.classList.add("error");
                button.innerHTML = "Error!";
                setTimeout(function () {
                    button.classList.remove("error");
                    button.classList.add("pure-button-primary");
                    button.innerHTML = "save";
                }, 2000);
                showToast('Error while sending timing control data to server.', 'error');
                console.log('Error while sending data to server.');
            }
        }
    };
    xhr.send();
    loadTCGraphData(); // update the tc data graph
}

function showToast(message, type) {
    const toast = document.querySelector('.toast');
    
    if (toast) {
      toast.textContent = message;
      toast.classList.remove('success', 'error');
      
      if (type === 'success') {
        toast.classList.add('success');
      } else if (type === 'error') {
        toast.classList.add('error');
      }
      
      toast.style.opacity = 1;
      
      setTimeout(() => {
        toast.style.opacity = 0;
      }, 5000);
    }
  }