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

<script type="text/javascript" charset="utf-8">
  let products = [{}];
  let devices = [{}];
  let currDevice = 1;
  let currProduct = 1;

  addWSDBListener();

  const UapPanelColumnDefs = [
    { field: "ID", editable: false},
    { valueGetter: getSignalNameText, editable: false, headerName: "Signal Name" },
    { field: "SignalType", editable: false},
    { field: "ProductName", editable: false },
    { valueGetter: getDeviceNameText, editable: false, headerName: "Device Name" },
    { field: "WidgetName", editable: false },
    { field: "ChannelIndex", editable: false},
    { field: "UapPanelID", editable: false},
  ];

  const UapPanelGridOptions = {
    defaultColDef: {
      resizable: true,
      sortable: true,
      editable: true,
      filter: true,
    },
    columnDefs: UapPanelColumnDefs,
    domLayout:'normal',
    headerHeight: 36,
    rowHeight: 31,
    rowSelection: 'single',
    enableRangeSelection: true,
    pagination: true,
    paginationAutoPageSize: true,
    getRowNodeId: (data) => { return data.ID; },
    onRowClicked: onUapPanelRowSelected,
    onRowDataChanged: onPanelDataReady,
  };

  let uappanelGridDiv = document.querySelector('#uappanelsGrid');

  //init table datasource once DOM content is loaded
  document.addEventListener('DOMContentLoaded', async function () {
    products = await getProductsDB();
    devices = await getDevicesDB();
    new agGrid.Grid(uappanelGridDiv, UapPanelGridOptions);
  });

  function loadUapPanelGrid(index, type) {
      let obj = {"SignalIndex": index, "SignalType": type}
      $.post("/device/byuappanel", obj, (data) => {
        data = parsePanelDataArray(data);
        UapPanelGridOptions.api.setRowData(data);
        currDevice = (data != null) ? data[0].DeviceID : 0;
      });
    }

    // routines to compensate for omitempty function in grpc
  function parsePanelDataArray(darray){
    var resp =[];
    if(darray) {
      for (var i = 0; i < darray.length; i++) {
        resp.push(parsePanelDataItem(darray[i], i+1));
      }
      return resp;
    } else {
      return null;
    }
  }

  function parsePanelDataItem(data, index) {
    let resp = {
      "ID": index,
      "SignalName": data.SignalName,
      "ProductName": data.ProductName,
      "DeviceID": data.DeviceID,
      "WidgetName": data.WidgetName,
      "SignalType": data.SignalType,
      "ChannelIndex": 0,
      "UapPanelID": data.UapPanelID
    };
    if(data.ChannelIndex != undefined) {
      resp.ChannelIndex = data.ChannelIndex;
    }
    return resp;
  }

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

  function onUapPanelFilterTextBoxChanged() {
      UapPanelGridOptions.api.setQuickFilter(document.getElementById('uapPanelFilterInput').value);
    }

  function onPanelDataReady(params) {
    let node = UapPanelGridOptions.api.getDisplayedRowAtIndex(0);
    node.setSelected(true);
  }

  function addDeviceToPanel() {
    let formData = {
      "DeviceID": currDevice,
      "SignalType": currSignalType,
      "SignalIndex": currSignalID,
      "ChannelIndex": document.getElementById('AddChannelIndex').value
    };

    $.post("/signalpath/post", formData, (data) => {
      loadUapPanelGrid(currSignalID, currSignalType);
    });
  }

  function removeDeviceFromSignalPath() {
    const selectedData = UapPanelGridOptions.api.getSelectedRows();
    selectedData.forEach(node => {
      let id = {"ID": node.UapPanelID};
      $.post("/signalpath/remove", id, () => {
        loadUapPanelGrid(currSignalID, currSignalType);
      });
    });
    document.getElementById("panelRemoveClose").click();
  }

  function getDeviceName(deviceid) {
    for (let i=0; i < devices.length; i++) {
      if(devices[i].DeviceID == deviceid) {
        return devices[i].DeviceName;
      }
    }
  }

  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: " , event.data);
      if (event.data.startsWith("uapProducts") || event.data == "Database RELOAD_ALL") {
        products = await getProductsDB();
        loadUapPanelGrid(currSignalID, currSignalType);
      }
      if (event.data.startsWith("uapDevices") || event.data == "Database RELOAD_ALL") {
        devices = await getDevicesDB();
        loadUapPanelGrid(currSignalID, currSignalType);
      }
    };
    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.ID;
      opt.innerHTML = d.Name;
      upModalProductID.appendChild(opt);
    });
    const selectedData = UapPanelGridOptions.api.getSelectedRows();
    document.getElementById("UpdateDeviceName").value = selectedData[0].DeviceName;
    document.getElementById("UpdateOgpDeviceID").value = selectedData[0].OgpDeviceID;
    document.getElementById("UpdateDeviceIP").value = selectedData[0].DeviceIP;
    upModalProductID.value = selectedData[0].ProductID;
  }

  async function onFillAddDeviceToPanelModal() {
    //in the use case of the device page the modal dialog presents all the available devices in the system using a pull down of the name
    let addModalDeviceName = document.getElementById("AddDeviceName");
    // fill the device name select options
    while (addModalDeviceName.lastChild) {     // clear all the types entries before loading the current ones
      addModalDeviceName.removeChild(addModalDeviceName.lastChild);
    }
    devices.forEach(d => {
      let opt = document.createElement('option');
      opt.value = d.DeviceID;
      opt.innerHTML = d.DeviceName;
      addModalDeviceName.appendChild(opt);
    });
    addModalDeviceName.value = devices[0].DeviceID;
    currDevice = devices[0].DeviceID;
    document.getElementById("AddProductName").value = getProductName(devices[0].ProductID);
    fillChannelIndexSelect(devices[0].ProductID);
    document.querySelector('#addDeviceButton').addEventListener('click', function(event) {
      event.preventDefault();
      $('#addPanelDeviceModal').modal('hide');
    });
  }

  async function onFillRemoveDeviceModal() {
      //in the use case of the device page the modal dialog presents all the available devices in the system using a pull down of the name
      document.getElementById("RemoveDeviceName").value = getDeviceName(currDevice);
      document.querySelector('#removeDeviceButton').addEventListener('click', function(event) {
        event.preventDefault();
        $('#removePanelDeviceModal').modal('hide');
      });
      document.querySelector('#cancelDeviceButton').addEventListener('click', function(event) {
        event.preventDefault();
        $('#removePanelDeviceModal').modal('hide');
      });
    }

  function onDeviceNameChange() {
  let addModalDeviceName = document.getElementById("AddDeviceName");
  let addModalProductName = document.getElementById("AddProductName");
  for(let i = 0; i < devices.length; i++) {
    if(devices[i].DeviceID == addModalDeviceName.value) {
      currDevice = devices[i].DeviceID;
      addModalProductName.value = getProductName(devices[i].ProductID);
      fillChannelIndexSelect(devices[i].ProductID);
    }
  }
}

