
function viewLogs() {  // 
    printHeaderTitle("LOGS", "log2.png", "#c300ff");  // name and file

    removeFooter();

    document.getElementById('content').innerHTML =  // create main page
        '<div class="cleanScreen" id="cleanScreen">\
            <div class="widgetDs18b20GraphOptionsBox" id="widgetLogContainer"></div>\
            <div class="widgetButtonBox">\
                <button class="button _48 home_48" onclick="loadLayout()"></button>\
            </div>\
        </div>';
        
    document.getElementById('widgetLogContainer').innerHTML += 
    `<div class="widgetLogContainer">
        <button class='daysButton' id="b0" type='button' onclick='changeLogDays(1)'>Today</button>
        <button class='daysButton' id="b1" type='button' onclick='changeLogDays(7)'>Last 7 Days</button>
        <button class='daysButton' id="b2" type='button' onclick='changeLogDays(30)'>Last 30 Days</button>
        <button class='daysButton' id="b3" type='button' onclick='changeLogDays(3650)'>All</button>
    </div>
    <div class="logTableContainter" id="logTableContainter">
        <table class="logTable">
            <thead class="logTableHeader">
                <tr>
                    <th id="logColType" onclick="sortLog(0)"><div id="typeSortIcon" class="logsSortIcon bi bi-arrow-down-up"></div> Equipment Type</th>
                    <th id="logColEquip" onclick="sortLog(1)"><div id="equipSortIcon" class="logsSortIcon bi bi-arrow-down-up"></div>Port</th>
                    <th id="logColSource" onclick="sortLog(2)"><div id="sourceSortIcon" class="logsSortIcon bi bi-arrow-down-up"></div>Source</th>
                    <th id="logColAction" onclick="sortLog(3)"><div id="actionSortIcon" class="logsSortIcon bi bi-arrow-down-up"></div>Action</th>
                    <th id="logColTime" onclick="sortLog(4)"><div id="timeSortIcon" class="logsSortIcon bi bi-arrow-down-up"></div>Timestamp</th>
                    <th id="logColTime"></th>
                </tr>
            </thead>
            <div class="logUpdating" id="logUpdating">
                <div class="updateRoller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
            </div>
            <tbody class="logList" id="logList"></tbody>
        </table>
    </div>`;

    if (logNumberDays == 1) {document.getElementById('b0').style = 'background-color:#c300ff;';}
    else if (logNumberDays == 7) {document.getElementById('b1').style = 'background-color:#c300ff;';}
    else if (logNumberDays == 30) {document.getElementById('b2').style = 'background-color:#c300ff;';}
    else if (logNumberDays == 3650) {document.getElementById('b3').style = 'background-color:#c300ff;';}

    printLog();
    displayScreen = 9;
}

function changeLogDays(days) {  // change number of days being viewed in log
    logNumberDays = days;
    viewLogs();
}

function sortLog(col) {  // change sort column and order
    // std::cout << "sortLog  --------- " << endl;

    if (logSortCol != col) {logSortCol = col;}  // if they don't match change columns
    else {  // change order
        if (logSortOrder == 0) {logSortOrder = 1;}
        else {logSortOrder = 0;}
    }
    printLog();
}

