init
chenhaodong
@@ -0,0 +1,86 @@
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title site-demo-title">
|
||||
<li class="layui-this add-client-title"></li>
|
||||
</ul>
|
||||
<div class="main-content">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-client-name"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-client-key"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="clientKey" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid"><a class="layui-btn layui-btn-mini random-key random"></a></div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn add"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(".add-client-title").html($.i18n.prop('client.add'));
|
||||
$(".i18n-client-name").html($.i18n.prop('client.name'));
|
||||
$(".i18n-client-key").html($.i18n.prop('client.key'));
|
||||
$("input[name='name']").attr("placeholder", $.i18n.prop('client.name.placeholder'));
|
||||
$("input[name='clientKey']").attr("placeholder", $.i18n.prop('client.key.placeholder'));
|
||||
$(".random").html($.i18n.prop('client.randomkey'));
|
||||
$(".add").html($.i18n.prop('public.submit'));
|
||||
$(".random").click(function(){
|
||||
$("input[name='clientKey']").val(uuid());
|
||||
});
|
||||
|
||||
$(".add").click(function(){
|
||||
var name = $("input[name='name']").val();
|
||||
if(name == ""){
|
||||
layer.alert($.i18n.prop('client.notice.inputname'), {
|
||||
title: $.i18n.prop('public.tips')
|
||||
});
|
||||
return;
|
||||
}
|
||||
var clientKey = $("input[name='clientKey']").val();
|
||||
if(clientKey == ""){
|
||||
layer.alert($.i18n.prop('client.notice.inputkey'), {
|
||||
title: $.i18n.prop('public.tips')
|
||||
});
|
||||
return;
|
||||
}
|
||||
clientList.push({
|
||||
name:name,
|
||||
clientKey:clientKey,
|
||||
proxyMappings:[]
|
||||
});
|
||||
|
||||
api_invoke("/config/update", clientList, function(data) {
|
||||
if (data.code == 20000) {
|
||||
layer.alert($.i18n.prop('client.notice.addsuccess'), {title: $.i18n.prop('public.tips')}, function(index){
|
||||
layer.close(index);
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".back").click(function(){
|
||||
load_page("html/client/list.html");
|
||||
});
|
||||
|
||||
function uuid() {
|
||||
var s = [];
|
||||
var hexDigits = "0123456789abcdef";
|
||||
for (var i = 0; i < 36; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
||||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
||||
s[8] = s[13] = s[18] = s[23] = "";
|
||||
|
||||
var uuid = s.join("");
|
||||
return uuid;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,73 @@
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title site-demo-title">
|
||||
<li class="layui-this edit-client-title"></li>
|
||||
</ul>
|
||||
<div class="main-content">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-client-name"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-client-key"></label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="clientKey" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid"><a class="layui-btn layui-btn-mini random-key random"></a></div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn update"></button>
|
||||
<button class="layui-btn layui-btn-primary back"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(".edit-client-title").html($.i18n.prop('client.edit'));
|
||||
$(".i18n-client-name").html($.i18n.prop('client.name'));
|
||||
$(".i18n-client-key").html($.i18n.prop('client.key'));
|
||||
$("input[name='name']").attr("placeholder", $.i18n.prop('client.name.placeholder'));
|
||||
$("input[name='clientKey']").attr("placeholder", $.i18n.prop('client.key.placeholder'));
|
||||
$(".random").html($.i18n.prop('client.randomkey'));
|
||||
$(".update").html($.i18n.prop('public.submit'));
|
||||
$(".back").html($.i18n.prop('public.back'));
|
||||
$("input[name='name']").val(clientList[clientIndex].name);
|
||||
$("input[name='clientKey']").val(clientList[clientIndex].clientKey);
|
||||
|
||||
$(".random").click(function(){
|
||||
$("input[name='clientKey']").val(uuid());
|
||||
});
|
||||
|
||||
$(".update").click(function(){
|
||||
clientList[clientIndex]['name'] = $("input[name='name']").val();
|
||||
clientList[clientIndex]['clientKey'] = $("input[name='clientKey']").val();
|
||||
api_invoke("/config/update", clientList, function(data) {
|
||||
if (data.code == 20000) {
|
||||
layer.alert($.i18n.prop('public.notice.updatesuccess'), {title: $.i18n.prop('public.tips')}, function(index){
|
||||
layer.close(index);
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".back").click(function(){
|
||||
load_page("html/client/list.html");
|
||||
});
|
||||
|
||||
function uuid() {
|
||||
var s = [];
|
||||
var hexDigits = "0123456789abcdef";
|
||||
for (var i = 0; i < 36; i++) {
|
||||
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
||||
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
||||
s[8] = s[13] = s[18] = s[23] = "";
|
||||
|
||||
var uuid = s.join("");
|
||||
return uuid;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title site-demo-title">
|
||||
<li class="layui-this detail-page"></li>
|
||||
</ul>
|
||||
<div class="main-content"></div>
|
||||
</div>
|
||||
<script>
|
||||
$(".layui-this.detail-page").html($.i18n.prop('client.list'));
|
||||
window.clientList = [];
|
||||
api_invoke("/config/detail", {}, function(data) {
|
||||
if (data.code == 20000) {
|
||||
clientList = data.data;
|
||||
var html = template($("#client-tpl").html(), data);
|
||||
$(".main-content").html(html);
|
||||
$(".mapping-config").click(function() {
|
||||
window.clientIndex = $(this).attr("data-index");
|
||||
load_page("html/lan/list.html");
|
||||
});
|
||||
$(".client-edit").click(function() {
|
||||
window.clientIndex = $(this).attr("data-index");
|
||||
load_page("html/client/edit.html");
|
||||
});
|
||||
$(".client-delete").click(function() {
|
||||
window.clientIndex = $(this).attr("data-index");
|
||||
layer.confirm($.i18n.prop('public.confirm.delete'), {
|
||||
title: $.i18n.prop('public.tips'),
|
||||
btn : [ $.i18n.prop('public.ok'), $.i18n.prop('public.cancel') ]
|
||||
}, function(i) {
|
||||
layer.close(i);
|
||||
clientList.splice(clientIndex, 1);
|
||||
api_invoke("/config/update", clientList, function(data) {
|
||||
if (data.code != 20000) {
|
||||
layer.alert(data.message);
|
||||
} else {
|
||||
location.reload();
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script id="client-tpl" type="text/html">
|
||||
<table class="layui-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="th-client-name"><%:=$.i18n.prop('client.name')%></th>
|
||||
<th class="th-client-key"><%:=$.i18n.prop('client.key')%></th>
|
||||
<th class="th-status"><%:=$.i18n.prop('client.status')%></th>
|
||||
<th class="th-options"><%:=$.i18n.prop('public.options')%></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<%for(var i = 0; i < data.length; i++) {%>
|
||||
<tr>
|
||||
<td><%:=data[i].name%></td>
|
||||
<td><%:=data[i].clientKey%></td>
|
||||
<td>
|
||||
<% if(data[i].status == 1){ %>
|
||||
<span class="layui-badge layui-bg-green"><%:=$.i18n.prop('client.status.online')%></span>
|
||||
<% } else { %>
|
||||
<span class="layui-badge layui-bg-gray"><%:=$.i18n.prop('client.status.offline')%></span>
|
||||
<% }%>
|
||||
</td>
|
||||
<td>
|
||||
<a data-index="<%:=i%>" class="layui-btn layui-btn-mini client-edit"><%:=$.i18n.prop('public.edit')%></a>
|
||||
<a data-index="<%:=i%>" class="layui-btn layui-btn-danger layui-btn-mini client-delete"><%:=$.i18n.prop('public.delete')%></a>
|
||||
</td>
|
||||
</tr>
|
||||
<%}%>
|
||||
</tbody>
|
||||
</table>
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title site-demo-title">
|
||||
<li class="layui-this i18n-new-proxy"></li>
|
||||
</ul>
|
||||
<div class="main-content">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-lan-name"></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-lan-inetport"></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="inetPort" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-lan-ip"></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="lan" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn add"></button>
|
||||
<button class="layui-btn layui-btn-primary back"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(".i18n-new-proxy").html($.i18n.prop('lan.addnewconfig'));
|
||||
$(".i18n-lan-name").html($.i18n.prop('lan.name'));
|
||||
$(".i18n-lan-inetport").html($.i18n.prop('lan.inetport'));
|
||||
$(".i18n-lan-ip").html($.i18n.prop('lan.ip'));
|
||||
$("input[name='inetPort']").attr("placeholder", $.i18n.prop('lan.inetport.placeholder'));
|
||||
$("input[name='lan']").attr("placeholder", $.i18n.prop('lan.ip.placeholder'));
|
||||
$(".add").html($.i18n.prop('public.submit'));
|
||||
$(".back").html($.i18n.prop('public.back'));
|
||||
$(".add").click(function(){
|
||||
var name = $("input[name='name']").val();
|
||||
if(name == ""){
|
||||
layer.alert($.i18n.prop('lan.notice.inputname'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
var inetPort = $("input[name='inetPort']").val();
|
||||
if(inetPort == ""){
|
||||
layer.alert($.i18n.prop('lan.notice.inputinetport'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
if(!check_port(inetPort)){
|
||||
layer.alert($.i18n.prop('lan.notice.errorport'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
|
||||
var lan = $("input[name='lan']").val();
|
||||
if(lan == ""){
|
||||
layer.alert($.i18n.prop('lan.notice.inputlan'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
if(!check_lan(lan)){
|
||||
layer.alert($.i18n.prop('lan.notice.errorlan'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
|
||||
clientList[clientIndex].proxyMappings.push({
|
||||
name:name,
|
||||
inetPort:inetPort,
|
||||
lan:lan
|
||||
});
|
||||
|
||||
api_invoke("/config/update", clientList, function(data) {
|
||||
if (data.code == 20000) {
|
||||
layer.alert($.i18n.prop('public.notice.addsuccess'), {title:"Tips"}, function(index){
|
||||
layer.close(index);
|
||||
load_page("html/lan/list.html");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".back").click(function(){
|
||||
load_page("html/lan/list.html");
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title site-demo-title">
|
||||
<li class="layui-this i18n-lan-title"></li>
|
||||
</ul>
|
||||
<div class="main-content">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-lan-name"></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-lan-inetport"></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="inetPort" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label i18n-lan-ip"></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="lan" autocomplete="off" placeholder="" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn update"></button>
|
||||
<button class="layui-btn layui-btn-primary back"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$("input[name='name']").val(clientList[clientIndex].proxyMappings[mappingIndex].name);
|
||||
$("input[name='inetPort']").val(clientList[clientIndex].proxyMappings[mappingIndex].inetPort);
|
||||
$("input[name='lan']").val(clientList[clientIndex].proxyMappings[mappingIndex].lan);
|
||||
$(".i18n-lan-title").html($.i18n.prop('lan.editconfig'));
|
||||
$(".i18n-lan-name").html($.i18n.prop('lan.name'));
|
||||
$(".i18n-lan-inetport").html($.i18n.prop('lan.inetport'));
|
||||
$(".i18n-lan-ip").html($.i18n.prop('lan.ip'));
|
||||
$("input[name='inetPort']").attr("placeholder", $.i18n.prop('lan.inetport.placeholder'));
|
||||
$("input[name='lan']").attr("placeholder", $.i18n.prop('lan.ip.placeholder'));
|
||||
$(".update").html($.i18n.prop('public.submit'));
|
||||
$(".back").html($.i18n.prop('public.back'));
|
||||
});
|
||||
$(".update").click(function(){
|
||||
var name = $("input[name='name']").val();
|
||||
if(name == ""){
|
||||
layer.alert($.i18n.prop('lan.notice.inputname'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
var inetPort = $("input[name='inetPort']").val();
|
||||
if(inetPort == ""){
|
||||
layer.alert($.i18n.prop('lan.notice.inputinetport'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
if(!check_port(inetPort)){
|
||||
layer.alert($.i18n.prop('lan.notice.errorport'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
|
||||
var lan = $("input[name='lan']").val();
|
||||
if(lan == ""){
|
||||
layer.alert($.i18n.prop('lan.notice.inputlan'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
if(!check_lan(lan)){
|
||||
layer.alert($.i18n.prop('lan.notice.errorlan'), {title:"Tips"});
|
||||
return;
|
||||
}
|
||||
|
||||
clientList[clientIndex].proxyMappings[mappingIndex]= {
|
||||
name:name,
|
||||
inetPort:inetPort,
|
||||
lan:lan
|
||||
};
|
||||
|
||||
api_invoke("/config/update", clientList, function(data) {
|
||||
if (data.code == 20000) {
|
||||
layer.alert($.i18n.prop('public.notice.updatesuccess'), {title:"Tips"}, function(index){
|
||||
layer.close(index);
|
||||
load_page("html/lan/list.html");
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".back").click(function(){
|
||||
load_page("html/lan/list.html");
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title site-demo-title">
|
||||
<li class="layui-this tab-title"></li>
|
||||
</ul>
|
||||
<div class="main-content"></div>
|
||||
<div class="layui-input-block" style="float: left; margin-left: 15px;">
|
||||
<button class="layui-btn mapping-add"></button>
|
||||
</div>
|
||||
</div>
|
||||
<script id="mapping-tpl" type="text/html">
|
||||
<table class="layui-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i18n-lan-name"></th>
|
||||
<th class="i18n-lan-inetport"></th>
|
||||
<th class="i18n-lan-ip"></th>
|
||||
<th class="i18n-lan-options"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<%for(var i = 0; i < data.length; i++) {%>
|
||||
<tr>
|
||||
<td><%:=data[i].name%></td>
|
||||
<td><%:=data[i].inetPort%></td>
|
||||
<td><%:=data[i].lan%></td>
|
||||
<td>
|
||||
<a data-index="<%:=i%>" class="layui-btn layui-btn-mini mapping-edit"></a>
|
||||
<a data-index="<%:=i%>" class="layui-btn layui-btn-danger layui-btn-mini mapping-delete"></a>
|
||||
</td>
|
||||
</tr>
|
||||
<%}%>
|
||||
</tbody>
|
||||
</table>
|
||||
</script>
|
||||
<script>
|
||||
$(".tab-title").html(clientList[clientIndex].name + " - " + $.i18n.prop('lan.proxyconfig'));
|
||||
$(".mapping-add").html($.i18n.prop('lan.addnewconfig'));
|
||||
var html = template($("#mapping-tpl").html(), {
|
||||
data : clientList[clientIndex].proxyMappings
|
||||
});
|
||||
$(".main-content").html(html);
|
||||
$(".i18n-lan-name").html($.i18n.prop('lan.name'));
|
||||
$(".i18n-lan-inetport").html($.i18n.prop('lan.inetport'));
|
||||
$(".i18n-lan-ip").html($.i18n.prop('lan.ip'));
|
||||
$(".i18n-lan-options").html($.i18n.prop('public.options'));
|
||||
$(".mapping-edit").html($.i18n.prop('public.edit'));
|
||||
$(".mapping-delete").html($.i18n.prop('public.delete'));
|
||||
$(".mapping-config").click(function() {
|
||||
window.clientIndex = $(this).attr("data-index");
|
||||
load_page("html/lan/list.html");
|
||||
});
|
||||
$(".mapping-edit").click(function() {
|
||||
window.mappingIndex = $(this).attr("data-index");
|
||||
load_page("html/lan/edit.html");
|
||||
});
|
||||
$(".mapping-delete").click(function() {
|
||||
var mappingIndex = $(this).attr("data-index");
|
||||
layer.confirm($.i18n.prop('public.confirm.delete'), {
|
||||
title: $.i18n.prop('public.tips'),
|
||||
btn : [ $.i18n.prop('public.ok'), $.i18n.prop('public.cancel') ]
|
||||
}, function(i) {
|
||||
layer.close(i);
|
||||
clientList[clientIndex].proxyMappings.splice(mappingIndex, 1);
|
||||
api_invoke("/config/update", clientList, function(data) {
|
||||
if (data.code != 20000) {
|
||||
layer.alert(data.message);
|
||||
} else {
|
||||
load_page("html/lan/list.html");
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
$(".back").click(function() {
|
||||
load_page("html/client/list.html");
|
||||
});
|
||||
|
||||
$(".mapping-add").click(function() {
|
||||
load_page("html/lan/add.html");
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<div class="layui-tab layui-tab-brief">
|
||||
<ul class="layui-tab-title site-demo-title">
|
||||
<li class="layui-this tab-title"></li>
|
||||
</ul>
|
||||
<div class="main-content"></div>
|
||||
</div>
|
||||
<script id="stat-tpl" type="text/html">
|
||||
<table class="layui-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i18n-inetport"></th>
|
||||
<th class="i18n-inflow"></th>
|
||||
<th class="i18n-outflow"></th>
|
||||
<th class="i18n-channels"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<%for(var i = 0; i < data.length; i++) {%>
|
||||
<tr>
|
||||
<td><%:=data[i].port%></td>
|
||||
<td><%:=bytesToSize(data[i].readBytes)%></td>
|
||||
<td><%:=bytesToSize(data[i].wroteBytes)%></td>
|
||||
<td><%:=data[i].channels%></td>
|
||||
</tr>
|
||||
<%}%>
|
||||
</tbody>
|
||||
</table>
|
||||
</script>
|
||||
<script>
|
||||
$(".tab-title").html($.i18n.prop('menu.client.statistics'));
|
||||
function bytesToSize(bytes) {
|
||||
if (bytes === 0)
|
||||
return '0 B';
|
||||
var k = 1000, // or 1024
|
||||
sizes = [ 'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB' ], i = Math
|
||||
.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
api_invoke("/metrics/get", {}, function(data) {
|
||||
var html = template($("#stat-tpl").html(), {
|
||||
data : data.data
|
||||
});
|
||||
$(".main-content").html(html);
|
||||
$(".i18n-inetport").html($.i18n.prop('statistics.inetport'));
|
||||
$(".i18n-inflow").html($.i18n.prop('statistics.inflow'));
|
||||
$(".i18n-outflow").html($.i18n.prop('statistics.outflow'));
|
||||
$(".i18n-channels").html($.i18n.prop('statistics.channels'));
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="/lanproxy-config/layui/css/layui.css">
|
||||
<style type="text/css">
|
||||
.main-content {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div class="layui-header">
|
||||
<div class="layui-logo">言逍网络科技 配置控制台</div>
|
||||
<ul class="layui-nav layui-layout-right">
|
||||
<li class="layui-nav-item"><a href="javascript:;"
|
||||
class="logout"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll"></div>
|
||||
</div>
|
||||
|
||||
<div class="layui-body"></div>
|
||||
|
||||
<div class="layui-footer"></div>
|
||||
</div>
|
||||
<script src="/lanproxy-config/layui/layui.js"></script>
|
||||
<script src="/jquery/jquery-3.1.1.min.js"></script>
|
||||
<script src="/jquery/jquery.i18n.properties.min.js" type="text/javascript"></script>
|
||||
<script src="/template/template.js"></script>
|
||||
<script>
|
||||
window.clientList = [];
|
||||
|
||||
function api_invoke(uri, params, callback) {
|
||||
var index = layer.load(1, {
|
||||
shade : [ 0.1, '#fff' ]
|
||||
});
|
||||
$.ajax({
|
||||
url : uri,
|
||||
data : JSON.stringify(params),
|
||||
type : 'POST',
|
||||
cache : false,
|
||||
dataType : 'json',
|
||||
contentType : "application/json; charset=utf-8",
|
||||
success : function(data) {
|
||||
layer.close(index);
|
||||
callback(data);
|
||||
},
|
||||
error : function(XMLHttpRequest, textStatus, errorThrown) {
|
||||
layer.close(index);
|
||||
if ("undefined" == typeof (XMLHttpRequest.responseJSON)) {
|
||||
layer.alert("System error, please try again later.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (40100 == XMLHttpRequest.responseJSON.code) {
|
||||
location.href = "/";
|
||||
} else {
|
||||
layer.alert(XMLHttpRequest.responseJSON.message);
|
||||
api_invoke("/config/detail", {}, function(data) {
|
||||
clientList = data.data;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function load_page(pageUrl) {
|
||||
$(".layui-body").load(pageUrl);
|
||||
}
|
||||
|
||||
function check_lan(ip) {
|
||||
var re = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/
|
||||
return re.test(ip);
|
||||
}
|
||||
|
||||
function check_port(port) {
|
||||
if (port > 65535) {
|
||||
return false;
|
||||
}
|
||||
var re = /^[1-9]+[0-9]*]*$/
|
||||
return re.test(port);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
if (window.history && window.history.pushState) {
|
||||
$(window).on('popstate', function() {
|
||||
window.history.pushState('forward', null, '#');
|
||||
window.history.forward(1);
|
||||
});
|
||||
}
|
||||
if ('pushState' in history) {
|
||||
window.history.pushState('forward', null, '#');
|
||||
window.history.forward(1);
|
||||
} else {
|
||||
History.pushState('forward', null, '?state=2');
|
||||
window.history.forward(1);
|
||||
}
|
||||
window.onhashchange = function() {
|
||||
History.pushState('forward', null, '?state=1');
|
||||
}
|
||||
|
||||
$(".logout").click(function() {
|
||||
api_invoke("/logout", {}, function(data) {
|
||||
location.href = "/";
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
function update_menu() {
|
||||
api_invoke("/config/detail", {}, function(data) {
|
||||
if (data.code == 20000) {
|
||||
clientList = data.data;
|
||||
var html = template($("#menu-tpl").html(), {
|
||||
list : clientList
|
||||
});
|
||||
$(".layui-side-scroll").html(html);
|
||||
layui.use('element', function() {
|
||||
var element = layui.element;
|
||||
});
|
||||
$(".client-list").html($.i18n.prop('menu.client.list'));
|
||||
$(".client-list-sub").html($.i18n.prop('menu.client.list'));
|
||||
$(".client-add").html($.i18n.prop('menu.client.add'));
|
||||
$(".client-config").html($.i18n.prop('menu.client.config'));
|
||||
$(".statistics").html($.i18n.prop('menu.client.statistics'));
|
||||
$(".menu-item").click(function() {
|
||||
window.clientIndex = $(this).attr("data-index");
|
||||
load_page("html/lan/list.html");
|
||||
});
|
||||
} else {
|
||||
alert(data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
var i18nLanguage = "en";
|
||||
var webLanguage = [ 'zh-CN', 'en' ];
|
||||
|
||||
function initWebLanguage() {
|
||||
var navLanguage = navigator.language;
|
||||
if (navLanguage) {
|
||||
var charSize = $.inArray(navLanguage, webLanguage);
|
||||
if (charSize > -1) {
|
||||
i18nLanguage = navLanguage;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initWebLanguage();
|
||||
|
||||
jQuery.i18n.properties({
|
||||
name : 'lang', //资源文件名称
|
||||
path : '/i18n/', //资源文件路径
|
||||
mode : 'map', //用Map的方式使用资源文件中的值
|
||||
language : i18nLanguage,
|
||||
encoding: 'UTF-8',
|
||||
callback : function() {//加载成功后设置显示内容
|
||||
$('title').html($.i18n.prop('title'));
|
||||
$(".layui-footer").html($.i18n.prop('title'));
|
||||
$(".logout").html($.i18n.prop('logout'));
|
||||
layui.use('layer', function() {
|
||||
window.layer = layui.layer;
|
||||
update_menu();
|
||||
load_page("html/client/list.html");
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script id="menu-tpl" type="text/html">
|
||||
<ul class="layui-nav layui-nav-tree">
|
||||
<li class="layui-nav-item layui-nav-itemed"><a class="client-list"
|
||||
href="javascript:;"></a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd class="layui-this">
|
||||
<a href="javascript:load_page('html/client/list.html');" class="client-list-sub"></a>
|
||||
</dd>
|
||||
<dd>
|
||||
<a href="javascript:load_page('html/client/add.html');" class="client-add"></a>
|
||||
</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a class="client-config" href="javascript:;"></a>
|
||||
<dl class="layui-nav-child">
|
||||
<%for(var i = 0; i < list.length; i++) {%>
|
||||
<dd>
|
||||
<a href="javascript:;" class="menu-item" data-index="<%:=i%>"><%:=list[i].name%></a>
|
||||
</dd>
|
||||
<%}%>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-nav-itemed"><a class="statistics"
|
||||
href="javascript:load_page('html/statistics/list.html');"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,2 @@
|
||||
/** layui-v2.0.2 MIT License By http://www.layui.com */
|
||||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}
|
||||
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 701 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 777 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
@@ -0,0 +1,2 @@
|
||||
/** layui-v2.0.2 MIT License By http://www.layui.com */
|
||||
;layui.define("jquery",function(e){"use strict";var i=layui.$,n=(layui.hint(),layui.device(),{config:{},set:function(e){var n=this;return n.config=i.extend({},n.config,e),n},on:function(e,i){return layui.onevent.call(this,t,e,i)}}),t="carousel",a="layui-this",o=">*[carousel-item]>*",l="layui-carousel-left",r="layui-carousel-right",d="layui-carousel-prev",s="layui-carousel-next",u="layui-carousel-arrow",c="layui-carousel-ind",m=function(e){var t=this;t.config=i.extend({},t.config,n.config,e),t.render()};m.prototype.config={width:"600px",height:"280px",full:!1,arrow:"hover",indicator:"inside",autoplay:!0,interval:3e3,anim:"",trigger:"click",index:0},m.prototype.render=function(){var e=this,n=e.config;n.elem=i(n.elem),n.elem[0]&&(e.elemItem=n.elem.find(o),n.index<0&&(n.index=0),n.index>=e.elemItem.length&&(n.index=e.elemItem.length-1),n.interval<800&&(n.interval=800),n.full?n.elem.css({position:"fixed",width:"100%",height:"100%",zIndex:9999}):n.elem.css({width:n.width,height:n.height}),n.elem.attr("lay-anim",n.anim),e.elemItem.eq(n.index).addClass(a),e.indicator(),e.elemItem.length<=1||(e.arrow(),e.autoplay(),e.events()))},m.prototype.reload=function(e){var n=this;clearInterval(n.timer),n.config=i.extend({},n.config,e),n.render()},m.prototype.prevIndex=function(){var e=this,i=e.config,n=i.index-1;return n<0&&(n=e.elemItem.length-1),n},m.prototype.nextIndex=function(){var e=this,i=e.config,n=i.index+1;return n>=e.elemItem.length&&(n=0),n},m.prototype.addIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index+e,n.index>=i.elemItem.length&&(n.index=0)},m.prototype.subIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index-e,n.index<0&&(n.index=i.elemItem.length-1)},m.prototype.autoplay=function(){var e=this,i=e.config;i.autoplay&&(e.timer=setInterval(function(){e.slide()},i.interval))},m.prototype.arrow=function(){var e=this,n=e.config,t=i(['<button class="layui-icon '+u+'" lay-type="sub">'+("updown"===n.anim?"":"")+"</button>",'<button class="layui-icon '+u+'" lay-type="add">'+("updown"===n.anim?"":"")+"</button>"].join(""));n.elem.attr("lay-arrow",n.arrow),n.elem.find("."+u)[0]&&n.elem.find("."+u).remove(),n.elem.append(t),t.on("click",function(){var n=i(this),t=n.attr("lay-type");e.slide(t)})},m.prototype.indicator=function(){var e=this,n=e.config,t=e.elemInd=i(['<div class="'+c+'"><ul>',function(){var i=[];return layui.each(e.elemItem,function(e){i.push("<li"+(n.index===e?' class="layui-this"':"")+"></li>")}),i.join("")}(),"</ul></div>"].join(""));n.elem.attr("lay-indicator",n.indicator),n.elem.find("."+c)[0]&&n.elem.find("."+c).remove(),n.elem.append(t),"updown"===n.anim&&t.css("margin-top",-(t.height()/2)),t.find("li").on("hover"===n.trigger?"mouseover":n.trigger,function(){var t=i(this),a=t.index();a>n.index?e.slide("add",a-n.index):a<n.index&&e.slide("sub",n.index-a)})},m.prototype.slide=function(e,i){var n=this,o=n.elemItem,u=n.config,c=u.index,m=u.elem.attr("lay-filter");n.haveSlide||("sub"===e?(n.subIndex(i),setTimeout(function(){o.eq(u.index).addClass(d),setTimeout(function(){o.eq(c).addClass(r),o.eq(u.index).addClass(r)},50)},50)):(n.addIndex(i),setTimeout(function(){o.eq(u.index).addClass(s),setTimeout(function(){o.eq(c).addClass(l),o.eq(u.index).addClass(l)},50)},50)),setTimeout(function(){o.removeClass(a+" "+d+" "+s+" "+l+" "+r),o.eq(u.index).addClass(a),n.haveSlide=!1},300),n.elemInd.find("li").eq(u.index).addClass(a).siblings().removeClass(a),n.haveSlide=!0,layui.event.call(this,t,"change("+m+")",{index:u.index,prevIndex:c,item:o.eq(u.index)}))},m.prototype.events=function(){var e=this,i=e.config;i.elem.data("haveEvents")||(i.elem.on("mouseenter",function(){clearInterval(e.timer)}).on("mouseleave",function(){e.autoplay()}),i.elem.data("haveEvents",!0))},n.render=function(e){var i=new m(e);return i},e(t,n)});
|
||||
@@ -0,0 +1,2 @@
|
||||
/** layui-v2.0.2 MIT License By http://www.layui.com */
|
||||
;layui.define("jquery",function(e){"use strict";var a=layui.$,l="http://www.layui.com/doc/modules/code.html";e("code",function(e){var t=[];e=e||{},e.elem=a(e.elem||".layui-code"),e.about=!("about"in e)||e.about,e.elem.each(function(){t.push(this)}),layui.each(t.reverse(),function(t,i){var c=a(i),o=c.html();(c.attr("lay-encode")||e.encode)&&(o=o.replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/'/g,"'").replace(/"/g,""")),c.html('<ol class="layui-code-ol"><li>'+o.replace(/[\r\t\n]+/g,"</li><li>")+"</li></ol>"),c.find(">.layui-code-h3")[0]||c.prepend('<h3 class="layui-code-h3">'+(c.attr("lay-title")||e.title||"code")+(e.about?'<a href="'+l+'" target="_blank">layui.code</a>':"")+"</h3>");var d=c.find(">.layui-code-ol");c.addClass("layui-box layui-code-view"),(c.attr("lay-skin")||e.skin)&&c.addClass("layui-code-"+(c.attr("lay-skin")||e.skin)),(d.find("li").length/100|0)>0&&d.css("margin-left",(d.find("li").length/100|0)+"px"),(c.attr("lay-height")||e.height)&&d.css("max-height",c.attr("lay-height")||e.height)})})}).addcss("modules/code.css","skincodecss");
|
||||
@@ -0,0 +1,2 @@
|
||||
/** layui-v2.0.2 MIT License By http://www.layui.com */
|
||||
;layui.define("jquery",function(e){"use strict";var l=layui.$,o=function(e){},t='<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon "></i>';o.prototype.load=function(e){var o,i,n,r,a=this,c=0;e=e||{};var f=l(e.elem);if(f[0]){var m=l(e.scrollElem||document),u=e.mb||50,s=!("isAuto"in e)||e.isAuto,v=e.end||"没有更多了",y=e.scrollElem&&e.scrollElem!==document,d="<cite>加载更多</cite>",h=l('<div class="layui-flow-more"><a href="javascript:;">'+d+"</a></div>");f.find(".layui-flow-more")[0]||f.append(h);var p=function(e,t){e=l(e),h.before(e),t=0==t||null,t?h.html(v):h.find("a").html(d),i=t,o=null,n&&n()},g=function(){o=!0,h.find("a").html(t),"function"==typeof e.done&&e.done(++c,p)};if(g(),h.find("a").on("click",function(){l(this);i||o||g()}),e.isLazyimg)var n=a.lazyimg({elem:e.elem+" img",scrollElem:e.scrollElem});return s?(m.on("scroll",function(){var e=l(this),t=e.scrollTop();r&&clearTimeout(r),i||(r=setTimeout(function(){var i=y?e.height():l(window).height(),n=y?e.prop("scrollHeight"):document.documentElement.scrollHeight;n-t-i<=u&&(o||g())},100))}),a):a}},o.prototype.lazyimg=function(e){var o,t=this,i=0;e=e||{};var n=l(e.scrollElem||document),r=e.elem||"img",a=e.scrollElem&&e.scrollElem!==document,c=function(e,l){var o=n.scrollTop(),r=o+l,c=a?function(){return e.offset().top-n.offset().top+o}():e.offset().top;if(c>=o&&c<=r&&!e.attr("src")){var m=e.attr("lay-src");layui.img(m,function(){var l=t.lazyimg.elem.eq(i);e.attr("src",m).removeAttr("lay-src"),l[0]&&f(l),i++})}},f=function(e,o){var f=a?(o||n).height():l(window).height(),m=n.scrollTop(),u=m+f;if(t.lazyimg.elem=l(r),e)c(e,f);else for(var s=0;s<t.lazyimg.elem.length;s++){var v=t.lazyimg.elem.eq(s),y=a?function(){return v.offset().top-n.offset().top+m}():v.offset().top;if(c(v,f),i=s,y>u)break}};if(f(),!o){var m;n.on("scroll",function(){var e=l(this);m&&clearTimeout(m),m=setTimeout(function(){f(null,e)},50)}),o=!0}return f},e("flow",new o)});
|
||||