mirror of
https://github.com/JamesonHuang/OpenWrt_Luci_Lua.git
synced 2024-11-27 23:40:10 +00:00
426 lines
12 KiB
HTML
426 lines
12 KiB
HTML
<%
|
||
local ver = require("xiaoqiang.XQVersion").webVersion
|
||
local remote_addr = luci.http.getenv("REMOTE_ADDR")
|
||
local mac = luci.sys.net.ip4mac(remote_addr)
|
||
%>
|
||
<%include ("web/inc/head")%>
|
||
<title>终端管理 - 小米路由器</title>
|
||
<link rel="stylesheet" href="<%=resource%>/web/css/page.manage.css?v=<%=ver%>">
|
||
</head>
|
||
<body id="manager">
|
||
<div id="doc" class="hidden">
|
||
<%include ("web/inc/header")%>
|
||
<!-- -->
|
||
<div id="nav">
|
||
<script>
|
||
var navCurrent = '.manager';
|
||
</script>
|
||
<%include ("web/inc/nav")%>
|
||
</div>
|
||
<!-- -->
|
||
<div id="bd" class="dft">
|
||
<div id="bd-hd">
|
||
在这里查看目前接入路由器的设备，并对设备进行管理
|
||
<a href="#" class="btn btn-small refresh" id="btnRefresh"><span>刷新</span></a>
|
||
</div>
|
||
<div class="mod-device">
|
||
<div class="bd">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th class="s0">当前连接终端</th>
|
||
<th class="s1">互联网访问</th>
|
||
<th class="s2">共享盘访问</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="device_list"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<%include ("web/inc/footer")%>
|
||
</div>
|
||
<script type="tmpl/text" id="tmplDeviceItem">
|
||
<tr class="list-item">
|
||
<td class="s0">
|
||
<table>
|
||
<tr>
|
||
<td class="s00">
|
||
{$devices_icon}
|
||
</td>
|
||
<td class="s01">
|
||
<div class="name">
|
||
<span class="name-show">{$name}</span><a href="#" class="ico-rename act-edit" data-name="{$name}" data-mac="{$mac}"></a>
|
||
<div class="name-edit"></div>
|
||
</div>
|
||
<p class="muted">已连接：{$online} | 当前网速：{$speed}/秒 | 总流量：{$download} <br /> IP地址：{$ip} | 连接类型：{$line_type} | MAC地址：{$mac}</p>
|
||
</td>
|
||
</table>
|
||
</td>
|
||
<td class="s1">
|
||
{$option1}
|
||
</td>
|
||
<td class="s2">
|
||
{$option2}
|
||
</td>
|
||
</tr>
|
||
</script>
|
||
<script type="tmpl/text" id="nameEdit">
|
||
<div id="edit_from" class="form form-small form-inline">
|
||
<input name="name_mac" type="hidden" value="{$mac}">
|
||
<div class="item">
|
||
<input name="name_new" class="text input-small" type="text" value="{$name}">
|
||
</div>
|
||
<div class="item-control">
|
||
<button type="button" class="submit btn btn-primary btn-small"><span>提交</span></button>
|
||
<button type="button" class="cancel btn btn-small"><span>取消</span></button>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
<%include ("web/inc/g.js.base")%>
|
||
<%include ("web/inc/g.js")%>
|
||
<script>
|
||
//绑定事件
|
||
$(global_event).on('devices:event', function(evt, data){
|
||
|
||
global_event.devicesTimer = null;
|
||
|
||
//禁止上网
|
||
$('body').delegate('.act-kick-out', 'click', function(e){
|
||
var mac = $(this).attr("data-mac");
|
||
$(global_event).trigger('devices:kick_out', {"mac" : mac});
|
||
return false;
|
||
});
|
||
//允许上网
|
||
$('body').delegate('.act-add-back', 'click', function(e){
|
||
var mac = $(this).attr("data-mac");
|
||
$(global_event).trigger('devices:add_back', {"mac" : mac});
|
||
return false;
|
||
});
|
||
//禁止访问数据
|
||
$('body').delegate('.act-data-disable', 'click', function(e){
|
||
var mac = $(this).attr("data-mac");
|
||
$(global_event).trigger('devices:data_disable', {"mac" : mac});
|
||
return false;
|
||
});
|
||
//允许访问数据
|
||
$('body').delegate('.act-data-enable', 'click', function(e){
|
||
var mac = $(this).attr("data-mac");
|
||
$(global_event).trigger('devices:data_enable', {"mac" : mac});
|
||
return false;
|
||
});
|
||
//改名
|
||
$('body').delegate('.act-edit', 'click', function(e){
|
||
var root = this.parentNode;
|
||
|
||
var mac = $(this).attr('data-mac');
|
||
var name = $('.name-show', root).html();
|
||
if (name == "未知"){
|
||
name == "";
|
||
}
|
||
|
||
var nameEditer = StringH.tmpl($('#nameEdit').html() , {name : StringH.encode4HtmlValue(name) , mac : mac});
|
||
|
||
$('.name-show', root).hide();
|
||
$('.act-edit', root).hide();
|
||
$('.name-edit', root).html(nameEditer).show();
|
||
|
||
$("input[name='name_new']").focus();
|
||
|
||
$(".submit", root).click(function(){
|
||
//TODO:输入内容限制和XSS
|
||
var elEditfrom = this.parentNode.parentNode;
|
||
var elNameroot = elEditfrom.parentNode.parentNode;
|
||
var name = $(elEditfrom).find("input[name='name_new']").val();
|
||
var mac = $(elEditfrom).find("input[name='name_mac']").val();
|
||
if(name == ''){
|
||
alert('输入不能为空。');
|
||
return;
|
||
}
|
||
if (name.length > 30) {
|
||
alert('你的名字设置过长，请限定在30个字以内');
|
||
return;
|
||
}
|
||
|
||
$(global_event).trigger('devices:rename', {
|
||
"name": $.trim(name),
|
||
"mac": mac,
|
||
"elem": elNameroot}
|
||
);
|
||
});
|
||
|
||
$(".cancel", root).click(function(){
|
||
$('.name-show', root).show();
|
||
$('.act-edit', root).show();
|
||
$('.name-edit', root).html('').hide();
|
||
});
|
||
|
||
return false;
|
||
|
||
});
|
||
|
||
//刷新
|
||
$('body').delegate('.refresh', 'click', function(e){
|
||
e.preventDefault();
|
||
$(global_event).trigger('devices:refresh');
|
||
});
|
||
});
|
||
|
||
//修改名称
|
||
$(global_event).on('devices:rename', function(evt, data){
|
||
var request_date = {"name":data["name"],"mac":data.mac};
|
||
var root = data.elem;
|
||
var new_name_box = $('.name-show', root);
|
||
$.post('<%=luci.dispatcher.build_url("api", "xqsystem","set_device_nickname")%>',request_date,function(rsp){
|
||
if(rsp.code == 0){
|
||
new_name_box.html(StringH.encode4Html(request_date['name'])).show();
|
||
$(".act-edit", root).show();
|
||
$(".name-edit", root).html('').hide();
|
||
} else {
|
||
art.dialog({title:false,content:rsp.msg}).lock().time(1.5*1000);
|
||
}
|
||
},'json');
|
||
});
|
||
//禁止上网
|
||
$(global_event).on('devices:kick_out', function(evt, data){
|
||
var request_date = {
|
||
"mac": data.mac,
|
||
"wan": 0
|
||
};
|
||
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem", "set_mac_filter")%>',request_date,function(rsp)
|
||
{
|
||
if(rsp.code==0){
|
||
$(global_event).trigger('devices:refresh');
|
||
} else {
|
||
art.dialog({title:false,content:rsp.msg}).lock().time(1.5*1000);
|
||
}
|
||
})
|
||
});
|
||
//允许上网
|
||
$(global_event).on('devices:add_back', function(evt, data){
|
||
var request_date = {
|
||
"mac": data.mac,
|
||
"wan": 1
|
||
};
|
||
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem","set_mac_filter")%>',request_date,function(rsp)
|
||
{
|
||
if(rsp.code==0){
|
||
$(global_event).trigger('devices:refresh');
|
||
} else {
|
||
art.dialog({title:false,content:rsp.msg}).lock().time(1.5*1000);
|
||
}
|
||
})
|
||
});
|
||
//允许访问数据
|
||
$(global_event).on('devices:data_enable', function(evt, data){
|
||
var request_date = {
|
||
"mac": data.mac,
|
||
"lan": 1
|
||
};
|
||
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem", "set_mac_filter")%>',request_date,function(rsp)
|
||
{
|
||
if(rsp.code==0){
|
||
$(global_event).trigger('devices:refresh');
|
||
} else {
|
||
art.dialog({title:false,content:rsp.msg}).lock().time(1.5*1000);
|
||
}
|
||
})
|
||
});
|
||
//禁止访问数据
|
||
$(global_event).on('devices:data_disable', function(evt, data){
|
||
var request_date = {
|
||
"mac": data.mac,
|
||
"lan": 0
|
||
};
|
||
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem","set_mac_filter")%>',request_date,function(rsp)
|
||
{
|
||
if(rsp.code==0){
|
||
$(global_event).trigger('devices:refresh');
|
||
} else {
|
||
art.dialog({title:false,content:rsp.msg}).lock().time(1.5*1000);
|
||
}
|
||
})
|
||
});
|
||
//获取设备列表
|
||
$(global_event).on('device_list:get', function(evt, data){
|
||
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem","device_list")%>',{},function(rsp){
|
||
$(global_event).trigger('device_list:show', rsp);
|
||
});
|
||
});
|
||
//展示设备列表
|
||
$(global_event).on('device_list:show', function(evt, data){
|
||
//var mac_local = "<%=mac%>".toUpperCase();
|
||
var mac_local;
|
||
var tmplItem = $('#tmplDeviceItem').html();
|
||
var tmplItemDeny = $('#tmplDeviceItemDeny').html();
|
||
if(data.code != 0){
|
||
$('#device_list').html('<tr><td colspan="3"><p class="nodata">暂无设备接入. <a class="refresh" href="#">刷新</a></p></td></tr>');
|
||
}else{
|
||
var devices = data.list;
|
||
// var denylist = data.denylist.toString().toUpperCase();
|
||
mac_local = data.mac.toUpperCase();
|
||
if ( devices.length > 0 ) {
|
||
var list_html = [];
|
||
var denylist_html = [];
|
||
for ( i = 0 ; i < devices.length ; i++ ) {
|
||
var d_mac;
|
||
var d_name = "未知";
|
||
var d_self;
|
||
var d_ip;
|
||
var d_type;
|
||
var d_signal;
|
||
var d_option;
|
||
var d_signal_level;
|
||
var d_action;
|
||
var d_action2;
|
||
var d_origin_name = "未知";
|
||
var d_online;
|
||
var d_download;
|
||
var d_dld_speed;
|
||
// var d_tag;
|
||
var d_wan;
|
||
var d_lan;
|
||
var d_port;
|
||
var type_html;
|
||
var type_detail;
|
||
var d_html;
|
||
var d_activets;
|
||
var d_devices_icon;
|
||
|
||
d_mac = devices[i].mac.toUpperCase();
|
||
d_devices_icon = '<i class="ico ico-devices ico-devices-1"></i>';
|
||
if(mac_local==d_mac){
|
||
d_self = 'alt';
|
||
d_devices_icon = '<i class="ico ico-devices ico-devices-4"></i>';
|
||
}else{
|
||
d_self = "";
|
||
if (devices[i].company.icon && devices[i].company.icon !='') {
|
||
d_devices_icon = '<img class="company-icon" src="/cn/'+ devices[i].company.icon +'">';
|
||
}
|
||
}
|
||
d_signal = devices[i].signal;
|
||
|
||
if(devices[i].ip){
|
||
d_ip = devices[i].ip;
|
||
}
|
||
if(devices[i].type){
|
||
d_type = devices[i].type;
|
||
}
|
||
if(devices[i].name && devices[i].name != ""){
|
||
d_name = devices[i].name;
|
||
}
|
||
if(devices[i].origin_name && devices[i].origin_name != ""){
|
||
d_origin_name = devices[i].origin_name;
|
||
}
|
||
// d_tag = devices[i].tag;
|
||
d_wan = devices[i].authority.wan;
|
||
d_lan = devices[i].authority.lan;
|
||
d_port = devices[i].port;
|
||
if (devices[i].statistics) {
|
||
d_online = devices[i].statistics.online;
|
||
d_activets = devices[i].statistics.activets;
|
||
d_download = devices[i].statistics.download;
|
||
d_dld_speed = devices[i].statistics.downspeed;
|
||
}
|
||
|
||
//无线信号强度
|
||
d_signal_level = Math.floor(d_signal/20);
|
||
if(d_signal_level>4){
|
||
d_signal_level=4;
|
||
}
|
||
|
||
//联网方式
|
||
if (d_type == "line") {
|
||
type_html = '<i class="ico ico-line"></i>';
|
||
if (d_port == 1) {
|
||
type_detail = 'LAN 1';
|
||
} else if (d_port == 2) {
|
||
type_detail = 'LAN 2';
|
||
} else {
|
||
type_detail = 'LAN';
|
||
}
|
||
} else if (d_type == "wifi") {
|
||
type_html = '<i class="ico ico-wifi ico-wifi-s'+d_signal_level+'"></i>';
|
||
if (d_port == 1) {
|
||
type_detail = 'WiFi 2.4G';
|
||
}
|
||
if (d_port == 2) {
|
||
type_detail = 'WiFi 5G';
|
||
}
|
||
if (d_port == 3) {
|
||
type_detail = '访客WiFi';
|
||
}
|
||
} else {
|
||
type_html = '<span>未知</span>';
|
||
}
|
||
//终端操作
|
||
if (d_wan == 0) {
|
||
d_action = '<a data-mac="'+d_mac+'" href="#" class="btn-offon btn-off act-add-back"></a>'
|
||
}else{
|
||
if (mac_local == d_mac) {
|
||
d_action = '<b>本机</b>';
|
||
}else{
|
||
d_action = '<a data-mac="'+d_mac+'" href="#" class="btn-offon btn-on act-kick-out"></a>';
|
||
}
|
||
}
|
||
if (d_lan == 0) {
|
||
d_action2 = '<a data-mac="'+d_mac+'" href="#" class="btn-offon btn-off act-data-enable"></a>'
|
||
}else{
|
||
if (mac_local == d_mac) {
|
||
d_action2 = '<b>本机</b>';
|
||
}else if( d_port == 3 ){
|
||
d_action2 = '<b>访客</b>';
|
||
}else{
|
||
d_action2 = '<a data-mac="'+d_mac+'" href="#" class="btn-offon btn-on act-data-disable"></a>';
|
||
}
|
||
}
|
||
|
||
var tmplData = {
|
||
'name' : StringH.encode4HtmlValue(d_name),
|
||
'origin_name' : d_origin_name,
|
||
'mac' : d_mac,
|
||
'line_type' : type_detail,
|
||
'signal' : type_html,
|
||
'devices_icon' : d_devices_icon,
|
||
'download' : byteFormat(d_download, 100),
|
||
'speed' : byteFormat(d_dld_speed, 100),
|
||
'online' : secondToDate(d_online),
|
||
'option1' : d_action,
|
||
'option2' : d_action2,
|
||
'ip': d_ip,
|
||
'activets' : dateFormat(new Date(parseInt(d_activets,10) * 1000), 'yy-MM-dd hh:mm:ss')
|
||
};
|
||
|
||
d_html = StringH.tmpl(tmplItem, tmplData);
|
||
list_html.push(d_html);
|
||
}
|
||
$("#device_list").html(list_html.join(''));
|
||
}else{
|
||
$('#device_list').html('<tr><td colspan="3"><p class="nodata">暂无设备接入. <a class="refresh" href="#">刷新</a></p></td></tr>');
|
||
}
|
||
}
|
||
});
|
||
|
||
$(global_event).on('devices:autoRefresh', function(evt, data){
|
||
window.clearInterval(global_event.devicesTimer);
|
||
window.setTimeout(function(){
|
||
global_event.devicesTimer = window.setInterval(function(){
|
||
$(global_event).trigger('device_list:get');
|
||
}, 10*1000);
|
||
}, 10*1000);
|
||
});
|
||
|
||
$(global_event).on('devices:refresh', function(evt, data){
|
||
$(global_event).trigger('device_list:get');
|
||
// $(global_event).trigger('devices:autoRefresh');
|
||
});
|
||
|
||
$(function(){
|
||
$(global_event).trigger('device_list:get');
|
||
$(global_event).trigger('devices:event');
|
||
// $(global_event).trigger('devices:autoRefresh');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|