function onImportSignalPaths() {
  let input = document.createElement('input');
  input.type = 'file';
  input.onchange = _this => {
    let files = Array.from(input.files);
    importSignalPaths(files);
  };
  input.click();
}

function importSignalPaths(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', "SignalPathData");
        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
            });
        }
    }

    async function onExportSignalPaths() {
      let fileName = document.getElementById("exportSignalPathFileName").value;
      if (!fileName) {
        fileName = "SignalPathData"
      }
      downloadUAPFile("/signalpath/export?fileName=" + fileName);
    }

  function getProductName(id) {
    for (var i=0; i < products.length; i++) {
      if(products[i].ProductID == id) {
        return products[i].Name;
      }
    }
  }

  function getDeviceName(id) {
    for (var i=0; i < devices.length; i++) {
      if(devices[i].DeviceID == id) {
        return devices[i].DeviceName;
      }
    }
    return "";
  }

  function fillChannelIndexSelect(productid) {
    let numchannels = 0;
    for (var i=0; i < products.length; i++) {
      if(products[i].ProductID == productid) {
        numchannels = products[i].NumChannels;
      }
    }
    // fill the channelIndex select options
    let addModalChannelIndex = document.getElementById("AddChannelIndex");

    while (addModalChannelIndex.lastChild) {     // clear all the types entries before loading the current ones
      addModalChannelIndex.removeChild(addModalChannelIndex.lastChild);
    }
    for(let i=0; i < numchannels; i++) {
      let opt = document.createElement('option');
      opt.value = i;
      opt.innerHTML = i;
      addModalChannelIndex.appendChild(opt);
    }
  }

  function getDeviceNameText(params) {
    return getDeviceName(params.data.DeviceID);
  }

  function getSignalNameText(params) {
    return currSignalName;
  }

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

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

<!--Assign Devices modal-->
<div class="modal" id="addPanelDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addPanelDeviceModalLabel"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="addPanelDeviceModalLabel"><i class="icon-add icon-white"></i>Assign 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">Select Device:</td>
            <td class="col-data-input">
              <div class="select-wrapper">
                <select class="custom-select" onchange="onDeviceNameChange()" name="DeviceName" id="AddDeviceName">
                </select>
              </div>
            </td>
          </tr>
          <tr class="row-data">
            <td class="col-data-label">Product Type:</td>
            <td class="col-data-input"><input class="form-control rounded-0 ipAddressSize" name="ProductName" id="AddProductName"></input></td>
          </tr>
          <tr class="row-data">
            <td class="col-data-label">Select Channel:</td>
            <td class="col-data-input">
              <div class="select-wrapper">
                <select class="custom-select" name="ChannelIndex" id="AddChannelIndex">
                </select>
              </div>
            </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="addDeviceToPanel()">Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!--Remove Devices confirmation modal-->
<div class="modal" id="removePanelDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeDeviceModalLabel"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="removeDeviceModalLabel"><i class="icon-delete icon-white"></i>Confirm: Remove Device from Signal Path:</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">Remove Device:</td>
            <td class="col-data-input"><input class="form-control rounded-0 nameSize" name="DeviceName" id="RemoveDeviceName"></input></td>
          </tr>
        </table>
        <div class="modal-footer justify-content-between">
          <button id="panelRemoveClose" class="btn btn-text btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-text" onclick="removeDeviceFromSignalPath()">Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="exportSignalPathModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exportSignalPathModalLabel"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="exportSignalPathModalLabel"><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="exportSignalPathFileName"></input></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="onExportSignalPaths()" data-bs-dismiss="modal">Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>
{{ end }}