
<script type="text/javascript">
$(document).ready(function(){
    $.fn.dataTable.ext.classes.sPageButton = 'datatableNavButton';
    var table = $('#table').DataTable(
    {
        rowCallback: function( row, data, index ) {
            if(index%2 == 0){
                $(row).removeClass('myodd myeven');
                $(row).addClass('myodd');
            }else{
                $(row).removeClass('myodd myeven');
                $(row).addClass('myeven');
            }
        },
        pageLength: 18, 
        bProcessing: true,
        responsive: true,
        sPaginationType: "full_numbers",
        // "sAjaxSource": "/php/getData.php",
        ajax: {
            url: "/php/probesGetTableData.php",
            type: "POST",
            // data: {"id": 3}  // send driverID
        },
        aoColumns: [
            // { mData: 'driverName' },
            { mData: 'probeID' },
            { mData: 'address' },
            { mData: 'name' },
            { mData: 'plugged' },
            { mData: '' },
            { mData: '' }
        ],
        dom: 'Bfrtip',
        buttons: [
            { extend: 'excel', text: 'Export Excel', className: 'datatableOptionButton' },
            { extend: 'pdf', text: 'Export PDF', className: 'datatableOptionButton' },
            {
                text: 'Reload',
                className: 'datatableOptionButton',
                action: function ( e, dt, node, config ) {
                    dt.ajax.reload();
                }
            } //,
            // {
            //     text: 'Assign Pin',
            //     className: 'datatableOptionButton',
            //     action: function ( e, dt, node, config ) {
                
            //     driverAssignPin();  // load assign pin page in popup window
            //     }
            // }
        ],
        // add extra column to table for edit record button
        columnDefs: [
            {
            "targets": -2,
            "data": null,
            "defaultContent": "<edit><button>Edit</button></edit>"
            },
            {
            "targets": -1,
            "data": null,
            "defaultContent": "<deleteB><button>Delete</button></deleteB>"
            },
            {
                "mRender": function(data, type, row) {  // change 1/0 to Yes/No in table
                    if (data === '1') {
                        return 'Yes';
                    } else {
                        return 'No';
                    }
                },
                "targets": 3  // column 4
            }
        ]
    });
    $('#table tbody').on( 'click', 'edit', function ()  // processes the edit record button when clicked
    {
        var data = table.row( $(this).parents('tr') ).data();
        loadProbeSettings(data.address)
    });
    // $('#table tbody').on( 'click', 'deleteB', function ()  // processes the delete record button when clicked
    // {
    //     $('.ds18b20Popup-body').empty();
    //     var data = table.row( $(this).parents('tr') ).data();
    //     ds18b20Popup.style.display = "block";
    //     document.querySelector("body").style.overflow = 'hidden';
    //     var ds18b20ID = data.ds18b20ID;
    //     $(".ds18b20Popup-body").append(
    //         '<div style="text-align: center;"><p>&nbsp;</p>\
    //         <p>Are you sure you want to delete this DS18B20?</p>\
    //         <p>&nbsp;</p>\
    //         <button class="button" type="button" onclick="deleteDs18b20(`' + ds18b20ID + '`)">Yes</button>\
    //         <button class="button" type="button" onclick="closeDs18b20Popup()">No</button>\
    //         <p>&nbsp;</p><p>&nbsp;</p></div>');
    //     $(".ds18b20PopupHeader").empty().append("Delete DS18B20 Temperature Sensor");

    // });
});
  
// function cancelDelete() {
//     console.log('cancelDelete ------------------------------=====================');
//     ds18b20Popup.style.display = "none";  // hide popup
//     $('.ds18b20Popup-body').empty();

// }
function loadProbeSettings(a){
    console.log('loadProbeSettings -=====================');
    
    console.log(a);
    clearPopup();  // clear the popup

    $('.popupInstructions').append("Adjust Probe Settings");  // add text to top of popup
    $('.popupButtons').append("<button class='button save'>Save</button>");  // add back button
    $('.popupButtons').append("<button class='button cancel'>Cancel</button>");  // add exit button
      
    // load system settings
    var c = 0;
    var l = 0;
    while (c < phSaved)
    {
        if (a == phAddrSaved[c]) {l = c; break;}
        else {c++;}
    }
    $(".popupBox2").append(
                '<div class="settingsLayout">\
                <form class="settingsForm">\
                    <label class="settingsLabels">Probe Address:</label>\
                    <input class="settingsFields" type="text" value="' + a + '" disabled></br>\
                    <label class="settingsLabels" for="phName">Probe Name:</label>\
                    <input class="settingsFields" type="text" id="phName" name="phName" value="' + phName[l] + '"><br>\
                    <label class="settingsLabels" for="phEnabled">Enabled:</label>\
                    <input class="settingsFields" type="checkbox" id="phEnabled" name="phEnabled" value="' + phPlugged[l] + '"><br>\
                </form>\
                </br></div>');
    // 
    $(".popupBox").append('');
  
    console.log('phPlugged[l] = ' + phPlugged[l]);
    if (phPlugged[l] == 1) {document.getElementById('phEnabled').checked = true;}
    else {document.getElementById('phEnabled').checked = false;}
    // add touch commands for buttons and links
    $('.save').click(function() { probesUpdateSettings(l); })
    $('.cancel').click(function() { loadSettingsProbes(); })
}
function probesUpdateSettings(l){ // update settings, incoming array location
    console.log('probesUpdateSettings');
    console.log(l);
    var name = document.getElementById("phName").value;  // get new name from form
    var plugged = document.getElementById("phEnabled").checked;  // get new name from form
    console.log(name);
    console.log(plugged);
    if (plugged == true) plugged = 1;
    else plugged = 0;
    console.log(plugged);
    var command = "32," + phAddrSaved[l] + "," + name + "," + plugged;
    sendToBackend(command);  // send to backend

    setTimeout(updateProbes, 100);  // 
    setTimeout(loadSettingsProbes, 200);  // 
    setTimeout(printProbeGraphs, 1000);  // 
    redrawProbesWidget = 1;
}
 

</script>


<table id="table" class="tableLayout">
        
        <!-- <a href="#" id="settingsMenuLink">System Settings...</a> -->
        
  <thead>
    <tr>
        <!-- <th class="tableHeader">Driver Name</th> -->
        <th class="tableHeader">ID</th>
        <th class="tableHeader">Probe Address</th>
        <th class="tableHeader">Custom Name</th>
        <th class="tableHeader">Enabled</th>
        <th class="tableHeader"></th>
        <th class="tableHeader"></th>
    </tr>
  </thead>
</table>