{% 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.1/24" aria-describedby="scan-ip">
          <button class="btn btn-primary" onclick="sendMessage()" type="button">Scan</button>
        </div>
    </form>
</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"></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>
        var ws = new WebSocket("ws://localhost:80/scan/ws");
        ws.onmessage = function(event) {
            if (event.data == "Done") {
                document.getElementById("selectAllCheckbox").disabled = false
                document.getElementById("scanStatus").innerHTML = document.getElementById('minerTable').rows.length + " Miners"
            } else {
                document.getElementById("selectAllCheckbox").disabled = true
                document.getElementById("scanStatus").innerHTML = "Scanning..."
            };
            var miner_data = JSON.parse(event.data)
            var miners = document.getElementById('minerTable')
            miners.innerHTML = ""
            miner_data.forEach(function(miner) {
                console.log(miner)
                var tr = document.createElement('tr')

                var checkbox_td = document.createElement('td')
                checkbox_td.innerHTML = '<input type="checkbox" class="select-item checkbox" name="select-item" 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)
            });
        };
        function sendMessage(event) {
            var input = document.getElementById("messageText")
            document.getElementById("scanStatus").innerHTML = "Scanning..."
            ws.send(input.value)
            input.value = ''
            event.preventDefault()
        }
    </script>

{% endblock content %}