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

<!-- 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>
<div class="grid-wrapper">
        <form role="form" action="/ip/ptp" method="post">
            <table id="ptpConfigTable" class="container-data container-data-ptp">
                <tr class="row-data">
                    <td class="col-data-label">Profile</td>
                    <td class="col-data-input">
                        <div class="select-wrapper">
                            <select class="custom-select" id="profile" name="profile" onchange="onChangeProfile(this)">
                                <option value="default">IEEE-1588 Default</option>
                                <option value="aes67">AES-67 Media</option>
                                <option value="smpte">SMPTE ST-2059-2</option>
                            </select>
                        </div>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label">Domain</td>
                    <td class="col-data-input">
                        <span class="number-wrapper"><input id="domain" name="domain" class="form-control rounded-0 auto-size" type="number" min="0" max="127" value="127" onchange="onInputValueChanged(this)"/></span>
                    </td>
                </tr>

                <tr class="row-data">
                    <td class="col-data-label">Priority 1</td>
                    <td class="col-data-input">
                        <span class="number-wrapper"><input id="priority1" name="priority1"  class="form-control rounded-0 auto-size" type="number" min="0" max="255" value="128" onchange="onInputValueChanged(this)"/></span>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label">Priority 2</td>
                    <td class="col-data-input">
                        <span class="number-wrapper"><input id="priority2" name="priority2" class="form-control rounded-0 auto-size" type="number" min="0" max="255" value="128" onchange="onInputValueChanged(this)"/></span>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label">Slave Only</td>
                    <td class="col-data-input"><input type="text" class="form-control rounded-0 four-char-size" value="True" disabled /></td>
                </tr>
            </table>
        </form>
    <h4 class="modal-header">Overall Status:</h4>
    <div id="divPtpStatusTable" style="height: 20%;" class="ag-theme-balham-dark"></div>
    <h4 class="modal-header">PTP Ports:</h4>
    <div id="divPtpPortTable" style="height: 30%;" 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 = {
        ETHERNET_DATA_UPDATED : "Ethernet_Data_Updated",
        ERRORS_OCCURRED : "Errors_Occurred",
        LOG_DATA : "Log_Data"
    };

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

    const PROFILE_DEFAULT = "default";
    const PROFILE_AES67 = "aes67";
    const PROFILE_SMPTE = "smpte";

    let savedConfig = null; // For checking for differences with saved config and ignore server's notifications.

    function logger(loggingLevel, message) {
        var event = new CustomEvent(eventListenerType.LOG_DATA, {
            detail: {
                level : loggingLevel,
                message : message,
            }
        });
        window.dispatchEvent(event);
    }
    class SystemStatusRenderer {
        init(params) {
            this.eGui = document.createElement('div');
            var htmlString = `<p style="text-align:left;">`;
            if (params.data.system == "FAIL") {
                htmlString += ` <i class="icon-unlock"></i>`;
            }
            else if (params.data.system == "LOCKED") {
                htmlString += ` <i class="icon-lock"></i>`;
            }
            else {
                htmlString += ` <i class="icon-alarm-warning"></i>`;
            }
            htmlString = htmlString + params.value + `</p>`;
            this.eGui.innerHTML = htmlString;
            if (params == null) {
                logger(logLevel.ERROR, "SystemStatusRenderer - Unable to get data");
            }
        }

        getGui() {
            return this.eGui;
        }

        refresh(params) {
            return false;
        }
    }

    // Ids of the general fields shown above the port table.
    const generalFieldIds = [
        "profile",
        "domain",
        "priority1",
        "priority2",
    ];

    // Mappings for the Interval columns, from "raw" to "display" values.
    const syncIntervalOptions = new Map([
        [-7, '7.8125'],
        [-6, '15.625'],
        [-5, '31.25'],
        [-4, '62.5'],
        [-3, '125'],
        [-2, '250'],
        [-1, '500'],
        [0, '1000'],
        [1, '2000'],
    ]);

    const announceIntervalOptions = new Map([
        [-3, '125'],
        [-2, '250'],
        [-1, '500'],
        [0, '1000'],
        [1, '2000'],
        [2, '4000'],
        [3, '8000'],
        [4, '16000'],
    ]);

    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
    }

    // AgGrid table column definitions.
    const columnDefsPtpPorts = [
        {field: "eth", headerName: "Ethernet Ports", editable: false, sort: "asc", sortIndex: 0, comparator: ethNaturalSort},
        {field: "state", headerName: "Status", editable: false},
        {field: "link", headerName: "Link", editable: false,
            cellRendererSelector: (params) => {
                return {
                    component: LinkRenderer,
                };
            }},
        {field: "syncInterval", headerName: "Sync Interval (ms)", type: "intervalColumn",
            cellEditorParams: params => { return { values: params.data.syncInterval_options}},
            refData: syncIntervalOptions,
            filterParams: {valueFormatter: (params) => syncIntervalOptions.get(params.value)},
            valueFormatter: (params) => syncIntervalOptions.get(params.value),
            valueSetter: params => setColumnValueInt(params, "syncInterval"),
        },
        {field: "announceInterval", headerName: "Announce Interval (ms)", type: "intervalColumn",
            cellEditorParams: params => { return { values: params.data.announceInterval_options}},
            refData: announceIntervalOptions,
            filterParams: {valueFormatter: (params) => announceIntervalOptions.get(params.value)},
            valueFormatter: (params) => announceIntervalOptions.get(params.value),
            valueSetter: params => setColumnValueInt(params, "announceInterval"),
        },
        {field: "announceReceiptTimeout", headerName: "Announce Receipt Timeout", cellStyle: getTableCellStyle, cellDataType: false, cellEditor: NumericRangeCellEditor, cellEditorParams: {min: 2, max: 10},
            valueSetter: (params) => setColumnValueInt(params, "announceReceiptTimeout"),
        },
    ];

    const ptpPortOptions = {
        defaultColDef: {
            editable: true,
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: columnDefsPtpPorts,
        getRowId: data => data.data.eth,
        rowSelection: 'multiple',
        stopEditingWhenCellsLoseFocus: true,
        columnTypes: {
            intervalColumn: {editable: true, cellStyle: getTableCellStyle, cellEditor: "agSelectCellEditor"}
        },
    };
    // status table
    // AgGrid table column definitions.
    const columnDefsPtpStatus = [
        {field: "name", headerName: "Slot"},
        {field: "system", headerName: "State", cellRendererSelector: (params) => {
                return {
                    component: SystemStatusRenderer
                };
            }},
        {field: "gmid", headerName: "Grand Master ID"},
        {field: "priority1", headerName: "Priority 1"},
        {field: "priority2", headerName: "Priority 2"},
        {field: "class", headerName: "Clock Class"},
        {field: "ofm", headerName: "Offset From Master (ns)"},
        {field: "mpd", headerName: "Mean Path Delay (ns)"},
        {field: "stepsRemoved", headerName: "Steps Removed"},
    ];

    const ptpStatusOptions = {
        defaultColDef: {
            editable: false,
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: columnDefsPtpStatus,
        getRowId: data => data.data.name,
        suppressRowClickSelection: true,
        stopEditingWhenCellsLoseFocus: true,
    };

    class LinkRenderer {
        init(params) {
            this.eGui = document.createElement('span');
            if (params.value == "Up") {
                this.eGui.innerHTML = `<p style="text-align:left;"> <i class="icon-up"></i>UP </p>`;
            } else if (params.value == "Down") {
                this.eGui.innerHTML = `<p style="text-align:left;"> <i class="icon-down"></i>DOWN </p>`;
            }
        }

        getGui() {
            return this.eGui;
        }

        refresh(params) {
            return false;
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        initContents();
        addCustomEventListeners();
        // Listen for server's updates.
        addUpdateListener("ws://" + new URL(window.location.origin).host + "/ip/ptp/listen", onWebSocketMessage);
        addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/slots/listen', onWebSocketSlotMessage);
    });

    function initContents() {
        new agGrid.Grid(document.querySelector('#divPtpPortTable'), ptpPortOptions);
        new agGrid.Grid(document.querySelector('#divPtpStatusTable'), ptpStatusOptions);
        // Set initial sort order on table.
        ptpPortOptions.columnApi.applyColumnState({
            state: [{colId: 'eth', sort: 'asc'}],
            defaultState: {sort: null},
        });
        loadDataFromServer(false);
        // Load data and populate the fields every 2 seconds
        setInterval(loadDataFromServer, 2000, true);
    }

    function addCustomEventListeners() {
        window.addEventListener(eventListenerType.LOG_DATA, dashboardLogger);
        window.addEventListener(eventListenerType.LOG_DATA, consoleLogger);
        window.addEventListener(eventListenerType.ETHERNET_DATA_UPDATED, populateFields);

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

    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;
        }
    }

    const defaultProfileValues = {
        'smpte': {
            'domain': 127,
            'priority1': 128,
            'priority2': 128,
            'port': {'syncInterval': -3, 'announceReceiptTimeout': 3, 'announceInterval': -2,
            'syncInterval_options': [-7, -6, -5, -4, -3, -2, -1], 'announceInterval_options': [-3, -2, -1, 0, 1]}
        },
        'aes67': {
            'domain': 0,
            'priority1': 128,
            'priority2': 128,
            'port': {'syncInterval': -3, 'announceReceiptTimeout': 3, 'announceInterval': 1,
            'syncInterval_options': [-4, -3, -2, -1, 0, 1], 'announceInterval_options': [0, 1, 2, 3, 4]}
        },
        'default': {
            'domain': 0,
            'priority1': 128,
            'priority2': 128,
            'port': {'syncInterval': 0, 'announceReceiptTimeout': 3, 'announceInterval': 1,
            'syncInterval_options': [-1, 0, 1], 'announceInterval_options': [0, 1, 2, 3, 4]}
        },
    };

    function isFactoryProfile(profile) {
        return profile === PROFILE_SMPTE || profile === PROFILE_AES67 || profile === PROFILE_DEFAULT;
    }

    function getDefaultPtpGeneral(profile, param){
        if (!isFactoryProfile(profile)) {
            return 0
        }
        let prof = defaultProfileValues[profile]
        return prof[param]
    }

    function getDefaultPtpPort(profile, param){
        if (!isFactoryProfile(profile)) {
            return 0
        }
        let prof = defaultProfileValues[profile]
        return prof['port'][param]
    }

    function isInputFieldValueChanged(field) {
        return !(savedConfig && savedConfig[field.id].toString() === field.value);
    }

    function isModifPending() {
        for (let id of generalFieldIds) {
            if (isInputFieldValueChanged(document.getElementById(id))) {
                return true;
            }
        }
        return false;
    }

    function onChangeProfile(field){
        refreshInputFieldDisplay(field)
        setDefaultProfile(field.value);
    }

    function setDefaultProfile(profile){
        if (!isFactoryProfile(profile)) {
            return 0
        }
        let prof = defaultProfileValues[profile]

        $('input[name=domain]').val(prof.domain);
        $('input[name=priority1]').val(prof.priority1);
        $('input[name=priority2]').val(prof.priority2);

        ptpPortOptions.api.forEachNode(function (node) {
            node.data.announceInterval = prof.port.announceInterval
            node.data.announceReceiptTimeout = prof.port.announceReceiptTimeout
            node.data.syncInterval = prof.port.syncInterval
            node.data.syncInterval_options = prof.port.syncInterval_options
            node.data.announceInterval_options = prof.port.announceInterval_options
            node.setData(node.data)
        });
    }

    function loadDataFromServer(dataRefreshOnly) {
        if (!dataRefreshOnly || ptpStatusOptions.api.getDisplayedRowCount() > 0) {
            fetch('/ip/ptp/data').then(response => response.json()).then(data => dispatchNewEthernetData(data, dataRefreshOnly));
        }
    }

    function dispatchNewEthernetData (newEthernetData, dataRefreshOnly) {
        var event = new CustomEvent(eventListenerType.ETHERNET_DATA_UPDATED, {
            detail: {
                profile : newEthernetData.profile,
                domain : newEthernetData.domain,
                priority1 : newEthernetData.priority1,
                priority2 : newEthernetData.priority2,
                portRows : newEthernetData.portRows,
                status: newEthernetData.status,
                dataRefreshOnly: dataRefreshOnly,
            }
        });
        window.dispatchEvent(event);
    }

    function populateFields(eventData, statusOnly) {
        ptpStatusOptions.api.setRowData(eventData.detail.status);

        // Avoid overwriting config fields when only statuses are updated.
        if (eventData.detail.dataRefreshOnly || statusOnly) {
            // Update PTP port status
            ptpPortOptions.api.forEachNode((node) => {
                for( let i = 0; i < eventData.detail.portRows.length; i++) {
                    if (node.data.eth == eventData.detail.portRows[i].eth) {
                        node.setDataValue("state", eventData.detail.portRows[i].state);
                        node.setDataValue("link", eventData.detail.portRows[i].link);
                        break;
                    }
                }
            });
            return;
        }

        $('select[name=profile]').val(eventData.detail.profile);
        $('input[name=domain]').val(eventData.detail.domain);
        $('input[name=priority1]').val(eventData.detail.priority1);
        $('input[name=priority2]').val(eventData.detail.priority2);

        savedConfig = eventData.detail;

        for (let id of generalFieldIds) {
            refreshInputFieldDisplay(document.getElementById(id));
        }

        ptpPortOptions.api.setRowData(eventData.detail.portRows);
    }

    function refreshInputFieldDisplay(field) {
        let colorValue = "var(--input-fg)"; // Default style.

        if (isInputFieldValueChanged(field)) {
            // Show pending changes in different color.
            colorValue = "yellow";
        } else if (field.id !== "profile") {
            // Show overridden values in different color.
            let defValue = getDefaultPtpGeneral($('select[name=profile]').val(), field.id);
            if (defValue.toString() !== field.value) {
                colorValue = "orange";
            }
        }

        field.style.color = colorValue;
    }

    function validateChanges () {
        var errors = [];
        return errors;
    }

    function onApply() {
        const errors = validateChanges ();
        if (errors.length > 0) {
            dispatchErrorsEvent(errors);
            return;
        }

        let newData = {}
        let profile = $('#profile').val();
        newData['profile'] =  profile;
        let loverride = false
        let lcustom = false
        generalFieldIds.forEach((id) => {
            let field = document.getElementById(id);
            if (field.type !== "checkbox") {
                if (id !== "profile"){
                    let parsed = parseInt(field.value)
                    if (getDefaultPtpGeneral(profile, id) != parsed) {
                        if (lcustom == false){
                            if (loverride == false) {
                                newData["override"]={}
                                loverride = true
                            }
                            newData["override"]["general"]={}
                            lcustom = true
                        }
                        newData["override"]["general"][id] = parsed ;
                    }
                }
            }
        });
        let lcustomPort = false
        ptpPortOptions.api.forEachNode(function (node) {
            let setany = false;
            let port = {}
            port["port"] = node.data.eth
            port["opt"] = {}

            for (let param of ["announceInterval", "announceReceiptTimeout", "syncInterval"]) {
                let parsed = parseInt(node.data[param])
                let defValue = getDefaultPtpPort(profile, param);
                if (defValue !== parsed) {
                    port["opt"][param] = parsed;
                    setany = true;
                }
            }

            if (setany){
                if (lcustomPort == false){
                    if (loverride == false) {
                        newData["override"]={}
                        loverride = true
                    }
                    newData["override"]["ports"] = []
                    lcustomPort = true
                }
                newData["override"]["ports"].push(port)
            }
        });
        logger(logLevel.LOG, "onApply: new data:" + JSON.stringify(newData));
        ptpPortOptions.api.stopEditing();
        $.post("/ip/ptp", JSON.stringify(newData))
            .done((msg) => {
                logger(logLevel.LOG, 'onApply: done, msg: ' + JSON.stringify(msg));
                loadDataFromServer(false);
            })
            .fail((xhr, status, error) => {
                const responseError = xhr.status + ' - ' + xhr.responseText;
                dispatchErrorsEvent([responseError, error]);
                logger(logLevel.ERROR, responseError);
                loadDataFromServer(false);
            });
    }

    function onCancel() {
        ptpPortOptions.api.stopEditing(true);
        loadDataFromServer(false);
    }

    function onLoadProfileDefaults() {
        setDefaultProfile($('select[name=profile]').val());
    }
    function onWebSocketMessage(event) {
        let msg = JSON.parse(event.data)

        if (!msg) {
            logger(logLevel.LOG, "WS onMessage: failed to parse event data: " + JSON.stringify(event.data));
            return
        }

        if (msg.subject === "RELOAD") {
            let statusOnly = msg["mode"] === "PTP_UPDATE_STATE";
            if (!statusOnly && isModifPending()) {
                logger(logLevel.LOG, "WS onMessage: ignoring config updates due to pending changes.");
                return;
            }

            log("WS onMessage: processing event data", event.data);

            populateFields({detail: msg.viewInfo}, statusOnly)
        } else {
            logger(logLevel.LOG, "WS onMessage: unknown subject: " + msg.subject);
        }
    }

    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":
                loadDataFromServer(false);
                break;
            default:
                logger(logLevel.WARN, "Unsupported operation given in Slot websocket message: " + msg.operation);
                return;
        }
    }

    function onInputValueChanged(field) {
        refreshInputFieldDisplay(field)
    }

    function getTableCellStyle(params) {
        let colorValue = getDefaultPtpPort($('select[name=profile]').val(), params.column.colId) != params.value ? 'orange' : 'white';
        return {color: colorValue}
    }

    function dispatchErrorsEvent (errorList) {
        var event = new CustomEvent(eventListenerType.ERRORS_OCCURRED, {
            detail: {
                errors : errorList,
            }
        });
        window.dispatchEvent(event);
    }
</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" data-bs-dismiss="modal"><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" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="fixed-bottom modal-footer panel-footer justify-content-between" id="footerdiv">
    <button class="btn btn-text btn-outline-secondary" id="cancelbtn" onclick="onCancel()">Cancel</button>
    <div>
        <button class="btn btn-text" id="loadProfileDefaults" onclick="onLoadProfileDefaults()">Load Profile Defaults</button>
        <button class="btn btn-text" id="savebtn" onclick="onApply()">Apply</button>
    </div>
</div>

{{ end }}