mirror of
https://github.com/SpacehuhnTech/esp8266_deauther.git
synced 2025-12-16 11:39:58 +01:00
Visual improvements for web interface
This commit is contained in:
Spacehuhn
@@ -1,13 +1,15 @@
|
||||
/* This software is licensed under the MIT License: https://github.com/spacehuhntech/esp8266_deauther */
|
||||
|
||||
var nameJson = [];
|
||||
var scanJson = {aps:[],stations:[]};
|
||||
|
||||
function drawScan(){
|
||||
var scanJson = { aps: [], stations: [] };
|
||||
|
||||
function drawScan() {
|
||||
var html;
|
||||
var selected;
|
||||
var width;
|
||||
var color;
|
||||
var macVendor;
|
||||
|
||||
|
||||
// Access Points
|
||||
getE("apNum").innerHTML = scanJson.aps.length;
|
||||
html = "<tr>"
|
||||
@@ -23,34 +25,34 @@ function drawScan(){
|
||||
+ "<th class='selectColumn'></th>"
|
||||
+ "<th class='remove'></th>"
|
||||
+ "</tr>";
|
||||
|
||||
for(var i=0;i<scanJson.aps.length;i++){
|
||||
selected = scanJson.aps[i][scanJson.aps[i].length-1];
|
||||
|
||||
for (var i = 0; i < scanJson.aps.length; i++) {
|
||||
selected = scanJson.aps[i][scanJson.aps[i].length - 1];
|
||||
width = parseInt(scanJson.aps[i][3]) + 130;
|
||||
|
||||
if(width < 50) color = "meter_red";
|
||||
else if(width < 70) color = "meter_orange";
|
||||
if (width < 50) color = "meter_red";
|
||||
else if (width < 70) color = "meter_orange";
|
||||
else color = "meter_green";
|
||||
|
||||
|
||||
html += (selected ? "<tr class='selected'>" : "<tr>")
|
||||
+ "<td class='id'>"+i+"</td>" // ID
|
||||
+ "<td class='ssid'>"+esc(scanJson.aps[i][0])+"</td>" // SSID
|
||||
+ "<td class='name'>"+(scanJson.aps[i][1].length > 0 ? esc(scanJson.aps[i][1]) : "<button onclick='add(0,"+i+")'>"+lang("add")+"</button>")+"</td>" // Name
|
||||
+ "<td class='ch'>"+esc(scanJson.aps[i][2])+"</td>" // Ch
|
||||
+ "<td class='id'>" + i + "</td>" // ID
|
||||
+ "<td class='ssid'>" + esc(scanJson.aps[i][0]) + "</td>" // SSID
|
||||
+ "<td class='name'>" + (scanJson.aps[i][1].length > 0 ? esc(scanJson.aps[i][1]) : "<button onclick='add(0," + i + ")'>" + lang("add") + "</button>") + "</td>" // Name
|
||||
+ "<td class='ch'>" + esc(scanJson.aps[i][2]) + "</td>" // Ch
|
||||
// RSSI
|
||||
+ "<td class='rssi'><div class='meter_background'> <div class='meter_forground "+color+"' style='width: "+width+"%;'><div class='meter_value'>" + scanJson.aps[i][3] + "</div></div> </div></td>"
|
||||
+ "<td class='enc'>"+esc(scanJson.aps[i][4])+"</td>" // ENC
|
||||
+ "<td class='lock'>"+(scanJson.aps[i][4] == "-" ? "":"🔒")+"</td>" // Lock Emoji
|
||||
+ "<td class='mac'>"+esc(scanJson.aps[i][5])+"</td>" // MAC
|
||||
+ "<td class='vendor'>"+esc(scanJson.aps[i][6])+"</td>" // Vendor
|
||||
+ "<td class='rssi'><div class='meter_background'> <div class='meter_forground " + color + "' style='width: " + width + "%;'><div class='meter_value'>" + scanJson.aps[i][3] + "</div></div> </div></td>"
|
||||
+ "<td class='enc'>" + esc(scanJson.aps[i][4]) + "</td>" // ENC
|
||||
+ "<td class='lock'>" + (scanJson.aps[i][4] == "-" ? "" : "🔒") + "</td>" // Lock Emoji
|
||||
+ "<td class='mac'>" + esc(scanJson.aps[i][5]) + "</td>" // MAC
|
||||
+ "<td class='vendor'>" + esc(scanJson.aps[i][6]) + "</td>" // Vendor
|
||||
// Select
|
||||
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(0,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>"
|
||||
+ "<td class='remove'><button class='red' onclick='remove(0,"+i+")'>X</button></td>" // Remove
|
||||
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' " + (selected ? "checked" : "") + " onclick='selectRow(0," + i + "," + (selected ? "false" : "true") + ")'><span class='checkmark'></span></label></td>"
|
||||
+ "<td class='remove'><button class='red' onclick='remove(0," + i + ")'>X</button></td>" // Remove
|
||||
+ "</tr>";
|
||||
}
|
||||
|
||||
|
||||
getE("apTable").innerHTML = html;
|
||||
|
||||
|
||||
// Stations
|
||||
getE("stNum").innerHTML = scanJson.stations.length;
|
||||
html = "<tr>"
|
||||
@@ -65,35 +67,35 @@ function drawScan(){
|
||||
+ "<th class='selectColumn'></th>"
|
||||
+ "<th class='remove'></th>"
|
||||
+ "</tr>";
|
||||
|
||||
for(var i=0;i<scanJson.stations.length;i++){
|
||||
selected = scanJson.stations[i][scanJson.stations[i].length-1];
|
||||
|
||||
for (var i = 0; i < scanJson.stations.length; i++) {
|
||||
selected = scanJson.stations[i][scanJson.stations[i].length - 1];
|
||||
ap = "";
|
||||
if(scanJson.stations[i][5] >= 0)
|
||||
if (scanJson.stations[i][5] >= 0)
|
||||
ap = esc(scanJson.aps[scanJson.stations[i][5]][0]);
|
||||
|
||||
|
||||
html += (selected ? "<tr class='selected'>" : "<tr>")
|
||||
+ "<td class='id'>"+i+"</td>" // ID
|
||||
+ "<td class='vendor'>"+esc(scanJson.stations[i][3])+"</td>" // Vendor
|
||||
+ "<td class='mac'>"+esc(scanJson.stations[i][0])+"</td>" // MAC
|
||||
+ "<td class='ch'>"+esc(scanJson.stations[i][1])+"</td>" // Ch
|
||||
+ "<td class='name'>"+(scanJson.stations[i][2].length > 0 ? esc(scanJson.stations[i][2]) : "<button onclick='add(1,"+i+")'>"+lang("add")+"</button>")+"</td>" // Name
|
||||
+ "<td class='pkts'>"+esc(scanJson.stations[i][4])+"</td>" // Pkts
|
||||
+ "<td class='ap'>"+ap+"</td>" // AP
|
||||
+ "<td class='lastseen'>"+esc(scanJson.stations[i][6])+"</td>" // Last seen
|
||||
+ "<td class='id'>" + i + "</td>" // ID
|
||||
+ "<td class='vendor'>" + esc(scanJson.stations[i][3]) + "</td>" // Vendor
|
||||
+ "<td class='mac'>" + esc(scanJson.stations[i][0]) + "</td>" // MAC
|
||||
+ "<td class='ch'>" + esc(scanJson.stations[i][1]) + "</td>" // Ch
|
||||
+ "<td class='name'>" + (scanJson.stations[i][2].length > 0 ? esc(scanJson.stations[i][2]) : "<button onclick='add(1," + i + ")'>" + lang("add") + "</button>") + "</td>" // Name
|
||||
+ "<td class='pkts'>" + esc(scanJson.stations[i][4]) + "</td>" // Pkts
|
||||
+ "<td class='ap'>" + ap + "</td>" // AP
|
||||
+ "<td class='lastseen'>" + esc(scanJson.stations[i][6]) + "</td>" // Last seen
|
||||
// Select
|
||||
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(1,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>"
|
||||
+ "<td class='remove'><button class='red' onclick='remove(1,"+i+")'>X</button></td>" // Remove
|
||||
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' " + (selected ? "checked" : "") + " onclick='selectRow(1," + i + "," + (selected ? "false" : "true") + ")'><span class='checkmark'></span></label></td>"
|
||||
+ "<td class='remove'><button class='red' onclick='remove(1," + i + ")'>X</button></td>" // Remove
|
||||
+ "</tr>";
|
||||
}
|
||||
|
||||
|
||||
getE("stTable").innerHTML = html;
|
||||
}
|
||||
|
||||
function drawNames(){
|
||||
function drawNames() {
|
||||
var html;
|
||||
var selected;
|
||||
|
||||
|
||||
// Names
|
||||
getE("nNum").innerHTML = nameJson.length;
|
||||
html = "<tr>"
|
||||
@@ -107,32 +109,32 @@ function drawNames(){
|
||||
+ "<th class='selectColumn'></th>"
|
||||
+ "<th class='remove'></th>"
|
||||
+ "</tr>";
|
||||
|
||||
for(var i=0;i<nameJson.length;i++){
|
||||
selected = nameJson[i][nameJson[i].length-1];
|
||||
|
||||
|
||||
for (var i = 0; i < nameJson.length; i++) {
|
||||
selected = nameJson[i][nameJson[i].length - 1];
|
||||
|
||||
html += (selected ? "<tr class='selected'>" : "<tr>")
|
||||
+ "<td class='id'>"+i+"</td>" // ID
|
||||
+ "<td class='mac' contentEditable='true' id='name_"+i+"_mac'>"+esc(nameJson[i][0])+"</td>" // MAC
|
||||
+ "<td class='vendor'>"+esc(nameJson[i][1])+"</td>" // Vendor
|
||||
+ "<td class='name' contentEditable='true' id='name_"+i+"_name'>"+esc(nameJson[i][2].substring(0,16))+"</td>" // Name
|
||||
+ "<td class='ap' contentEditable='true' id='name_"+i+"_apbssid'>"+esc(nameJson[i][3])+"</td>" // AP-BSSID
|
||||
+ "<td class='ch' contentEditable='true' id='name_"+i+"_ch'>"+esc(nameJson[i][4])+"</td>" // Ch
|
||||
+ "<td class='save'><button class='green' onclick='save("+i+")'>"+lang("save")+"</button></td>" // Save
|
||||
+ "<td class='id'>" + i + "</td>" // ID
|
||||
+ "<td class='mac' contentEditable='true' id='name_" + i + "_mac'>" + esc(nameJson[i][0]) + "</td>" // MAC
|
||||
+ "<td class='vendor'>" + esc(nameJson[i][1]) + "</td>" // Vendor
|
||||
+ "<td class='name' contentEditable='true' id='name_" + i + "_name'>" + esc(nameJson[i][2].substring(0, 16)) + "</td>" // Name
|
||||
+ "<td class='ap' contentEditable='true' id='name_" + i + "_apbssid'>" + esc(nameJson[i][3]) + "</td>" // AP-BSSID
|
||||
+ "<td class='ch' contentEditable='true' id='name_" + i + "_ch'>" + esc(nameJson[i][4]) + "</td>" // Ch
|
||||
+ "<td class='save'><button class='green' onclick='save(" + i + ")'>" + lang("save") + "</button></td>" // Save
|
||||
// Select
|
||||
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(2,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>"
|
||||
+ "<td class='remove'><button class='red' onclick='remove(2,"+i+")'>X</button></td>" // Remove
|
||||
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' " + (selected ? "checked" : "") + " onclick='selectRow(2," + i + "," + (selected ? "false" : "true") + ")'><span class='checkmark'></span></label></td>"
|
||||
+ "<td class='remove'><button class='red' onclick='remove(2," + i + ")'>X</button></td>" // Remove
|
||||
+ "</tr>";
|
||||
}
|
||||
|
||||
|
||||
getE("nTable").innerHTML = html;
|
||||
}
|
||||
|
||||
|
||||
var duts;
|
||||
var elxtime;
|
||||
function scan(type){
|
||||
function scan(type) {
|
||||
getE('RButton').disabled = true;
|
||||
switch(type){
|
||||
switch (type) {
|
||||
case 0:
|
||||
getE('scanOne').disabled = true;
|
||||
getE('scanZero').style.visibility = 'hidden';
|
||||
@@ -141,17 +143,17 @@ function scan(type){
|
||||
case 1:
|
||||
getE('scanZero').disabled = true;
|
||||
getE('scanOne').style.visibility = 'hidden';
|
||||
elxtime = parseInt(getE("scanTime").value+"000") + 1500;
|
||||
elxtime = parseInt(getE("scanTime").value + "000") + 1500;
|
||||
}
|
||||
var cmdStr = "scan "
|
||||
+ (type == 0 ? "aps " : "stations -t "+getE("scanTime").value+"s")
|
||||
+ " -ch "+getE("ch").options[getE("ch").selectedIndex].value;
|
||||
getFile("run?cmd="+cmdStr);
|
||||
+ (type == 0 ? "aps " : "stations -t " + getE("scanTime").value + "s")
|
||||
+ " -ch " + getE("ch").options[getE("ch").selectedIndex].value;
|
||||
getFile("run?cmd=" + cmdStr);
|
||||
duts = parseInt(type);
|
||||
setTimeout(buttonFunc, elxtime)
|
||||
}
|
||||
|
||||
function buttonFunc(){
|
||||
function buttonFunc() {
|
||||
switch (duts) {
|
||||
case 0:
|
||||
getE('scanZero').style.visibility = 'visible';
|
||||
@@ -164,128 +166,128 @@ function buttonFunc(){
|
||||
getE('RButton').disabled = false;
|
||||
}
|
||||
|
||||
function load(){
|
||||
function load() {
|
||||
// APs and Stations
|
||||
getFile("run?cmd=save scan", function(){
|
||||
getFile("scan.json",function(res){
|
||||
getFile("run?cmd=save scan", function () {
|
||||
getFile("scan.json", function (res) {
|
||||
scanJson = JSON.parse(res);
|
||||
drawScan();
|
||||
});
|
||||
});
|
||||
// Names
|
||||
getFile("run?cmd=save names", function(){
|
||||
getFile("names.json",function(res){
|
||||
getFile("run?cmd=save names", function () {
|
||||
getFile("names.json", function (res) {
|
||||
nameJson = JSON.parse(res);
|
||||
drawNames();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function selectRow(type,id,selected){
|
||||
switch(type){
|
||||
function selectRow(type, id, selected) {
|
||||
switch (type) {
|
||||
case 0:
|
||||
scanJson.aps[id][7] = selected;
|
||||
drawScan();
|
||||
getFile("run?cmd="+(selected ? "":"de")+"select ap "+id);
|
||||
getFile("run?cmd=" + (selected ? "" : "de") + "select ap " + id);
|
||||
break;
|
||||
case 1:
|
||||
scanJson.stations[id][7] = selected;
|
||||
drawScan();
|
||||
getFile("run?cmd="+(selected ? "":"de")+"select station "+id);
|
||||
getFile("run?cmd=" + (selected ? "" : "de") + "select station " + id);
|
||||
break;
|
||||
case 2:
|
||||
save(id);
|
||||
nameJson[id][5] = selected;
|
||||
drawNames();
|
||||
getFile("run?cmd="+(selected ? "":"de")+"select name "+id);
|
||||
getFile("run?cmd=" + (selected ? "" : "de") + "select name " + id);
|
||||
}
|
||||
}
|
||||
|
||||
function remove(type,id){
|
||||
switch(type){
|
||||
function remove(type, id) {
|
||||
switch (type) {
|
||||
case 0:
|
||||
scanJson.aps.splice(id, 1);
|
||||
drawScan();
|
||||
getFile("run?cmd=remove ap "+id);
|
||||
getFile("run?cmd=remove ap " + id);
|
||||
break;
|
||||
case 1:
|
||||
scanJson.stations.splice(id, 1);
|
||||
drawScan();
|
||||
getFile("run?cmd=remove station "+id);
|
||||
getFile("run?cmd=remove station " + id);
|
||||
break;
|
||||
case 2:
|
||||
nameJson.splice(id, 1);
|
||||
drawNames();
|
||||
getFile("run?cmd=remove name "+id);
|
||||
getFile("run?cmd=remove name " + id);
|
||||
}
|
||||
}
|
||||
|
||||
function save(id){
|
||||
var mac = getE("name_"+id+"_mac").innerHTML.replace("<br>","");
|
||||
var name = getE("name_"+id+"_name").innerHTML.replace("<br>","");
|
||||
var apbssid = getE("name_"+id+"_apbssid").innerHTML.replace("<br>","");
|
||||
var ch = getE("name_"+id+"_ch").innerHTML.replace("<br>","");
|
||||
function save(id) {
|
||||
var mac = getE("name_" + id + "_mac").innerHTML.replace("<br>", "");
|
||||
var name = getE("name_" + id + "_name").innerHTML.replace("<br>", "");
|
||||
var apbssid = getE("name_" + id + "_apbssid").innerHTML.replace("<br>", "");
|
||||
var ch = getE("name_" + id + "_ch").innerHTML.replace("<br>", "");
|
||||
var changed = mac != nameJson[id][0] || name != nameJson[id][2] || apbssid != nameJson[id][3] || ch != nameJson[id][4];
|
||||
if(changed){
|
||||
if (changed) {
|
||||
nameJson[id][0] = mac;
|
||||
nameJson[id][2] = name;
|
||||
nameJson[id][3] = apbssid;
|
||||
nameJson[id][4] = ch;
|
||||
|
||||
if(nameJson[id][0].length != 17){
|
||||
|
||||
if (nameJson[id][0].length != 17) {
|
||||
showMessage("ERROR: MAC invalid");
|
||||
return;
|
||||
}
|
||||
|
||||
getFile("run?cmd=replace name "+id+" -n \""+nameJson[id][2]+"\" -m \""+nameJson[id][0]+"\" -ch "+nameJson[id][4]+" -b \""+nameJson[id][3]+"\" "+(nameJson[id][5] ? "-s" : ""));
|
||||
|
||||
|
||||
getFile("run?cmd=replace name " + id + " -n \"" + nameJson[id][2] + "\" -m \"" + nameJson[id][0] + "\" -ch " + nameJson[id][4] + " -b \"" + nameJson[id][3] + "\" " + (nameJson[id][5] ? "-s" : ""));
|
||||
|
||||
drawNames();
|
||||
}
|
||||
}
|
||||
|
||||
function add(type,id){
|
||||
if(nameJson.length >= 25){
|
||||
function add(type, id) {
|
||||
if (nameJson.length >= 25) {
|
||||
showMessage("Device Name List is full!");
|
||||
return;
|
||||
}
|
||||
|
||||
switch(type){
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 0:
|
||||
getFile("run?cmd=add name \""+scanJson.aps[id][0]+"\" -ap "+id);
|
||||
getFile("run?cmd=add name \"" + scanJson.aps[id][0] + "\" -ap " + id);
|
||||
scanJson.aps[id][1] = scanJson.aps[id][0]; // name = SSID
|
||||
nameJson.push([scanJson.aps[id][5],scanJson.aps[id][6],scanJson.aps[id][0],"",scanJson.aps[id][2],false]);
|
||||
nameJson.push([scanJson.aps[id][5], scanJson.aps[id][6], scanJson.aps[id][0], "", scanJson.aps[id][2], false]);
|
||||
drawScan();
|
||||
break;
|
||||
case 1:
|
||||
getFile("run?cmd=add name \""+scanJson.stations[id][0]+"\" station "+id);
|
||||
scanJson.stations[id][2] = "device_"+nameJson.length; // name = device_
|
||||
nameJson.push([scanJson.stations[id][0],scanJson.stations[id][3],"device_"+nameJson.length,scanJson.aps[scanJson.stations[id][5]][5],scanJson.stations[id][1],false]);
|
||||
getFile("run?cmd=add name \"" + scanJson.stations[id][0] + "\" station " + id);
|
||||
scanJson.stations[id][2] = "device_" + nameJson.length; // name = device_
|
||||
nameJson.push([scanJson.stations[id][0], scanJson.stations[id][3], "device_" + nameJson.length, scanJson.aps[scanJson.stations[id][5]][5], scanJson.stations[id][1], false]);
|
||||
drawScan();
|
||||
break;
|
||||
case 2:
|
||||
getFile("run?cmd=add name device_"+nameJson.length+" -m 00:00:00:00:00:00 -ch 1");
|
||||
nameJson.push(["00:00:00:00:00:00","","device_"+nameJson.length,"",1,false]);
|
||||
getFile("run?cmd=add name device_" + nameJson.length + " -m 00:00:00:00:00:00 -ch 1");
|
||||
nameJson.push(["00:00:00:00:00:00", "", "device_" + nameJson.length, "", 1, false]);
|
||||
drawNames();
|
||||
}
|
||||
|
||||
|
||||
drawNames();
|
||||
}
|
||||
|
||||
function selectAll(type,select){
|
||||
switch(type){
|
||||
function selectAll(type, select) {
|
||||
switch (type) {
|
||||
case 0:
|
||||
getFile("run?cmd="+(select ? "":"de")+"select aps");
|
||||
for(var i=0;i<scanJson.aps.length;i++) scanJson.aps[i][7] = select;
|
||||
getFile("run?cmd=" + (select ? "" : "de") + "select aps");
|
||||
for (var i = 0; i < scanJson.aps.length; i++) scanJson.aps[i][7] = select;
|
||||
drawScan();
|
||||
break;
|
||||
case 1:
|
||||
getFile("run?cmd="+(select ? "":"de")+"select stations");
|
||||
for(var i=0;i<scanJson.stations.length;i++) scanJson.stations[i][7] = select;
|
||||
getFile("run?cmd=" + (select ? "" : "de") + "select stations");
|
||||
for (var i = 0; i < scanJson.stations.length; i++) scanJson.stations[i][7] = select;
|
||||
drawScan();
|
||||
break;
|
||||
case 2:
|
||||
getFile("run?cmd="+(select ? "":"de")+"select names");
|
||||
for(var i=0;i<nameJson.length;i++) nameJson[i][5] = select;
|
||||
getFile("run?cmd=" + (select ? "" : "de") + "select names");
|
||||
for (var i = 0; i < nameJson.length; i++) nameJson[i][5] = select;
|
||||
drawNames();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user