Skip to content

O
OpnSense
Commit 8a6437df authored by Ad Schellevis's avatar Ad Schellevis
Browse files
Options

(trafficshaper) cleanup JS code

parent 9b338529
Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 404 deletions
src/opnsense/mvc/app/views/OPNsense/TrafficShaper/index.volt
View file @ 8a6437df
......@@ -30,319 +30,41 @@ POSSIBILITY OF SUCH DAMAGE.
display:none;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
/*************************************************************************************************************
* manage bandwidth pipes
*************************************************************************************************************/
/**
* Render pipe grid using searchPipes api
*/
var gridPipes = stdBootgridUI("grid-pipes", "/api/trafficshaper/settings/searchPipes");
/**
* Link pipe grid command controls (edit/delete)
*/
gridPipes.on("loaded.rs.jquery.bootgrid", function(){
// edit item
gridPipes.find(".command-edit").on("click", function(e)
{
var uuid=$(this).data("row-id");
mapDataToFormUI({'frm_DialogPipe':"/api/trafficshaper/settings/getPipe/"+uuid}).done(function(){
// update selectors
$('.selectpicker').selectpicker('refresh');
// clear validation errors (if any)
clearFormValidation('frm_DialogPipe');
});
// show dialog for pipe edit
$('#DialogPipe').modal({backdrop: 'static', keyboard: false});
// curry uuid to save action
$("#btn_DialogPipe_save").unbind('click').click(savePipe.bind(undefined, uuid));
}).end();
// delete item
gridPipes.find(".command-delete").on("click", function(e)
{
var uuid=$(this).data("row-id");
stdDialogRemoveItem('Remove selected item?',function() {
ajaxCall(url="/api/trafficshaper/settings/delPipe/" + uuid,
sendData={},callback=function(data,status){
// reload grid after delete
$("#grid-pipes").bootgrid("reload");
});
});
}).end();
});
/**
* save form data to end point for existing pipe
*/
function savePipe(uuid) {
saveFormToEndpoint(url="/api/trafficshaper/settings/setPipe/"+uuid,
formid="frm_DialogPipe", callback_ok=function(){
$("#DialogPipe").modal('hide');
$("#grid-pipes").bootgrid("reload");
}, true);
}
/**
* save form data to end point for new pipe
*/
function addPipe() {
saveFormToEndpoint(url="/api/trafficshaper/settings/addPipe/",
formid="frm_DialogPipe", callback_ok=function(){
$("#DialogPipe").modal('hide');
$("#grid-pipes").bootgrid("reload");
}, true);
}
/**
* Delete list of uuids on click event
*/
$("#deletePipes").click(function(){
stdDialogRemoveItem("Remove selected items?",function(){
var rows =$("#grid-pipes").bootgrid('getSelectedRows');
if (rows != undefined){
var deferreds = [];
$.each(rows, function(key,uuid){
deferreds.push(ajaxCall(url="/api/trafficshaper/settings/delPipe/" + uuid, sendData={},null));
});
// refresh after load
$.when.apply(null, deferreds).done(function(){
$("#grid-pipes").bootgrid("reload");
});
}
});
});
/**
* Add new pipe on click event
*/
$("#addPipe").click(function(){
mapDataToFormUI({'frm_DialogPipe':"/api/trafficshaper/settings/getPipe/"}).done(function(){
// update selectors
$('.selectpicker').selectpicker('refresh');
// clear validation errors (if any)
clearFormValidation('frm_DialogPipe');
});
// show dialog for pipe edit
$('#DialogPipe').modal({backdrop: 'static', keyboard: false});
// curry uuid to save action
$("#btn_DialogPipe_save").unbind('click').click(addPipe);
});
/*************************************************************************************************************
* manage Queues
* link grid actions
*************************************************************************************************************/
/**
* Render queue grid using searchQueues api
*/
var gridQueues = stdBootgridUI("grid-queues", "/api/trafficshaper/settings/searchQueues");
/**
* Link queue grid command controls (edit/delete)
*/
gridQueues.on("loaded.rs.jquery.bootgrid", function(){
// edit item
gridQueues.find(".command-edit").on("click", function(e)
{
var uuid=$(this).data("row-id");
mapDataToFormUI({'frm_DialogQueue':"/api/trafficshaper/settings/getQueue/"+uuid}).done(function(){
// update selectors
$('.selectpicker').selectpicker('refresh');
// clear validation errors (if any)
clearFormValidation('frm_DialogQueue');
});
// show dialog for queue edit
$('#DialogQueue').modal({backdrop: 'static', keyboard: false});
// curry uuid to save action
$("#btn_DialogQueue_save").unbind('click').click(saveQueue.bind(undefined, uuid));
}).end();
// delete item
gridQueues.find(".command-delete").on("click", function(e)
{
var uuid=$(this).data("row-id");
stdDialogRemoveItem('Remove selected item?',function() {
ajaxCall(url="/api/trafficshaper/settings/delQueue/" + uuid,
sendData={},callback=function(data,status){
// reload grid after delete
$("#grid-queues").bootgrid("reload");
});
});
}).end();
});
/**
* save form data to end point for existing queue
*/
function saveQueue(uuid) {
saveFormToEndpoint(url="/api/trafficshaper/settings/setQueue/"+uuid,
formid="frm_DialogQueue", callback_ok=function(){
$("#DialogQueue").modal('hide');
$("#grid-queues").bootgrid("reload");
}, true);
}
/**
* save form data to end point for new queue
*/
function addQueue() {
saveFormToEndpoint(url="/api/trafficshaper/settings/addQueue/",
formid="frm_DialogQueue", callback_ok=function(){
$("#DialogQueue").modal('hide');
$("#grid-queues").bootgrid("reload");
}, true);
}
/**
* Delete list of uuids on click event
*/
$("#deleteQueues").click(function(){
stdDialogRemoveItem("Remove selected items?",function(){
var rows =$("#grid-queues").bootgrid('getSelectedRows');
if (rows != undefined){
var deferreds = [];
$.each(rows, function(key,uuid){
deferreds.push(ajaxCall(url="/api/trafficshaper/settings/delQueue/" + uuid, sendData={},null));
});
// refresh after load
$.when.apply(null, deferreds).done(function(){
$("#grid-queues").bootgrid("reload");
});
$("#grid-pipes").UIBootgrid(
{ 'search':'/api/trafficshaper/settings/searchPipes',
'get':'/api/trafficshaper/settings/getPipe/',
'set':'/api/trafficshaper/settings/setPipe/',
'add':'/api/trafficshaper/settings/addPipe/',
'del':'/api/trafficshaper/settings/delPipe/'
}
);
$("#grid-queues").UIBootgrid(
{ 'search':'/api/trafficshaper/settings/searchQueues',
'get':'/api/trafficshaper/settings/getQueue/',
'set':'/api/trafficshaper/settings/setQueue/',
'add':'/api/trafficshaper/settings/addQueue/',
'del':'/api/trafficshaper/settings/delQueue/'
}
});
});
/**
* Add new queue on click event
*/
$("#addQueue").click(function(){
mapDataToFormUI({'frm_DialogQueue':"/api/trafficshaper/settings/getQueue/"}).done(function(){
// update selectors
$('.selectpicker').selectpicker('refresh');
// clear validation errors (if any)
clearFormValidation('frm_DialogQueue');
});
// show dialog for queue edit
$('#DialogQueue').modal({backdrop: 'static', keyboard: false});
// curry uuid to save action
$("#btn_DialogQueue_save").unbind('click').click(addQueue);
});
/*************************************************************************************************************
* manage rules
*************************************************************************************************************/
/**
* save form data to end point for existing rule
*/
function saveRule(uuid) {
saveFormToEndpoint(url="/api/trafficshaper/settings/setRule/"+uuid,
formid="frm_DialogRule", callback_ok=function(){
$("#DialogRule").modal('hide');
$("#grid-rules").bootgrid("reload");
}, true);
}
/**
* save form data to end point for new pipe
*/
function addRule() {
saveFormToEndpoint(url="/api/trafficshaper/settings/addRule/",
formid="frm_DialogRule", callback_ok=function(){
$("#DialogRule").modal('hide');
$("#grid-rules").bootgrid("reload");
}, true);
}
/**
* Render rules grid using searchPipes api
*/
var gridRules = stdBootgridUI("grid-rules", "/api/trafficshaper/settings/searchRules");
/**
* Link rule grid command controls (edit/delete)
*/
gridRules.on("loaded.rs.jquery.bootgrid", function(){
// edit item
gridRules.find(".command-edit").on("click", function(e)
{
var uuid=$(this).data("row-id");
mapDataToFormUI({'frm_DialogRule':"/api/trafficshaper/settings/getRule/"+uuid}).done(function(){
// update selectors
$('.selectpicker').selectpicker('refresh');
// clear validation errors (if any)
clearFormValidation('frm_DialogRule');
});
// show dialog for pipe edit
$('#DialogRule').modal({backdrop: 'static', keyboard: false});
// curry uuid to save action
$("#btn_DialogRule_save").unbind('click').click(saveRule.bind(undefined, uuid));
}).end();
// delete item
gridRules.find(".command-delete").on("click", function(e)
{
var uuid = $(this).data("row-id");
stdDialogRemoveItem("Remove selected item?",function(){
ajaxCall(url="/api/trafficshaper/settings/delRule/" + uuid,
sendData={},callback=function(data,status){
// reload grid after delete
$("#grid-rules").bootgrid("reload");
});
});
}).end();
});
/**
* Add new rule on click event
*/
$("#addRule").click(function(){
mapDataToFormUI({'frm_DialogRule':"/api/trafficshaper/settings/getRule/"}).done(function(){
// update selectors
$('.selectpicker').selectpicker('refresh');
// clear validation errors (if any)
clearFormValidation('frm_DialogRule');
});
// show dialog for pipe edit
$('#DialogRule').modal({backdrop: 'static', keyboard: false});
// curry uuid to save action
$("#btn_DialogRule_save").unbind('click').click(addRule);
});
/**
* Delete list of uuids on click event
*/
$("#deleteRules").click(function(){
stdDialogRemoveItem("Remove selected items?",function(){
var rows =$("#grid-rules").bootgrid('getSelectedRows');
if (rows != undefined){
var deferreds = [];
$.each(rows, function(key,uuid){
deferreds.push(ajaxCall(url="/api/trafficshaper/settings/delRule/" + uuid, sendData={},null));
});
// refresh after load
$.when.apply(null, deferreds).done(function(){
$("#grid-rules").bootgrid("reload");
});
);
$("#grid-rules").UIBootgrid(
{ 'search':'/api/trafficshaper/settings/searchRules',
'get':'/api/trafficshaper/settings/getRule/',
'set':'/api/trafficshaper/settings/setRule/',
'add':'/api/trafficshaper/settings/addRule/',
'del':'/api/trafficshaper/settings/delRule/'
}
});
});
);
/*************************************************************************************************************
......@@ -374,106 +96,100 @@ POSSIBILITY OF SUCH DAMAGE.
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
<li class="active"><a data-toggle="tab" href="#pipes">{{ lang._('Pipes') }}</a></li>
<li><a data-toggle="tab" href="#queues">{{ lang._('Queues') }}</a></li>
<li><a data-toggle="tab" href="#rules">{{ lang._('Rules') }}</a></li>
</ul>
<div class="tab-content content-box tab-content">
<div id="pipes" class="tab-pane fade in active">
<!-- tab page "pipes" -->
<table id="grid-pipes" class="table table-condensed table-hover table-striped table-responsive">
<thead>
<tr>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<th data-column-id="number" data-type="number" data-visible="false">Number</th>
<th data-column-id="bandwidth" data-type="number">Bandwidth</th>
<th data-column-id="bandwidthMetric" data-type="string">BandwidthMetric</th>
<th data-column-id="mask" data-type="string">Mask</th>
<th data-column-id="description" data-type="string">Description</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td></td>
<td>
<button type="button" id="addPipe" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<button type="button" id="deletePipes" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
</td>
</tr>
</tfoot>
</table>
</div>
<div id="queues" class="tab-pane fade in">
<!-- tab page "queues" -->
<table id="grid-queues" class="table table-condensed table-hover table-striped table-responsive">
<thead>
<tr>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<th data-column-id="number" data-type="number" data-visible="false">Number</th>
<th data-column-id="pipe" data-type="string">Pipe</th>
<th data-column-id="weight" data-type="string">Weight</th>
<th data-column-id="description" data-type="string">Description</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td></td>
<td>
<button type="button" id="addQueue" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<button type="button" id="deleteQueues" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
</td>
</tr>
</tfoot>
</table>
</div>
<div id="rules" class="tab-pane fade in">
<!-- tab page "rules" -->
<table id="grid-rules" class="table table-condensed table-hover table-striped table-responsive">
<thead>
<tr>
<th data-column-id="sequence" data-type="number">#</th>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<th data-column-id="interface" data-type="string">Interface</th>
<th data-column-id="proto" data-type="string">Protocol</th>
<th data-column-id="source" data-type="string">Source</th>
<th data-column-id="destination" data-type="string">Destination</th>
<th data-column-id="target" data-type="string">Target</th>
<th data-column-id="description" data-type="string">Description</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr >
<td></td>
<td>
<button type="button" id="addRule" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<button type="button" id="deleteRules" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12">
<hr/>
<button class="btn btn-primary" id="reconfigureAct" type="button"><b>Apply</b><i id="reconfigureAct_progress" class=""></i></button>
</div>
</div>
</div>
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
<li class="active"><a data-toggle="tab" href="#pipes">{{ lang._('Pipes') }}</a></li>
<li><a data-toggle="tab" href="#queues">{{ lang._('Queues') }}</a></li>
<li><a data-toggle="tab" href="#rules">{{ lang._('Rules') }}</a></li>
</ul>
<div class="tab-content content-box tab-content">
<div id="pipes" class="tab-pane fade in active">
<!-- tab page "pipes" -->
<table id="grid-pipes" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogPipe">
<thead>
<tr>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<th data-column-id="number" data-type="number" data-visible="false">Number</th>
<th data-column-id="bandwidth" data-type="number">Bandwidth</th>
<th data-column-id="bandwidthMetric" data-type="string">BandwidthMetric</th>
<th data-column-id="mask" data-type="string">Mask</th>
<th data-column-id="description" data-type="string">Description</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
</td>
</tr>
</tfoot>
</table>
</div>
<div id="queues" class="tab-pane fade in">
<!-- tab page "queues" -->
<table id="grid-queues" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogQueue">
<thead>
<tr>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<th data-column-id="number" data-type="number" data-visible="false">Number</th>
<th data-column-id="pipe" data-type="string">Pipe</th>
<th data-column-id="weight" data-type="string">Weight</th>
<th data-column-id="description" data-type="string">Description</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
</td>
</tr>
</tfoot>
</table>
</div>
<div id="rules" class="tab-pane fade in">
<!-- tab page "rules" -->
<table id="grid-rules" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogRule">
<thead>
<tr>
<th data-column-id="sequence" data-type="number">#</th>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<th data-column-id="interface" data-type="string">Interface</th>
<th data-column-id="proto" data-type="string">Protocol</th>
<th data-column-id="source" data-type="string">Source</th>
<th data-column-id="destination" data-type="string">Destination</th>
<th data-column-id="target" data-type="string">Target</th>
<th data-column-id="description" data-type="string">Description</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr >
<td></td>
<td>
<button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="col-md-12">
<hr/>
<button class="btn btn-primary" id="reconfigureAct" type="button"><b>Apply</b><i id="reconfigureAct_progress" class=""></i></button>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023