chore(scan): refactor

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 = "<tr>"
-		+ "<th class='id'></th>"
-		+ "<th class='ssid'>SSID</th>"
-		+ "<th class='name'>Name</th>"
-		+ "<th class='ch'>Ch</th>"
-		+ "<th class='rssi'>RSSI</th>"
-		+ "<th class='enc'>Enc</th>"
-		+ "<th class='lock'></th>"
-		+ "<th class='mac'>MAC</th>"
-		+ "<th class='vendor'>Vendor</th>"
-		+ "<th class='selectColumn'></th>"
-		+ "<th class='remove'></th>"
-		+ "</tr>";
+	html = `
+		<tr>
+			<th class="id"></th>
+			<th class="ssid">SSID</th>
+			<th class="name">Name</th>
+			<th class="ch">Ch</th>
+			<th class="rssi">RSSI</th>
+			<th class="enc">Enc</th>
+			<th class="lock"></th>
+			<th class="mac">MAC</th>
+			<th class="vendor">Vendor</th>
+			<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];
-		width = parseInt(scanJson.aps[i][3]) + 130;
+	scanJson.aps.forEach((item, index) => {
+		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 ? "<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
-			// 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] == "-" ? "":"&#x1f512;")+"</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
-			+ "</tr>";
-	}
+		html += `
+			<tr ${selected ? "class='selected'>" : ""}>
+				<td class="id">${index}</td>
+				<td class="ssid">${esc(item[0])}</td>
+				<td class="name">
+					${item[1].length > 0 ? esc(item[1]) : `<button onclick="add(0, ${i})">lang("add")</button>`}
+				</td>
+				<td class="ch">${esc(item[2])}</td>"
+				<td class="rssi">
+					<div class="meter_background">
+						<div class="meter_forground ${color}" style="width: ${width}%;">
+							<div class="meter_value">
+								item[3]
+							</div>
+						</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;
 
 	// Stations
 	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++){
-		selected = scanJson.stations[i][scanJson.stations[i].length-1];
-		ap = "";
-		if(scanJson.stations[i][5] >= 0)
-			ap = esc(scanJson.aps[scanJson.stations[i][5]][0]);
+	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>
+	`;
 
-		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
-			// 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
-			+ "</tr>";
-	}
+	scanJson.stations.forEach((item, index) => {
+		const selected = item[item.length - 1];
+		const ap = item[5] >= 0 ? esc(scanJson.aps[item[5]][0]) : "";
+
+		html += `
+			<tr ${selected ? "class='selected'>" : ""}>
+				<td class="id">${i}</td>
+				<td class="vendor">${esc(item[3])}</td>
+				<td class="mac">${esc(item[0])}</td>
+				<td class="ch">${esc(item[1])}</td>
+				<td class="name">
+					${item[2].length > 0 ? esc(item[2]) : `<button onclick="add(1, ${index})">lang("add")</button>`}
+				</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;
 }
 
-function drawNames(){
-	var html;
-	var selected;
-
-	// Names
+const drawNames = () => {
 	getE("nNum").innerHTML = nameJson.length;
-	html = "<tr>"
-		+ "<th class='id'></th>"
-		+ "<th class='mac'>MAC</th>"
-		+ "<th class='vendor'>Vendor</th>"
-		+ "<th class='name'>Name</th>"
-		+ "<th class='ap'>AP-BSSID</th>"
-		+ "<th class='ch'>Ch</th>"
-		+ "<th class='save'></th>"
-		+ "<th class='selectColumn'></th>"
-		+ "<th class='remove'></th>"
-		+ "</tr>";
+	let html = `
+		<tr>
+			<th class="id"></th>
+			<th class="mac">MAC</th>
+			<th class="vendor">Vendor</th>
+			<th class="name">Name</th>
+			<th class="ap">AP-BSSID</th>
+			<th class="ch">Ch</th>
+			<th class="save"></th>
+			<th class="selectColumn"></th>
+			<th class="remove"></th>
+		</tr>`
 
-	for(var i=0;i<nameJson.length;i++){
-		selected = nameJson[i][nameJson[i].length-1];
+	nameJson.forEach((item, index) => {
+		const selected = item[item.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
-			// 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
-			+ "</tr>";
-	}
+		html += `
+			<tr ${selected ? "class='selected'>" : ""}>
+				<td class="id">${index}</td>
+				<td class="mac" contentEditable="true" id="name_${index}_mac">${esc(item[0])}</td>
+				<td class="vendor">${esc(item[1])}</td>
+				<td class="name" contentEditable="true" id="name_${index}_name">${esc(item[2].substring(0,16))}</td>
+				<td class="ap" contentEditable="true" id="name_${index}_apbssid">${esc(item[3])}</td>
+				<td class="ch" contentEditable="true" id="name_${index}_ch">${esc(item[4])}</td>
+				<td class="save">
+					<button class="green" onclick="save(${index})">${lang("save")}</button>
+				</td>
+				<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;
 }
 
-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("<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){
+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) {
 		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<scanJson.aps.length;i++) scanJson.aps[i][7] = select;
+			getFile(`run?cmd=${select ? "" : "de"}select aps`);
+			scanJson.aps.forEach(item => {
+				item[7] = select;
+				return item
+			})
 			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`);
+			scanJson.stations.forEach(item => {
+				item[7] = select;
+				return item
+			})
 			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`);
+			nameJson.stations.forEach(item => {
+				item[5] = select;
+				return item
+			})
 			drawNames();
 	}
 }