{{ define "content" }}
<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>
                <span class="btn btn-nav-icon-text" data-bs-toggle="modal" data-bs-target="#addAlarmModal"><i class="icon-add"></i>Add</span>
            </li>
            <li>
                <span onclick="selectAll()" class="btn btn-nav-icon-text" ><i class="icon-select-rows"></i>Select all</span>
            </li>
            <li>
                <span onclick="deselectAll()" class="btn btn-nav-icon-text" ><i class="icon-deselect-rows"></i>Deselect all</span>
            </li>
            <li>
                <span class="btn btn-nav-icon-text" data-bs-toggle="modal" data-bs-target="#removeAlarmModal"><i class="icon-delete"></i> Delete</span>
            </li>
        </ul>
        <form class="d-flex">
            <input class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" id="alarmFilterInput" placeholder="Filter..." oninput="onAlarmsFilterTextBoxChanged()">
            <span><i class="icon-filter"></i></span>
        </form>
    </div>
</nav>

<div class="grid-wrapper">
    <div id="alarmsGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
</div>

<script src="/static/js/alarmRenderer.js"></script>

<script type="text/javascript" charset="utf-8">

    const alarmsColumnDefs = [
        {field: "URI",  headerName: "URI",maxWidth: 300, comparator: naturalSort},
        {field: "Value", editable: true, minWidth: 150},
        {field: "Severity", editable: true, minWidth: 100, maxWidth: 150, cellRenderer: AlarmRenderer},
        ];

    const alarmsGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
            filter: true,
        },
        columnDefs: alarmsColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        sideBar: false,
        // onCellValueChanged: onCellValueChanged,
        stopEditingWhenCellsLoseFocus: true,
    };

    // setup the grids after the page has finished loading
    document.addEventListener('DOMContentLoaded', function () {
        console.log("DOMContentLoaded - let's get data for grid")
        var gridDiv = document.querySelector('#alarmsGrid');
        new agGrid.Grid(gridDiv, alarmsGridOptions);
        fetch('/alarms/agdata')
            .then((response) => response.json())
            .then((data) => {
                console.log("DOMContentLoaded - got data", data)
                alarmsGridOptions.api.setRowData(data);
        });
        addWSDBListener();
    });

    function addWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            console.log(event.data);
            const msg = JSON.parse(event.data);
            console.log("GOT event", event);
            if (msg.table === ALARM_TABLE) {//TODO improve refresh of modified row instead of whole page
                fetch('/alarms/agdata')
                    .then((response) => response.json())
                    .then((data) => {
                        console.log("DOMContentLoaded - got data", data)
                        alarmsGridOptions.api.setRowData(data);
                    });
            }
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addWSDBListener();
            }, 1000);
        };
    }

    function selectAll() {
        alarmsGridOptions.api.forEachNode(function (node) {
            node.setSelected(true);
        });
    }

    function deselectAll() {
        alarmsGridOptions.api.forEachNode(function (node) {
            node.setSelected(false);
        });
    }

    function onAlarmsFilterTextBoxChanged() {
        alarmsGridOptions.api.setQuickFilter(document.getElementById('alarmFilterInput').value);
    }

    function removeAlarmRows() {
        let selectedRows = gridOptions.api.getSelectedRows();
        let ids = selectedRows.map(node => node.ID);
        console.log("removeAlarmRows - ids: ", ids)
        $.ajax({
            url: "/alarms/remove?ids=" + ids, success: (result) => {
                // console.log("operateEvents: remove result ", result);
            }
        });
    }

</script>

<!--Add sources modal-->
<div class="modal" id="addAlarmModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addAlarmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-source-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addAlarmModalLabel"><i class="icon-add icon-white"></i>Add</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <form role="form" action="/alarm/post" method="post">
                <div class="modal-body">
                    <table class="container-data">
                        <!-- Source name -->
                        <tr class="row-data">
                            <td class="col-data-label">Alarm ID</td>
                            <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="alarmId" id="alarmId"></input></td>
                        </tr>

                        <!-- Description -->
                        <tr class="row-data">
                            <td class="col-data-label">Value</td>
                            <td class="col-data-input"><input class="form-control rounded-0 descriptionSize" name="alarmValue" id="alarmValue"></input></td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button class="btn btn-text" type="submit">Add Alarm</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal" id="removeAlarmModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeAlarmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-level-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="removeAlarmModalLabel"><i class="icon-delete icon-white"></i>Delete</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">Are you sure you want to delete the selected alarms?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                <button  class="btn btn-text" onclick="removeAlarmRows()">Delete level(s)</button>
            </div>
        </div>
    </div>
</div>

{{ end }}