{% extends 'navbar.html'%}
{% block content %}
<div class="row w-100 my-4">
    <form action="" onsubmit="sendMessage(event)">
        <div class="input-group mb-3">
          <span class="input-group-text" id="scan-ip">Subnet</span>
          <input type="text" class="form-control" id="messageText" placeholder="192.168.1.0/24" aria-describedby="scan-ip">
          <button class="btn btn-danger" onclick="cancelScan()" style="display:none;" type="button" id="cancelButton">Cancel</button>
          <button class="btn btn-primary" onclick="scanMiners()" type="button" id="scanButton">Scan</button>
        </div>
    </form>
</div>

<div class="row w-100">
    <button class="btn btn-primary mb-4 mx-1" onclick="addMiners()" type="button" id="addButton">Add Selected Miners</button>
</div>

<div class="row w-100">
    <table class="table table-striped table-responsive" style="max-height:300px;">
        <thead>
            <tr>
                <th class="active col-1">
                    <input type="checkbox" class="select-all checkbox" name="select-all" id="selectAllCheckbox"/>
                </th>
                <th>IP</th>
                <th>Model</th>
                <th id="scanStatus" class="col-2">0 Miners</th>
            </tr>
        </thead>
        <tbody id="minerTable">

        </tbody>
    </table>
</div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //column checkbox select all or cancel
            $("input.select-all").click(function () {
                var checked = this.checked;
                $("input.select-item").each(function (index,item) {
                    item.checked = checked;
                });
            });
            //check selected items
            $("input.select-item").click(function () {
                var checked = this.checked;
                var all = $("input.select-all")[0];
                var total = $("input.select-item").length;
                var len = $("input.select-item:checked:checked").length;
                all.checked = len===total;
            });
        });
    </script>
    <script>
        window.post = function(url, data) {
          return fetch(url, {method: "POST", headers: {'Content-Type': 'application/json'}, body: JSON.stringify(data)});
        }
        var ws = new WebSocket("ws://localhost:80/scan/ws");
        ws.onmessage = function(event) {
            if (event.data == "Done") {
                document.getElementById("scanButton").innerHTML = "Scan"
                document.getElementById("scanButton").disabled = false
                document.getElementById("selectAllCheckbox").disabled = false
                document.getElementById("scanStatus").innerHTML = document.getElementById('minerTable').rows.length + " Miners"
                document.getElementById("cancelButton").style = "display:none;"
                enableCheckboxes();
            } else if (event.data == "Cancelled") {
                document.getElementById("scanButton").innerHTML = "Scan"
                document.getElementById("scanButton").disabled = false
                document.getElementById("selectAllCheckbox").disabled = false
                document.getElementById("scanStatus").innerHTML = document.getElementById('minerTable').rows.length + " Miners"
                document.getElementById("cancelButton").style = "display:none;"
                enableCheckboxes();
            } else {
                var miner_data = JSON.parse(event.data)
                var miners = document.getElementById('minerTable')
                miners.innerHTML = ""
                miner_data.forEach(function(miner) {
                    var tr = document.createElement('tr')
                    tr.id = miner["ip"]

                    var checkbox_td = document.createElement('td')
                    checkbox_td.innerHTML = '<input type="checkbox" class="select-item checkbox" name="minerCheckboxes" value="' + miner["ip"] + '" />'
                    checkbox_td.className = "active"

                    var ip_td = document.createElement('td')
                    ip_td.innerHTML = miner["ip"]

                    var model_td = document.createElement('td')
                    model_td.innerHTML = miner["model"]

                    var empty_td = document.createElement('td')

                    tr.append(checkbox_td)
                    tr.append(ip_td)
                    tr.append(model_td)
                    tr.append(empty_td)

                    miners.append(tr)
                });
                disableCheckboxes();
            };
        };
        function scanMiners(event) {
            var input = document.getElementById("messageText")
            var miners = document.getElementById('minerTable')
            miners.innerHTML = ""
            document.getElementById("scanStatus").innerHTML = "Scanning..."
            document.getElementById("scanButton").innerHTML = "Scanning..."
            document.getElementById("scanButton").disabled = true
            document.getElementById("selectAllCheckbox").disabled = true
            document.getElementById("cancelButton").style = ""
            if (input.value != "") {
                ws.send(input.value)
                event.preventDefault()
            } else {
                ws.send("192.168.1.0/24")
            };
        };
        function cancelScan(event) {
            document.getElementById("scanStatus").innerHTML = "Canceling..."
            document.getElementById("scanButton").innerHTML = "Canceling..."
            document.getElementById("cancelButton").style = "display:none;"
            ws.send("-Cancel-")
        };
        function addMiners(event) {
            var checkedBoxes = document.querySelectorAll('input[name=minerCheckboxes]:checked');
            if (checkedBoxes.length != 0) {
                var minerList = [];
                for (i = 0; i< checkedBoxes.length; i++) {
                    minerList.push(checkedBoxes[i].defaultValue);
                }
                post("{{url_for('add_miners_scan')}}", {miners: minerList})
                for (i = 0; i< minerList.length; i++) {
                    var tr_to_remove = document.getElementById(minerList[i])
                    tr_to_remove.remove()
                }
                document.getElementById("scanStatus").innerHTML = document.getElementById('minerTable').rows.length + " Miners"
            };
        };
        function disableCheckboxes() {
            var checkBoxes = document.querySelectorAll('input[name=minerCheckboxes]');
            for (i = 0; i< checkBoxes.length; i++) {
                checkBoxes[i].disabled = true
            };
        };
        function enableCheckboxes() {
            var checkBoxes = document.querySelectorAll('input[name=minerCheckboxes]');
            for (i = 0; i< checkBoxes.length; i++) {
                checkBoxes[i].disabled = false
            };
        };
    </script>

{% endblock content %}