
<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/ds18b20GetTableData.php",
            type: "POST",
            // data: {"id": 3}  // send driverID
        },
        aoColumns: [
            // { mData: 'driverName' },
            { mData: 'ds18b20ID' },
            { 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();
        loadDs18b20Settings(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 loadDs18b20Settings(a){
    console.log('loadDs18b20Settings -=====================');
    
    console.log(a);
    clearPopup();  // clear the popup

    $('.popupInstructions').append("Adjust settings for the DS18B20");  // 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 < ds18b20Saved)
    {
        if (a == ds18b20AddrSaved[c]) {l = c; break;}
        else {c++;}
    }
    $(".popupBox2").append(
                '<div class="settingsLayout">\
                <form class="settingsForm">\
                    <label class="settingsLabels">DS18B20 Address:</label>\
                    <input class="settingsFields" type="text" value="' + a + '" disabled></br>\
                    <label class="settingsLabels" for="ds18name">DS18B20 Name:</label>\
                    <input class="settingsFields" type="text" id="ds18name" name="ds18name" value="' + ds18b20Name[l] + '"><br>\
                </form>\
                </br></div>');
    // 
    $(".popupBox").append('');
  

    // add touch commands for buttons and links
    $('.save').click(function() { ds18b20UpdateSettings(l); })
    $('.cancel').click(function() { loadSettingsDs18b20(); })
}
function ds18b20UpdateSettings(l){ // update settings, incoming array location
    console.log('ds18b20UpdateSettings');
    console.log(l);
    var name = document.getElementById("ds18name").value;  // get new name from form
    console.log(name);

    var command = "14," + ds18b20AddrSaved[l] + "," + name;
    sendToBackend(command);  // send to backend

    setTimeout(loadSettingsDs18b20, 100);  // wait 100ms for results to come back from database
    setTimeout(printDs18b20Graphs, 300000);  // wait 1000ms for results to come back from database
    redrawTempWidget = 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">DS18B20 Address</th>
        <th class="tableHeader">Custom Name</th>
        <th class="tableHeader">Plugged In</th>
        <th class="tableHeader"></th>
        <th class="tableHeader"></th>
    </tr>
  </thead>
</table>