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. ...@@ -30,319 +30,41 @@ POSSIBILITY OF SUCH DAMAGE.
display:none; display:none;
} }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$( document ).ready(function() { $( document ).ready(function() {
/************************************************************************************************************* /*************************************************************************************************************
* manage bandwidth pipes * link grid actions
*************************************************************************************************************/
/**
* 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
*************************************************************************************************************/ *************************************************************************************************************/
/** $("#grid-pipes").UIBootgrid(
* Render queue grid using searchQueues api { 'search':'/api/trafficshaper/settings/searchPipes',
*/ 'get':'/api/trafficshaper/settings/getPipe/',
var gridQueues = stdBootgridUI("grid-queues", "/api/trafficshaper/settings/searchQueues"); 'set':'/api/trafficshaper/settings/setPipe/',
'add':'/api/trafficshaper/settings/addPipe/',
/** 'del':'/api/trafficshaper/settings/delPipe/'
* Link queue grid command controls (edit/delete) }
*/ );
gridQueues.on("loaded.rs.jquery.bootgrid", function(){
// edit item $("#grid-queues").UIBootgrid(
gridQueues.find(".command-edit").on("click", function(e) { 'search':'/api/trafficshaper/settings/searchQueues',
{ 'get':'/api/trafficshaper/settings/getQueue/',
var uuid=$(this).data("row-id"); 'set':'/api/trafficshaper/settings/setQueue/',
mapDataToFormUI({'frm_DialogQueue':"/api/trafficshaper/settings/getQueue/"+uuid}).done(function(){ 'add':'/api/trafficshaper/settings/addQueue/',
// update selectors 'del':'/api/trafficshaper/settings/delQueue/'
$('.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-rules").UIBootgrid(
/** { 'search':'/api/trafficshaper/settings/searchRules',
* Add new queue on click event 'get':'/api/trafficshaper/settings/getRule/',
*/ 'set':'/api/trafficshaper/settings/setRule/',
$("#addQueue").click(function(){ 'add':'/api/trafficshaper/settings/addRule/',
mapDataToFormUI({'frm_DialogQueue':"/api/trafficshaper/settings/getQueue/"}).done(function(){ 'del':'/api/trafficshaper/settings/delRule/'
// 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");
});
} }
}); );
});
/************************************************************************************************************* /*************************************************************************************************************
...@@ -374,106 +96,100 @@ POSSIBILITY OF SUCH DAMAGE. ...@@ -374,106 +96,100 @@ POSSIBILITY OF SUCH DAMAGE.
</script> </script>
<div class="container-fluid"> <ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
<div class="row"> <li class="active"><a data-toggle="tab" href="#pipes">{{ lang._('Pipes') }}</a></li>
<div class="col-md-12"> <li><a data-toggle="tab" href="#queues">{{ lang._('Queues') }}</a></li>
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs"> <li><a data-toggle="tab" href="#rules">{{ lang._('Rules') }}</a></li>
<li class="active"><a data-toggle="tab" href="#pipes">{{ lang._('Pipes') }}</a></li> </ul>
<li><a data-toggle="tab" href="#queues">{{ lang._('Queues') }}</a></li> <div class="tab-content content-box tab-content">
<li><a data-toggle="tab" href="#rules">{{ lang._('Rules') }}</a></li> <div id="pipes" class="tab-pane fade in active">
</ul> <!-- tab page "pipes" -->
<div class="tab-content content-box tab-content"> <table id="grid-pipes" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogPipe">
<div id="pipes" class="tab-pane fade in active"> <thead>
<!-- tab page "pipes" --> <tr>
<table id="grid-pipes" class="table table-condensed table-hover table-striped table-responsive"> <th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<thead> <th data-column-id="number" data-type="number" data-visible="false">Number</th>
<tr> <th data-column-id="bandwidth" data-type="number">Bandwidth</th>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th> <th data-column-id="bandwidthMetric" data-type="string">BandwidthMetric</th>
<th data-column-id="number" data-type="number" data-visible="false">Number</th> <th data-column-id="mask" data-type="string">Mask</th>
<th data-column-id="bandwidth" data-type="number">Bandwidth</th> <th data-column-id="description" data-type="string">Description</th>
<th data-column-id="bandwidthMetric" data-type="string">BandwidthMetric</th> <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="mask" data-type="string">Mask</th> <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
<th data-column-id="description" data-type="string">Description</th> </tr>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th> </thead>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th> <tbody>
</tr> </tbody>
</thead> <tfoot>
<tbody> <tr>
</tbody> <td></td>
<tfoot> <td>
<tr> <button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<td></td> <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<td> </td>
<button type="button" id="addPipe" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button> </tr>
<button type="button" id="deletePipes" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button> </tfoot>
</td> </table>
</tr> </div>
</tfoot> <div id="queues" class="tab-pane fade in">
</table> <!-- tab page "queues" -->
</div> <table id="grid-queues" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogQueue">
<div id="queues" class="tab-pane fade in"> <thead>
<!-- tab page "queues" --> <tr>
<table id="grid-queues" class="table table-condensed table-hover table-striped table-responsive"> <th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<thead> <th data-column-id="number" data-type="number" data-visible="false">Number</th>
<tr> <th data-column-id="pipe" data-type="string">Pipe</th>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th> <th data-column-id="weight" data-type="string">Weight</th>
<th data-column-id="number" data-type="number" data-visible="false">Number</th> <th data-column-id="description" data-type="string">Description</th>
<th data-column-id="pipe" data-type="string">Pipe</th> <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="weight" data-type="string">Weight</th> <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
<th data-column-id="description" data-type="string">Description</th> </tr>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th> </thead>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th> <tbody>
</tr> </tbody>
</thead> <tfoot>
<tbody> <tr>
</tbody> <td></td>
<tfoot> <td>
<tr> <button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<td></td> <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<td> </td>
<button type="button" id="addQueue" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button> </tr>
<button type="button" id="deleteQueues" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button> </tfoot>
</td> </table>
</tr> </div>
</tfoot> <div id="rules" class="tab-pane fade in">
</table> <!-- tab page "rules" -->
</div> <table id="grid-rules" class="table table-condensed table-hover table-striped table-responsive" data-editDialog="DialogRule">
<div id="rules" class="tab-pane fade in"> <thead>
<!-- tab page "rules" --> <tr>
<table id="grid-rules" class="table table-condensed table-hover table-striped table-responsive"> <th data-column-id="sequence" data-type="number">#</th>
<thead> <th data-column-id="origin" data-type="string" data-visible="false">Origin</th>
<tr> <th data-column-id="interface" data-type="string">Interface</th>
<th data-column-id="sequence" data-type="number">#</th> <th data-column-id="proto" data-type="string">Protocol</th>
<th data-column-id="origin" data-type="string" data-visible="false">Origin</th> <th data-column-id="source" data-type="string">Source</th>
<th data-column-id="interface" data-type="string">Interface</th> <th data-column-id="destination" data-type="string">Destination</th>
<th data-column-id="proto" data-type="string">Protocol</th> <th data-column-id="target" data-type="string">Target</th>
<th data-column-id="source" data-type="string">Source</th> <th data-column-id="description" data-type="string">Description</th>
<th data-column-id="destination" data-type="string">Destination</th> <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
<th data-column-id="target" data-type="string">Target</th> <th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th>
<th data-column-id="description" data-type="string">Description</th> </tr>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th> </thead>
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">ID</th> <tbody>
</tr> </tbody>
</thead> <tfoot>
<tbody> <tr >
</tbody> <td></td>
<tfoot> <td>
<tr > <button data-action="add" type="button" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button>
<td></td> <button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button>
<td> </td>
<button type="button" id="addRule" class="btn btn-xs btn-default"><span class="fa fa-pencil"></span></button> </tr>
<button type="button" id="deleteRules" class="btn btn-xs btn-default"><span class="fa fa-trash-o"></span></button> </tfoot>
</td> </table>
</tr> </div>
</tfoot> <div class="col-md-12">
</table> <hr/>
</div> <button class="btn btn-primary" id="reconfigureAct" type="button"><b>Apply</b><i id="reconfigureAct_progress" class=""></i></button>
<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>
</div> </div>
</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