Completed #5356

Refactor row toggle javascript

6 files changed, 65 insertions, 132 deletions

diff --git a/src/usr/local/www/firewall_nat.php b/src/usr/local/www/firewall_nat.php
index 2545072..87af5c2 100644
--- a/src/usr/local/www/firewall_nat.php
+++ b/src/usr/local/www/firewall_nat.php
@@ -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
@@ -375,37 +375,16 @@ endforeach;
 </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;
+events.push(function() {
 
-	for (i = 0; i < cellcnt-1; i++) {
-		cells[i].style.backgroundColor = checkbox.checked ? "#DDF4FF" : "#FFFFFF";
-	}
-}
-</script>
+	stripe_table();
 
-<script>
-events.push(function() {
-	// Make rules draggable/sortable
+	// Make rules sortable
 	$('table tbody.user-entries').sortable({
 		cursor: 'grabbing',
 		update: function(event, ui) {
 			$('#order-store').removeAttr('disabled');
+			stripe_table();
 		}
 	});
 
diff --git a/src/usr/local/www/firewall_nat_1to1.php b/src/usr/local/www/firewall_nat_1to1.php
index e59af92..dd6df85 100644
--- a/src/usr/local/www/firewall_nat_1to1.php
+++ b/src/usr/local/www/firewall_nat_1to1.php
@@ -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>
@@ -280,37 +280,16 @@ 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;
+events.push(function() {
 
-	for (i = 0; i < cellcnt-1; i++) {
-		cells[i].style.backgroundColor = checkbox.checked ? "#DDF4FF" : "#FFFFFF";
-	}
-}
-</script>
+	stripe_table();
 
-<script>
-events.push(function() {
-	// Make rules draggable/sortable
+	// Make rules sortable
 	$('table tbody.user-entries').sortable({
 		cursor: 'grabbing',
 		update: function(event, ui) {
 			$('#order-store').removeAttr('disabled');
+			stripe_table();
 		}
 	});
 
diff --git a/src/usr/local/www/firewall_nat_out.php b/src/usr/local/www/firewall_nat_out.php
index a17789c..70c2afc 100644
--- a/src/usr/local/www/firewall_nat_out.php
+++ b/src/usr/local/www/firewall_nat_out.php
@@ -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>
@@ -652,37 +652,15 @@ 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();
 		}
 	});
 
diff --git a/src/usr/local/www/firewall_rules.php b/src/usr/local/www/firewall_rules.php
index 066d2b9..db87c61 100644
--- a/src/usr/local/www/firewall_rules.php
+++ b/src/usr/local/www/firewall_rules.php
@@ -689,40 +689,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");?>
diff --git a/src/usr/local/www/guiconfig.inc b/src/usr/local/www/guiconfig.inc
index cef2bc6..0aa2985 100644
--- a/src/usr/local/www/guiconfig.inc
+++ b/src/usr/local/www/guiconfig.inc
@@ -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" : "";
diff --git a/src/usr/local/www/jquery/pfSenseHelpers.js b/src/usr/local/www/jquery/pfSenseHelpers.js
index 2a1d123..26fabfb 100644
--- a/src/usr/local/www/jquery/pfSenseHelpers.js
+++ b/src/usr/local/www/jquery/pfSenseHelpers.js
@@ -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