Files
pyasic/tools/web_monitor/templates/scan.html
2022-02-28 15:15:57 -07:00

125 lines
5.4 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.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" 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>
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;"
} 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;"
} else {
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 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-")
}
</script>
{% endblock content %}