layui.use(function () {
var element = layui.element,
layer = layui.layer,
table = layui.table,
form = layui.form,
util = layui.util,
$ = layui.jquery;
//check_login
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) { var c=ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; } function setCookie(cname,cvalue,exdays) { var d=new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires="expires="+d.toGMTString(); document.cookie=cname + "=" + cvalue + "; " + expires; } var token=getCookie('token'); if (token.length> 0){
var webdata = JSON.parse(decodeURIComponent(decodeURI(getCookie('data'))) ?? '');
var webname =webdata.webname;
$('#username').text(webdata.username);
$('#nickname').text(webdata.nickname);
} else {
location.href = "./login.html";
}
//check_login
var app_list = [{
app: 'main',
table: '',
title: 'Dashboard'
}, {
app: 'profile',
table: '',
title: 'Your profile'
}, {
app: 'node',
table: 'node',
title: 'Node list'
}, {
app: 'asn',
table: 'asn',
title: 'ASN list'
}, {
app: 'tunnel',
table: 'tunnel',
title: 'Tunnel list'
}, {
app: 'bgp',
table: 'bgp',
title: 'BGP list'
}];
// topbar
element.on('nav(app_topbar)', function (d) {
let app_id = d.attr('menu');
layui.each(app_list, function(i, v) {
if (app_id == v.app) {
$("#app_" + v.app).show();
$("#app_title").text(v.title +' - '+ webname);
} else {
$("#app_" + v.app).hide();
}
});
if (app_id == 'profile') {
$.ajax({
type: "GET",
url: "ajax.php?a=users",
dataType: "json",
success: function(d) {
$("#e_username").text(d.username);
$("#e_nickname").val(d.nickname);
$("#e_email").val(d.email);
if (d.github_id == null){
$("#github_a").html('<a href="/do.php?a=github_connect" class="layui-btn layui-btn-primary layui-border-green">Connect GitHub</a>');
} else {
$("#github_a").html('<a href="/do.php?a=github_disconnect" class="layui-btn layui-btn-primary">Disconnect GitHub</a>');
}
if (d.google_id == null){
$("#google_a").html('<a href="/do.php?a=google_connect" class="layui-btn layui-btn-primary layui-border-green">Connect Google</a>');
} else {
$("#google_a").html('<a href="/do.php?a=google_disconnect" class="layui-btn layui-btn-primary">Disconnect Google</a>');
}
if (d.dn42_id == null){
$("#dn42_a").html('<a href="/do.php?a=dn42_login" class="layui-btn layui-btn-primary layui-border-green">Connect DN42 GIT</a>');
} else {
$("#dn42_a").html('<a href="/do.php?a=dn42_disconnect" class="layui-btn layui-btn-primary">Disconnect DN42 GIT</a>');
}
}
});
} else if (app_id == 'signout') {
layer.msg('Successfully exit login');
setCookie('token','','0');
setTimeout("location.href ='./login.html'", 2000);
}
});
// topbar
// $("#app_topbar").find('a').click(function(){
// var top_bar_id = $(this).attr('id');
// console.log(top_bar_id);
// });
var url_id = layui.url().hash.path[0] ?? 'main';
layui.each(app_list, function(i, v) {
if (url_id == v.app) {
$("#app_" + v.app).show();
$("#app_title").text(v.title+' - ' + webname);
} else {
$("#app_" + v.app).hide();
}
});
if (url_id == 'profile') {
$.ajax({
type: "GET",
url: "ajax.php?a=users",
dataType: "json",
success: function(d) {
$("#e_username").text(d.username);
$("#e_nickname").val(d.nickname);
$("#e_email").val(d.email);
if (d.github_id == null){
$("#github_a").html('<a href="/do.php?a=github_connect" class="layui-btn layui-btn-primary layui-border-green">Connect GitHub</a>');
} else {
$("#github_a").html('<a href="/do.php?a=github_disconnect" class="layui-btn layui-btn-primary">Disconnect GitHub</a>');
}
if (d.google_id == null){
$("#google_a").html('<a href="/do.php?a=google_connect" class="layui-btn layui-btn-primary layui-border-green">Connect Google</a>');
} else {
$("#google_a").html('<a href="/do.php?a=google_disconnect" class="layui-btn layui-btn-primary">Disconnect Google</a>');
}
if (d.dn42_id == null){
$("#dn42_a").html('<a href="/do.php?a=dn42_login" class="layui-btn layui-btn-primary layui-border-green">Connect DN42 GIT</a>');
} else {
$("#dn42_a").html('<a href="/do.php?a=dn42_disconnect" class="layui-btn layui-btn-primary">Disconnect DN42 GIT</a>');
}
}
});
}
// nav
element.on('nav(app_nav)', function (d) {
let app_id = d.attr('id');
layui.each(app_list, function(i, v) {
if (app_id == v.app) {
$("#app_" + v.app).show();
$("#app_title").text(v.title +' - '+ webname);
if (v.table !=''){
table.reloadData(v.table+'_table', {
url: 'ajax.php?a='+v.table
});
}
} else {
$("#app_" + v.app).hide();
}
});
});
var hnow = new Date();
var hhour = hnow.getHours();
$("#mytime").text(hnow);
if (hhour < 8 && hhour > 5) $("#hello").text('Good morning!');
else if (hhour >= 23 || hhour < 5) $("#hello").text('You should go to rest!');
else if (hhour < 12) $("#hello").text('Good morning!');
else if (hhour < 18) $("#hello").text('Good afternoon!');
else if (hhour < 21) $("#hello").text('Good evening!');
else if (hhour < 23) $("#hello").text('Goodnight!');
// nav
// node
table.render({
elem: '#node_table'
// ,url: 'ajax.php?a=asn'
, data: ''
, limit: 20
,text: { none: 'no data'}
, even: true
, cols: [[
{ field: '', type: 'numbers', title: 'Number', width: 100, sort: true }
, { field: 'node_name', title: 'Node name',width:110,templet: function (d) {return '<img src=/src/image/'+d.node_name.split("-")[1]+'.svg width="30" height="20">'+d.node_name } }
, { field: 'public_ipv4', title: 'Public ipv4',templet: function (d) {return d.public_ipv4+ " ["+d.node_name+".dn42.6700.cc]" } }
, { field: 'public_ipv6', title: 'Public ipv6',width:500,templet: function (d) {
if (d.public_ipv6 ==''){
return 'Not support';
} else {
return d.public_ipv6+ " [v6."+d.node_name+".dn42.6700.cc]";
}
} }
, { field: '', title: 'Status',width:80,align: 'center', templet: function (d) { return get_node_status(d.uid),'<div id="s_'+d.uid+'"></div>' } }
]],
complete: function(d) {
if (d.responseJSON.code == 1){
window.location = './login.html';
}
}
});
function get_node_status(uid){
$.ajax({
type: "GET",
url: "ajax.php?a=node_status",
data: { uid: uid },
dataType: "json",
success: function (d) {
if (d.code == "1") {
$("#s_"+uid+"").html('<font style="color: #5FB878;">online</font>');
} else {
$("#s_"+uid+"").html('<font style="color: #ffaa00;">offline</font>');
}
}
});
}
// node
// asn
//table
table.render({
elem: '#asn_table'
// ,url: 'ajax.php?a=asn'
, data: ''
, limit: 20
,text: { none: 'no data'}
, even: true
, cols: [[
{ field: '', type: 'numbers', title: 'Number', width: 100, sort: true }
, { field: 'asn', title: 'ASN', width: 200, templet: function (d) { return 'AS' + d.asn + '' } }
, { field: 'asn_name', title: 'AS name' }
, { field: 'verify_status', title: 'Valid', width: 80, align: 'center', templet: function (d) {
if (d.verify_status == 1) {
return '<i class="layui-icon layui-icon-auz" style="font-size: 18px; color: #5FB878;"></i>';
} else {
return '<i class="layui-icon layui-icon-close" style="font-size: 18px;"></i>';
}
} }
, { field: 'add_at', title: 'Add date', width: 150, templet: function (d) { return util.toDateString(d.add_at*1000,'yyyy-MM-dd'); } }
, { fixed: 'right', title: 'Action', width: 200, align: 'center', toolbar: '#asn_tools' }
]],
complete: function(d) {
if (d.responseJSON.code == 1){
window.location = './login.html';
}
}
});
// table
// tools
table.on('tool(asn_table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
let data = obj.data; //获得当前行数据
let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'verify') { //查看
layer.prompt({ title: 'Enter verification code for AS' + data.asn + '', formType: 0, btn: ['Submit'] }, function (code, index) {
layer.close(index);
// alert('您的AS：' + data.asn + '的验证码' + code + '');
$.ajax({
type: "GET",
url: "ajax.php?a=verify_asn",
data: {
asn: data.asn,
verify_code: code
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.msg(d.msg, {
icon: 1
});
table.reloadData('asn_table', {
url: '/ajax.php?a=asn'
// ,where: {} //设定异步数据接口的额外参数
});
} else {
layer.msg(d.msg, {
icon: 2
});
}
}
});
});
} else if (layEvent === 'del') { //删除
// console.log(obj.data);
layer.confirm('Are you sure delete AS' + data.asn + '?', { icon: 0, title: 'Delete asn', btn: ['Confirm', 'cancel'] }, function (index) {
layer.close(index);
$.ajax({
type: "GET",
url: "ajax.php?a=remove_asn",
data: {
uid: data.uid,
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.msg(d.msg, {
icon: 1
});
table.reloadData('asn_table', {
url: '/ajax.php?a=asn'
// ,where: {} //设定异步数据接口的额外参数
});
} else {
layer.msg(d.msg, {
icon: 2
});
}
}
});
});
}
});
// tools
// add asn
form.on('submit(asn_add)', function () {
layer.open({
type: 1,
skin: 'layui-layer-molv',
title: 'Add asn',
content: $('#asn_add'),
// area: ['400px', '300px'],
cancel: function(index, layero){
$('#asn_input').removeAttr('disabled');
$("#asn_input").val('');
$('#mail_list').empty();
$("#mail_div").hide();
$("#asn_get_sub").remove();
$("#asn_add_sub").remove();
$("#mail_sub").append(
'<button class="layui-btn layui-btn-radius" lay-submit lay-filter="asn_get_sub" id="asn_get_sub">Submit</button>'
);
},
success: function (layero, index) {
//监听添加表单
form.on('submit(asn_get_sub)', function (d) {
let i_load = layer.load(0, { shade: false });
$("#asn_get_sub").attr('disabled', true);
data = d.field;
$.ajax({
type: "GET",
url: "ajax.php?a=get_asn_info",
data: {
asn: data.asn,
time: Math.random()
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
// console.log(d.data);
layer.close(i_load);
$("#asn_get_sub").removeAttr('disabled');
let asn_name = d.data.asn_name;
$('#asn_input').attr('disabled', "true");
$("#asn_get_sub").remove();
$("#mail_div").attr("style", "display:block;");
let str;
// str = '<option value="">Please select the email address</option>';
$.each(d.data.asn_mail, function (i, n) {
str += "<option value='" + n + "'>" + n + "</option>";
});
$("#mail_list").append(str);
$("#mail_sub").append('<button class="layui-btn layui-btn-radius" lay-submit lay-filter="asn_add_sub" id="asn_add_sub">Add</button>');
form.render('select');
form.on('submit(asn_add_sub)',
function (d) {
// console.log(d.field);
let i_load = layer.load(0, { shade: false });
$("#asn_add_sub").attr('disabled', true);
let data = d.field;
$.ajax({
type: "GET",
url: "ajax.php?a=add_asn",
data: {
asn: data.asn,
asn_name: asn_name,
asn_mail: encodeURIComponent(data.mail_addr)
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.msg(d.msg, { icon: 1 });
$('#asn_input').removeAttr('disabled');
$("#asn_input").val('');
$('#mail_list').empty();
$("#mail_div").attr("style","display:none;");
$("#asn_add_sub").remove();
$("#mail_sub").append(
'<button class="layui-btn layui-btn-radius" lay-submit lay-filter="asn_get_sub" id="asn_get_sub">Submit</button>'
);
layer.close(i_load);
layer.close(index);
$("#asn_add_sub").removeAttr('disabled');
table.reloadData('asn_table', {
url: '/ajax.php?a=asn'
// ,where: {} //设定异步数据接口的额外参数
});
// setTimeout(window.location.reload(), 5000);
} else {
layer.msg(d.msg, {
icon: 2
});
layer.close(i_load);
layer.close(index);
$("#asn_add_sub").text('Submit').removeAttr('disabled');
// setTimeout(window.location.reload(), 5000);
}
}
});
return false;
});
} else {
layer.msg(d.msg, {
icon: 2
});
layer.close(i_load);
$("#asn_get_sub").removeAttr('disabled');
}
}
});
return false;
});
//监听添加表单
}
});
});
// add asn
// asn
//tunnel
//table
table.render({
elem: '#tunnel_table'
// ,url: 'ajax.php?a=tunnel'
, data: ''
, limit: 20
,text: { none: 'no data'}
, even: true
, cols: [[
{ field: '', type: 'numbers', title: 'Number', width: 100, sort: true }
, { field: 'tunnel_asn', title: 'ASN',width:130, templet: function (d) { return 'AS' + d.tunnel_asn + '' } }
, { field: 'node_name', title: 'Node',width:110,templet: function (d) {return '<img src=/src/image/'+d.node_name.split("-")[1]+'.svg width="30" height="20">'+d.node_name } }
, { field:'tunnel_type',title:'Tunnel type',width:110,templet: function(d){ return tunnel_type(d.tunnel_type)}}
, { field: 'tunnel_endpoint', title: 'Your endpoint',expandedMode: 'tips',templet:function(d){return '<a href="javascript:;" lay-event="endpoint_update" title="Click to change your tunnel endpoint">'+d.tunnel_endpoint+'<i class="layui-icon layui-icon-edit layui-font-orange" style="padding-left: 3px;"></i></a>'}}
, { field: 'tunnel_ipv4', title: 'Tunnel IPv4' }
, { field: 'tunnel_ipv6', title: 'Tunnel IPv6' }
, { field: 'tunnel_ll', title: 'IPv6 link-local' }
, { field: 'add_at', title: 'Add date', width: 110, templet: function (d) { return util.toDateString(d.add_at*1000,'yyyy-MM-dd'); } }
, { fixed: 'right', title: 'Action', width: 200, align: 'center', toolbar: '#tunnel_tools' }
]],
complete: function(d) {
if (d.responseJSON.code == 1){
window.location = './login.html';
}
}
});
// table
//tool
table.on('tool(tunnel_table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
let data = obj.data; //获得当前行数据
let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'detail') { //查看
layer.open({
type: 1,
skin: 'layui-layer-molv',
title: 'AS' + data.tunnel_asn + ' - tunnel configure for ' + data.node_name + '',
area: '590px',
// id: '',
content: $('#tunnel_info')
});
$.ajax({
type: "GET",
url: "ajax.php?a=tunnel_detail",
data: { uid: data.uid },
dataType: "html",
success: function (d) {
// console.log(d);
$("#tunnel_show").html(d);
}
});
} else if (layEvent === 'del') { //删除
// console.log(obj.data);
layer.confirm('are you sure delete AS' + data.tunnel_asn + ' tunnel in the node ' + data.node_name + ' ?', { icon: 0, title: 'Delete tunnel', btn: ['Confirm', 'cancel'] }, function (index) {
layer.close(index);
$.ajax({
type: "GET",
url: "ajax.php?a=tunnel_del",
data: {
uid: data.uid,
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.msg(d.msg, {
icon: 1
});
table.reloadData('tunnel_table', {
url: 'ajax.php?a=tunnel'
// ,where: {} //设定异步数据接口的额外参数
});
} else {
layer.msg(d.msg, {
icon: 2
});
}
}
});
});
} else if (layEvent === 'status') { //查看
layer.open({
type: 1,
skin: 'layui-layer-molv',
title: 'AS' + data.tunnel_asn + ' - tunnel status for ' + data.node_name + '',
area: '590px',
// id: '',
content: $('#tunnel_info')
});
$.ajax({
type: "GET",
url: "ajax.php?a=tunnel_status",
data: { uid: data.uid },
dataType: "html",
success: function (d) {
// console.log(d);
$("#tunnel_show").html(d);
}
});
} else if (layEvent === 'endpoint_update'){
layer.prompt({
title: 'Change tunnel endpoint [AS' + data.tunnel_asn + ' - '+data.node_name+']',
formType: 0,
btn: ['Submit'],
value: data.tunnel_endpoint,
placeholder: 'Enter new endpoint'},
function(text, index){
$.ajax({
type: "GET",
url: "ajax.php?a=tunnel_update",
data: {
uid: data.uid,
tunnel_endpoint: text
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.msg(d.msg, {
icon: 1
});
layer.close(index);
table.reloadData('tunnel_table', {
url: 'ajax.php?a=tunnel'
// ,where: {} //设定异步数据接口的额外参数
});
} else {
layer.msg(d.msg, {
icon: 2
});
}
}
});
});
}
});
//tool
//add
form.on('submit(tunnel_add)', function () {
layer.open({
type: 1,
skin: 'layui-layer-molv',
title: 'Add tunnel',
// area: ['620px', '470px'],
content: $('#tunnel_add'),
success: function (layero, index) {
$.ajax({
type: "GET",
url: "ajax.php?a=tunnel_info",
data: {
time: Math.random()
},
dataType: "json",
success: function (d) {
// console.log(d);
// let asn_str;
// asn_str += "<option value='0' disabled selected>Choose ASN</option>";
// layui.each(d.asn_data, function (i, v) {
// asn_str += "<option value='" + v.uid + "'>AS" + v.asn + " - " + v.asn_name + "</option>";
// });
// $('#asn_list').empty();
// $("#asn_list").append(asn_str);
xmSelect.render({
el: '#asn_list',
// size: 'large',
radio: true,
clickClose: true,
name: 'tunnel_asn',
layVerify: 'required',
layReqText: 'Please select ASN',
tips: 'Choose ASN',
prop: {
name: 'asn',
value: 'uid',
},
model: {
label: {
block: {
template: function(item){
return 'AS'+ item.asn+ ' - '+ item.asn_name;
},
},
}
},
template({ item }){
return 'AS'+ item.asn + ' - '+ item.asn_name
},
data: d.asn_data,
});
// let server_str;
// server_str += '<select name="tunnel_server" id="server_list" lay-verify="required">';
// server_str += "<option value='0' disabled selected>Choose node</option>";
// layui.each(d.server_data, function (i, v) {
// if (v.public_ipv6 !=''){
// ipv6 = '✔';
// } else {
// ipv6 = '✖';
// }
// server_str += "<option value='" + v.uid + "'>" + v.node_name + " - " + v.node_location + " [IPv4:✔] [IPv6:"+ipv6+"]</option>";
// });
// server_str += '</select>';
// $('#server_list').empty();
// $("#server_list").append(server_str);
xmSelect.render({
el: '#server_list',
// size: 'large',
language: 'en',
filterable: true,
radio: true,
clickClose: true,
name: 'tunnel_server',
layVerify: 'required',
layReqText: 'Please select a node',
tips: 'Choose node',
prop: {
name: 'node_name',
value: 'uid',
},
model: {
label: {
block: {
template: function(item){
let flag = item.node_name.split("-");
flag = '<img src=/src/image/'+flag[1]+'.svg width="30" height="20" style="margin-top:3px;">';
return flag+''+ item.node_location;
},
},
}
},
template({ item }){
if (item.public_ipv6 != ''){
ipv6 = '<span class="layui-badge layui-bg-green" style="margin-top: 10px;margin-left: 10px;">IPv6:Yes</span>'
} else {
ipv6 = '<span class="layui-badge layui-bg-gray" style="margin-top: 10px;margin-left: 10px;">IPv6:No</span>'
}
let flag = item.node_name.split("-");
flag = '<img src=/src/image/'+flag[1]+'.svg width="30" height="20" style="margin-top: 8px;">';
return flag+''+item.node_location+'<span class="layui-badge layui-bg-green" style="margin-top: 10px;margin-left: 10px;">IPv4:Yes</span>'+ipv6
},
data: d.server_data,
})
// form.render('select');
}
});
//add_data
form.on('submit(tunnel_add_sub)', function (data) {
let d = data.field;
let wg_end_point = d.tunnel_endpoint.split(':')[1] ?? '';
let arr = ['' + d.tunnel_ipv4 + '', '' + d.tunnel_ipv6 + '', '' + d.tunnel_ll + '']
// console.log(arr.some(s => s.length));
if (d.tunnel_asn == '0') {
layer.msg('Please select ASN', { icon: 2 });
}
else if (wg_end_point == '' && d.tunnel_type == "1" && d.tunnel_endpoint != "") {
// layer.msg('Please check your wireguard endpoint: '+d.tunnel_endpoint+'', { icon: 2 });
layer.alert('Your input : '+d.tunnel_endpoint,{
icon: 0,
shadeClose: true,
title: 'Check your wireguard endpoint',
btn: ['OK']
});
}
else if (d.tunnel_pubkey == '' && d.tunnel_type == "1") {
layer.msg('Please input your public key', { icon: 2 });
}
else if (d.tunnel_pubkey != '' && d.tunnel_type == "2") {
layer.msg('GRE don\'t input public key', { icon: 2 });
}
else if (d.tunnel_endpoint == '' && d.tunnel_type == "2") {
layer.msg('Please input endpoint', { icon: 2 });
}
else if (d.tunnel_pubkey != '' && d.tunnel_type == "3") {
layer.msg('IP6GRE don\'t input public key', { icon: 2 });
}
else if (d.tunnel_endpoint == '' && d.tunnel_type == "3") {
layer.msg('Please input endpoint', { icon: 2 });
}
else if (d.tunnel_server == '0') {
layer.msg('Please select a node', { icon: 2 });
}
else if (arr.some(s => s.length != false)) {
let i_load = layer.load(0, { shade: false });
$("#tunnel_add_sub").attr('disabled', true);
$.ajax({
type: "GET",
url: "ajax.php?a=tunnel_add",
data: {
data: JSON.stringify(data.field),
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.close(index);
layer.close(i_load);
$("#tunnel_add_sub").removeAttr('disabled');
layer.msg(d.msg, {
icon: 1
});
table.reloadData('tunnel_table', {
url: 'ajax.php?a=tunnel'
// ,where: {} //设定异步数据接口的额外参数
});
} else {
layer.msg(d.msg, {
icon: 2
});
layer.close(i_load);
$("#tunnel_add_sub").removeAttr('disabled');
}
}
});
} else {
layer.msg('At least one entry of tunnel IP', { icon: 2 });
}
return false;
});
//add_data
}
});
});
//add
// select
form.on('select(tunnel_type)', function(data){
// console.log(data.value);
if (data.value == '2'){
$("#pub_key").hide();
$("#tunnel_pubkey").val('');
$("#end_porint").attr("placeholder","Public IPv4 no port");
} else if (data.value == '3'){
$("#pub_key").hide();
$("#tunnel_pubkey").val('');
$("#end_porint").attr("placeholder","Public IPv6 no port");
} else {
$("#pub_key").show();
$("#end_porint").attr("placeholder","Domain/IP:port");
}
});
// select
//checkbox
form.on('checkbox(ipv4)', function (data) {
if (data.elem.checked == true) {
$("#ipv4_input").attr("style", "display:block;");
}
else if (data.elem.checked == false) {
$("#ipv4_input").attr("style", "display:none;");
$("#tunnel_ipv4").val('');
}
});
form.on('checkbox(ipv6)', function (data) {
if (data.elem.checked == true) {
$("#ipv6_input").attr("style", "display:block;");
}
else if (data.elem.checked == false) {
$("#ipv6_input").attr("style", "display:none;");
$("#tunnel_ipv6").val('');
}
});
form.on('checkbox(ll)', function (data) {
if (data.elem.checked == true) {
$("#ipll_input").attr("style", "display:block;");
$("#tunnel_ll").val('fe80::abcd');
}
else if (data.elem.checked == false) {
$("#ipll_input").attr("style", "display:none;");
$("#tunnel_ll").val('');
}
});
//checkbox
// tunnel
// bgp
//table
table.render({
elem: '#bgp_table'
// ,url: 'ajax.php?a=tunnel'
, data: ''
, limit: 20
,text: { none: 'no data'}
, even: true
, cols: [[
{ field: '', type: 'numbers', title: 'Number', width: 100, sort: true }
, { field: 'bgp_asn', title: 'ASN',width:150, templet: function (d) { return '<i class="layui-icon layui-icon-util" style="font-size: 16px;"></i><a style=\'color: #01AAED;\' href=https://lg.dn42.6700.cc/detail/' + d.node_name + '/' + d.peer_name + ' target=_blank title=\'Click to view LG\'>AS' + d.peer_asn + '</a>' } }
, { field: 'node_name', title: 'Node', width: 110,templet: function (d) {return '<img src=/src/image/'+d.node_name.split("-")[1]+'.svg width="30" height="20">'+d.node_name } }
, { field: 'peer_type', title: 'Peer type', width: 220, templet: function (d) { return peer_type(d.peer_type) } }
, { field: '', title: 'Our IP',templet: function (d) { return peer_our_ip(d.peer_type,d.dn42_ipv4,d.dn42_ipv6,d.dn42_ll) } }
, { field: 'peer_ip', title: 'Your IP' }
, { field: 'add_at', title: 'Add date', width: 150, templet: function (d) { return util.toDateString(d.add_at*1000,'yyyy-MM-dd'); } }
, { fixed: 'right', title: 'Action', width: 150, align: 'center', toolbar: '#bgp_tools' }
]],
complete: function(d) {
if (d.responseJSON.code == 1){
window.location = './login.html';
}
}
});
// table
//tool
table.on('tool(bgp_table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
let data = obj.data; //获得当前行数据
let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'detail') { //查看
layer.open({
type: 1,
offset: '25%',
skin: 'layui-layer-molv',
title: 'AS' + data.peer_asn + ' - BGP configure for ' + data.node_name + '',
// area: '520px',
id: '',
content: $('#bgp_detail')
});
$.ajax({
type: "GET",
url: "ajax.php?a=bgp_detail",
data: { uid: data.uid, peer_type: data.peer_type },
dataType: "html",
success: function (d) {
// console.log(d);
$("#bgp_conf").html(d);
}
});
} else if (layEvent === 'del') { //删除
// console.log(obj.data);
layer.confirm('are you sure delete AS' + data.peer_asn + ' peer in the node ' + data.node_name + ' ?', { icon: 0, title: 'Delete bgp session', btn: ['Confirm', 'cancel'] }, function (index) {
layer.close(index);
$.ajax({
type: "GET",
url: "ajax.php?a=bgp_del",
data: {
uid: data.uid,
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.msg(d.msg, {
icon: 1
});
table.reloadData('bgp_table', {
url: 'ajax.php?a=bgp'
// ,where: {} //设定异步数据接口的额外参数
});
} else {
layer.msg(d.msg, {
icon: 2
});
}
}
});
});
}
});
//tool
//add
form.on('submit(bgp_add)', function () {
layer.open({
type: 1,
// offset: '25%',
skin: 'layui-layer-molv',
title: 'Add BGP session',
area: ['650px', '550px'],
content: $('#bgp_add'),
success: function (layero, index) {
$.ajax({
type: "GET",
url: "ajax.php?a=bgp_info",
data: {
time: Math.random()
},
dataType: "json",
success: function (d) {
// let tunnel_str;
// tunnel_str += "<option value='0' disabled selected>Choose tunnel</option>";
// layui.each(d, function (i, n) {
// tunnel_str += "<option value='" + n.uid + "'>AS" + n.tunnel_asn + " - " + n.node_name + "</option>";
// });
// $('#tunnel_list').empty();
// $("#tunnel_list").append(tunnel_str);
// form.render('select');
// console.log(d);
xmSelect.render({
el: '#tunnel_list',
// size: 'large',
language: 'en',
filterable: false,
radio: true,
clickClose: true,
name: 'tunnel_uid',
layVerify: 'required',
layReqText: 'Choose tunnel',
tips: 'Choose tunnel',
on: function(data){
var change = data.change;
$("#b_ipv4").val(change[0].tunnel_ipv4);
},
prop: {
name: 'tunnel_uid',
value: 'uid',
},
model: {
label: {
block: {
template: function(item){
let flag = item.node_name.split("-");
flag = '<img src=/src/image/'+flag[1]+'.svg width="30" height="20" style="margin-top:3px;">';
return 'AS'+item.tunnel_asn+' - '+flag+''+item.node_name;
},
},
}
},
template({ item }){
let flag = item.node_name.split("-");
flag = '<img src=/src/image/'+flag[1]+'.svg width="30" height="20" style="margin-top: 8px;">';
return 'AS'+item.tunnel_asn+' - '+flag+''+item.node_name;
},
data: d,
})
}
});
//add_data
form.on('submit(bgp_add_sub)', function (data) {
let d = data.field;
if (d.tunnel_uid == '0') {
throw layer.msg('Please select tunnel', { icon: 2 });
}
if (d.peer_type =='1' && d.ipv4 ==''){
layer.confirm('tunnel is not configure IPv4,have you enabled extended next hop of BGP?',
{icon: 3,title:'Multiprotocol BGP session tip',btn: ['Confirm','Cancel']},
function(){
bgp_add(d.tunnel_uid,d.peer_type);
}, function(){
});
} else if (d.peer_type =='2' && d.ipv4 ==''){
layer.confirm('tunnel is not configure IPv4,have you enabled extended next hop of BGP?',
{icon: 3,title:'Multiprotocol BGP session tip',btn: ['Confirm','Cancel']},
function(){
bgp_add(d.tunnel_uid,d.peer_type);
}, function(){
});
} else {
bgp_add(d.tunnel_uid,d.peer_type);
}
function bgp_add(tunnel_uid,peer_type){
let i_load = layer.load(0, { shade: false });
$("#bgp_add_sub").attr('disabled', true);
$.ajax({
type: "GET",
url: "ajax.php?a=bgp_add",
data: {
tunnel_uid: tunnel_uid,
peer_type: peer_type
},
dataType: "json",
success: function (d) {
if (d.code == 1) {
layer.close(index);
layer.close(i_load);
$("#bgp_add_sub").removeAttr('disabled');
layer.msg(d.msg, {
icon: 1
});
table.reloadData('bgp_table', {
url: 'ajax.php?a=bgp'
// ,where: {} //设定异步数据接口的额外参数
});
} else {
layer.msg(d.msg, {
icon: 2
});
layer.close(i_load);
$("#bgp_add_sub").removeAttr('disabled');
}
}
});
}
// if (d.tunnel_uid == '0') {
// layer.msg('Please select tunnel', { icon: 2 });
// }
// else {
// let i_load = layer.load(0, { shade: false });
// $("#bgp_add_sub").attr('disabled', true);
// $.ajax({
// type: "GET",
// url: "ajax.php?a=bgp_add",
// data: {
// tunnel_uid: d.tunnel_uid,
// peer_type: d.peer_type
// },
// dataType: "json",
// success: function (d) {
// if (d.code == 1) {
// layer.close(index);
// layer.close(i_load);
// $("#bgp_add_sub").removeAttr('disabled');
// layer.msg(d.msg, {
// icon: 1
// });
// table.reloadData('bgp_table', {
// url: 'ajax.php?a=bgp'
// // ,where: {} //设定异步数据接口的额外参数
// });
// } else {
// layer.msg(d.msg, {
// icon: 2
// });
// layer.close(i_load);
// $("#bgp_add_sub").removeAttr('disabled');
// }
// }
// });
// }
return false;
});
//add_data
}
});
});
//add
// bgp
//profile
//update_profile
form.on('submit(user_update_sub)', function(data) {
let d = data.field;
let i_load = layer.load(0, {shade: false});
$("#user_update_sub").attr('disabled', true);
$.ajax({
type: "GET",
url: "ajax.php?a=user_update",
data: {
nickname: d.nickname,
email: d.email
},
dataType: "json",
success: function(d) {
if (d.code == 1) {
layer.close(i_load);
$("#user_update_sub").removeAttr('disabled');
layer.msg(d.msg, {
icon: 1
});
$.ajax({
type: "GET",
url: "ajax.php?a=users",
dataType: "json",
success: function(d) {
$("#user_nickname").text(d[0].nickname);
$("#e_nickname").val(d[0].nickname);
$("#e_email").val(d[0].email);
}
});
} else {
layer.msg(d.msg, {
icon: 2
});
layer.close(i_load);
$("#user_update_sub").removeAttr('disabled');
}
}
});
return false;
});
//update_pass
form.on('submit(user_update_pass)', function(data) {
let d = data.field;
let i_load = layer.load(0, {shade: false});
$("#user_update_pass").attr('disabled', true);
if (d.password == d.password2){
$.ajax({
type: "GET",
url: "ajax.php?a=pass_update",
data: {
password: md5(d.password)
},
dataType: "json",
success: function(d) {
if (d.code == 1) {
layer.close(i_load);
$("#user_update_pass").removeAttr('disabled');
layer.msg(d.msg, {
icon: 1
});
} else {
layer.msg(d.msg, {
icon: 2
});
layer.close(i_load);
$("#user_update_pass").removeAttr('disabled');
}
}
});
}else {
layer.msg('password do not match', {
icon: 2
});
layer.close(i_load);
$("#user_update_pass").removeAttr('disabled');
}
return false;
});
//update_pass
// verify
form.verify({
pass: [
/^[\S]{6,18}$/
,'must be 6 to 12 bits, don\'t input spacing'
]
,e_mail: function(value, item){
if(!new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+").test(value)){
return 'E-mail format is incorrect';
}
}
});
//verify
//profile
});
function tunnel_type(d) {
switch (d) {
case '1': type = 'Wireguard';
break;
case '2': type = 'GRE';
break;
case '3': type = 'IP6GRE';
break;
}
return type;
}
function peer_type(d) {
switch (d) {
case '1': type = 'Multiprotocol(IPv6 Link-local)';
break;
case '2': type = 'Multiprotocol(IPv6 ULA)';
break;
case '3': type = 'Only IPv4';
break;
case '4': type = 'Only IPv6(Link-local)';
break;
case '5': type = 'Only IPv6(ULA)';
break;
}
return type;
}
function peer_our_ip(peer_type,dn42_ipv4,dn42_ipv6,dn42_ll) {
switch (peer_type) {
case '1': our_ip = dn42_ll;
break;
case '2': our_ip = dn42_ipv6;
break;
case '3': our_ip = dn42_ipv4;
break;
case '4': our_ip = dn42_ll;
break;
case '5': our_ip = dn42_ipv6;
break;
}
return our_ip;
}