chore(scan): refactor

This commit is contained in:
Jan Rochalski
2019-11-12 15:16:40 +01:00
parent db3b18dd04
commit 148552a10a

View File

@@ -6,260 +6,302 @@ let scanJson = {
const drawScan = () => { const drawScan = () => {
let html; let html;
let selected;
let width;
let color;
let macVendor;
// Access Points // Access Points
getE("apNum").innerHTML = scanJson.aps.length; getE("apNum").innerHTML = scanJson.aps.length;
html = "<tr>" html = `
+ "<th class='id'></th>" <tr>
+ "<th class='ssid'>SSID</th>" <th class="id"></th>
+ "<th class='name'>Name</th>" <th class="ssid">SSID</th>
+ "<th class='ch'>Ch</th>" <th class="name">Name</th>
+ "<th class='rssi'>RSSI</th>" <th class="ch">Ch</th>
+ "<th class='enc'>Enc</th>" <th class="rssi">RSSI</th>
+ "<th class='lock'></th>" <th class="enc">Enc</th>
+ "<th class='mac'>MAC</th>" <th class="lock"></th>
+ "<th class='vendor'>Vendor</th>" <th class="mac">MAC</th>
+ "<th class='selectColumn'></th>" <th class="vendor">Vendor</th>
+ "<th class='remove'></th>" <th class="selectColumn"></th>
+ "</tr>"; <th class="remove"></th>
</tr>
`
for(var i=0;i<scanJson.aps.length;i++){ scanJson.aps.forEach((item, index) => {
selected = scanJson.aps[i][scanJson.aps[i].length-1]; const selected = item[item.length - 1];
width = parseInt(scanJson.aps[i][3]) + 130; const width = parseInt(item[3]) + 130;
let color = '';
if (width < 50) color = "meter_red"; if (width < 50) color = "meter_red";
else if (width < 70) color = "meter_orange"; else if (width < 70) color = "meter_orange";
else color = "meter_green"; else color = "meter_green";
html += (selected ? "<tr class='selected'>" : "<tr>") html += `
+ "<td class='id'>"+i+"</td>" // ID <tr ${selected ? "class='selected'>" : ""}>
+ "<td class='ssid'>"+esc(scanJson.aps[i][0])+"</td>" // SSID <td class="id">${index}</td>
+ "<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="ssid">${esc(item[0])}</td>
+ "<td class='ch'>"+esc(scanJson.aps[i][2])+"</td>" // Ch <td class="name">
// RSSI ${item[1].length > 0 ? esc(item[1]) : `<button onclick="add(0, ${i})">lang("add")</button>`}
+ "<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>
+ "<td class='enc'>"+esc(scanJson.aps[i][4])+"</td>" // ENC <td class="ch">${esc(item[2])}</td>"
+ "<td class='lock'>"+(scanJson.aps[i][4] == "-" ? "":"&#x1f512;")+"</td>" // Lock Emoji <td class="rssi">
+ "<td class='mac'>"+esc(scanJson.aps[i][5])+"</td>" // MAC <div class="meter_background">
+ "<td class='vendor'>"+esc(scanJson.aps[i][6])+"</td>" // Vendor <div class="meter_forground ${color}" style="width: ${width}%;">
// Select <div class="meter_value">
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(0,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>" item[3]
+ "<td class='remove'><button class='red' onclick='remove(0,"+i+")'>X</button></td>" // Remove </div>
+ "</tr>"; </div>
} </div>
</td>
<td class="enc">${esc(item[4])}</td>
<td class="lock">${item[4] === "-" ? "" : "&#x1f512;"}</td>
<td class="mac">${esc(item[5])}</td>
<td class="vendor">${esc(item[6])}</td>
<td class="selectColumn">
<label class="checkBoxContainer">
<input type="checkbox ${selected ? "checked" : ""}" onclick="selectRow(0, ${i}, ${selected})">
<span class="checkmark"></span>
</label>
</td>
<td class="remove">
<button class='red' onclick="remove(0, ${i})">X</button>
</td>
</tr>
`;
})
getE("apTable").innerHTML = html; getE("apTable").innerHTML = html;
// Stations // Stations
getE("stNum").innerHTML = scanJson.stations.length; getE("stNum").innerHTML = scanJson.stations.length;
html = "<tr>"
+ "<th class='id'></th>"
+ "<th class='vendor'>Vendor</th>"
+ "<th class='mac'>MAC</th>"
+ "<th class='ch'>Ch</th>"
+ "<th class='name'>Name</th>"
+ "<th class='pkts'>Pkts</th>"
+ "<th class='ap'>AP</th>"
+ "<th class='lastseen'>Last seen</th>"
+ "<th class='selectColumn'></th>"
+ "<th class='remove'></th>"
+ "</tr>";
for(var i=0;i<scanJson.stations.length;i++){ html = `
selected = scanJson.stations[i][scanJson.stations[i].length-1]; <tr>
ap = ""; <th class="id"></th>
if(scanJson.stations[i][5] >= 0) <th class="vendor">Vendor</th>
ap = esc(scanJson.aps[scanJson.stations[i][5]][0]); <th class="mac">MAC</th>
<th class="ch">Ch</th>
<th class="name">Name</th>
<th class="pkts">Pkts</th>
<th class="ap">AP</th>
<th class="lastseen">Last seen</th>
<th class="selectColumn"></th>
<th class="remove"></th>
</tr>
`;
html += (selected ? "<tr class='selected'>" : "<tr>") scanJson.stations.forEach((item, index) => {
+ "<td class='id'>"+i+"</td>" // ID const selected = item[item.length - 1];
+ "<td class='vendor'>"+esc(scanJson.stations[i][3])+"</td>" // Vendor const ap = item[5] >= 0 ? esc(scanJson.aps[item[5]][0]) : "";
+ "<td class='mac'>"+esc(scanJson.stations[i][0])+"</td>" // MAC
+ "<td class='ch'>"+esc(scanJson.stations[i][1])+"</td>" // Ch html += `
+ "<td class='name'>"+(scanJson.stations[i][2].length > 0 ? esc(scanJson.stations[i][2]) : "<button onclick='add(1,"+i+")'>"+lang("add")+"</button>")+"</td>" // Name <tr ${selected ? "class='selected'>" : ""}>
+ "<td class='pkts'>"+esc(scanJson.stations[i][4])+"</td>" // Pkts <td class="id">${i}</td>
+ "<td class='ap'>"+ap+"</td>" // AP <td class="vendor">${esc(item[3])}</td>
+ "<td class='lastseen'>"+esc(scanJson.stations[i][6])+"</td>" // Last seen <td class="mac">${esc(item[0])}</td>
// Select <td class="ch">${esc(item[1])}</td>
+ "<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="name">
+ "<td class='remove'><button class='red' onclick='remove(1,"+i+")'>X</button></td>" // Remove ${item[2].length > 0 ? esc(item[2]) : `<button onclick="add(1, ${index})">lang("add")</button>`}
+ "</tr>"; </td>
} <td class="pkts">${esc(item[4])}</td>
<td class="ap">${ap}</td>
<td class="lastseen">${esc(item[6])}</td>
<td class="selectColumn">
<label class="checkBoxContainer">
<input type="checkbox" ${selected ? "checked" : ""} onclick="selectRow(1, ${index}, ${selected})">
<span class="checkmark"></span>
</label>
</td>
<td class="remove">
<button class="red" onclick="remove(1, ${index})">X</button>
</td>
</tr>
`;
})
getE("stTable").innerHTML = html; getE("stTable").innerHTML = html;
} }
function drawNames(){ const drawNames = () => {
var html;
var selected;
// Names
getE("nNum").innerHTML = nameJson.length; getE("nNum").innerHTML = nameJson.length;
html = "<tr>" let html = `
+ "<th class='id'></th>" <tr>
+ "<th class='mac'>MAC</th>" <th class="id"></th>
+ "<th class='vendor'>Vendor</th>" <th class="mac">MAC</th>
+ "<th class='name'>Name</th>" <th class="vendor">Vendor</th>
+ "<th class='ap'>AP-BSSID</th>" <th class="name">Name</th>
+ "<th class='ch'>Ch</th>" <th class="ap">AP-BSSID</th>
+ "<th class='save'></th>" <th class="ch">Ch</th>
+ "<th class='selectColumn'></th>" <th class="save"></th>
+ "<th class='remove'></th>" <th class="selectColumn"></th>
+ "</tr>"; <th class="remove"></th>
</tr>`
for(var i=0;i<nameJson.length;i++){ nameJson.forEach((item, index) => {
selected = nameJson[i][nameJson[i].length-1]; const selected = item[item.length - 1];
html += (selected ? "<tr class='selected'>" : "<tr>") html += `
+ "<td class='id'>"+i+"</td>" // ID <tr ${selected ? "class='selected'>" : ""}>
+ "<td class='mac' contentEditable='true' id='name_"+i+"_mac'>"+esc(nameJson[i][0])+"</td>" // MAC <td class="id">${index}</td>
+ "<td class='vendor'>"+esc(nameJson[i][1])+"</td>" // Vendor <td class="mac" contentEditable="true" id="name_${index}_mac">${esc(item[0])}</td>
+ "<td class='name' contentEditable='true' id='name_"+i+"_name'>"+esc(nameJson[i][2].substring(0,16))+"</td>" // Name <td class="vendor">${esc(item[1])}</td>
+ "<td class='ap' contentEditable='true' id='name_"+i+"_apbssid'>"+esc(nameJson[i][3])+"</td>" // AP-BSSID <td class="name" contentEditable="true" id="name_${index}_name">${esc(item[2].substring(0,16))}</td>
+ "<td class='ch' contentEditable='true' id='name_"+i+"_ch'>"+esc(nameJson[i][4])+"</td>" // Ch <td class="ap" contentEditable="true" id="name_${index}_apbssid">${esc(item[3])}</td>
+ "<td class='save'><button class='green' onclick='save("+i+")'>"+lang("save")+"</button></td>" // Save <td class="ch" contentEditable="true" id="name_${index}_ch">${esc(item[4])}</td>
// Select <td class="save">
+ "<td class='selectColumn'><label class='checkBoxContainer'><input type='checkbox' "+(selected ? "checked" : "")+" onclick='selectRow(2,"+i+","+(selected ? "false" : "true")+")'><span class='checkmark'></span></label></td>" <button class="green" onclick="save(${index})">${lang("save")}</button>
+ "<td class='remove'><button class='red' onclick='remove(2,"+i+")'>X</button></td>" // Remove </td>
+ "</tr>"; <td class="selectColumn">
} <label class="checkBoxContainer">
<input type="checkbox" ${selected ? "checked" : ""} onclick="selectRow(2, ${index}, ${selected})">
<span class="checkmark"></span>
</label>
</td>
<td class="remove">
<button class="red" onclick="remove(2, ${index})">X</button>
</td>
</tr>
`;
})
getE("nTable").innerHTML = html; getE("nTable").innerHTML = html;
} }
function scan(type){ const scan = type => {
var cmdStr = "scan " getFile(`run?cmd=scan ${type == 0 ? "aps" : "stations -t"} ${getE("scanTime").value}s -ch ${getE("ch").options[getE("ch").selectedIndex].value}`);
+ (type == 0 ? "aps " : "stations -t "+getE("scanTime").value+"s")
+ " -ch "+getE("ch").options[getE("ch").selectedIndex].value;
getFile("run?cmd="+cmdStr);
} }
function load(){ const load = () => {
// APs and Stations // APs and Stations
getFile("run?cmd=save scan", function(){ getFile("run?cmd=save scan", () =>
getFile("scan.json",function(res){ getFile("scan.json", res => {
scanJson = JSON.parse(res); scanJson = JSON.parse(res);
drawScan(); drawScan();
}); })
}); );
// Names // Names
getFile("run?cmd=save names", function(){ getFile("run?cmd=save names", () =>
getFile("names.json",function(res){ getFile("names.json", res => {
nameJson = JSON.parse(res); nameJson = JSON.parse(res);
drawNames(); drawNames();
}); })
}); );
} }
function selectRow(type,id,selected){ const selectRow = (type, id, selected) => {
switch(type){ if (type === 0 || type === 1) {
case 0:
scanJson.aps[id][7] = selected; scanJson.aps[id][7] = selected;
drawScan(); drawScan();
getFile("run?cmd="+(selected ? "":"de")+"select ap "+id); } else if (type === 2) {
break;
case 1:
scanJson.stations[id][7] = selected;
drawScan();
getFile("run?cmd="+(selected ? "":"de")+"select station "+id);
break;
case 2:
save(id); save(id);
nameJson[id][5] = selected; nameJson[id][5] = selected;
drawNames(); drawNames();
getFile("run?cmd="+(selected ? "":"de")+"select name "+id);
}
} }
function remove(type,id){
switch(type) { switch(type) {
case 0: case 0:
scanJson.aps.splice(id, 1); return getFile(`run?cmd=${selected ? "" : "de" } select ap ${id}`);
drawScan();
getFile("run?cmd=remove ap "+id);
break;
case 1: case 1:
scanJson.stations.splice(id, 1); return getFile(`run?cmd=${selected ? "" : "de" } select station ${id}`);
drawScan();
getFile("run?cmd=remove station "+id);
break;
case 2: case 2:
nameJson.splice(id, 1); return getFile(`run?cmd=${selected ? "" : "de" } select name ${id}`);
drawNames();
getFile("run?cmd=remove name "+id);
} }
} }
function save(id){ const remove = (type, id) => {
var mac = getE("name_"+id+"_mac").innerHTML.replace("<br>",""); if (type === 0 || type === 1) {
var name = getE("name_"+id+"_name").innerHTML.replace("<br>",""); scanJson.aps.splice(id, 1);
var apbssid = getE("name_"+id+"_apbssid").innerHTML.replace("<br>",""); drawScan();
var ch = getE("name_"+id+"_ch").innerHTML.replace("<br>",""); } else if (type === 2) {
var changed = mac != nameJson[id][0] || name != nameJson[id][2] || apbssid != nameJson[id][3] || ch != nameJson[id][4]; nameJson.splice(id, 1);
drawNames();
}
switch(type) {
case 0:
getFile(`run?cmd=remove ap ${id}`);
break;
case 1:
getFile(`run?cmd=remove station ${id}`);
break;
case 2:
getFile(`run?cmd=remove name ${id}`);
}
}
const save = id => {
const mac = getE(`name_${id}_mac`).innerHTML.replace("<br>" ,"");
const name = getE(`name_${id}_name`).innerHTML.replace("<br>", "");
const apbssid = getE(`name_${id}_apbssid`).innerHTML.replace("<br>", "");
const ch = getE(`name_${id}_ch`).innerHTML.replace("<br>", "");
const 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][0] = mac;
nameJson[id][2] = name; nameJson[id][2] = name;
nameJson[id][3] = apbssid; nameJson[id][3] = apbssid;
nameJson[id][4] = ch; nameJson[id][4] = ch;
if(nameJson[id][0].length != 17){ if (nameJson[id][0].length !== 17) {
showMessage("ERROR: MAC invalid"); return 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(); drawNames();
} }
} }
function add(type,id){ const add = (type, id) => {
if(nameJson.length >= 25){ if(nameJson.length >= 25){
showMessage("Device Name List is full!"); return showMessage("Device Name List is full!");
return;
} }
switch(type) { switch(type) {
case 0: 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 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(); drawScan();
break; break;
case 1: case 1:
getFile("run?cmd=add name \""+scanJson.stations[id][0]+"\" station "+id); getFile(`run?cmd=add name "${scanJson.stations[id][0]}" station ${id}`);
scanJson.stations[id][2] = "device_"+nameJson.length; // name = device_ 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]); 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(); drawScan();
break; break;
case 2: case 2:
getFile("run?cmd=add name device_"+nameJson.length+" -m 00:00:00:00:00:00 -ch 1"); 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]); nameJson.push(["00:00:00:00:00:00", "", `device_${nameJson.length}`, "", 1, false]);
drawNames(); drawNames();
} }
drawNames(); drawNames();
} }
function selectAll(type,select){ const selectAll = (type, select) => {
switch(type) { switch(type) {
case 0: case 0:
getFile("run?cmd="+(select ? "":"de")+"select aps"); getFile(`run?cmd=${select ? "" : "de"}select aps`);
for(var i=0;i<scanJson.aps.length;i++) scanJson.aps[i][7] = select; scanJson.aps.forEach(item => {
item[7] = select;
return item
})
drawScan(); drawScan();
break; break;
case 1: case 1:
getFile("run?cmd="+(select ? "":"de")+"select stations"); getFile(`run?cmd=${select ? "" : "de"}select stations`);
for(var i=0;i<scanJson.stations.length;i++) scanJson.stations[i][7] = select; scanJson.stations.forEach(item => {
item[7] = select;
return item
})
drawScan(); drawScan();
break; break;
case 2: case 2:
getFile("run?cmd="+(select ? "":"de")+"select names"); getFile(`run?cmd=${select ? "" : "de"}select names`);
for(var i=0;i<nameJson.length;i++) nameJson[i][5] = select; nameJson.stations.forEach(item => {
item[5] = select;
return item
})
drawNames(); drawNames();
} }
} }