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

<nav class="navbar navbar-expand" id="tielinestoolbar">
  <div class="container-fluid" id="navbarToggler">
    <ul class="navbar-nav me-auto">
      <li class="nav-item dropdown">
        <button onclick="" class="btn btn-nav-icon" id="navMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="navMenuImage"></i></button>
        <ul class="dropdown-menu dropdown-menu-nav">
          <li><hr class="dropdown-item-divider" /></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling" id="addMenuButton" disabled onclick="updateNamePreview();"><i class="icon-btn icon-plain icon-add-disabled" id="addMenuImg"></i>Add</button>
          </li>
          <li><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button onclick="selectAllTielines()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="selectAllMenuButton" disabled><i class="icon-btn icon-plain icon-select-rows-disabled" id="selectAllMenuImg"></i>Select All</button>
          </li>
          <li><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button onclick="deselectAllTielines()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="deselectAllMenuButton" disabled><i class="icon-btn icon-plain icon-deselect-rows-disabled" id="deselectAllMenuImg"></i>Deselect All</button>
          </li>
          <li><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button onclick="renameTielinesCheck()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="renameMenuButton" disabled><i class="icon-btn icon-plain icon-rename-disabled" id="renameMenuImg"></i>Rename</button>
          </li>
          <li><div class="dropdown-item-divider"></div></li>
          <li class="dropdown-item dropdown-item-nav">
            <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="removeTielinesCheck()" id="deleteMenuButton" disabled><i class="icon-btn icon-plain icon-delete-disabled" id="deleteMenuImg"></i>Delete</button>
          </li>
          <li><hr class="dropdown-item-divider" /></li>
        </ul>
      </li>
      <li>
        <span><i class="icon-separator"></i></span>
      </li>
      <li>
        <button class="btn btn-nav-icon" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling" id="addButton" disabled onclick="updateNamePreview();" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add-disabled" id="addImg"></i></button>
      </li>
      <li>
        <button onclick="selectAllTielines()" class="btn btn-nav-icon" id="selectAllButton" data-toggle="tooltip" data-placement="bottom" title="Select All" disabled><i class="icon-btn icon-select-rows-disabled" id="selectAllImg"></i></button>
      </li>
      <li>
        <button onclick="deselectAllTielines()" class="btn btn-nav-icon" id="deselectAllButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All" disabled><i class="icon-btn icon-deselect-rows-disabled" id="deselectAllImg"></i></button>
      </li>
      <li>
        <button onclick="renameTielinesCheck()" class="btn btn-nav-icon" id="renameButton" data-toggle="tooltip" data-placement="bottom" title="Rename" disabled><i class="icon-btn icon-rename-disabled" id="renameImg"></i></button>
      </li>
      <li>
        <button class="btn btn-nav-icon" onclick="removeTielinesCheck()" id="deleteButton" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="deleteImg"></i></button>
      </li>
    </ul>
  </div>
</nav>