function printLog() {  // print log
    // std::cout << "printLog  --------- " << endl;

    $('#logList').empty();  // clear log
    document.getElementById('logUpdating').style = "display:block";

    var col = "";
    if (logSortCol == 0) {col = "logType"}
    else if (logSortCol == 1) {col = "name"}
    else if (logSortCol == 2) {col = "logSource"}
    else if (logSortCol == 3) {col = "logAction"}
    else if (logSortCol == 4) {col = "logTime"}

    $.ajax({
        url: "/php/logGetData.php",
        method: "GET",
        cache: false,
        dataType: "json",
        data: {
            "c": col,
            "a": logSortOrder,
            "d": logNumberDays
        },
        success: function(dataWindow) {
            // console.log("dataWindow = " + dataWindow);
            logID = [];
            logType = [];
            logPort = [];
            logSource = [];
            logAction = [];
            logTime = [];
            logNote = [];

            for(var i in dataWindow) {
                logID[i] = (dataWindow[i].logID);
                logType[i] = (dataWindow[i].logType);
                logPort[i] = (dataWindow[i].name);
                logSource[i] = (dataWindow[i].logSource);
                logAction[i] = (dataWindow[i].logAction);
                logTime[i] = (dataWindow[i].logTime);
                logNote[i] = (dataWindow[i].note);
                if (logSource[i] == "Changed Controller Version") {
                    logType[i] = "";
                    logPort[i] = "";
                }
                else if ((logSource[i] == "Manual") && (logAction[i] == "Rebooted Controller")) {
                    logType[i] = "";
                    logPort[i] = "";
                }
            }
            
            document.getElementById('logUpdating').style = "display:none";
            var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit', second: '2-digit' };
            if (timeFormat == 0) {options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', hourCycle: 'h23', minute: '2-digit', second: '2-digit' };}

            const table = document.getElementById("logList");

            for (var i=0; i < logType.length; i++)  // draw each line to list
            {
                let row = table.insertRow();
                row.id = logID[i];
                let date = row.insertCell(0);
                date.innerHTML = logType[i];
                let name = row.insertCell(1);
                name.innerHTML = logPort[i];
                let port = row.insertCell(2);
                if (logNote[i] == "") {port.innerHTML = logSource[i];}
                else {port.innerHTML = logSource[i] + " - " + logNote[i];}
                let action = row.insertCell(3);
                action.innerHTML = logAction[i];
                const dateObject = new Date(logTime[i] * 1000)
                
                let time = row.insertCell(4);
                time.innerHTML = dateObject.toLocaleString("en-US", options);

                let del = row.insertCell(5);
                del.innerHTML = '<div id="" class="deleteEntry bi bi-x-circle-fill" onclick="deleteEntry(' + logID[i] +')"></div>';
                // const humanDateFormat = dateObject.toLocaleString() //2019-12-9 10:30:15
            }

            document.getElementById('logColType').style = 'color:#FFFFFF';
            document.getElementById('logColEquip').style = 'color:#FFFFFF';
            document.getElementById('logColSource').style = 'color:#FFFFFF';
            document.getElementById('logColAction').style = 'color:#FFFFFF';
            document.getElementById('logColTime').style = 'color:#FFFFFF';
            document.getElementById('typeSortIcon').style = 'color:#FFFFFF';
            document.getElementById('equipSortIcon').style = 'color:#FFFFFF';
            document.getElementById('sourceSortIcon').style = 'color:#FFFFFF';
            document.getElementById('actionSortIcon').style = 'color:#FFFFFF';
            document.getElementById('timeSortIcon').style = 'color:#FFFFFF';
            document.getElementById('typeSortIcon').className = 'logsSortIcon bi bi-arrow-down-up';
            document.getElementById('equipSortIcon').className = 'logsSortIcon bi bi-arrow-down-up';
            document.getElementById('sourceSortIcon').className = 'logsSortIcon bi bi-arrow-down-up';
            document.getElementById('actionSortIcon').className = 'logsSortIcon bi bi-arrow-down-up';
            document.getElementById('timeSortIcon').className = 'logsSortIcon bi bi-arrow-down-up';

            if (logSortCol == 0) {
                console.log("printLog--------------------------------------------------------------");
                document.getElementById('logColType').style = 'color:#000000';
                document.getElementById('typeSortIcon').style = 'color:#000000';
                if (logSortOrder == 0) {document.getElementById('typeSortIcon').className = 'sortIcon bi bi-sort-alpha-down-alt';}
                else {document.getElementById('typeSortIcon').className = 'sortIcon bi bi-sort-alpha-down';}
            }
            else if (logSortCol == 1) {
                document.getElementById('logColEquip').style = 'color:#000000';
                document.getElementById('equipSortIcon').style = 'color:#000000';
                if (logSortOrder == 0) {document.getElementById('equipSortIcon').className = 'sortIcon bi bi-sort-alpha-down-alt';}
                else {document.getElementById('equipSortIcon').className = 'sortIcon bi bi-sort-alpha-down';}
            }
            else if (logSortCol == 2) {
                document.getElementById('logColSource').style = 'color:#000000';
                document.getElementById('sourceSortIcon').style = 'color:#000000';
                if (logSortOrder == 0) {document.getElementById('sourceSortIcon').className = 'sortIcon bi bi-sort-alpha-down-alt';}
                else {document.getElementById('sourceSortIcon').className = 'sortIcon bi bi-sort-alpha-down';}
            }
            else if (logSortCol == 3) {
                document.getElementById('logColAction').style = 'color:#000000';
                document.getElementById('actionSortIcon').style = 'color:#000000';
                if (logSortOrder == 0) {document.getElementById('actionSortIcon').className = 'sortIcon bi bi-sort-alpha-down-alt';}
                else {document.getElementById('actionSortIcon').className = 'sortIcon bi bi-sort-alpha-down';}
            }
            else if (logSortCol == 4) {
                document.getElementById('logColTime').style = 'color:#000000';
                document.getElementById('timeSortIcon').style = 'color:#000000';
                if (logSortOrder == 0) {document.getElementById('timeSortIcon').className = 'sortIcon bi bi-sort-alpha-down-alt';}
                else {document.getElementById('timeSortIcon').className = 'sortIcon bi bi-sort-alpha-down';}
            }
            
            var s = windowHeight - 250;  // get screen height to calculate table height
            // console.log('windowHeight = ' + windowHeight);

            document.getElementById('logTableContainter').style = 'height:' + s + 'px';
        },
        error: function(dataWindow) {
            console.log(dataWindow);
            console.log('error - printLog');
        }
    });
}

function deleteEntry(id) {  // delete log entry
    // console.log("deleteEntry = " + id);
    printLog();
    $.ajax({
        url: "/php/logDeleteEntry.php",
        method: "GET",
        cache: false,
        dataType: "json",
        data: {
            "i": id
        },
        success: function(dataWindow) {
            printLog();
            
        },
        error: function(dataWindow) {
            console.log(dataWindow);
            console.log('error - deleteEntry');
        }
    });
}

function getLog_DELETE() {  // get log
    $.ajax({
        url: "/php/logGetData.php",
        method: "GET",
        cache: false,
        success: function(dataWindow) {

            console.log("getLog--------------------------------------------------------------");
            logType = [];
            logPort = [];
            logSource = [];
            logAction = [];
            logTime = [];

            for(var i in dataWindow) {
                logType[i] = (dataWindow[i].logType);
                logPort[i] = (dataWindow[i].name);
                logSource[i] = (dataWindow[i].logSource);
                logAction[i] = (dataWindow[i].logAction);
                logTime[i] = (dataWindow[i].logTime);
            }
            
            console.log("logType      = " + logType);
            console.log("logPort = " + logPort);
            console.log("logSource    = " + logSource);
            console.log("logAction    = " + logAction);
            console.log("logTime      = " + logTime);
        },
        error: function(dataWindow) {
            console.log(dataWindow);
            console.log('error - getLog');
        }
    });
}