492 lines
18 KiB
HTML
492 lines
18 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>#(_res.get("route.config"))</title>
|
|
<meta name="author" content="Matthew Wagerfield" />
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<style>
|
|
.center{
|
|
text-align:center;
|
|
}
|
|
.remove-dialog{
|
|
width: 300px !important;
|
|
left:60% !important;
|
|
margin-top:15%;
|
|
}
|
|
</style>
|
|
<link id="bootstrap-style" href="/css/chart.css" rel="stylesheet">
|
|
</head>
|
|
#include("/common/header.html")
|
|
<body>
|
|
#if(session.successMessage!=null&&session.successMessage!="")
|
|
<input id="successMessage" value="#(_res.get(session.successMessage))"
|
|
style="display: none"> #else
|
|
<input id="successMessage" value="#(session.successMessage)"
|
|
style="display: none"> #end
|
|
|
|
#if(session.errorMessage!=null&&session.errorMessage!="")
|
|
<input id="errorMessage" value="#(_res.get(session.errorMessage))"
|
|
style="display: none"> #else
|
|
<input id="errorMessage" value="#(session.errorMessage)"
|
|
style="display: none"> #end
|
|
|
|
|
|
<div class="row-fluid" style="margin: 10px 20px; width: 95%">
|
|
#--<ul class="nav tab-menu nav-tabs" id="myTab">
|
|
#for(nodeData:nodeDatas)
|
|
#if(session.tabTag)
|
|
#if(session.tabTag==nodeData.key)
|
|
<li class="active" id='#(nodeData.key)'><a href="##(nodeData.value.name)">#(nodeData.value.name)</a></li>
|
|
#else
|
|
<li id="#(nodeData.key)"><a href="##(nodeData.value.name)">#(nodeData.value.name)</a></li>
|
|
#end
|
|
#else
|
|
#if(for.index==0)
|
|
<li class="active" id='#(nodeData.key)'><a href="##(nodeData.value.name)">#(nodeData.value.name)</a></li>
|
|
#else
|
|
<li id="#(nodeData.key)"><a href="##(nodeData.value.name)">#(nodeData.value.name)</a></li>
|
|
#end
|
|
#end
|
|
#end
|
|
</ul>--#
|
|
<div style="margin-left:8px">
|
|
#for(x : nodeDatas)
|
|
#if(session.tabTag)
|
|
#if(session.tabTag == x.key)
|
|
#set(class="tab tab-active")
|
|
#else
|
|
#set(class="tab")
|
|
#end
|
|
#else
|
|
#if(for.index==0)
|
|
#set(class="tab tab-active")
|
|
#else
|
|
#set(class="tab")
|
|
#end
|
|
#end
|
|
<div class="#(class)" id="#(x.key)">#(x.value.name)</div>
|
|
#end
|
|
<div class="my-button-up" onmousedown="mydown(this)" onmouseup="myup(this)" onclick="add();" style="float:right;margin-right:25px;margin-top:5px;padding-left:11px;"><span class="halflings-icon plus" style="vertical-align:text-top;"></span></div>
|
|
</div>
|
|
|
|
<div id="myTabContent" class="tab-content" style="margin-top: 20px;">
|
|
|
|
#for(systemRouteConfigData:systemRouteConfigs)
|
|
#if(session.tabTag)
|
|
#if(session.tabTag==systemRouteConfigData.key)
|
|
<div class="tab-pane active" id="#(nodeDatas.get(systemRouteConfigData.key).name)">
|
|
#else
|
|
<div class="tab-pane" id="#(nodeDatas.get(systemRouteConfigData.key).name)">
|
|
#end
|
|
#else
|
|
#if(for.index==0)
|
|
<div class="tab-pane active" id="#(nodeDatas.get(systemRouteConfigData.key).name)">
|
|
#else
|
|
<div class="tab-pane" id="#(nodeDatas.get(systemRouteConfigData.key).name)">
|
|
#end
|
|
#end
|
|
|
|
<table
|
|
class="table table-striped table-bordered bootstrap-datatable datatable dataTable"
|
|
id="DataTables_Table_0"
|
|
aria-describedby="DataTables_Table_0_info">
|
|
<thead>
|
|
<tr role="row">
|
|
<th style='text-align:center;vertical-align: middle;'class="sorting_asc" role="columnheader" tabindex="0"
|
|
aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
|
|
aria-sort="ascending"
|
|
aria-label="Username: activate to sort column descending"
|
|
style="width: 153px;">IP</th>
|
|
<th style='text-align:center;vertical-align: middle;'class="sorting" role="columnheader" tabindex="0"
|
|
aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
|
|
aria-label="Date registered: activate to sort column ascending"
|
|
style="width: 225px;">Mask</th>
|
|
<th style='text-align:center;vertical-align: middle;'class="sorting" role="columnheader" tabindex="0"
|
|
aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
|
|
aria-label="Role: activate to sort column ascending"
|
|
style="width: 126px;">Gateway</th>
|
|
<th style='text-align:center;vertical-align: middle;'class="sorting" role="columnheader" tabindex="0"
|
|
aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
|
|
aria-label="Role: activate to sort column ascending"
|
|
style="width: 126px;">Network Interface</th>
|
|
<th style='text-align:center;vertical-align: middle;'class="sorting" role="columnheader" tabindex="0"
|
|
aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
|
|
aria-label="Actions: activate to sort column ascending"
|
|
style="width: 50px;">Management</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody role="alert" aria-live="polite" aria-relevant="all" id="dataShow">
|
|
#for(systemRouteConfig:systemRouteConfigData.value)
|
|
<tr class="odd">
|
|
<td style='text-align:center;vertical-align: middle;'>#(systemRouteConfig.destination_ip)</td>
|
|
<td style='text-align:center;vertical-align: middle;'>#(systemRouteConfig.ip_mask)</td>
|
|
<td style='text-align:center;vertical-align: middle;'>#(systemRouteConfig.gateway)</td>
|
|
<td style='text-align:center;vertical-align: middle;'>#(systemRouteConfig.r_interface)</td>
|
|
<td style='text-align:center;vertical-align: middle;'>
|
|
<a data-toggle='modal' data-target='#routeModal' class="btn btn-info" href="#" onclick='modify(this)'> <i
|
|
class="halflings-icon white edit"></i>
|
|
</a> <a class="btn btn-danger" href="#" onclick='remove(this)'> <i
|
|
class="halflings-icon white trash"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
#end
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
#end
|
|
</div>
|
|
</div>
|
|
|
|
|
|
#--<div class="modal fade" id="routeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style='background-color: rgba(51, 51, 51, 1);color:white'>
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
|
|
×
|
|
</button>
|
|
<h4 class="modal-title" id="myModalLabel" style='color:white'>
|
|
<span id="handle"></span>
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body" style='color:black'>
|
|
<form class="form-horizontal" id="routeConfigForm">
|
|
<input type='hidden' value='' id='request_ip' name='ip'>
|
|
<fieldset>
|
|
<div class="control-group">
|
|
<label class="control-label" for="focusedInput" style='color:white'>#(_res.get("destination.ip"))</label>
|
|
<div class="controls">
|
|
<input class="input-xlarge focused" id="ip_address_old" type="hidden" name="destination_ip_old" >
|
|
<input class="input-xlarge focused" id="ip_address" type="text" value="" name="destination_ip" onblur='checkIp(this)'>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="control-group">
|
|
<label class="control-label" for="focusedInput" style='color:white'>#(_res.get("mask"))</label>
|
|
<div class="controls">
|
|
<input class="input-xlarge focused" id="mask_old" type="hidden" value="" name="ip_mask_old">
|
|
<input class="input-xlarge focused" id="mask" type="text" value="" name="ip_mask" onblur='checkMask(this)'>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label class="control-label" for="focusedInput" style='color:white'>#(_res.get("gateway"))</label>
|
|
<div class="controls">
|
|
<input class="input-xlarge focused" id="gateway_old" type="hidden" value="" name="gateway_old">
|
|
<input class="input-xlarge focused" id="gateway" type="text" value="" name="gateway" onblur='checkGateway(this)'>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label class="control-label" for="focusedInput" style='color:white'>#(_res.get("interface"))</label>
|
|
<div class="controls" id='updateDiv'>
|
|
<input class="input-xlarge focused" id="interface" type="text" value="" name="r_interface" onblur='checkInterface(this)'>
|
|
</div>
|
|
<div class="control-group" id='addDiv'>
|
|
<div class="controls">
|
|
<select id="selectError3" name="r_interface">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer" style='background-color: rgba(51, 51, 51, 1);'>
|
|
<button type="button" class="btn btn-default" data-dismiss="modal" id="closeDialog">#(_res.get("admin.common.close"))
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="dialogClick">
|
|
#(_res.get('save.changes'))
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>--#
|
|
<div style="display:none">
|
|
<form id="addForm">
|
|
<input id="ip_old" name="ip_old">
|
|
<input id="destination_ip_old" name="destination_ip_old">
|
|
<input id="ip_mask_old" name="ip_mask_old">
|
|
<input id="gateway_old" name="gateway_old">
|
|
<input id="r_interface_old" name="r_interface_old">
|
|
|
|
<input id="ip" name="ip">
|
|
<input id="destination_ip" name="destination_ip">
|
|
<input id="ip_mask" name="ip_mask">
|
|
<input id="gateway" name="gateway">
|
|
<input id="r_interface" name="r_interface">
|
|
</form>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
changeFlag=true;
|
|
$(function(){
|
|
$(".tab").click(function(){
|
|
$(".active").attr("class", "tab-pane");
|
|
$(".tab-active").attr("class", "tab");
|
|
$(this).attr("class", "tab tab-active");
|
|
$("#" + $(this).text()).attr("class", "tab-pane active");
|
|
});
|
|
top.layer.close(top.loading);
|
|
})
|
|
function myup(obj) {
|
|
$(obj).attr("class", "my-button-up");
|
|
}
|
|
|
|
function mydown(obj) {
|
|
$(obj).attr("class", "my-button-down");
|
|
}
|
|
|
|
function changeRoute(){
|
|
if(changeFlag){
|
|
console.log('修改操作')
|
|
$('#routeConfigForm').submit();
|
|
}else{
|
|
alert("#(_res.get('error.message'))");
|
|
return;
|
|
}
|
|
}
|
|
|
|
$(function(){
|
|
var successMessage=$("#successMessage").val();
|
|
var errorMessage=$("#errorMessage").val();
|
|
if(successMessage!=null&&successMessage!=''&&successMessage!=undefined){
|
|
xcsoft.success(successMessage,2000);
|
|
#(session.removeAttribute("successMessage"))
|
|
#(session.removeAttribute("tabTag"))
|
|
}else if(errorMessage!=null&&errorMessage!=''&&errorMessage!=undefined){
|
|
xcsoft.error(errorMessage,2000);
|
|
#(session.removeAttribute("errorMessage"))
|
|
}
|
|
|
|
})
|
|
|
|
function remove(a,b){
|
|
#--var dialog=BootstrapDialog.confirm({
|
|
title: 'WARNING',
|
|
message: '<div style="text-align:center;font-size:20px">#(_res.get("remove.message"))</div>',
|
|
cssClass: 'remove-dialog',
|
|
closable: true,
|
|
draggable: true,
|
|
btnCancelLabel: '#(_res.get("cancel"))',
|
|
btnOKLabel: '#(_res.get("remove"))',
|
|
callback: function(result) {
|
|
if(result){
|
|
var routeInfo=$(a).parent().prevAll();
|
|
var ip=$(routeInfo[3]).html();
|
|
var mask=$(routeInfo[2]).html();
|
|
var gateway=$(routeInfo[1]).html();
|
|
var r_interface=$(routeInfo[0]).html();
|
|
var serverIp=$("li.active").attr("id");
|
|
window.location.href='/route/removeRoute?destination_ip='+ip+'&ip_mask='+mask+'&gateway='+gateway+'&r_interface='+r_interface+'&ip='+serverIp;
|
|
}else{
|
|
dialog.close();
|
|
}
|
|
}
|
|
});
|
|
dialog.getModalHeader().hide();--#
|
|
top.$("#dialog").text("#(_res.get('remove.message'))");
|
|
top.$("#dialog").dialog({
|
|
dialogClass: "no-close",
|
|
modal:true,
|
|
buttons: {
|
|
Yes: function() {
|
|
var routeInfo=$(a).parent().prevAll();
|
|
var ip=$(routeInfo[3]).html();
|
|
var mask=$(routeInfo[2]).html();
|
|
var gateway=$(routeInfo[1]).html();
|
|
var r_interface=$(routeInfo[0]).html();
|
|
var serverIp=$(".tab-active").attr("id");
|
|
top.loading = top.layer.msg("<font color='black'> loading...</font>", {shade:0.1,icon:16,time:999000});
|
|
window.location.href='/route/removeRoute?destination_ip='+ip+'&ip_mask='+mask+'&gateway='+gateway+'&r_interface='+r_interface+'&ip='+serverIp;
|
|
top.$("#dialog").dialog("close");
|
|
},
|
|
No: function() {
|
|
top.$("#dialog").dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function add(){
|
|
#--var request_ip=$(".tab-active").attr("id");
|
|
$.ajax({
|
|
type:"post",
|
|
dataType:'json',
|
|
url:"/route/queryNetworkNames?ip="+request_ip,
|
|
async:true,
|
|
success:function (res){
|
|
if(res.error!=''&&res.error!=undefined){
|
|
//
|
|
}else{
|
|
$("#selectError3").empty();
|
|
var networkNames=res.networkNames
|
|
for(var i=0;i<networkNames.length;i++){
|
|
$("#selectError3").append("<option value='"+networkNames[i]+"'>"+networkNames[i]+"</option>")
|
|
}
|
|
}
|
|
}
|
|
})
|
|
$("#updateDiv").hide();
|
|
$('#handle').html('#(_res.get("create"))');
|
|
$('#routeConfigForm').find("input").attr('value','');
|
|
$('#dialogClick').click(function(){
|
|
$('#routeConfigForm').attr('action','/route/newRoute');
|
|
$('#routeConfigForm').submit();
|
|
});
|
|
$("#selectError3").removeAttr("disabled");
|
|
$("#interface").attr("disabled","disabled");
|
|
$("#addDiv").show();
|
|
$('#dialogClick').removeAttr('disabled');
|
|
$("#interfaceErrorMessage").remove();
|
|
$("#interface").removeAttr('readonly')
|
|
$('#handle').html('#(_res.get("create"))');
|
|
$('#routeConfigForm').find("input").attr('value','');
|
|
$("#request_ip").val($(".tab-active").attr("id"));
|
|
$('#dialogClick').click(function(){
|
|
$('#routeConfigForm').attr('action','/route/newRoute');
|
|
$('#routeConfigForm').submit();
|
|
});
|
|
--#
|
|
|
|
var request_ip=$(".tab-active").attr("id");
|
|
top.$("#request_ip").val(request_ip);
|
|
$.ajax({
|
|
type:"post",
|
|
dataType:'json',
|
|
url:"/route/queryNetworkNames?ip="+request_ip,
|
|
async:true,
|
|
success:function (res){
|
|
if(res.error!=''&&res.error!=undefined){
|
|
//
|
|
}else{
|
|
top.$("#selectIf").empty();
|
|
var networkNames = res.networkNames;
|
|
for(var i=0; i<networkNames.length; i++) {
|
|
top.$("#selectIf").append("<option value='"+networkNames[i]+"'>"+networkNames[i]+"</option>")
|
|
}
|
|
}
|
|
},
|
|
error:function(){
|
|
location.href="/route";
|
|
}
|
|
});
|
|
top.$("#updateDiv").hide();
|
|
top.$("#addDiv").show();
|
|
top.$("#routeDialog").dialog({
|
|
dialogClass: "no-close",
|
|
modal:true,
|
|
width:560,
|
|
title:"#(_res.get('create'))",
|
|
buttons: {
|
|
#(_res.get('save.changes')): function() {
|
|
top.$("#routeDialog").find("input").blur();
|
|
var flag = checkErr();
|
|
if(flag) {
|
|
top.$("#routeDialog").dialog("close");
|
|
$("#ip").val(top.$("#request_ip").val());
|
|
$("#destination_ip").val(top.$("#ip_address").val());
|
|
$("#ip_mask").val(top.$("#mask").val());
|
|
$("#gateway").val(top.$("#gateway").val());
|
|
$("#r_interface").val(top.$("#selectIf").val());
|
|
removeErr();
|
|
$("#addForm").attr("action", "/route/newRoute");
|
|
top.loading = top.layer.msg("<font color='black'> loading...</font>", {shade:0.1,icon:16,time:999000})
|
|
$("#addForm").submit();
|
|
}
|
|
},
|
|
#(_res.get('admin.common.close')): function() {
|
|
top.$("#selectIf").empty();
|
|
removeErr();
|
|
top.$("#routeDialog").dialog("close");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function modify(a){
|
|
top.$("#updateDiv").show();
|
|
top.$("#addDiv").hide();
|
|
var routeInfo=$(a).parent().prevAll();
|
|
top.$("#ip_address").val($(routeInfo[3]).html());
|
|
top.$("#ip_address_old").val($(routeInfo[3]).html());
|
|
top.$("#mask").val($(routeInfo[2]).html());
|
|
top.$("#mask_old").val($(routeInfo[2]).html());
|
|
top.$("#gateway").val($(routeInfo[1]).html());
|
|
top.$("#gateway_old").val($(routeInfo[1]).html());
|
|
top.$("#inputIf").val($(routeInfo[0]).html());
|
|
top.$("#request_ip").val($(".tab-active").attr("id"));
|
|
top.$("#inputIf").attr('readonly','readonly');
|
|
top.$("#routeDialog").dialog({
|
|
dialogClass: "no-close",
|
|
modal:true,
|
|
width:560,
|
|
title:"#(_res.get('modify'))",
|
|
buttons: {
|
|
#(_res.get('save.changes')): function() {
|
|
top.$("#routeDialog").find("input").blur();
|
|
var flag = checkErr();
|
|
if(flag) {
|
|
top.$("#routeDialog").dialog("close");
|
|
$("#ip").val(top.$("#request_ip").val());
|
|
$("#destination_ip").val(top.$("#ip_address").val());
|
|
$("#destination_ip_old").val(top.$("#ip_address_old").val());
|
|
$("#ip_mask").val(top.$("#mask").val());
|
|
$("#ip_mask_old").val(top.$("#mask_old").val());
|
|
$("#gateway").val(top.$("#gateway").val());
|
|
$("#gateway_old").val(top.$("#gateway_old").val());
|
|
$("#r_interface").val(top.$("#inputIf").val());
|
|
removeErr();
|
|
$("#addForm").attr("action", "/route/modifyRoute");
|
|
top.loading = top.layer.msg("<font color='black'> loading...</font>", {shade:0.1,icon:16,time:999000})
|
|
$("#addForm").submit();
|
|
}
|
|
},
|
|
#(_res.get('admin.common.close')): function() {
|
|
top.$("#selectIf").empty();
|
|
removeErr();
|
|
top.$("#routeDialog").dialog("close");
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#routeConfigForm').attr('action','/route/modifyRoute');
|
|
$('#dialogClick').click(function(){
|
|
changeRoute();
|
|
});
|
|
}
|
|
|
|
function checkErr() {
|
|
var flag = true;
|
|
top.$("#routeConfigForm").find(".controls").each(function(){
|
|
var c = $(this).find(".help-inline");
|
|
if(c.length > 0) {
|
|
if($(c).attr("class").indexOf("error") != -1) {
|
|
flag = false;
|
|
}
|
|
}
|
|
});
|
|
return flag;
|
|
}
|
|
|
|
function removeErr() {
|
|
top.$("#routeConfigForm").find(".controls").each(function(){
|
|
var c = $(this).find(".help-inline");
|
|
if(c.length > 0) {
|
|
$(c).remove();
|
|
}
|
|
});
|
|
top.$("#routeConfigForm").find("input").val('');
|
|
}
|
|
</script>
|
|
</html>
|