Skip to content

Instantly share code, notes, and snippets.

@tsohr
Created March 8, 2021 09:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsohr/1536d0fd0df2e457cf4781ee9d17471c to your computer and use it in GitHub Desktop.
Save tsohr/1536d0fd0df2e457cf4781ee9d17471c to your computer and use it in GitHub Desktop.
Extract DHCP configuration from the Synology DHCP client table UI
function create_clientlist_listview() {
all_list = [];
wired_list = [];
wl1_list = [];
wl2_list = [];
wl3_list = [];
if (document.getElementById("clientlist_viewlist_block") != null) {
removeElement(document.getElementById("clientlist_viewlist_block"));
}
var divObj = document.createElement("div");
divObj.setAttribute("id", "clientlist_viewlist_block");
var obj_width_map = [["15%", "20%", "25%", "20%", "20%"], ["10%", "10%", "30%", "20%", "20%", "10%"], ["6%", "6%", "27%", "20%", "15%", "6%", "6%", "6%", "8%"]];
if (top.isIE8)
obj_width_map = [["", "", "40%", "40%", "20%"], ["", "", "40%", "30%", "20%", "10%"], ["", "", "33%", "26%", "15%", "6%", "6%", "6%", "8%"]];
var obj_width = stainfo_support ? obj_width_map[2] : obj_width_map[1];
var wl_colspan = stainfo_support ? 9 : 6;
var code = "";
var drawSwitchMode = function(mode) {
var drawSwitchModeHtml = "";
drawSwitchModeHtml += "<div style='margin-top:15px;margin-left:15px;float:left;'>";
if (mode == "All") {
drawSwitchModeHtml += "<div class='block_filter_pressed clientlist_All'>";
drawSwitchModeHtml += "<div class='block_filter_name' style='color:#93A9B1;'>All</div>";
drawSwitchModeHtml += "</div>";
drawSwitchModeHtml += "<div class='block_filter clientlist_ByInterface' style='cursor:pointer'>";
drawSwitchModeHtml += "<div class='block_filter_name' onclick='changeClientListViewMode();'>Interface</div>";
drawSwitchModeHtml += "</div>";
} else {
drawSwitchModeHtml += "<div class='block_filter clientlist_All' style='cursor:pointer'>";
drawSwitchModeHtml += "<div class='block_filter_name' onclick='changeClientListViewMode();'>All</div>";
drawSwitchModeHtml += "</div>";
drawSwitchModeHtml += "<div class='block_filter_pressed clientlist_ByInterface'>";
drawSwitchModeHtml += "<div class='block_filter_name' style='color:#93A9B1;'>Interface</div>";
drawSwitchModeHtml += "</div>";
}
drawSwitchModeHtml += "</div>";
return drawSwitchModeHtml;
};
if (!(isSwMode('mb') || isSwMode('ew')))
code += drawSwitchMode(clienlistViewMode);
code += "<div style='float:right;'><img src='/images/button-close.gif' style='width:30px;cursor:pointer' onclick='closeClientListView();'></div>";
code += "<table border='0' align='center' cellpadding='0' cellspacing='0' style='width:100%;padding:0 15px 15px 15px;'><tbody><tr><td>";
switch (clienlistViewMode) {
case "All":
code += "<table width='100%' border='1' align='center' cellpadding='0' cellspacing='0' class='FormTable_table' style='margin-top:15px;'>";
code += "<thead><tr height='28px'><td id='td_all_list_title' colspan='" + wl_colspan + "'>All list";
/*untranslated*/
code += "<a id='all_expander'class='clientlist_expander' onclick='showHideContent(\"clientlist_all_list_Block\", this);'>[ Hide ]</a>";
/*untranslated*/
code += "</td></tr></thead>";
code += "<tr id='tr_all_title' height='40px'>";
code += "<th class='IE8HACK' width=" + obj_width[0] + ">Internet</th>";
code += "<th class='IE8HACK' width=" + obj_width[1] + ">Icon</th>";
code += "<th width=" + obj_width[2] + " onclick='sorter.addBorder(this);sorter.doSorter(2, \"str\", \"all_list\");' style='cursor:pointer;'>Clients Name</th>";
code += "<th width=" + obj_width[3] + " onclick='sorter.addBorder(this);sorter.doSorter(3, \"num\", \"all_list\");' style='cursor:pointer;'>Client IP address</th>";
code += "<th width=" + obj_width[4] + " onclick='sorter.addBorder(this);sorter.doSorter(4, \"str\", \"all_list\");' style='cursor:pointer;'>Clients MAC Address</th>";
if (!(isSwMode('mb') || isSwMode('ew')))
code += "<th width=" + obj_width[5] + " onclick='sorter.addBorder(this);sorter.doSorter(5, \"num\", \"all_list\");' style='cursor:pointer;'>Interface</th>";
if (stainfo_support && !(isSwMode('mb') || isSwMode('ew'))) {
code += "<th width=" + obj_width[6] + " onclick='sorter.addBorder(this);sorter.doSorter(6, \"num\", \"all_list\");' style='cursor:pointer;' title='The transmission rates of your wireless device'>Tx Rate (Mbps)</th>";
/*untranslated*/
code += "<th width=" + obj_width[7] + " onclick='sorter.addBorder(this);sorter.doSorter(7, \"num\", \"all_list\");' style='cursor:pointer;' title='The receive rates of your wireless device'>Rx Rate (Mbps)</th>";
/*untranslated*/
code += "<th width=" + obj_width[8] + " onclick='sorter.addBorder(this);sorter.doSorter(8, \"str\", \"all_list\");' style='cursor:pointer;'>Access time</th>";
}
code += "</tr>";
code += "</table>";
code += "<div id='clientlist_all_list_Block'></div>";
break;
case "ByInterface":
code += "<table width='100%' border='1' align='center' cellpadding='0' cellspacing='0' class='FormTable_table' style='margin-top:15px;'>";
code += "<thead><tr height='28px'><td colspan='" + wl_colspan + "'>Wired";
code += "<a id='wired_expander' class='clientlist_expander' onclick='showHideContent(\"clientlist_wired_list_Block\", this);'>[ Hide ]</a>";
/*untranslated*/
code += "</td></tr></thead>";
code += "<tr id='tr_wired_title' height='40px'>";
code += "<th class='IE8HACK' width=" + obj_width[0] + ">Internet</th>";
code += "<th class='IE8HACK' width=" + obj_width[1] + ">Icon</th>";
code += "<th width=" + obj_width[2] + " onclick='sorter.addBorder(this);sorter.doSorter(2, \"str\", \"wired_list\");' style='cursor:pointer;'>Clients Name</th>";
code += "<th width=" + obj_width[3] + " onclick='sorter.addBorder(this);sorter.doSorter(3, \"num\", \"wired_list\");' style='cursor:pointer;'>Client IP address</th>";
code += "<th width=" + obj_width[4] + " onclick='sorter.addBorder(this);sorter.doSorter(4, \"str\", \"wired_list\");' style='cursor:pointer;'>Clients MAC Address</th>";
if (!(isSwMode('mb') || isSwMode('ew')))
code += "<th width=" + obj_width[5] + " >Interface</th>";
if (stainfo_support && !(isSwMode('mb') || isSwMode('ew'))) {
code += "<th width=" + obj_width[6] + " title='The transmission rates of your wireless device'>Tx Rate (Mbps)</th>";
/*untranslated*/
code += "<th width=" + obj_width[7] + " title='The receive rates of your wireless device'>Rx Rate (Mbps)</th>";
/*untranslated*/
code += "<th width=" + obj_width[8] + ">Access time</th>";
}
code += "</tr>";
code += "</table>";
code += "<div id='clientlist_wired_list_Block'></div>";
var wl_map = {
"2.4 GHz": "1",
"5 GHz": "2",
"5 GHz-1": "2",
"5 GHz-2": "3"
};
obj_width = stainfo_support ? obj_width_map[2] : obj_width_map[1];
for (var i = 0; i < wl_nband_title.length; i += 1) {
code += "<table width='100%' border='1' align='center' cellpadding='0' cellspacing='0' class='FormTable_table' style='margin-top:15px;'>";
code += "<thead><tr height='23px'><td colspan='" + wl_colspan + "'>" + wl_nband_title[i];
code += "<a id='wl" + wl_map[wl_nband_title[i]] + "_expander' class='clientlist_expander' onclick='showHideContent(\"clientlist_wl" + wl_map[wl_nband_title[i]] + "_list_Block\", this);'>[ Hide ]</a>";
/*untranslated*/
code += "</td></tr></thead>";
code += "<tr id='tr_wl" + wl_map[wl_nband_title[i]] + "_title' height='40px'>";
code += "<th class='IE8HACK' width=" + obj_width[0] + ">Internet</th>";
code += "<th class='IE8HACK' width=" + obj_width[1] + ">Icon</th>";
code += "<th width=" + obj_width[2] + " onclick='sorter.addBorder(this);sorter.doSorter(2, \"str\", \"wl" + wl_map[wl_nband_title[i]] + "_list\");' style='cursor:pointer;'>Clients Name</th>";
code += "<th width=" + obj_width[3] + " onclick='sorter.addBorder(this);sorter.doSorter(3, \"num\", \"wl" + wl_map[wl_nband_title[i]] + "_list\");' style='cursor:pointer;'>Client IP address</th>";
code += "<th width=" + obj_width[4] + " onclick='sorter.addBorder(this);sorter.doSorter(4, \"str\", \"wl" + wl_map[wl_nband_title[i]] + "_list\");' style='cursor:pointer;'>Clients MAC Address</th>";
if (!(isSwMode('mb') || isSwMode('ew')))
code += "<th width=" + obj_width[5] + " onclick='sorter.addBorder(this);sorter.doSorter(5, \"num\", \"wl" + wl_map[wl_nband_title[i]] + "_list\");' style='cursor:pointer;'>Interface</th>";
if (stainfo_support && !(isSwMode('mb') || isSwMode('ew'))) {
code += "<th width=" + obj_width[6] + " onclick='sorter.addBorder(this);sorter.doSorter(6, \"num\", \"wl" + wl_map[wl_nband_title[i]] + "_list\");' style='cursor:pointer;' title='The transmission rates of your wireless device'>Tx Rate (Mbps)</th>";
/*untranslated*/
code += "<th width=" + obj_width[7] + " onclick='sorter.addBorder(this);sorter.doSorter(7, \"num\", \"wl" + wl_map[wl_nband_title[i]] + "_list\");' style='cursor:pointer;' title='The receive rates of your wireless device'>Rx Rate (Mbps)</th>";
/*untranslated*/
code += "<th width=" + obj_width[8] + " onclick='sorter.addBorder(this);sorter.doSorter(8, \"str\", \"wl" + wl_map[wl_nband_title[i]] + "_list\");' style='cursor:pointer;'>Access time</th>";
}
code += "</tr>";
code += "</table>";
code += "<div id='clientlist_wl" + wl_map[wl_nband_title[i]] + "_list_Block'></div>";
}
break;
}
if (!top.isIE8)
code += "<div style='text-align:center;margin-top:15px;'><input type='button' class='button_gen' onclick='exportClientListLog();' value='Export'></div>";
code += "</td></tr></tbody>";
code += "</table>";
divObj.innerHTML = code;
document.getElementById("clientlist_viewlist_content").appendChild(divObj);
document.body.onclick = function() {
hide_clientlist_view_block();
}
document.body.onresize = function() {
if (document.getElementById("clientlist_viewlist_content") !== null) {
if (document.getElementById("clientlist_viewlist_content").style.display == "block") {
cal_panel_block_clientList("clientlist_viewlist_content", 0.045);
}
}
}
document.getElementById("clientlist_viewlist_content").onclick = function() {
show_clientlist_view_block();
}
genClientList();
for (var i = 0; i < clientList.length; i += 1) {
if (clientList[clientList[i]].isOnline) {
var deviceTypeName = "Loading manufacturer..";
if ((clientList[clientList[i]].vendor != "" && clientList[clientList[i]].vendor != undefined)) {
//Oui Vendor name
deviceTypeName = clientList[clientList[i]].vendor;
}
if ((clientList[clientList[i]].dpiDevice != "" && clientList[clientList[i]].dpiDevice != undefined)) {
//BWDPI device
deviceTypeName = clientList[clientList[i]].dpiDevice;
}
var clientNameDisplay = (clientList[clientList[i]].nickName == "") ? clientList[clientList[i]].name : clientList[clientList[i]].nickName;
var mac = clientList[clientList[i]].mac.toLowerCase();
var clientName = mac_map[mac]?.name || clientNameDisplay;
var tempArray = [clientList[clientList[i]].internetState, deviceTypeName, clientName, clientList[clientList[i]].ip, clientList[clientList[i]].mac, clientList[clientList[i]].rssi, clientList[clientList[i]].curTx, clientList[clientList[i]].curRx, clientList[clientList[i]].wlConnectTime, clientList[clientList[i]].isWL, clientList[clientList[i]].vendor, clientList[clientList[i]].type, clientList[clientList[i]].macRepeat];
switch (clienlistViewMode) {
case "All":
all_list.push(tempArray);
break;
case "ByInterface":
switch (clientList[clientList[i]].isWL) {
case 0:
wired_list.push(tempArray);
break;
case 1:
wl1_list.push(tempArray);
break;
case 2:
wl2_list.push(tempArray);
break;
case 3:
wl3_list.push(tempArray);
break;
}
break;
}
}
}
if (clienlistViewMode == "All") {
if (!sorter.all_display) {
document.getElementById("clientlist_all_list_Block").style.display = "none";
document.getElementById("all_expander").innerHTML = "[ Show ]";
/*untranslated*/
}
} else {
if (!sorter.wired_display) {
document.getElementById("clientlist_wired_list_Block").style.display = "none";
document.getElementById("wired_expander").innerHTML = "[ Show ]";
/*untranslated*/
}
if (!sorter.wl1_display) {
document.getElementById("clientlist_wl1_list_Block").style.display = "none";
document.getElementById("wl1_expander").innerHTML = "[ Show ]";
/*untranslated*/
}
if (!sorter.wl2_display) {
document.getElementById("clientlist_wl2_list_Block").style.display = "none";
document.getElementById("wl2_expander").innerHTML = "[ Show ]";
/*untranslated*/
}
if (!sorter.wl3_display) {
document.getElementById("clientlist_wl3_list_Block").style.display = "none";
document.getElementById("wl3_expander").innerHTML = "[ Show ]";
/*untranslated*/
}
}
}
[... document.querySelectorAll("#ext-gen4194 .x-grid3-row-table")]
.map((x) => {
return {
ip: x.querySelector(".ip-column").textContent,
mac: x.querySelector(".x-grid3-td-2").textContent,
name: x.querySelector(".x-grid3-td-3").textContent }})
.reduce((m, a) => { m[a.mac] = a; return m; }, {})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment