{{ define "devicecontent" }}
<div class="grid-wrapper" >
    <div id="devicesGrid" style="width: 100%; height: 420px;" class="ag-theme-balham-dark">
    </div>
</div>

<!-- TODO: UR-16193: Remove remote reference to axios javascript library in private.uap-device.html file -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.1/axios.min.js"></script>
<script type="text/javascript" charset="utf-8" >
    let products = [{}];
    let currDevice = 1;
    let currProduct = 1;

    addWSDBListener();

    const DeviceColumnDefs = [
      { field: "DeviceID", checkboxSelection: false },
      { field: "DeviceName", editable: false },
      { valueGetter: getProductNameText, editable: false, headerName: "Product" },
      { field: "DeviceIP", editable: false},
      { field: "PortNumber", editable: false},
      { field: "SlotNumber", editable: false },
      { field: "OgpDeviceID", editable: false },
    ];

    const DeviceGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            editable: true,
            filter: true,
        },
        columnDefs: DeviceColumnDefs,
        domLayout:'normal',
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        enableRangeSelection: true,
        pagination: true,
        paginationAutoPageSize: true,
        getRowNodeId: (data) => { return data.DeviceID; },
        onRowClicked: onDeviceRowSelected,
    };

    let deviceGridDiv = document.querySelector('#devicesGrid');
    //init table datasource once DOM content is loaded
    document.addEventListener('DOMContentLoaded', async function () {
        products = await getProductsDB();
        new agGrid.Grid(deviceGridDiv, DeviceGridOptions);
        loadDeviceGrid();
    });

    function loadDeviceGrid() {
        let id = {"ID": currProduct};
        $.post("/device/agdata", id, (data) => {
          data = parseDeviceDataArray(data);
          DeviceGridOptions.api.setRowData(data);
          currDevice = (data != null) ? data[1].DeviceID : 0;
        });
    }

    // routines to compensate for omitempty function in grpc
    function parseDeviceDataArray(darray) {
        let resp = [];
        for(let i = 0; i < darray.length; i++) {
            resp.push(parseDeviceDataItem(darray[i]));
        }
        return resp;
    }

    function parseDeviceDataItem(data) {
        var resp = {
            "DeviceID": data.DeviceID,
            "ProductID": data.ProductID,
            "DeviceName": data.DeviceName,
            "OgpDeviceID": data.OgpDeviceID,
            "DeviceIP": data.DeviceIP,
            "PortNumber": 0,
            "SlotNumber": 0
        };
        if(data.SlotNumber != undefined) {
          resp.SlotNumber = data.SlotNumber;
        }
        if(data.PortNumber != undefined) {
          resp.PortNumber = data.PortNumber;
        }
        return resp;
    }

    function onDeviceRowSelected(event) {
        currDevice = event.data.DeviceID;
    }

    function onDeviceFilterTextBoxChanged() {
        DeviceGridOptions.api.setQuickFilter(document.getElementById('deviceFilterInput').value);
    }

    function addDevice() {
        const productid = document.getElementById('AddProductID');
        const formData = {
            "ProductID": productid.options[productid.selectedIndex].value,
            "DeviceName": document.getElementById('AddDeviceName').value,
            "OgpDeviceID": document.getElementById('AddOgpDeviceID').value,
            "DeviceIP": document.getElementById('AddDeviceIP').value,
            "PortNumber": document.getElementById('AddPortNumber').value,
            "SlotNumber": document.getElementById('AddSlotNumber').value
        };
        $.post("/device/post", formData, (data) => { });
    }

    function updateDevice() {
        const productid = document.getElementById('UpdateProductID');
        let formData = {
            "DeviceID": currDevice,
            "ProductID": productid.options[productid.selectedIndex].value,
            "DeviceName": document.getElementById('UpdateDeviceName').value,
            "OgpDeviceID": document.getElementById('UpdateOgpDeviceID').value,
            "DeviceIP": document.getElementById('UpdateDeviceIP').value,
            "PortNumber": document.getElementById('UpdatePortNumber').value,
            "SlotNumber": document.getElementById('UpdateSlotNumber').value
        };

        $.post("/device/update", formData, (data) => { });
        document.getElementById("deviceUpdateClose").click();
    }

    function deleteDevice() {
        const selectedData = DeviceGridOptions.api.getSelectedRows();
        selectedData.forEach(node => {
          const id = {"ID": node.DeviceID};
          $.post("/device/remove", id, () => { });
        });
        document.getElementById("deviceDeleteClose").click();
    }

    function importDevices(fileInput) {
        // TODO need to get the row before to select after deletion
        var file = fileInput[0];
        var formData = new FormData();
        formData.append('file', file);
        formData.append('DataType', "SystemDevices");
        var fileExtension = file.name.split('.').pop();
        if (fileExtension == "xlsx") {
            $.ajax({
                url: '/uapdatabase/import',
                type: 'POST',
                async: true,
                data: formData,
                processData: false,
                contentType: false,
                success: function (r) { },
                error: function (r) { },
                timeout: 60000
            });
        }
    }

    function exportDevices(fileInput) {
        // TODO need to get the row before to select after deletion
        var file = fileInput[0];
        var formData = new FormData();
        formData.append('file', file);
        formData.append('DataType', "SystemDevices");
        $.ajax({
            url: '/uapdatabase/export',
            type: 'POST',
            async: true,
            data: formData,
            processData: false,
            contentType: false,
            success: function(r) { },
            error: function(r) { },
            timeout: 60000
        });
    }

    function addWSDBListener() {
	    let socket = new WebSocket("ws://"+window.location.hostname+":8088/ws");
        socket.onopen = function () {
          console.log("Status: Connected\n");
        };
        socket.onmessage = async function (event) {
          console.log(event.data);
          if (event.data.startsWith("uapDevices") || event.data == "Database RELOAD_ALL") {
            loadDeviceGrid();
          }
          if (event.data.startsWith("uapProducts") || event.data == "Database RELOAD_ALL") {
            products = await getProductsDB();
            loadDeviceGrid();
          }
        };
        socket.onclose = function(evt) {
          console.log("Status: Connection closed\n");
        };
    }

    async function onFillUpdateDeviceModal() {
        var upModalProductID = document.getElementById("UpdateProductID");
        while (upModalProductID.lastChild) {     // clear all the types entries before loading the current ones
            upModalProductID.removeChild(upModalProductID.lastChild);
        }
        products.forEach(d => {
            var opt = document.createElement('option');
            opt.value = d.ProductID;
            opt.innerHTML = d.Name;
            upModalProductID.appendChild(opt);
        });
        const selectedData = DeviceGridOptions.api.getSelectedRows();
        document.getElementById("UpdateDeviceName").value = selectedData[0].DeviceName;
        document.getElementById("UpdateOgpDeviceID").value = selectedData[0].OgpDeviceID;
        document.getElementById("UpdateDeviceIP").value = selectedData[0].DeviceIP;
        document.getElementById("UpdatePortNumber").value = selectedData[0].PortNumber;
        document.getElementById("UpdateSlotNumber").value = selectedData[0].SlotNumber;
        upModalProductID.value = selectedData[0].ProductID;
    }
    async function onFillRemoveDeviceModal() {
        const selectedData = DeviceGridOptions.api.getSelectedRows();
        document.getElementById("RemoveDeviceName").value = selectedData[0].DeviceName;
    }

    async function onFillAddDeviceModal() {
    var addModalProductID = document.getElementById("AddProductID");
    while (addModalProductID.lastChild) {     // clear all the types entries before loading the current ones
        addModalProductID.removeChild(addModalProductID.lastChild);
    }
    products.forEach(d => {
        var opt = document.createElement('option');
        opt.value = d.ProductID;
        opt.innerHTML = d.Name;
        addModalProductID.appendChild(opt);
    });
    document.getElementById("AddDeviceName").value = "";
    document.getElementById("AddOgpDeviceID").value = "";
    document.getElementById("AddDeviceIP").value = "";
    document.getElementById("AddPortNumber").value = 0;
    document.getElementById("AddSlotNumber").value = 0;
    addModalProductID.value = products[0].ProductID;
  }

    function onImportSystemDevices() {
        let input = document.createElement('input');
        input.type = 'file';
        input.onchange = _this => {
            let files =   Array.from(input.files);
            console.log(files);
            importDevices(files);
        };
        input.click();
    }

    async function onExportSystemDevices() {
        let fileName = document.getElementById("exportDeviceFileName").value;
        if (!fileName) {
            fileName = "DeviceData"
        }
        downloadUAPFile("/device/export?fileName=" + fileName);
    }

    async function getConnectionProps(isAdding) {
        let deviceip = (isAdding) ? document.getElementById("AddDeviceIP").value : document.getElementById("UpdateDeviceIP").value;

        let formData = { "DeviceIP": deviceip};
        console.log("updateDevice, formData: ", JSON.stringify(formData));

        $.post("/device/connectionprops", formData, (data) => {
            let props = data.getElementsByTagName('entry')
            for(let i=0; i < props.length; i++) {
                switch(props[i].getAttribute("key")) {
                    case "node-id":
                        if(isAdding) {
                            document.getElementById("AddOgpDeviceID").value = props[i].innerHTML;
                        } else {
                            document.getElementById("UpdateOgpDeviceID").value = props[i].innerHTML;
                        }
                        break;
                    case "port":
                        if(isAdding) {
                            document.getElementById("AddPortNumber").value = props[i].innerHTML;
                        } else {
                            document.getElementById("UpdatePortNumber").value = props[i].innerHTML;
                        }
                        break;
                    case "node-name":
                        break;
                    case "equipmentType":
                        break;
                    default :
                        break;
                }
            }
        });
    }

    function getProductNameText(params) {
        for (let i = 0; i < products.length; i++) {
            if (products[i].ProductID == params.data.ProductID) {
                return products[i].Name;
            }
        }
    }

    async function getProductsDB() {
        let types = await fetch("/product/agdata");
        let data = await types.json();
        return data;
    }
