{{ define "signalpathcontent" }}

<div id="signalpathsGrid" style="width: 100%; height: 220px;" class="ag-theme-balham-dark">
</div>

<!--SignalPath - This page shows a grid of all the signal paths (sources and destinations) in the system.
Associated with each signal path are a collection of control panels which are control the parameters of
devices that are inline or associated with that path. When routes are made the UAP panels are enabled and
visible to a user operating at the panel making the route.-->

<script type="text/javascript" charset="utf-8">
    let routeSignals = [];
    let currSignalID = 0;
    let currSignalType = "";
    let currSignalName = "";

    addWSDBListener();

    const SignalPathColumnDefs = [
        { field: "ID", editable: false },
        { field: "Name", editable: false, headerName: "Signal Path" },
        { field: "SignalType", editable: false},
        {field: "SignalIndex", editable: false},
    ];

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

    let signalpathGridDiv = document.querySelector('#signalpathsGrid');
    //init table datasource once DOM content is loaded
    document.addEventListener('DOMContentLoaded', async function () {
        let sources = await getSourcesDB();
        let destinations = await getDestinationsDB();
        parseSignalPathsArray(sources, destinations)
        new agGrid.Grid(signalpathGridDiv, SignalPathGridOptions);
        loadSignalPathGrid();
    });

    function loadSignalPathGrid() {
        SignalPathGridOptions.api.setRowData(routeSignals);
    }

    // routines to compensate for omitempty function in grpc
    function parseSignalPathsArray(sarray, darray){
        let resparray =[];
        for(let i=1; i < sarray.length; i++) {
            let resp = {
              "ID": i,
              "Name": sarray[i].Name,
              "SignalType": sarray[i].SignalType,
              "SignalIndex": 0
            };

            if(sarray[i].ID != undefined) {
                resp.SignalIndex = sarray[i].ID;
            }
            resparray.push(resp);
        }
        for(let i=1; i < darray.length; i++) {
            let resp = {
              "ID": i+(sarray.length - 1),
              "Name": darray[i].Name,
              "SignalType": darray[i].SignalType,
              "SignalIndex": 0
            };
            if(darray[i].ID != undefined) {
                resp.SignalIndex = darray[i].ID;
            }
            resparray.push(resp);
        }
        routeSignals = resparray;
    }

    function onSignalPathRowSelected(event) {
        signalPathChanged(event.data);
    }

    function onSignalPathFilterTextBoxChanged() {
        SignalPathGridOptions.api.setQuickFilter(document.getElementById('signalPathFilterInput').value);
    }

    function signalPathChanged(path) {
        currSignalID = path.SignalIndex;
        currSignalType = path.SignalType;
        currSignalName = path.Name;
        loadUapPanelGrid(currSignalID, currSignalType);
    }

    // Any initialization needed after grid is loaded with data and rendered
    function onFirstDataRendered(params) {
        let node = SignalPathGridOptions.api.getDisplayedRowAtIndex(0);
        node.setSelected(true);
        signalPathChanged(node.data);
    }

    function addSignalPath() {
      let formData = {
        "DeviceID": currDevice,
        "SignalPathName": signalpathname,
        "ControlType": controltype,
        "ControlSubType": controlsubtype,
        "NumControls": numcontrols,
        "NumChannels": numchannels
      };
      $.post("/signalpath/post", formData, (data) => { });
    }

    function updateSignalPath() {
        const formData = {
            "ID": getSelectedSignalPathID(),
            "DeviceID": currDevice,
            "SignalPathName": document.getElementById('UpdateSignalPathName').value,
            "ControlType": document.getElementById('UpdateControlType').value,
            "ControlSubType": document.getElementById('UpdateControlSubType').value,
            "NumControls": document.getElementById('UpdateNumControls').value,
            "NumChannels": document.getElementById('UpdateNumChannels').value
        };
        $.post("/signalpath/update", formData, (data) => { });
    }

    function getSelectedSignalPathID() {
        const selectedNodes = SignalPathGridOptions.api.getSelectedNodes();
        return selectedNodes[0].id;
    }

    function addWSDBListener() {
        var socket = new WebSocket(webSocketUrlOnPort("/ws", 8088));
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            console.log("event.data: ", event.data);
            if (event.data.startsWith("uapSignalPaths") || event.data == "Database RELOAD_ALL") {
                loadSignalPathGrid();
            }
            if (event.data.startsWith("UapPanels") || event.data == "Database RELOAD_ALL") {
                loadUapPanelGrid(currSignalID, currSignalType);
            }
        };
        socket.onclose = function(evt) {
            console.log("Status: Connection closed\n");
        };
    }

    async function getSourcesDB() {
        let types = await fetch("/source/agdata");
        let data = await types.json();
        return parseSourceDestDataArray(data, "source");
    }

    async function getDestinationsDB() {
        let types = await fetch("/destination/agdata");
        let data = await types.json();
        return parseSourceDestDataArray(data, "destination");
    }

    function parseSourceDestDataArray(darray, type){
        let resp =[{}];
        for(let i=0; i < darray.length; i++) {
            resp.push(parseSourceDestDataItem(darray[i], type));
        }
        return resp;
    }

    function parseSourceDestDataItem(data, type) {
        let resp = {
            "ID": 0,
            "Name": data.Name,
            "SignalType": type,
            "UIID" : 0
        };
        if(data.ID != undefined) {
            resp.ID = data.ID;
            resp.UIID = data.UIID;
        }
        return resp;
    }
</script>

<!--Add SignalPaths modal-->
<div class="modal fade" id="addSignalPathModal" tabindex="-1" role="dialog" aria-labelledby="addSignalPathModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="panel panel-info">
          <h4>Add SignalPath:</h4>
          <div class="panel-body">
            <form role="form" id="addForm">
              <div class="form-group">
                <textarea class="form-control" name="SignalPathName" id="AddSignalPathName" placeholder="SignalPathName" rows="1"></textarea>
                <textarea class="form-control" name="ControlType" id="AddControlType" placeholder="ControlType" rows="1"></textarea>
                <textarea class="form-control" name="ControlSubType" id="AddControlSubType" placeholder="ControlSubType" rows="1"></textarea>
                <textarea class="form-control" name="NumControls" id="AddNumControls" placeholder="NumControls" rows="1"></textarea>
                <textarea class="form-control" name="NumChannels" id="AddNumChannels" placeholder="NumChannels" rows="1"></textarea>
                <button  onclick="addSignalPath();" class="btn btn-primary pull-right" type="submit">Apply</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="updateSignalPathModal" tabindex="-1" role="dialog" aria-labelledby="updateSignalPathModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="panel panel-info">
          <h4>Update SignalPath:</h4>
          <div class="panel-body">
            <form role="form" id="updateForm">
              <div class="form-group">
                <textarea class="form-control" name="SignalPathName" id="UpdateSignalPathName" placeholder="SignalPathName" rows="1"></textarea>
                <textarea class="form-control" name="ControlType" id="UpdateControlType" placeholder="ControlType" rows="1"></textarea>
                <textarea class="form-control" name="ControlSubType" id="UpdateControlSubType" placeholder="ControlSubType" rows="1"></textarea>
                <textarea class="form-control" name="NumControls" id="UpdateNumControls" placeholder="NumControls" rows="1"></textarea>
                <textarea class="form-control" name="NumChannels" id="UpdateNumChannels" placeholder="NumChannels" rows="1"></textarea>
                <button onclick="updateSignalPath();" class="btn btn-primary pull-right" type="submit">Apply</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{ end }}