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

<div class="full-size" style="width: 100%;height:100%;">
    <div id="topPane" class="vertical-split-pane" style="height: calc(40% - 5px);">
        <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>
            <div class="collapse navbar-collapse" id="navbarToggler">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li style="flex-grow: 1">
                        <span class="btn btn-nav-icon-text" data-bs-toggle="modal" data-bs-target="#showColumnVisibilityModal"><i class="icon-table-column"></i>Column Visibility</span>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" id="filterField" placeholder="Filter..." oninput="onFilterFieldChanged()">
                    <span><i class="icon-filter"></i></span>
                </form>
            </div>
        </nav>
        <div class="grid-wrapper" style="height: calc(100% - 36px);">
            <div id="ipRedundancyTable" style="height: 100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <div id="horizontalHandle" class="horizontal-split-handle" style="height: 10px;">
    </div>
    <div id="bottomPane" class="vertical-split-pane" style="height: calc(60% - 5px); background-color: var(--panel-bg);">
        <input type="checkbox" class="btn-check" name="debugMode" id="debugMode" onclick="onDebugModeChanged();" checked>
        <label class="btn" for="debugMode">Debug Mode</label>
        <h5 class="modal-header">Frame Services Forwarding</h5>
        <div class="grid-wrapper" style="height: calc(100% - 80px);">
            <div id="divServiceForwardingTable" style="height: 100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>
</div>

<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="modal" id="confirmationModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-confirmation-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="confirmationModalLabel"><i class="icon-alarm-info-header"></i>Confirm</span>
                <span class="btn btn-transparent" id="confirmationNoHeader" onclick=""><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data" id="confirmationList"></div>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="confirmationNo" class="btn btn-text btn-outline-secondary" onclick="">Cancel</button>
                <button id="confirmationYes" class="btn btn-text" onclick="">Apply</button>

            </div>
        </div>
    </div>
</div>

<div class="fixed-bottom modal-footer panel-footer" id="footerdiv">
    <button class="btn btn-text" id="savebtn" onclick="onReload()">Reload</button>
</div>

