Refactor row toggle javascript
This commit is contained in:
Stephen Beaver 2015-10-29 10:17:50 -04:00
parent 76827b9ced
commit 65a0e193c7
6 changed files with 67 additions and 134 deletions

View File

@ -352,9 +352,9 @@ foreach ($a_nat as $natent):
<?=htmlspecialchars($natent['descr'])?>
</td>
<td>
<a class="btn btn-xs btn-info" title="<?=gettext("Edit rule"); ?>" href="firewall_nat_edit.php?id=<?=$i?>"><?=gettext("Edit"); ?></a>
<a class="btn btn-xs btn-danger" title="<?=gettext("Delete rule")?>" href="firewall_nat.php?act=del&amp;id=<?=$i?>"><?=gettext("Del")?></a>
<a class="btn btn-xs btn-success" title="<?=gettext("Add a new NAT based on this one")?>" href="firewall_nat_edit.php?dup=<?=$i?>"><?=gettext("Clone")?></a>
<a class="fa fa-pencil" title="<?=gettext("Edit rule"); ?>" href="firewall_nat_edit.php?id=<?=$i?>"></a>
<a class="fa fa-clone" title="<?=gettext("Add a new NAT based on this one")?>" href="firewall_nat_edit.php?dup=<?=$i?>"></a>
<a class="fa fa-trash" title="<?=gettext("Delete rule")?>" href="firewall_nat.php?act=del&amp;id=<?=$i?>" onclick="return confirm('<?=gettext("Are you sure you want to delete this rule?")?>')"></a>
</td>
</tr>
<?php
@ -374,38 +374,17 @@ endforeach;
</div>
</form>
<script>
function fr_toggle(id, prefix) {
if (!prefix)
prefix = 'fr';
var checkbox = document.getElementById(prefix + 'c' + id);
checkbox.checked = !checkbox.checked;
fr_bgcolor(id, prefix);
}
function fr_bgcolor(id, prefix) {
if (!prefix)
prefix = 'fr';
var row = document.getElementById(prefix + id);
var checkbox = document.getElementById(prefix + 'c' + id);
var cells = row.getElementsByTagName('td');
var cellcnt = cells.length;
for (i = 0; i < cellcnt-1; i++) {
cells[i].style.backgroundColor = checkbox.checked ? "#DDF4FF" : "#FFFFFF";
}
}
</script>
<script>
events.push(function() {
// Make rules draggable/sortable
stripe_table();
// Make rules sortable
$('table tbody.user-entries').sortable({
cursor: 'grabbing',
update: function(event, ui) {
$('#order-store').removeAttr('disabled');
stripe_table();
}
});

View File

@ -245,9 +245,9 @@ display_top_tabs($tab_array);
</td>
<td>
<a class="btn btn-xs btn-info" title="<?=gettext("Edit rule")?>" href="firewall_nat_1to1.php?id=<?=$i?>"><?=gettext("Edit")?></a>
<a class="btn btn-xs btn-danger" title="<?=gettext("Delete rule")?>" href="firewall_nat_1to1.php?act=del&amp;id=<?=$i?>"><?=gettext("Del")?></a>
<a class="btn btn-xs btn-success" title="<?=gettext("Add a new rule based on this one")?>" href="firewall_nat_1to1_edit.php?dup=<?=$i?>"><?=gettext("Clone")?></a>
<a class="fa fa-pencil" title="<?=gettext("Edit rule")?>" href="firewall_nat_1to1.php?id=<?=$i?>"></a>
<a class="fa fa-clone" title="<?=gettext("Add a new rule based on this one")?>" href="firewall_nat_1to1_edit.php?dup=<?=$i?>"></a>
<a class="fa fa-trash" title="<?=gettext("Delete rule")?>" href="firewall_nat_1to1.php?act=del&amp;id=<?=$i?>" onclick="return confirm('<?=gettext("Are you sure you want to delete this rule?")?>')"></a>
</td>
</tr>
@ -279,38 +279,17 @@ print_info_box(gettext('Depending on the way your WAN connection is setup, you m
?>
</div>
<script>
function fr_toggle(id, prefix) {
if (!prefix)
prefix = 'fr';
var checkbox = document.getElementById(prefix + 'c' + id);
checkbox.checked = !checkbox.checked;
fr_bgcolor(id, prefix);
}
function fr_bgcolor(id, prefix) {
if (!prefix)
prefix = 'fr';
var row = document.getElementById(prefix + id);
var checkbox = document.getElementById(prefix + 'c' + id);
var cells = row.getElementsByTagName('td');
var cellcnt = cells.length;
for (i = 0; i < cellcnt-1; i++) {
cells[i].style.backgroundColor = checkbox.checked ? "#DDF4FF" : "#FFFFFF";
}
}
</script>
<script>
events.push(function() {
// Make rules draggable/sortable
stripe_table();
// Make rules sortable
$('table tbody.user-entries').sortable({
cursor: 'grabbing',
update: function(event, ui) {
$('#order-store').removeAttr('disabled');
stripe_table();
}
});

View File

@ -304,7 +304,7 @@ print($form);
<div class="panel panel-default">
<div class="panel-heading"><?=gettext('Mappings')?></div>
<div class="panel-body table-responsive">
<table class="table table-striped table-hover table-condensed">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th><!-- checkbox --></th>
@ -499,10 +499,10 @@ print($form);
<!-- Action icons -->
<td>
<a class="icon icon-pencil" title="<?=gettext("Edit mapping")?>" href="firewall_nat_out_edit.php?id=<?=$i?>"></a>
<a class="icon icon-ban-circle" title="<?=gettext("Delete mapping")?>" href="firewall_nat_out.php?act=del&amp;id=<?=$i?>"
<a class="fa fa-pencil" title="<?=gettext("Edit mapping")?>" href="firewall_nat_out_edit.php?id=<?=$i?>"></a>
<a class="fa fa-clone" title="<?=gettext("Add a new mapping based on this one")?>" href="firewall_nat_out_edit.php?dup=<?=$i?>"></a>
<a class="fa fa-trash" title="<?=gettext("Delete mapping")?>" href="firewall_nat_out.php?act=del&amp;id=<?=$i?>"
onclick="return confirm('<?=gettext("Are you sure you want to delete this mapping?")?>')"></a>
<a class="icon icon-plus" title="<?=gettext("Add a new mapping based on this one")?>" href="firewall_nat_out_edit.php?dup=<?=$i?>"></a>
</td>
<?php
$i++;
@ -534,7 +534,7 @@ if ($mode == "automatic" || $mode == "hybrid"):
<div class="panel panel-default">
<div class="panel-heading"><?=gettext("Automatic rules:")?></div>
<div class="panel-body table-responsive">
<table class="table table-striped table-hover table-condensed">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th><!-- status --></th>
@ -651,38 +651,16 @@ endif;
?>
</div>
<script>
function fr_toggle(id, prefix) {
if (!prefix)
prefix = 'fr';
var checkbox = document.getElementById(prefix + 'c' + id);
checkbox.checked = !checkbox.checked;
fr_bgcolor(id, prefix);
}
function fr_bgcolor(id, prefix) {
if (!prefix)
prefix = 'fr';
var row = document.getElementById(prefix + id);
var checkbox = document.getElementById(prefix + 'c' + id);
var cells = row.getElementsByTagName('td');
var cellcnt = cells.length;
for (i = 0; i < cellcnt; i++) {
cells[i].style.backgroundColor = checkbox.checked ? "#DDF4FF" : "#FFFFFF";
}
}
</script>
<script>
events.push(function() {
// Make rules draggable/sortable
stripe_table();
// Make rules sortable
$('table tbody.user-entries').sortable({
cursor: 'grabbing',
update: function(event, ui) {
$('#order-store').removeAttr('disabled');
stripe_table();
}
});

View File

@ -688,40 +688,6 @@ else
?>
<script>
function stripe_table() {
$("tr:odd").addClass('active');
$("tr:even").removeClass('active');
}
function fr_toggle(id, prefix) {
if (!prefix)
prefix = 'fr';
var checkbox = document.getElementById(prefix + 'c' + id);
checkbox.checked = !checkbox.checked;
fr_bgcolor(id, prefix);
}
// Change background color based on state of checkbox
// On resetting background, reapply table striping
function fr_bgcolor(id, prefix) {
if (!prefix)
prefix = 'fr';
var row = $('#' + prefix + id);
if ($('#' + prefix + 'c' + id).prop('checked') ) {
row.css("background-color", "#DDF4FF");
row.removeClass('active');
} else {
row.css("background-color", "#FFFFFF");
stripe_table();
}
}
</script>
<script>
events.push(function() {
@ -741,14 +707,6 @@ events.push(function() {
$('#order-store').click(function () {
$('[id^=frc]').prop('checked', true);
});
// Replace direct delete with quicker front-end action
/*FIXME: event ordering
$('.btn-danger').on('click', function(e){
$(this).parents('tr').remove();
$('#order-store').removeAttr('disabled');
});
*/});
});
</script>
<?php include("foot.inc");?>

View File

@ -609,8 +609,7 @@ function clear_all_log_files() {
return;
}
// This version of dump_clog() does not output <td></td> or any other table elements. It can be renamed
// and the dump_clog() removed once all of the diag_log*.php files have been converted to Bootstrap
// This version of dump_clog() does not output <td></td> or any other table elements.
function dump_clog_no_table($logfile, $tail, $withorig = true, $grepfor = "", $grepinvert = "") {
global $g, $config;
$sor = isset($config['syslog']['reverse']) ? "-r" : "";

View File

@ -138,6 +138,46 @@ function hideLabel(text, hide) {
element.parent('div').removeClass('hidden');
}
// Toggle table row chackboxes and background colors on the pages that use sortable tables:
// /usr/local/www/firewall_nat.php
// /usr/local/www/firewall_nat_1to1.php
// /usr/local/www/firewall_nat_out.php
// /usr/local/www/firewall_rules.php
// /usr/local/www/vpn_ipsec.php
// Striping of the tables is handled here, NOT with hte Bootstrap table-striped class because it would
// get confused when rows are sorted or deleted.
function stripe_table() {
$("tr:odd").addClass('active');
$("tr:even").removeClass('active');
}
function fr_toggle(id, prefix) {
if (!prefix)
prefix = 'fr';
var checkbox = document.getElementById(prefix + 'c' + id);
checkbox.checked = !checkbox.checked;
fr_bgcolor(id, prefix);
}
// Change background color based on state of checkbox
// On resetting background, reapply table striping
function fr_bgcolor(id, prefix) {
if (!prefix)
prefix = 'fr';
var row = $('#' + prefix + id);
if ($('#' + prefix + 'c' + id).prop('checked') ) {
row.css("background-color", "#DDF4FF");
row.removeClass('active');
} else {
row.css("background-color", "#FFFFFF");
stripe_table();
}
}
// The following functions are used by Form_Groups assigned a class of "repeatable" and provide the ability
// to add/delete rows of sequentially numbered elements, their labels and their help text
// See firewall_aliases_edit.php for an example