diff --git a/web_interface/js/scan.js b/web_interface/js/scan.js index 2ea298f..f8b8a8e 100644 --- a/web_interface/js/scan.js +++ b/web_interface/js/scan.js @@ -6,260 +6,302 @@ let scanJson = { const drawScan = () => { let html; - let selected; - let width; - let color; - let macVendor; // Access Points getE("apNum").innerHTML = scanJson.aps.length; - html = "" - + "" - + "SSID" - + "Name" - + "Ch" - + "RSSI" - + "Enc" - + "" - + "MAC" - + "Vendor" - + "" - + "" - + ""; + html = ` + + + SSID + Name + Ch + RSSI + Enc + + MAC + Vendor + + + + ` - for(var i=0;i { + const selected = item[item.length - 1]; + const width = parseInt(item[3]) + 130; + let color = ''; - 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 ? "" : "") - + ""+i+"" // ID - + ""+esc(scanJson.aps[i][0])+"" // SSID - + ""+(scanJson.aps[i][1].length > 0 ? esc(scanJson.aps[i][1]) : "")+"" // Name - + ""+esc(scanJson.aps[i][2])+"" // Ch - // RSSI - + "
" + scanJson.aps[i][3] + "
" - + ""+esc(scanJson.aps[i][4])+"" // ENC - + ""+(scanJson.aps[i][4] == "-" ? "":"🔒")+"" // Lock Emoji - + ""+esc(scanJson.aps[i][5])+"" // MAC - + ""+esc(scanJson.aps[i][6])+"" // Vendor - // Select - + "" - + "" // Remove - + ""; - } + html += ` + " : ""}> + ${index} + ${esc(item[0])} + + ${item[1].length > 0 ? esc(item[1]) : ``} + + ${esc(item[2])}" + +
+
+
+ item[3] +
+
+
+ + ${esc(item[4])} + ${item[4] === "-" ? "" : "🔒"} + ${esc(item[5])} + ${esc(item[6])} + + + + + + + + `; + }) getE("apTable").innerHTML = html; // Stations getE("stNum").innerHTML = scanJson.stations.length; - html = "" - + "" - + "Vendor" - + "MAC" - + "Ch" - + "Name" - + "Pkts" - + "AP" - + "Last seen" - + "" - + "" - + ""; - for(var i=0;i= 0) - ap = esc(scanJson.aps[scanJson.stations[i][5]][0]); + html = ` + + + Vendor + MAC + Ch + Name + Pkts + AP + Last seen + + + + `; - html += (selected ? "" : "") - + ""+i+"" // ID - + ""+esc(scanJson.stations[i][3])+"" // Vendor - + ""+esc(scanJson.stations[i][0])+"" // MAC - + ""+esc(scanJson.stations[i][1])+"" // Ch - + ""+(scanJson.stations[i][2].length > 0 ? esc(scanJson.stations[i][2]) : "")+"" // Name - + ""+esc(scanJson.stations[i][4])+"" // Pkts - + ""+ap+"" // AP - + ""+esc(scanJson.stations[i][6])+"" // Last seen - // Select - + "" - + "" // Remove - + ""; - } + scanJson.stations.forEach((item, index) => { + const selected = item[item.length - 1]; + const ap = item[5] >= 0 ? esc(scanJson.aps[item[5]][0]) : ""; + + html += ` + " : ""}> + ${i} + ${esc(item[3])} + ${esc(item[0])} + ${esc(item[1])} + + ${item[2].length > 0 ? esc(item[2]) : ``} + + ${esc(item[4])} + ${ap} + ${esc(item[6])} + + + + + + + + `; + }) getE("stTable").innerHTML = html; } -function drawNames(){ - var html; - var selected; - - // Names +const drawNames = () => { getE("nNum").innerHTML = nameJson.length; - html = "" - + "" - + "MAC" - + "Vendor" - + "Name" - + "AP-BSSID" - + "Ch" - + "" - + "" - + "" - + ""; + let html = ` + + + MAC + Vendor + Name + AP-BSSID + Ch + + + + ` - for(var i=0;i { + const selected = item[item.length - 1]; - html += (selected ? "" : "") - + ""+i+"" // ID - + ""+esc(nameJson[i][0])+"" // MAC - + ""+esc(nameJson[i][1])+"" // Vendor - + ""+esc(nameJson[i][2].substring(0,16))+"" // Name - + ""+esc(nameJson[i][3])+"" // AP-BSSID - + ""+esc(nameJson[i][4])+"" // Ch - + "" // Save - // Select - + "" - + "" // Remove - + ""; - } + html += ` + " : ""}> + ${index} + ${esc(item[0])} + ${esc(item[1])} + ${esc(item[2].substring(0,16))} + ${esc(item[3])} + ${esc(item[4])} + + + + + + + + + + + `; + }) getE("nTable").innerHTML = html; } -function scan(type){ - var cmdStr = "scan " - + (type == 0 ? "aps " : "stations -t "+getE("scanTime").value+"s") - + " -ch "+getE("ch").options[getE("ch").selectedIndex].value; - getFile("run?cmd="+cmdStr); +const scan = type => { + getFile(`run?cmd=scan ${type == 0 ? "aps" : "stations -t"} ${getE("scanTime").value}s -ch ${getE("ch").options[getE("ch").selectedIndex].value}`); } -function load(){ +const load = () => { // APs and Stations - getFile("run?cmd=save scan", function(){ - getFile("scan.json",function(res){ + getFile("run?cmd=save scan", () => + getFile("scan.json", res => { scanJson = JSON.parse(res); drawScan(); - }); - }); + }) + ); + // Names - getFile("run?cmd=save names", function(){ - getFile("names.json",function(res){ + getFile("run?cmd=save names", () => + getFile("names.json", res => { nameJson = JSON.parse(res); drawNames(); - }); - }); + }) + ); } -function selectRow(type,id,selected){ - switch(type){ +const selectRow = (type, id, selected) => { + if (type === 0 || type === 1) { + scanJson.aps[id][7] = selected; + drawScan(); + } else if (type === 2) { + save(id); + nameJson[id][5] = selected; + drawNames(); + } + + switch(type) { case 0: - scanJson.aps[id][7] = selected; - drawScan(); - getFile("run?cmd="+(selected ? "":"de")+"select ap "+id); - break; + return getFile(`run?cmd=${selected ? "" : "de" } select ap ${id}`); case 1: - scanJson.stations[id][7] = selected; - drawScan(); - getFile("run?cmd="+(selected ? "":"de")+"select station "+id); - break; + return getFile(`run?cmd=${selected ? "" : "de" } select station ${id}`); case 2: - save(id); - nameJson[id][5] = selected; - drawNames(); - getFile("run?cmd="+(selected ? "":"de")+"select name "+id); + return getFile(`run?cmd=${selected ? "" : "de" } select name ${id}`); } } -function remove(type,id){ - switch(type){ +const remove = (type, id) => { + if (type === 0 || type === 1) { + scanJson.aps.splice(id, 1); + drawScan(); + } else if (type === 2) { + nameJson.splice(id, 1); + drawNames(); + } + + 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("
",""); - var name = getE("name_"+id+"_name").innerHTML.replace("
",""); - var apbssid = getE("name_"+id+"_apbssid").innerHTML.replace("
",""); - var ch = getE("name_"+id+"_ch").innerHTML.replace("
",""); - var changed = mac != nameJson[id][0] || name != nameJson[id][2] || apbssid != nameJson[id][3] || ch != nameJson[id][4]; - if(changed){ +const save = id => { + const mac = getE(`name_${id}_mac`).innerHTML.replace("
" ,""); + const name = getE(`name_${id}_name`).innerHTML.replace("
", ""); + const apbssid = getE(`name_${id}_apbssid`).innerHTML.replace("
", ""); + const ch = getE(`name_${id}_ch`).innerHTML.replace("
", ""); + const changed = mac !== nameJson[id][0] || name !== nameJson[id][2] || apbssid !== nameJson[id][3] || ch !== nameJson[id][4]; + + if (changed) { nameJson[id][0] = mac; nameJson[id][2] = name; nameJson[id][3] = apbssid; nameJson[id][4] = ch; - if(nameJson[id][0].length != 17){ - showMessage("ERROR: MAC invalid"); - return; + if (nameJson[id][0].length !== 17) { + return showMessage("ERROR: MAC invalid"); } - 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){ +const add = (type, id) => { if(nameJson.length >= 25){ - showMessage("Device Name List is full!"); - return; + return showMessage("Device Name List is full!"); } - 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){ +const selectAll = (type, select) => { + switch(type) { case 0: - getFile("run?cmd="+(select ? "":"de")+"select aps"); - for(var i=0;i { + item[7] = select; + return item + }) drawScan(); break; case 1: - getFile("run?cmd="+(select ? "":"de")+"select stations"); - for(var i=0;i { + item[7] = select; + return item + }) drawScan(); break; case 2: - getFile("run?cmd="+(select ? "":"de")+"select names"); - for(var i=0;i { + item[5] = select; + return item + }) drawNames(); } } \ No newline at end of file