Created
March 8, 2021 09:02
-
-
Save tsohr/1536d0fd0df2e457cf4781ee9d17471c to your computer and use it in GitHub Desktop.
Extract DHCP configuration from the Synology DHCP client table UI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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*/ | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[... 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