<!-- Ports drawer -->
<div class="offcanvas offcanvas-start offcanvas-ports" data-bs-scroll="false" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling">

  <table class="container-data">
    <tr class="row-data">
      <td class="col-data-label col-150">Tieline Name Prefix:</td>
      <td class="col-data-input"><input class="form-control rounded-0 name-size" name="Prefix" id="prefix" value="TL" onpropertychange="updateNamePreview();" oninput="updateNamePreview();"></td>
    </tr>
    <tr class="row-data" id="addTielineSuffix" style="display:none;">
      <td class="col-data-label col-150">Start Count:</td>
      <td class="col-data-input"><span class="number-wrapper"><input class="form-control rounded-0 start-count-size" type="number" name="suffix" id="suffix" min="1" value="1" onchange="updateNamePreview();"></span></td>
    </tr>
    <tr class="row-data">
      <td class="col-data-label col-150">Preview:</td>
      <td class="col-data-input"><input class="form-control rounded-0" id="preview" value="TL" readonly></td>
    </tr>
  </table>

  <div class="row container-data container-data-tieline-ports">
    <div class="col tieline-ports-table">
      <div class="modal-title-center">Output Ports</div>
      <nav class="navbar navbar-expand">
        <div class="container-fluid" id="srcNavbarToggler">
          <ul class="navbar-nav me-auto">
            <li class="nav-item dropdown">
              <button onclick="" class="btn btn-nav-icon" id="navFromMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="navFromMenuImage"></i></button>
              <ul class="dropdown-menu dropdown-menu-nav">
                <li><hr class="dropdown-item-divider" /></li>
                <li class="dropdown-item dropdown-item-nav">
                  <button onclick="selectAllFromPorts()" class="dropdown-item dropdown-item-nav btn-item-text-nav" ><i class="icon-btn-nav-menu icon-plain icon-select-rows"></i>Select All</button>
                </li>
                <li><div class="dropdown-item-divider"></div></li>
                <li class="dropdown-item dropdown-item-nav">
                  <button onclick="deselectAllFromPorts()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="deselectAllFromMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="deselectAllFromMenuImg"></i>Deselect All</button>
                </li>
                <li><hr class="dropdown-item-divider" /></li>
              </ul>
            </li>
            <li>
              <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="selectAllFromPorts()" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Select All"><i class="icon-btn icon-select-rows"></i></button>
            </li>
            <li>
                <button onclick="deselectAllFromPorts()" class="btn btn-nav-icon" id="deselectAllFromButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All" disabled><i class="icon-btn icon-deselect-rows-disabled" id="deselectAllFromImg"></i></button>
            </li>
          </ul>
        </div>
      </nav>
      <div class="grid-wrapper-tieline-ports">
        <div id="fromOutputGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
      </div>
    </div>
    <div class="col tieline-ports-table">
      <div class="modal-title-center">Input Ports</div>
      <nav class="navbar navbar-expand">
        <div class="container-fluid" id="tielineNavbarToggler">
          <ul class="navbar-nav me-auto">
            <li class="nav-item dropdown">
              <button onclick="" class="btn btn-nav-icon" id="navToMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="navToMenuImage"></i></button>
              <ul class="dropdown-menu dropdown-menu-nav">
                <li><hr class="dropdown-item-divider" /></li>
                <li class="dropdown-item dropdown-item-nav">
                  <button onclick="selectAllToPorts()" class="dropdown-item dropdown-item-nav btn-item-text-nav"><i class="icon-btn-nav-menu icon-plain icon-select-rows"></i>Select All</button>
                </li>
                <li><div class="dropdown-item-divider"></div></li>
                <li class="dropdown-item dropdown-item-nav">
                  <button onclick="deselectAllToPorts()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="deselectAllToMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="deselectAllToMenuImg"></i>Deselect All</button>
                </li>
                <li><hr class="dropdown-item-divider" /></li>
              </ul>
            </li>
            <li>
              <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="selectAllToPorts()" class="btn btn-nav-icon" data-toggle="tooltip" data-placement="bottom" title="Select All"><i class="icon-btn icon-select-rows"></i></button>
            </li>
            <li>
                <button onclick="deselectAllToPorts()" class="btn btn-nav-icon" id="deselectAllToButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All" disabled><i class="icon-btn icon-deselect-rows-disabled" id="deselectAllToImg"></i></button>
            </li>
          </ul>
        </div>
      </nav>
      <div class="grid-wrapper-tieline-ports"><div id="toInputGrid" style="height: 100%" class="ag-theme-balham-dark"></div></div>
    </div>
  </div>
  <div class="modal-footer panel-footer justify-content-between">
    <button class="btn btn-text btn-outline-secondary btn-close-canvas" data-bs-dismiss="offcanvas">Cancel</button>
    <button  class="btn btn-text" data-bs-dismiss="offcanvas" onclick="addTielines()">Apply</button>
  </div> 
</div>

<!-- Tielines table -->
<div class="grid-wrapper" id="tielinescanvas">
  <div id="tielinesGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
</div>

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

