added the scan page to scan for miners on a subnet

tools/web_monitor/templates/navbar.html

@@ -107,11 +107,11 @@
     </nav>
 
 
-    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
+    <div class="col-md-9 ms-sm-auto col-lg-10 px-md-4 ps-4">
     {% block content %}
 
     {% endblock content %}
-    </main>
+    </div>
   </div>
 </div>
 </body>

tools/web_monitor/templates/scan.html

@@ -0,0 +1,96 @@
+{% 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">
+          <span class="input-group-text"><button>Scan</button></span>
+        </div>
+    </form>
+</div>
+
+<div class="row w-100">
+    <table class="table table-striped table-responsive" style="max-height:300px;">
+        <thead class="table-dark">
+            <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 %}