OpenWrt_Luci_Lua/Mi_Lua/luci/view/web/setting/upnp.htm

96 lines
2.2 KiB
HTML
Raw Normal View History

2015-05-09 10:48:46 +00:00
<%
--[[
Info upnp
]]--
local ver = require("xiaoqiang.XQVersion").webVersion
local request_uri = luci.http.getenv("REQUEST_URI")
%>
<%include('web/inc/head')%>
<title>小米路由器</title>
<link rel="stylesheet" href="<%=resource%>/web/css/page.set.default.css?v=<%=ver%>"/>
</head>
<body>
<!-- upgread -->
<div class="mod-setting-panel">
<div class="hd">
<h3>UPnP状态</h3>
<a href="#" data-order="1" class="btn-offon btn-off" id="btnupnp"></a>
</div>
<div class="bd">
<div class="mod-set-upnp">
<h4>UPnP设备列表</h4>
<table class="table">
<thead>
<tr>
<th>协议</th>
<th>应用名称</th>
<th>客户端IP</th>
<th>内部端口</th>
<th>外部端口</th>
</tr>
</thead>
<tbody id="upnplist">
</tbody>
</table>
</div>
</div>
</div>
<%include('web/inc/g.js.base')%>
<script>
var modelUpnp = (function(){
function upnpStatus(){
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem", "upnp")%>', {}, function(rsp){
if (rsp.code == 0) {
var btnUpnp = $('#btnupnp')[0],
listUpnp = $('#upnplist');
if (rsp.status == 1) {
btnUpnp.className = 'btn-offon btn-on';
}else{
btnUpnp.className = 'btn-offon btn-off';
}
if ( $.isArray(rsp.list) && rsp.list.length > 0) {
var tpml = '<tr><td>{$protocol}</td><td>{$name}</td><td>{$ip}</td><td>{$cport}</td><td>{$rport}</td></tr>',
list = [];
for (var i = 0; i < rsp.list.length; i++) {
var item = StringH.tmpl(tpml, rsp.list[i]);
list.push(item);
};
listUpnp.html(list.join(''));
}else{
var empty = rsp.status == 1 ? '没有UPnP设备' : 'UPnP未开启';
listUpnp.html('<tr><td colspan="5" style="text-align:center;">'+ empty +'</td></tr>');
}
}
});
}
function upnpSwitch(){
var btnUpnp = $('#btnupnp');
btnUpnp.on('click', function(e){
e.preventDefault();
var st = $(this).hasClass('btn-on') ? 0 : 1,
btn = this;
$.getJSON('<%=luci.dispatcher.build_url("api", "xqsystem", "upnp_switch")%>', {'switch': st}, function(rsp){
if (rsp.code == 0) {
upnpStatus();
}
});
});
}
return {
init : function(){
upnpStatus();
upnpSwitch();
}
}
}());
$(function(){
modelUpnp.init();
});
</script>