<script type="text/javascript" charset="utf-8">
  const objectTypeName = "Tieline";
  // specify the columns
  const columnDefs = [
    {field: "id", headerName: "ID", suppressMovable: true, maxWidth: 80, filter: true},
    {field: "name", suppressMovable: true, editable: true, minWidth: 150, maxWidth: 300, comparator: naturalSort},
    {field: "fromPortName", headerName: "From Port", suppressMovable: true, minWidth: 150, comparator: naturalSort},
    {field: "toPortName", headerName: "To Port", suppressMovable: true, minWidth: 150, comparator: naturalSort},
    {field: "description", suppressMovable: true, editable: true, minWidth: 300, maxWidth: 1590},
  ];

  // let the grid know which columns and what data to use
  const tielineTable = {
    defaultColDef: {
      flex: 1,
      resizable: true,
      sortable: true,
      width: 250,
      filter: true,
      filterParams: multiFilterCondition,
    },
    columnDefs: columnDefs,
    suppressMenuHide: true,
    suppressDragLeaveHidesColumns: true,
    headerHeight: 36,
    rowHeight: 31,
    rowSelection: 'multiple',
    onCellValueChanged: onCellValueChanged,
    onSelectionChanged: onTielinesRowsSelectionChanged,
    getRowId: (node) => {return node.data.id;},
  };

  // Port table related js code here
  const portColumnDefs = [
    {field: "id", headerName: "ID", suppressMovable: true, maxWidth: 80, filter: true},
    {field: "name", suppressMovable: true, minWidth: 150, maxWidth: 300, comparator: naturalSort},
    {field: "type", suppressMovable: true, minWidth: 80, maxWidth: 80},
  ]

  const fromPortGridOptions = {
    defaultColDef: {
      flex: 1,
      resizable: true,
      sortable: true,
      filter: true,
      filterParams: multiFilterCondition,
    },
    columnDefs: portColumnDefs,
    suppressMenuHide: true,
    suppressDragLeaveHidesColumns: true,
    headerHeight: 36,
    rowHeight: 31,
    rowSelection: 'multiple',
    onSelectionChanged: onFromPortSelectionChanged,
  };

  const toPortGridOptions = {
    defaultColDef: {
      flex: 1,
      resizable: true,
      sortable: true,
      filter: true,
      filterParams: multiFilterCondition,
    },
    columnDefs: portColumnDefs,
    suppressMenuHide: true,
    suppressDragLeaveHidesColumns: true,
    headerHeight: 36,
    rowHeight: 31,
    rowSelection: 'multiple',
    onSelectionChanged: onToPortSelectionChanged,
  };

  function onFromPortSelectionChanged() {
    if (fromPortGridOptions.api.getSelectedRows() == 0) {
      disableUiButton("deselectAllFrom");
      disableUiButton("deselectAllFromMenu");
    } else {
      enableUiButton("deselectAllFrom");
      enableUiButton("deselectAllFromMenu");
    }
    updateNamePreview();
  }

  function onToPortSelectionChanged() {
    if (toPortGridOptions.api.getSelectedRows() == 0) {
      disableUiButton("deselectAllTo");
      disableUiButton("deselectAllToMenu");
    } else {
      enableUiButton("deselectAllTo");
      enableUiButton("deselectAllToMenu");
    }
    updateNamePreview();
  }

  // set up the grid after the page has finished loading
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("tielinesGrid").ag_grid = new agGrid.Grid(document.querySelector('#tielinesGrid'), tielineTable);
    document.getElementById("fromOutputGrid").ag_grid = new agGrid.Grid(document.querySelector('#fromOutputGrid'), fromPortGridOptions);
    document.getElementById("toInputGrid").ag_grid = new agGrid.Grid(document.querySelector('#toInputGrid'), toPortGridOptions);

    fetchTielineData (true);

    window.addEventListener(DBMODE_TABLE, handleTielineModeChange);
    //Add database listener
    addWSDBListener();
  });

  function selectFirstTieline() {
    tielineTable.api.forEachNode((node) => {
      if (node.rowIndex == 0) {
        node.setSelected(true, true);
      }
    });
  }

  function selectAllTielines() {
    tielineTable.api.selectAllFiltered();
  }

  function deselectAllTielines() {
    tielineTable.api.deselectAll();
  }

  function selectAllFromPorts() {
    fromPortGridOptions.api.selectAllFiltered();
  }

  function deselectAllFromPorts() {
    fromPortGridOptions.api.deselectAll();
  }

  function selectAllToPorts() {
    toPortGridOptions.api.selectAllFiltered();
  }

  function deselectAllToPorts() {
    toPortGridOptions.api.deselectAll();
  }

  function validateCurrentTielines() {
    var duplicatedNames = [];
    tielineTable.api.forEachNode((node1) => {
      tielineTable.api.forEachNode((node2) => {
        if (node2.data.id != node1.data.id) {
          if (node2.data.name == node1.data.name) {
            duplicatedNames.push(node2.data.name);
          }
        }
      });
    });

    function onlyUnique(value, index, array) {
      return array.indexOf(value) === index;
    }

    if (duplicatedNames.length > 0) {
      duplicatedNames = duplicatedNames.filter(onlyUnique);
      displayWarningDialog("Currently, you have Tielines with duplicate names which should be avoided.  Duplicated names are as follows: " + duplicatedNames.join(", ") + ".  To resolve this, you should rename your Tielines with duplicated names");
    }
  }

  function updateTielinesToolbarButtons() {
    if (tielineTable.api.getSelectedRows().length > 0) {
      enableUiButton("rename");
      enableUiButton("renameMenu");
      enableUiButton("deselectAll");
      enableUiButton("deselectAllMenu");
      enableUiButton("delete");
      enableUiButton("deleteMenu");
    } else {
      disableUiButton("rename");
      disableUiButton("renameMenu");
      disableUiButton("deselectAll");
      disableUiButton("deselectAllMenu");
      disableUiButton("delete");
      disableUiButton("deleteMenu");
    }

    // Get the unfiltered list of data from the two tables
    let fromPortCount = getAgGridTableRowCount(fromPortGridOptions);
    let toPortCount = getAgGridTableRowCount(toPortGridOptions);
    let tooltip = "";

    if (fromPortCount > 0 || toPortCount > 0) {
      enableUiButton("add");
      enableUiButton("addMenu");
    } else {
      disableUiButton("add");
      disableUiButton("addMenu");
      if ((fromPortCount == 0) && (toPortCount == 0)) {
        tooltip = "No input or output ports available";
      } else if (fromPortCount == 0) {
        tooltip = "No output ports available";
      } else if (toPortCount == 0) {
        tooltip = "No input ports available";
      }
    }
    setToolTip("addButton", tooltip, tooltipLocation.BOTTOM);

    if (tielineTable.api.getDisplayedRowCount() == 0) {
      disableUiButton("selectAll");
      disableUiButton("selectAllMenu");
    } else {
      enableUiButton("selectAll");
      enableUiButton("selectAllMenu");
    }
    if (dbMode == DBMode_Protect) {
      disableButtonIds(["add", "addMenu", "rename", "renameMenu", "delete", "deleteMenu"]);
    }
  }

  function removeRows() {
    const selectedData = tielineTable.api.getSelectedRows()
    var selectedIds = [];
    for (var i = 0; i < selectedData.length; i++){
      selectedIds.push(selectedData[i].id);
    }
    $.ajax({
      url: "/tieline/remove?ids=" + selectedIds,
      success: () => {
        console.log("operateEvents: done removing tieline row");
        hideDialog('removeTielineModal');
      },
      error: (err) => {
        displayErrorDialog(err.responseText || JSON.stringify(err));
      }
    });
  }

  function removeTielinesCheck() {
    const selectedData = tielineTable.api.getSelectedRows()
    if (selectedData.length > 0) {
      displayDialog("removeTielineModal");
    } else {
      displayWarningDialog("Please select a tieline to delete.");
    }
  }

  function updateNamePreview() {
    const prefix = document.getElementById("prefix").value;
    const selectedFromPortRows = fromPortGridOptions.api.getSelectedRows();
    const selectedToPortRows = toPortGridOptions.api.getSelectedRows();
    var previewValue = "";
    const count = Math.min(selectedFromPortRows.length, selectedToPortRows.length);
    $("#addTielineSuffix").css("display", (count > 1) ? "table-row" : "none");

    if (count < 2) {
      previewValue = prefix;5
    } else {
      const startingIndex = parseInt(document.getElementById("suffix").value);
      const proposedTielineNames = getSubsequentNames(prefix, startingIndex, count);
      previewValue = proposedTielineNames.join(", ");
    }
    document.getElementById("preview").value = previewValue;
  }

  function addTielines() {
    let errorList = [];
    let prefix = document.getElementById("prefix").value;
    if (!validateString(prefix)) {
      errorList.push(NameErrorMessage);
    }
    const startingIndex = parseInt(document.getElementById("suffix").value);
    if (!isNumeric(startingIndex)) {
      errorList.push(StartCountErrorMessage);
    }

    const formatPrefix = encodeURIComponent(prefix);
    const selectedFromPortRows = fromPortGridOptions.api.getSelectedRows();
    const selectedToPortRows = toPortGridOptions.api.getSelectedRows();

    const newTielineCount = Math.min(selectedFromPortRows.length, selectedToPortRows.length);
    let proposedTielineNames = [];
    if (newTielineCount == 0) {
      if (selectedFromPortRows.length == 0) {
        errorList.push(TielineMissingOutputsMessage);
      }
      if (selectedToPortRows.length == 0) {
        errorList.push(TielineMissingInputsMessage);
      }
    } else if (newTielineCount == 1) {
      proposedTielineNames = [formatPrefix];
    } else {
      proposedTielineNames = getSubsequentNames(formatPrefix, startingIndex, newTielineCount);
    }

    if (errorList.length > 0) {
      displayErrorDialog(showErrorsFromList(errorList));
      return;
    }

    var newTielineData = [];
    for (var i = 0; i < proposedTielineNames.length; i++) {
      newTielineData.push({
        name: proposedTielineNames[i],
        to:selectedToPortRows[i].id,
        from:selectedFromPortRows[i].id
      });
    }

    $.ajax({
      url: "/tieline/add?tielines=" + JSON.stringify(newTielineData),
      error: (err) => {
        displayErrorDialog(err.responseText || JSON.stringify(err));
      }
    });
  }

  function renameTielinesCheck() {
    let tielineIds = JSON.parse(sessionStorage.getItem('tielineIds'));
    if (tielineIds && tielineIds.length > 0) {
      $(".multiEdit").css("display", (tielineIds.length == 1) ? "none" : "table-row");
      $(".singleEdit").css("display", (tielineIds.length == 1) ? "table-row" : "none");
      showRenameTielinesPreview();
      displayDialog("renameTielinesModal");
    } else {
      displayWarningDialog("Please select at least one Tieline to rename.");
    }
  }

  function showRenameTielinesPreview() {
    let prefix = document.getElementById("renameTielinesPrefix").value;
    let start = parseInt(document.getElementById("renameStartCount").value);
    let TielinesToRename = "";
    if (prefix != "") {
      let tielineIds = JSON.parse(sessionStorage.getItem('tielineIds'));
      if (tielineIds.length > 1) {
        let newNames = [];
        for (let i = 0; i < tielineIds.length; i++) {
          newNames.push(prefix + (start + i));
        }
        TielinesToRename = newNames.join(", ");
      } else {
        TielinesToRename = prefix;
      }
    }
    document.getElementById("TielinesToRename").placeholder = TielinesToRename;
  }

  function renameTielines() {
    const selectedTielines = tielineTable.api.getSelectedNodes();
    if (selectedTielines.length < 1) {
      displayWarningDialog("Please select at least a single " + objectTypeName + " to rename.");
      return;
    }

    const prefix = (selectedTielines.length > 1) ? document.getElementById('renameTielinesPrefix').value : document.getElementById('renameTielinesName').value;
    if (!validateString(prefix)) {
      displayErrorDialog(NameErrorMessage);
      return;
    }

    let suffix = parseInt(document.getElementById('renameStartCount').value);

    let tielinesToUpdate = [];
    selectedTielines.forEach(function (node) {
      console.log("Rename Tieline data: " + JSON.stringify(node.data));
      if (selectedTielines.length > 1) {
        node.data.name = prefix + suffix;
        suffix++;
      } else {
        node.data.name = prefix;
      }
      tielinesToUpdate.push(node.data);
    });

    updateTielines(tielinesToUpdate);
    hideDialog("renameTielinesModal");
  }

  function onCellValueChanged(event) {
    if (dbMode == DBMode_Protect) {
      displayErrorDialog("The tielines cannot be edited while the database is in protect mode.");
      fetchTielineData (true);
      return;
    }
    if (event.column.colId == "name") {
      if (!event.newValue) {
        return;
      }
      event.newValue = event.newValue.trim();
      if (!validateString(event.newValue)) {
        displayErrorDialog(NameErrorMessage);
        fetchTielineData (true);
        return;
      }
      const duplicateNamesId = checkForDuplicateNames(tielineTable, "id", event.newValue, event.data.id);
      if (duplicateNamesId > -1) {
        displayErrorDialog(getDuplicateNamesError(event.newValue, objectTypeName, duplicateNamesId));
        fetchTielineData (true);
        return;
      }
    }
    if (event.data != "multi") {
      updateTielines([event.data]);
    }
  }

  function onTielinesRowsSelectionChanged() {
    const selectedRows = tielineTable.api.getSelectedRows();
    sessionStorage.setItem("tielineIds", JSON.stringify(selectedRows.map(node => node.id)));
    updateTielinesToolbarButtons();
  }

  function addWSDBListener() {
    var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
    socket.onopen = function () {
      console.log("Status: Connected");
    };
    socket.onmessage = function (event) {
      const msg = JSON.parse(event.data);
      console.log("socket Message Received: " + JSON.stringify(msg, null, 2));
      if ((msg.table === TIELINE_TABLE) || (msg.table === DESTINATION_LEVEL_CHANNEL_TABLE) || (msg.table === SOURCE_LEVEL_CHANNEL_TABLE)) {
        fetchTielineData (false);
      } else if (msg.table === DEVICE_TABLE) {
        location.reload();
      } else if (msg.table === DATABASE_TABLE) {
        handleDatabaseTableChange(msg, () => {
          location.reload();
        });
      }
    };
    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);
    };
  }

  /**
   * Is part of a sequential list of calls to get data to populate the tables in this page.  This should get called from
   * fetchTielineData as it is the second section of data needed for the page.  Once the data from /tieline/availableOutputs
   * is received, the updateAvailableOutputGrid should be called get the data from /tieline/availableOutputs and subsequently
   * update the toolbar buttons
   */
  function updateAvailableInputsGrid() {
    fetch('/tieline/availableInputs')
      .then((response) => response.json())
      .then((data) => {
        toPortGridOptions.api.setRowData(data);
        updateAvailableOutputGrid();
      });
  }

  /**
   * Is part of a sequential list of calls to get data to populate the tables in this page.  This should get called from
   * updateAvailableInputsGrid as it is the last section of data needed for the page.  Once the data from /tieline/availableOutputs
   * is received, the updateTielinesToolbarButtons should be called to enable/disable buttons on the toolbar with the
   * latest set of data that has been grabbed from each location
   */
  function updateAvailableOutputGrid() {
    fetch('/tieline/availableOutputs')
      .then((response) => response.json())
      .then((data) => {
        fromPortGridOptions.api.setRowData(data);
        updateTielinesToolbarButtons();
      });
  }

  function handleTielineModeChange(eventData) {
    dbMode = eventData.detail.dbMode;
    if (eventData.detail.dbMode == DBMode_Protect) {
      disableButtonIds(["add", "addMenu", "rename", "renameMenu", "delete", "deleteMenu"]);
    } else {
      updateTielinesToolbarButtons();
    }
  }

  /**
   *  This function fetches all data for tielines, available inputs, and available outputs in a sequential order. I would
   *  love to do this all with Promise.all but it's relatively new in javascript and I can't guarantee that clients
   *  won't have some sort of dinosaur-like (Internet Explorer) default browser on their system that runs Dashboard.  Once
   *  the data is grabbed from /tieline/agdata, it goes and gets the data from /tieline/availableInputs (from updateAvailableInputsGrid),
   *  and when that is done, it gets the data from /tieline/availableOutputs (from updateAvailableOutputGrid) and handles
   *  all responses in a sequential order
   *
   * @param selectFirstRow A Boolean to select the first element in the table
   */
  function fetchTielineData (selectFirstRow) {
    const url = "/tieline/agdata";
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        tielineTable.api.setRowData(data);
        if (selectFirstRow === true) {
          selectFirstTieline();
        }
        validateCurrentTielines();
        updateAvailableInputsGrid();
      });
  }

  function updateTielines (newTielineData) {
    if (newTielineData.length < 1) {
      console.warn(arguments.callee.name + " - No tieline data provided to update");
      return;
    }

    let errors = [];
    for (let i = 0; i < newTielineData.length; i++) {
      const duplicateNamesId = checkForDuplicateNames(tielineTable, "id", newTielineData[i].name, newTielineData[i].id);
      if (duplicateNamesId > -1) {
        errors.push(getDuplicateNamesError(newTielineData[i].name, objectTypeName, duplicateNamesId));
      }
    }

    if (errors.length > 0) {
      displayErrorDialog(errors.join("<br/>"));
      fetchTielineData (false);
      return;
    }

    $.post("/tieline/update", JSON.stringify(newTielineData))
      .fail(function(err) {
        displayErrorDialog(err.responseText || JSON.stringify(err));
        fetchTielineData (false);
    });
  }

</script>

<!--Remove tielines confirmation modal-->
<div class="modal" id="removeTielineModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeTielineModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="removeTielineModalLabel"><i class="icon-delete icon-white"></i>Delete Tielines</span>
        <span class="btn btn-transparent" onclick="hideDialog('removeTielineModal');"><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 tielines?</p>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeTielineModal')">Cancel</button>
        <button  class="btn btn-text" data-bs-dismiss="modal" tabindex="0" onclick="removeRows()">Apply</button>
      </div>
    </div> 
  </div>
</div>

<div class="modal" id="renameTielinesModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="renameTielinesModalLabel"aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-rename-tieline">
    <div class="modal-content">
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="renameTielinesModalLabel"><i class="icon-edit icon-white"></i>Rename Tielines</span>
        <span class="btn btn-transparent" onclick="hideDialog('renameTielinesModal');"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <table class="container-data">
          <tr class="row-data singleEdit">
            <td class="col-data-label">Name:</td>
            <td class="col-data-input"><input class="form-control rounded-0 name-size" name="renameTielinesPrefix" id="renameTielinesName" onpropertychange="showRenameTielinesPreview();" oninput="showRenameTielinesPreview();" tabindex="0"/></td>
          </tr>
          <tr class="row-data multiEdit">
            <td class="col-data-label">Name (Prefix):</td>
            <td class="col-data-input"><input class="form-control rounded-0 name-size" name="renameTielinesPrefix" id="renameTielinesPrefix" onpropertychange="showRenameTielinesPreview();" oninput="showRenameTielinesPreview();" tabindex="0"/></td>
          </tr>
          <tr class="row-data multiEdit">
            <td class="col-data-label">Start Count:</td>
            <td class="col-data-input"><span class="number-wrapper"><input type="number" min="1" class="form-control rounded-0 start-count-size" name="renameStartCount" id="renameStartCount" value="1" tabindex="1" onchange="showRenameTielinesPreview()"/></span></td>
          </tr>
          <tr class="row-data multiEdit">
            <td class="col-data-label">Preview:</td>
            <td class="col-data-input"><input class="form-control rounded-0 preview-size-rename read-only" name="TielinesToRename" placeholder="1" id="TielinesToRename" tabindex="2" readonly/></td>
          </tr>
        </table>
        <div class="modal-footer justify-content-between">
          <button class="btn btn-text btn-outline-secondary" tabindex="4" onclick="hideDialog('renameTielinesModal');">Cancel</button>
          <button class="btn btn-text" tabindex="3" onclick="renameTielines()">Apply</button>
        </div>
      </div>
    </div>
  </div>
</div>
{{ end }}