<!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" > LanProxy Configuration< / 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 >
