{{ define "content" }}
<link href="/static/css/pages/ip.css" rel="stylesheet">

<!-- This file describes the /ip/loggers UI page -->

<!-- Action buttons -->
<nav class="navbar navbar-expand-md">
    <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse"
          data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false"
          aria-label="Toggle navigation">
        <i class="icon-menu"></i>Menu
    </span>
</nav>

<!-- Main table showing slot, and debug level of the relevant, associated loggers -->
<div class="grid-wrapper">
    <h4 class="modal-header">Debug Levels</h4>
    <div id="divLoggersTable" style="height: 100%;" class="ag-theme-balham-dark"></div>
</div>

{{/* Scripts in rcs/go/web/public/js/... */}}
<script src="/static/js/js-utils.js"></script>
<script src="/static/js/aggrid-utils.js"></script>

<script type="text/javascript" charset="utf-8">
    const eventListenerType = {
        LOGGER_DATA_UPDATED : "Logger_Data_Updated",
        ERRORS_OCCURRED : "Errors_Occurred",
        LOG_DATA : "Log_Data"
    };

    // For use with logging events from this page - unrelated to debug levels that the page exists to change
    const logLevel = {
        INFO : "info",
        LOG : "log",
        WARN : "warn",
        ERROR : "error",
        TRACE : "trace"
    };

    const debugLevelOptionsInt = [0, 1, 2, 3, 4, 5, 6, 7];

    // Mappings for the debug level columns, from "raw" to "display" values.
    const debugLevelOptionsMap = new Map([
        [0, 'DISABLED'],
        [1, 'FATAL'],
        [2, 'ERROR'],
        [3, 'WARN'],
        [4, 'NOTIF'],
        [5, 'INF'],
        [6, 'DBG'],
        [7, 'VERBOSE'],
    ]);

    // AgGrid table column definitions.
    const columnDefsLoggersTable = [
        {field: "unit", headerName: "Slot", editable: false},
        {field: "sysmgr", headerName: "SysMgr", type: "debugLvlColumn",
            valueSetter: params => setColumnValueInt(params, "sysmgr"),
        },
        {field: "avmgr", headerName: "AvMgr", type: "debugLvlColumn",
            valueSetter: params => setColumnValueInt(params, "avmgr"),
        },
        {field: "ptpmgr", headerName: "PtpMgr", type: "debugLvlColumn",
            valueSetter: params => setColumnValueInt(params, "ptpmgr"),
        },
        {field: "nmos", headerName: "Nmos", type: "debugLvlColumn",
            valueSetter: params => setColumnValueInt(params, "nmos"),
        },
    ];

    const loggersTableOptions = {
        defaultColDef: {
            editable: true,
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: columnDefsLoggersTable,
        rowSelection: 'single',
        columnTypes: {
            debugLvlColumn: {
                editable: true, 
                cellEditorParams: params => { return { values: debugLevelOptionsInt}},
                refData: debugLevelOptionsMap,
                filterParams: {valueFormatter: (params) => debugLevelOptionsMap.get(params.value)},
                valueFormatter: (params) => debugLevelOptionsMap.get(params.value),
                cellStyle: getTableCellStyle, 
                cellEditor: "agSelectCellEditor"
            }
        },
    };

    // For use with logging events from this page - unrelated to debug levels that the page exists to change
    function logger(loggingLevel, message) {
        var event = new CustomEvent(eventListenerType.LOG_DATA, {
            detail: {
                level : loggingLevel,
                message : message,
            }
        });
        window.dispatchEvent(event);
    }

    function showErrorList (eventData) {
        const errors = eventData.detail.errors;
        if (!errors) {
            logger(logLevel.WARN, arguments.callee.name + " - No error to show for '" + JSON.stringify(eventData.detail) + "'");
            return;
        }

        if (errors.length > 0) {
            var errorString = "<ul>";
            for (var i = 0; i < errors.length; i++) {
                errorString += "<li>" + errors[i] + "</li>";
            }
            errorString += "</ul>";

            $('#errorListHeading').text((errors.length == 1) ? "There is an error that needs to be addressed: " : "There are " + errors.length + " errors that need to be addressed: ");
            $('#errorList').html(errorString);
            displayDialog("errorsModal");
        }
    }

    function addCustomEventListeners() {
        window.addEventListener(eventListenerType.LOG_DATA, dashboardLogger); // Page doesn't currently exist on dashboard, but leaving this in in case that should change
        window.addEventListener(eventListenerType.LOG_DATA, consoleLogger);
        window.addEventListener(eventListenerType.ERRORS_OCCURRED, showErrorList);
        window.addEventListener(eventListenerType.LOGGER_DATA_UPDATED, populateFields);

        window.onerror = function(message, source, lineno, colno, error) {
            var data = {
                "message" : message,
                "source"  : source,
                "line #"  : lineno,
                "col #"   : colno,
                "error"   : error
            };
            logger(logLevel.ERROR, JSON.stringify(data, null, 2));
        };
    }

    // Page doesn't currently exist on dashboard, but leaving this in in case that should change
    function dashboardLogger(eventData) {
        if (typeof oglml === 'undefined') {
            return;
        }

        var logMessage = eventData.detail.level.capitalize() + " - " + eventData.detail.message;
        oglml.call('dbDebug', [logMessage]);
    }

    // For use with logging events from this page - unrelated to debug levels that the page exists to change
    function consoleLogger(eventData) {
        if (console === "undefined") {
            return;
        }

        switch(eventData.detail.level) {
            case logLevel.INFO :
                console.info(eventData.detail.message);
                break;
            case logLevel.WARN :
                console.warn(eventData.detail.message);
                break;
            case logLevel.ERROR :
                console.error(eventData.detail.message);
                break;
            case logLevel.TRACE :
                console.trace(eventData.detail.message);
                break;
            default:
                console.log(eventData.detail.message);
                break;
        }
    }

    function setColumnValueInt(params, field) {
        if (params.newValue != params.oldValue) {
            var tmp = parseInt(params.newValue)
            if (Number.isInteger(tmp) && params.data[field] !== tmp) {
                params.data[field] = tmp;
                params.data.modified = true;
                return true;
            }
        }
        return false
    }

    function initContents() {
        new agGrid.Grid(document.querySelector('#divLoggersTable'), loggersTableOptions);

        // Set initial sort order on table.
        loggersTableOptions.columnApi.applyColumnState({
            state: [{colId: 'unit', sort: 'asc'}],
            defaultState: {sort: null},
        });
        // Load data and populate the fields.
        loadDataFromServer();
    }

    function loadDataFromServer() {
        fetch('/ip/loggers/data').then(response => response.json()).then(data => dispatchNewLoggerData(data));
    }

    function dispatchNewLoggerData (newLoggerData) {
        var event = new CustomEvent(eventListenerType.LOGGER_DATA_UPDATED, {
            detail: newLoggerData
        });
        window.dispatchEvent(event);
    }

    function dispatchErrorsEvent (errorList) {
        var event = new CustomEvent(eventListenerType.ERRORS_OCCURRED, {
            detail: {
                errors : errorList,
            }
        });
        window.dispatchEvent(event);
    }

    function populateFields(eventData) {
        loggersTableOptions.api.setRowData(eventData.detail);
    }

    function onApply () {
        let newData = [];

        loggersTableOptions.api.forEachNode(function (node) {
            if (node.data.modified) {
                delete node.data.modified;
                newData.push(node.data);
                node.data.modified = true; // Not all that necessary to restore this, but better safe than sorry
            }
        });

        logger(logLevel.LOG, "onApply: new data:" + JSON.stringify(newData));
        loggersTableOptions.api.stopEditing();
        $.post("/ip/loggers", JSON.stringify(newData))
            .done((msg) => {
                logger(logLevel.LOG, 'onApply: done, msg: ' + JSON.stringify(msg));
                loadDataFromServer();
            })
            .fail((xhr, status, error) => {
                const responseError = xhr.status + ' - ' + xhr.responseText;
                dispatchErrorsEvent([responseError, error]);
                logger(logLevel.ERROR, responseError);
                loadDataFromServer();
            });
    }

    function onRefresh() {
        loggersTableOptions.api.stopEditing(true);
        loadDataFromServer();
    }

    // This should be updated if the defaults ever change since it is just hardcoded
    function onLoadDefaults() {
        loggersTableOptions.api.forEachNode(function (node) {
            const defaultLogLvl = 5;
            if (node.data.sysmgr != defaultLogLvl || node.data.avmgr != defaultLogLvl || node.data.ptpmgr != defaultLogLvl || node.data.nmos != defaultLogLvl) {
                node.data.modified = true;
            }
            node.data.sysmgr = defaultLogLvl;
            node.data.avmgr = defaultLogLvl;
            node.data.ptpmgr = defaultLogLvl;
            node.data.nmos = defaultLogLvl;
            node.setData(node.data)
        });
    }

    function getTableCellStyle(params) {
        let colorValue = params.data.modified ? 'yellow' : 'white';
        return {color: colorValue}
    }

    document.addEventListener('DOMContentLoaded', function () {
        initContents();
        addCustomEventListeners();
    });
</script>

<div class="modal" id="errorsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-errors-size">
        <div class="modal-content">
            <div class="modal-header error-header justify-content-between">
                <span class="modal-title" id="errorModalLabel"><i class="icon-alarm-error-header"></i>Errors</span>
                <span class="btn btn-transparent" onclick="hideDialog('errorsModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data" id="errorListHeading">There are the following errors: </p>
                <div class="container-data" id="errorList"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-text" onclick="hideDialog('errorsModal');">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="fixed-bottom modal-footer" id="footerdiv">
    <button class="btn btn-text btn-outline-secondary" id="loadProfileDefaults" onclick="onLoadDefaults()">Load Defaults</button>
    <button class="btn btn-text btn-outline-secondary" id="cancelbtn" onclick="onRefresh()">Refresh</button>
    <button class="btn btn-text" id="savebtn" onclick="onApply()">Apply</button>
</div>

{{ end }}