<script src="/static/js/checkboxRenderer.js"></script>
<script src="/static/js/splitPane.js"></script>
<script src="/static/js/columnvisibility.js"></script>
<script src="/static/js/js-utils.js"></script>

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

    const logLevel = {
        INFO : "info",
        LOG : "log",
        WARN : "warn",
        ERROR : "error",
        TRACE : "trace"
    };

    function logger(loggingLevel, message) {
        var event = new CustomEvent(eventListenerType.LOG_DATA, {
            detail: {
                level : loggingLevel,
                message : message,
            }
        });
        window.dispatchEvent(event);
    }

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

    function dispatchConfirmationEvent (yesCallback, noCallback, message) {
        var event = new CustomEvent(eventListenerType.CONFIRMATION, {
            detail: {
                yesCallback : yesCallback,
                noCallback : noCallback,
                message : message
            }
        });
        window.dispatchEvent(event);
    }

    function dashboardLogger(eventData) {
        if (typeof oglml === 'undefined') {
            return;
        }

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

    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 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>";
            let heading = (errors.length == 1) ? "There is an error that needs to be addressed: " : "There are " + errors.length + " errors that need to be addressed: ";
            let errorText = errorString;
            showErrorDialog(heading, errorText);
        }
    }

    function showErrorDialog(heading, errorText) {
        $('#errorListHeading').text(heading);
        $('#errorList').html(errorText);
        displayDialog('errorsModal');
    }

    function showConfirmationDialog (eventData) {
        $('#confirmationYes').attr("onclick",eventData.detail.yesCallback);
        $('#confirmationNo').attr("onclick",eventData.detail.noCallback);
        $('#confirmationNoHeader').attr("onclick",eventData.detail.noCallback);

        $('#confirmationList').html(eventData.detail.message);
        displayDialog('confirmationModal');
    }

    const columnDefs = [
        {field: "unit_name", headerName: "Slot", type: "idColumn", minWidth: 100, flex: 1},
        {field: "board_model", headerName: "Board Model", type: "readonlyColumn", width: 50},
        {field: "redundancy", headerName: "Redundancy", editable: true, width: 50, minWidth: 50, maxWidth: 150,
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            cellEditorParams: { values: ['Enabled', 'Disabled'] },
            valueGetter: (params) => { return (params.data.redundancy === true) ? "Enabled" : "Disabled"; },
            valueSetter: params => {
                if (params.newValue == "Enabled" != params.data.redundancy)
                {
                    logger(logLevel.INFO, "valueSetter - Redundancy changed to " + !params.data.redundancy);
                    params.data.redundancy = !params.data.redundancy
                    params.data.modified = true
                    if (!params.data.redundancy){
                        if (params.data.redundant_sessions > 0) {
                            params.data.message = "Disabling redundancy will remove the redundant stream of " + params.data.redundant_sessions +
                                " redundant sessions (out of " + params.data.total_sessions + " existent). This operation will keep the primary"+
                                " streams and will continue to be operational. Do you want to proceed?";
                        } else {
                            params.data.message = "Are you sure you wish to disable redundancy for " + params.data.unit_name + "?";
                        }
                    }
                    return true
                }
                return false
            }
        },
        {field: "total_sessions", headerName: "Total Sessions", type: "readonlyColumn", width: 50, minWidth: 50, maxWidth: 150},
        {field: "redundant_sessions", headerName: "Redundant Sessions", type: "readonlyColumn", width: 50, minWidth: 50, maxWidth: 150},
        {field: "ember.enable", headerName: "Ember+", editable: true, width: 50, minWidth: 50, maxWidth: 100,
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            cellEditorParams: { values: ['Enabled', 'Disabled'] },
            valueGetter: params => { return params.data.ember && (params.data.ember.enable === true ? "Enabled" : "Disabled"); },
            valueSetter: params => {
                if (params.data.ember && params.newValue == "Enabled" != params.data.ember.enable)
                {
                    logger(logLevel.INFO, "valueSetter - Ember+ changed to " + params.newValue);
                    params.data.ember.enable = !params.data.ember.enable
                    params.data.modified = true
                    if (!params.data.ember.enable){
                        params.data.message = "Disabling Ember+ will stop the service for unit"+params.data.unit_name+". Do you want to proceed?"
                    }
                    return true
                }
                return false
            }
        },
        {field: "ember.port", headerName: "Ember+ Port", editable: true, width: 50, minWidth: 50, maxWidth: 100,
            valueSetter: params => {
                if (params.data.ember && params.newValue != params.oldValue)
                {
                    var tmp = parseInt(params.newValue)
                    if (Number.isInteger(tmp) && params.data.ember.port !== tmp){
                        logger(logLevel.INFO, "Ember+ port changed to " + tmp);
                        params.data.ember.port = tmp
                        params.data.modified = true
                        if (params.data.ember.enable && params.data.message == null)
                        {
                            params.data.message = "Changing Ember+ Port requires a service restart. Do you want to proceed?"
                        }
                    }
                    return true
                }
                return false
            }
        },
        {
            field: "dns.enable", headerName: "DNS", editable: true, width: 50, minWidth: 50, maxWidth: 100,
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            cellEditorParams: {values: ['Enabled', 'Disabled']},
            valueGetter: (params) => {
                return (params.data.dns.enable === true) ? "Enabled" : "Disabled";
            },
            valueSetter: params => {
                let enableNew = params.newValue == "Enabled";
                let changed = enableNew != params.data.dns.enable;
                if (changed) {
                    logger(logLevel.INFO, "valueSetter - DNS changed to " + enableNew);
                    params.data.dns.enable = enableNew;
                    params.data.modified = true;
                }
                return changed;
            },
        },
        {
            field: "dns.domain", headerName: "DNS Domain", editable: true, width: 80, minWidth: 50, maxWidth: 150,
            valueSetter: params => {
                let changed = params.newValue != params.oldValue;
                if (changed) {
                    logger(logLevel.INFO, "DNS Domain changed to " + params.newValue);
                    params.data.dns.domain = params.newValue
                    params.data.modified = true;
                }
                return changed;
            },
        },
        {
            field: "dns.servers", headerName: "DNS Servers", editable: true, minWidth: 50, flex: 2,
            valueSetter: params => {
                let changed = params.newValue != params.oldValue;
                if (changed) {
                    logger(logLevel.INFO, "DNS Servers changed to " + params.newValue);
                    params.data.dns.servers = params.newValue
                    params.data.modified = true
                }
                return changed
            },
        },
        // {
        //     field: "mbb.mbbConfig.disabled", headerName: "MBB", width: 50, minWidth: 50, maxWidth: 150,
        //     editable: params => {return params.data.mbb.supported},
        //     cellEditor: 'agSelectCellEditor',
        //     singleClickEdit: true,
        //     cellEditorParams: {values: ['Enabled', 'Disabled']},
        //     valueGetter: (params) => {
        //         return (params.data.mbb.mbbConfig.disabled === true) ? "Disabled" : "Enabled";
        //     },
        //     valueSetter: params => {
        //         let enableNew = params.newValue == "Disabled";
        //         let changed = enableNew != params.data.mbb.mbbConfig.disabled;
        //         if (changed) {
        //             logger(logLevel.INFO, "valueSetter - MBB Disabled changed to " + enableNew);
        //             params.data.mbb.mbbConfig.disabled = enableNew;
        //             params.data.modified = true;
        //         }
        //         return changed;
        //     },
        // },
        // {
        //     field: "mbb.mbbConfig.timeout", headerName: "MBB Timeout(ms)", width: 100, minWidth: 50, maxWidth: 200,
        //     editable: params => { return params.data.mbb.supported && !params.data.mbb.mbbConfig.disabled},
        //     valueSetter: params => {
        //         if (params.data.mbb.mbbConfig.timeout && params.newValue != params.oldValue)
        //         {
        //             var tmp = parseInt(params.newValue);
        //             if (Number.isInteger(tmp) && params.data.mbb.mbbConfig.timeout !== tmp){
        //                 logger(logLevel.INFO, "Mbb timeout changed to " + tmp);
        //                 params.data.mbb.mbbConfig.timeout = tmp;
        //                 params.data.modified = true;
        //             }
        //             return true;
        //         }
        //         return false;
        //     }
        // },
        // {
        //     field: "mbb.mbbConfig.wait_for_sdi_peers", headerName: "MBB Wait For SDI Peers", width: 50, minWidth: 50, maxWidth: 200,
        //     editable: params => { return params.data.mbb.supported && !params.data.mbb.mbbConfig.disabled},
        //     cellEditor: 'agSelectCellEditor',
        //     singleClickEdit: true,
        //     cellEditorParams: {values: ['Enabled', 'Disabled']},
        //     valueGetter: (params) => {
        //         return (params.data.mbb.mbbConfig.wait_for_sdi_peers === true) ? "Enabled" : "Disabled";
        //     },
        //     valueSetter: params => {
        //         let enableNew = params.newValue == "Enabled";
        //         let changed = enableNew != params.data.mbb.mbbConfig.wait_for_sdi_peers;
        //         if (changed) {
        //             logger(logLevel.INFO, "valueSetter - MBB Wait For SDI Peer changed to " + enableNew);
        //             params.data.mbb.mbbConfig.wait_for_sdi_peers = enableNew;
        //             params.data.modified = true;
        //         }
        //         return changed;
        //     },
        // },
        {
            field: "link_speed", headerName: "Link Speed", width: 50, minWidth: 50, maxWidth: 200,
            editable: params => { return params.data.board_model == "Ultrix-IPX"},
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            cellEditorParams: {values: ['25G', '100G']},
            valueGetter: (params) => {
                return (params.data.link_speed === "25G") ? "25G" : "100G";
            },
            valueSetter: params => {
                let newValue = params.newValue;
                let changed = newValue != params.data.link_speed;
                if (changed) {
                    logger(logLevel.INFO, "valueSetter - Link Speed changed to " + newValue);
                    params.data.link_speed = newValue;
                    params.data.modified = true;
                    params.data.message = "Changing Link Speed will make the card disconnect and reboot, and the card will appear offline for a while. The frame should not be turned off or rebooted during this operation.<br/>Do you want to proceed?";
                }
                return changed;
            },
        },
        {
            field: "ptime", headerName: "Packet Time (us)", width: 100, minWidth: 50, maxWidth: 200,
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            editable: params => { return params.data.ptime_options.length > 1},
            cellEditorParams: params => { return { values: params.data.ptime_options}},
            valueSetter: params => {
                if (params.newValue != params.oldValue) {
                    var tmp = parseInt(params.newValue)
                    if (Number.isInteger(tmp) && params.data.ptime !== tmp) {
                        if (params.data.total_sessions > 0) {
                            params.data.message = "Changing packet time might cause sessions to be disabled. Do you wish to proceed?";
                        }
                        params.data.ptime = tmp;
                        params.data.modified = true;
                        return true;
                    }
                }
                return false
            }
        },
        {field: "telnet.enable", headerName: "Telnet", editable: true, width: 50, minWidth: 50, maxWidth: 100,
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            cellEditorParams: { values: ['Enabled', 'Disabled'] },
            valueGetter: params => { return params.data.telnet && (params.data.telnet.enable === true ? "Enabled" : "Disabled"); },
            valueSetter: params => {
                if (params.data.telnet && params.newValue == "Enabled" != params.data.telnet.enable) {
                    params.data.telnet.enable = !params.data.telnet.enable
                    params.data.modified = true
                    if (!params.data.telnet.enable) {
                        params.data.message = "Disabling Telnet will stop the service for unit"+params.data.unit_name+". Do you want to proceed?"
                    }
                    return true
                }
                return false
            }
        },
        {field: "system_time_protocol", headerName: "System Time Reference", type: "readonlyColumn", width: 100, minWidth: 50, flex: 2},
        {
            field: "session_id_seed", headerName: "Session ID Seed", editable: true, minWidth: 50, flex: 2,
            valueSetter: params => {
                let changed = params.newValue != params.oldValue;
                if (changed && params.newValue != null && !params.newValue.match(/^\s*$/)) {
                    logger(logLevel.INFO, "Session ID seed changed to " + params.newValue);
                    params.data.session_id_seed = params.newValue
                    params.data.modified = true
                    params.data.message = "Modifying Session ID Seed will force the slot to <b>reboot</b>. Do you want to proceed?"
                }
                return changed
            },
        },
        {
            field: "igmp.disabled", headerName: "IGMP enabled", editable: true, width: 50, minWidth: 50, maxWidth: 100,
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            cellEditorParams: {values: ['Enabled', 'Disabled']},
            valueGetter: (params) => {
                return (params.data.igmp.disabled === false) ? "Enabled" : "Disabled";
            },
            valueSetter: params => {
                let enableNew = params.newValue == "Disabled";
                let changed = enableNew != params.data.igmp.disabled;
                if (changed) {
                    logger(logLevel.INFO, "valueSetter - IGMP changed to " + enableNew);
                    params.data.igmp.disabled = enableNew;
                    params.data.modified = true;
                }
                return changed;
            },
        },
        {
            field: "igmp.asm", headerName: "IGMP Mode", width: 50, minWidth: 50, maxWidth: 100,
            editable: params => { return params.data.igmp.disabled === false },
            cellEditor: 'agSelectCellEditor',
            singleClickEdit: true,
            cellEditorParams: {values: ['ASM', 'SSM']},
            valueGetter: (params) => {
                return (params.data.igmp.asm === true) ? "ASM" : "SSM";
            },
            valueSetter: params => {
                let enableNew = params.newValue == "ASM";
                let changed = enableNew != params.data.igmp.asm;
                if (changed) {
                    logger(logLevel.INFO, "valueSetter - IGMP ASM changed to " + enableNew);
                    params.data.igmp.asm = enableNew;
                    params.data.modified = true;
                }
                return changed;
            },
        },
    ];

    const gridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
            // cellStyle: (params) => ({display: 'flex', alignItems: 'center'}), --> not needed for enterprise version
        },
        columnDefs: columnDefs,
        getRowId: data => data.data.unit_name,
        rowSelection: 'multiple',
        onRowValueChanged: onRowValueChanged,
        stopEditingWhenCellsLoseFocus: true,
        editType : 'fullRow',
        columnTypes: {
            idColumn: {
                editable: false,
                cellStyle: {fontWeight: 'bold'},
            },
            readonlyColumn: {
                editable: false,
                cellStyle: {color: 'gray'},
            },
        },
    };

    class EnableRenderer {
        init(params) {
            this.eGui = document.createElement('span');
            let icon = params.value === true ? 'icon-active' : 'icon-not-active';
            this.eGui.innerHTML = `<p style="text-align:center;"> <i class="${icon}"></i> </p>`;
        }

        getGui() {
            return this.eGui;
        }

        refresh(params) {
            return false;
        }
    }

    const columnDefsForwarding = [
        {field: "unit_name", headerName: "Unit / Media Ports", type: "idColumn"},
        {field: "service", headerName: "Service", type: "readonlyColumn"},
        {field: "active", headerName: "Active", maxWidth: 100,
            cellRendererSelector: (params) => {
                const renderEnableField = {
                    component: EnableRenderer,
                    params: {values: ['TRUE', 'FALSE']}
                };
                if (params.data) {
                    return renderEnableField;
                }
                return undefined;
            }},
        {field: "unit_port", headerName: "Media Port", type: "readonlyColumn"},
        {field: "frame_port", headerName: "Frame Port",
            editable: params => !params.data.read_only,
            cellStyle: params => {
                return params.colDef.editable(params) ? gridOptions.defaultColDef.cellStyle : gridOptions.columnTypes["readonlyColumn"].cellStyle;
            },
            valueSetter: params => {
                if (params.newValue != params.oldValue) {
                    var tmp = parseInt(params.newValue)
                    if (Number.isInteger(tmp) && params.data.frame_port !== tmp){
                        logger(logLevel.INFO, params.data.unit_name + "/" + params.data.service + " frame port changed to " + tmp);
                        params.data.frame_port = tmp
                        params.data.modified = true
                        if (!params.data.message) {
                            params.data.message = "This action will change the frame port immediately. Do you want to proceed?"
                        }
                        return true
                    }
                }
                return false
            }
        },
    ];

    const gridOptionsForwarding = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: columnDefsForwarding,
        columnTypes: {
            idColumn: { editable: false, cellStyle: {fontWeight: 'bold'} },
            readonlyColumn: { editable: false, cellStyle: {color: 'gray'} },
        },
        getRowId: data => data.data.unit_name + "/" + data.data.service,
        onRowValueChanged: onRowValueChangedPortForwarding,
        stopEditingWhenCellsLoseFocus: true,
        editType : 'fullRow',
    };

    document.addEventListener('DOMContentLoaded', initializePage);

    function initializePage() {
        new agGrid.Grid(document.querySelector('#ipRedundancyTable'), gridOptions);
        new agGrid.Grid(document.querySelector('#divServiceForwardingTable'), gridOptionsForwarding);

        gridOptions.myGridName = "System";
        gridOptionsForwarding.myGridName = "Forwarding";

        loadData();

        window.addEventListener(eventListenerType.CONFIRMATION, showConfirmationDialog);
        window.addEventListener(eventListenerType.ERRORS_OCCURRED, showErrorList);
        window.addEventListener(eventListenerType.LOG_DATA, dashboardLogger);
        window.addEventListener(eventListenerType.LOG_DATA, consoleLogger);
        addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/slots/listen', onWebSocketSlotMessage);
        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));
        };
        initializeSplitPaneBar("horizontalHandle", "topPane", "bottomPane", paneDirection.VERTICAL);
        columnVisibilityGridOptions.onCellValueChanged = onColumnVisibiltyChanged;
        showColumnVisibilityColumn();
    }

    function loadData() {
        $.get("/ip/system/data").done((data) => {
            if (data) {
                for (const row of data) {
                    row.backup = JSON.parse(JSON.stringify(row)) // Keep a backup for reverting if needed.
                }

                gridOptions.api.setRowData(data);
                gridOptions.columnApi.applyColumnState({
                    state: [{ colId: 'unit_name', sort: 'asc' }],
                    defaultState: { sort: null },
                });
            }
        });
        $.get('/ip/system/debugMode').done((data) => {
            document.getElementById("debugMode").checked = data.debug
        });
        $.get("/ip/system/services/forwarding").done((data) => {
            if (data) {
                for (const row of data) {
                    row.backup = JSON.parse(JSON.stringify(row)) // Keep a backup for reverting if needed.
                }

                gridOptionsForwarding.api.setRowData(data);
                gridOptionsForwarding.columnApi.applyColumnState({
                    state: [{ colId: 'unit_name', sort: 'asc' }, { colId: 'service', sort: 'asc' }],
                    defaultState: { sort: null },
                });
            }
        });
    }

    function revertRowData(rowId, grid) {
        let rowNode = grid.api.getRowNode(rowId);
        if (rowNode) {
            let dataNew = rowNode.data;
            rowNode.setData(Object.assign(dataNew, dataNew.backup));
            logger(logLevel.INFO, "revertRowData:" + grid.myGridName + ": Reverted data at " + rowId);
        } else {
            logger(logLevel.WARN, "revertRowData:" + grid.myGridName  + ": Not found: " + rowId);
        }
    }

    function onFilterFieldChanged() {
        gridOptions.api.setQuickFilter(document.getElementById('filterField').value);
    }

    function onReload() {
        logger(logLevel.INFO, "onReload");
        loadData()
    }

    function onWebSocketSlotMessage(event) {
        let msg = JSON.parse(event.data);
        if (!msg) {
            logger(logLevel.LOG, "Slot Websocket Message is missing: " + JSON.stringify(event.data));
            return
        }
        switch (msg.operation) {
            case "UPDATE":
                loadData();
                break;
            default:
                logger(logLevel.WARN, "Unsupported operation given in Slot websocket message: " + msg.operation);
                return;
        }
    }

    // This function is added to the confirmation 'yes' callback via dispatchConfirmationEvent
    function sendServicesChange(services) {
        let check = true;
        let errorMessage;
        if (services.dns.enable) {
            if (services.dns.domain === undefined || services.dns.servers === undefined) {
                check = false;
                errorMessage = "please set DNS domain and DNS servers when DNS is enabled";
            }
            if (!validateIpListString(services.dns.servers)) {
                check = false;
                errorMessage = "Invalid DNS server list: " + services.dns.servers;
            }
        } else if (!services.backup.dns.enable && (services.dns.domain || services.dns.servers)){
            check = false;
            errorMessage = "please enable DNS before set DNS domain or DNS servers";
        }
        if (!check) {
            showErrorDialog("There is an error that needs to be addressed: ", errorMessage);
            loadData();
            return;
        }
        $.post("/ip/system", JSON.stringify(services))
            .done((data) => {
                if (!data.success) {
                    dispatchErrorsEvent(data.errors);
                }
                loadData();
            })
            .fail((xhr, status, error) => {
                const responseError = xhr.status + ' - ' + xhr.responseText;
                dispatchErrorsEvent([responseError, error]);
                logger(logLevel.ERROR, responseError);
                loadData();
            });
        hideDialog('confirmationModal');
    }

    // This function is added to the confirmation 'no' callback via dispatchConfirmationEvent
    function revertServicesChange(rowNew) {
        let rowId = rowNew.unit_name; // Must match getRowNodeId in grid options.
        revertRowData(rowId, gridOptions);
        hideDialog('confirmationModal');
    }

    function onRowValueChanged(event) {
        if (event.data.modified)
        {
            if (event.data.message != null){
                let yesCallback = "sendServicesChange(" + JSON.stringify(event.data) + ")";
                let noCallback = "revertServicesChange(" + JSON.stringify(event.data) + ")";
                dispatchConfirmationEvent(yesCallback, noCallback, event.data.message);
            } else {
                sendServicesChange(event.data)
            }
        }
    }

    function sendPortForwardingChange(services) {
        logger(logLevel.DEBUG, 'sendPortForwardingChange');
        $.post("/ip/system/services/forwarding", JSON.stringify(services))
            .done((data) => {
                if (data.success === false) {
                    logger(logLevel.ERROR, "Request failed: " + this.url);
                    if (data.errors) {
                        dispatchErrorsEvent(data.errors);
                    }
                }
                loadData();
            })
            .fail((xhr, status, error) => {
                const responseError = xhr.status + ' - ' + xhr.responseText;
                dispatchErrorsEvent([responseError, error]);
                logger(logLevel.ERROR, responseError);
                loadData();
            });
        hideDialog('confirmationModal');
    }

    // This function is added to the confirmation 'no' callback via dispatchConfirmationEvent
    function revertPortForwardingChange(rowNew) {
        let rowId = rowNew.unit_name + "/" + rowNew.service; // Must match getRowNodeId in grid options.
        revertRowData(rowId, gridOptionsForwarding);
        hideDialog('confirmationModal');
    }

    function onRowValueChangedPortForwarding(event) {
        if (event.data.modified)
        {
            if (event.data.message != null){
                let yesCallback = "sendPortForwardingChange(" + JSON.stringify(event.data) + ")";
                let noCallback = "revertPortForwardingChange(" + JSON.stringify(event.data) + ")";
                dispatchConfirmationEvent(yesCallback, noCallback, event.data.message);
            } else {
                sendPortForwardingChange(event.data)
            }
        }
    }

    // Called by "onClick" handler injected via showConfirmationDialog, which is triggered by onDebugModeChanged/dispatchConfirmationEvent.
    function sendDebugModeChange(debugMode) {
        logger(logLevel.DEBUG, "sendDebugModeChange: " + debugMode);
        $.post("/ip/system/debugMode", JSON.stringify({debug: debugMode}))
            .done((data) => {
                if (!data.success) {
                    dispatchErrorsEvent(data.errors);
                }
                loadData();
            })
            .fail((xhr, status, error) => {
                const responseError = xhr.status + ' - ' + xhr.responseText;
                dispatchErrorsEvent([responseError, error]);
                logger(logLevel.ERROR, responseError);
                loadData();
            });
        hideDialog('confirmationModal');
    }

    // Called by "onClick" handler injected via showConfirmationDialog, which is triggered by onDebugModeChanged/dispatchConfirmationEvent.
    function revertDebugMode() {
        let curr = $("#debugMode").is(":checked");
        $("#debugMode").prop("checked", !curr);
        hideDialog('confirmationModal');
    }

    function onDebugModeChanged() {
        let field = document.getElementById("debugMode")

        // Note: Must encode callback function as a string, because it will be set to an HTML onClick attrubute.
        if (field.checked){
            dispatchConfirmationEvent("sendDebugModeChange(true)", "revertDebugMode()", "This action will turn the debug mode on. Do you want to proceed?");
        } else {
            dispatchConfirmationEvent("sendDebugModeChange(false)", "revertDebugMode()", "This action will turn the debug mode off. Do you want to proceed?");
        }
    }

    function isCellEditable(params) {
        logger(logLevel.LOG, "isCellEditable:" + params.data);
        return true;
    }

    function validateIpListString(ipString) {
        if (ipString == null || ipString.trim() == '') {
            return true; // Empty is ok.
        }

        let ipList = ipString.trim().split(",");
        let goodList = ipList.filter(validateIp)
        let valid = goodList.length == ipList.length;

        return valid;
    }

    function isValidIPv4(value) {
        const ipv4Pattern = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3}$/;
        return ipv4Pattern.test(value);
    }

    function validateIp(ip) {
        if (ip == null || ip.trim() == '') {
            return false;
        }
        return isValidIPv4(ip);
    }

    function showColumnVisibilityColumn() {
        let columnVisibilityGrid = new agGrid.Grid(document.querySelector('#columnVisibilityGrid'), columnVisibilityGridOptions);
        document.getElementById('show-column-visibility-wrapper').style.height = '280px';
        let allColumns = gridOptions.columnApi.getColumns();
        let visibleColumns = allColumns.filter(column => column.visible && column.colDef.headerName != "Slot" && column.colDef.headerName != "Board Model");
        let visibleColNum = visibleColumns.length;
        let options = [];
        options.push({id: -1, name: "All", visible: true});
        visibleColumns.forEach(column => {
            options.push({id: column.colId, name: column.colDef.headerName, visible: true});
        });
        columnVisibilityGridOptions.api.setRowData(options);
        document.getElementById("columnVisibilityGrid").ag_grid = columnVisibilityGrid;
        sessionStorage.setItem("visibleColumns", JSON.stringify(visibleColNum));
    }

    function onColumnVisibiltyChanged(event) {
        onColumnVisCheckboxChanged(event, gridOptions);
    }

</script>

{{ template "showColumnVisibilityModal" . }}

{{ end }}