97 lines
3.8 KiB
HTML
97 lines
3.8 KiB
HTML
{% 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 %}
|