</script>

<!--Add Devices modal-->
<div class="modal" id="addDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addDeviceModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: max-content;">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addDeviceModalLabel"><i class="icon-add icon-white"></i>Add Device</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table style="margin: 20px;">
                    <tr class="row-data">
                        <td class="col-data-label">Enter Device Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="DeviceName" id="AddDeviceName"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Select Product:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" name="ProductID" id="AddProductID">
                                    <option value="testentry">Test Entry</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Device IP:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 ipAddressSize" name="DeviceIP" id="AddDeviceIP"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Connection Details:</td>
                        <td class="col-data-input">
                            <button onclick="getConnectionProps(true)" id="getConnProps" class="btn btn-primary pull-right" rows="1" type="button">Get Details</button>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Port Number:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 countSize" name="PortNumber" id="AddPortNumber"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter OGP DeviceID:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="OgpDeviceID" id="AddOgpDeviceID"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Slot Number:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 countSize" name="SlotNumber" id="AddSlotNumber"></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="addDevice()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Edit Devices confirmation modal-->
<div class="modal" id="updateDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="updateDeviceModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: max-content;">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="updateDeviceModalLabel"><i class="icon-edit icon-white"></i>Edit Device</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table style="margin: 20px;">
                    <tr class="row-data">
                        <td class="col-data-label">Enter Device Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="DeviceName" id="UpdateDeviceName"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Select Product:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" name="ProductID" id="UpdateProductID">
                                    <option value="testentry">Test Entry</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Device IP:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 ipAddressSize" name="DeviceIP" id="UpdateDeviceIP"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Connection Details:</td>
                        <td class="col-data-input"><button onclick="getConnectionProps(false)" id="getUpdConnProps" class="btn btn-primary pull-right" rows="1" type="button">Get Details</button>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Port Number:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 countSize" name="PortNumber" id="UpdatePortNumber"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter OGP DeviceID:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="OgpDeviceID" id="UpdateOgpDeviceID"></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Enter Slot Number:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 countSize" name="SlotNumber" id="UpdateSlotNumber"></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button id="deviceUpdateClose" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="updateDevice()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Remove Devices confirmation modal-->
<div class="modal" id="deleteDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="deleteDeviceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: max-content;">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="deleteDeviceModalLabel"><i class="icon-delete icon-white"></i>Confirm: Delete Device:</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table style="margin: 20px;">
                    <tr class="row-data">
                        <td class="col-data-label">Delete Device:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="DeviceName" id="RemoveDeviceName"></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button id="deviceDeleteClose" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="deleteDevice()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="exportDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exportDeviceModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: max-content;">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="exportDeviceModalLabel"><i class="icon-add icon-white"></i>Export Device Data</span>
                <span class="btn btn-transparent" data-bs-dismiss="modal"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table style="margin: 20px;">
                    <tr class="row-data">
                        <td class="col-data-label">Save As</td>
                        <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="DeviceFileName" id="exportDeviceFileName"></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-text" onclick="onExportSystemDevices()" data-bs-dismiss="modal">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}