Separator bar stuff moved to pfSenseHelpers.js so that it can be more easily applied to other pages

Separators added to firewall_nat.php

1 files changed, 12 insertions, 158 deletions

diff --git a/src/usr/local/www/firewall_rules.php b/src/usr/local/www/firewall_rules.php
index fc14e2c..0c2ab29 100644
--- a/src/usr/local/www/firewall_rules.php
+++ b/src/usr/local/www/firewall_rules.php
@@ -200,7 +200,6 @@ if (!$if || !isset($iflist[$if])) {
 }
 
 if ($_POST) {
-
 	$pconfig = $_POST;
 
 	if ($_POST['apply']) {
@@ -290,6 +289,7 @@ if (isset($_POST['del_x'])) {
 		exit;
 	}
 } else if ($_POST['order-store']) {
+
 	/* update rule order, POST[rule] is an array of ordered IDs */
 	if (is_array($_POST['rule']) && !empty($_POST['rule'])) {
 		$a_filter_new = array();
@@ -469,9 +469,10 @@ $seps = 0;
 
 // There can be a separator before any rules are listed
 if ($config['filter']['separator'][strtolower($if)]['sep0']['row'][0] == "fr-1") {
+	$cellcolor = $config['filter']['separator'][strtolower($if)]['sep0']['color'];
 	print('<tr class="ui-sortable-handle separator">' .
-		'<td bgcolor="#cce5ff" colspan="' . ($columns_in_table -1 ) . '">' . '<font color="#002699">' . $config['filter']['separator'][strtolower($if)]['sep0']['text'] . '</font></td>' .
-		'<td  bgcolor="#cce5ff"><a href="#"><i class="fa fa-trash no-confirm sepdel" title="delete this separator"></i></a></td>' .
+		'<td class="' . $cellcolor . '" colspan="' . ($columns_in_table -1) . '">' . '<span class="' . $cellcolor . '">' . $config['filter']['separator'][strtolower($if)]['sep0']['text'] . '</span></td>' .
+		'<td  class="' . $cellcolor . '"><a href="#"><i class="fa fa-trash no-confirm sepdel" title="delete this separator"></i></a></td>' .
 		'</tr>' . "\n");
 }
 
@@ -875,6 +876,14 @@ for ($i = 0; isset($a_filter[$i]); $i++):
 
 <script type="text/javascript">
 //<![CDATA[
+
+//Need to create some variables here so that jquer/pfSenseHelpers.php can read them
+iface = "<?=strtolower($if)?>";
+cncltxt = '<?=gettext("Cancel")?>';
+svtxt = '<?=gettext("Save")?>';
+svbtnplaceholder = '<?=gettext("Enter a description, Save, then drag to final location.")?>';
+configsection = "filter";
+
 events.push(function() {
 
 	// Make rules sortable
@@ -898,148 +907,6 @@ events.push(function() {
 		saving = true;
 	});
 
-	// Separator bar stuff ------------------------------------------------------------------------
-
-	// Globals
-	gColor = 'bg-info';
-	newSeperator = false;
-	saving = false;
-	dirty = false;
-
-	$("#addsep").prop('type' ,'button');
-
-	$("#addsep").click(function() {
-		if (newSeperator) {
-			return(false);
-		}
-
-		gColor = 'bg-info';
-		// Inset a temporary bar in which the user can enter some optional text
-		sepcols = $( "#ruletable tr th" ).length - 2;
-
-		$('#ruletable > tbody:last').append('<tr>' +
-			'<td class="' + gColor + '" colspan="' + sepcols + '"><input id="newsep" placeholder="<?=gettext("Enter a description, Save, then drag to final location.")?>" class="col-md-12" type="text" /></td>' +
-			'<td class="' + gColor + '" colspan="2"><button class="btn btn-default btn-sm" id="btnnewsep"><?=gettext("Save")?></button>' +
-			'<button class="btn btn-default btn-sm" id="btncncsep"><?=gettext("Cancel")?></button>' +
-			'&nbsp;&nbsp;&nbsp;&nbsp;' +
-			'&nbsp;&nbsp;<a id="sepclrblue" value="bg-info"><i class="fa fa-circle text-info icon-pointer"></i></a>' +
-			'&nbsp;&nbsp;<a id="sepclrred" value="bg-danger"><i class="fa fa-circle text-danger icon-pointer"></i></a>' +
-			'&nbsp;&nbsp;<a id="sepclrgreen" value="bg-success"><i class="fa fa-circle text-success icon-pointer"></i></a>' +
-			'&nbsp;&nbsp;<a id="sepclrorange" value="bg-warning"><i class="fa fa-circle text-warning icon-pointer"></i></button>' +
-			'</td></tr>');
-
-		$('#newsep').focus();
-		newSeperator = true;
-
-		$("#btnnewsep").prop('type' ,'button');
-
-		// Watch escape and enter keys
-		$('#newsep').keyup(function(e) {
-			if(e.which == 27) {
-				$('#btncncsep').trigger('click');
-			}
-		});
-
-		$('#newsep').keypress(function(e) {
-			if(e.which == 13) {
-				$('#btnnewsep').trigger('click');
-			}
-		});
-
-		handle_colors();
-
-		// Remove the temporary separator bar and replace it with the final version containing the
-		// user's text and a delete icon
-		$("#btnnewsep").click(function() {
-			var septext = escapeHtml($('#newsep').val());
-			sepcols = $( "#ruletable tr th" ).length - 1;
-
-			$('#ruletable > tbody:last >tr:last').remove();
-			$('#ruletable > tbody:last').append('<tr class="ui-sortable-handle separator">' +
-				'<td class="' + gColor + '" colspan="' + sepcols + '">' + '<span class="' + gColor + '">' + septext + '</span></td>' +
-				'<td class="' + gColor + '"><a href="#"><i class="fa fa-trash sepdel"></i></a>' +
-				'</td></tr>');
-
-			$('#order-store').removeAttr('disabled');
-			newSeperator = false;
-			dirty = true;
-		});
-
-		// Cancel button
-		$('#btncncsep').click(function(e) {
-			e.preventDefault();
-			$(this).parents('tr').remove();
-			newSeperator = false;
-		});
-	});
-
-	// Delete a separator row
-	$(function(){
-		$('table').on('click','tr a .sepdel',function(e){
-			e.preventDefault();
-			$(this).parents('tr').remove();
-			$('#order-store').removeAttr('disabled');
-			dirty = true;
-		});
-	});
-
-	// Compose an inout array containing the row #, color and text for each separator
-	function save_separators() {
-		var seprow = 0;
-		var sepinput;
-		var sepnum = 0;
-
-		$('#ruletable > tbody > tr').each(function() {
-			if ($(this).hasClass('separator')) {
-				seprow = $(this).prev('tr').attr("id");
-				if (seprow == undefined) {
-					seprow = "fr-1";
-				}
-
-				sepinput = '<input type="hidden" name="separator[' + sepnum + '][row]" value="' + seprow + '"></input>';
-				$('form').append(sepinput);
-				sepinput = '<input type="hidden" name="separator[' + sepnum + '][text]" value="' + escapeHtml($(this).find('td').text()) + '"></input>';
-				$('form').append(sepinput);
-				sepinput = '<input type="hidden" name="separator[' + sepnum + '][color]" value="' + $(this).find('td').prop('class') + '"></input>';
-				$('form').append(sepinput);
-				sepinput = '<input type="hidden" name="separator[' + sepnum + '][if]" value="<?=strtolower($if)?>"></input>';
-				$('form').append(sepinput);
-				sepnum++;
-			}
-
-			if ($(this).parent('tbody').hasClass('user-entries')) {
-				seprow++;
-			}
-		});
-	}
-
-	function reindex_rules(section) {
-		var row = 0;
-
-		section.find('tr').each(function() {
-			if(this.id) {
-				$(this).attr("id", "fr" + row);
-				row++;
-			}
-		})
-	}
-
-	function handle_colors() {
-		$('[id^=sepclr]').prop("type", "button");
-
-		$('[id^=sepclr]').click(function () {
-			var color =	 $(this).attr('value');
-			// Clear all the color classes
-			$(this).parent('td').prop('class', '');
-			$(this).parent('td').prev('td').prop('class', '');
-			// Install our new color class
-			$(this).parent('td').addClass(color);
-			$(this).parent('td').prev('td').addClass(color);
-			// Set the global color
-			gColor = color;
-		});
-	}
-
 	// provide a warning message if the user tries to change page before saving
 	$(window).bind('beforeunload', function(){
 		if ((!saving && dirty) || newSeperator) {
@@ -1049,19 +916,6 @@ events.push(function() {
 		}
 	});
 
-	//JS equivalent to PHP htmlspecialchars()
-	function escapeHtml(text) {
-		var map = {
-			'&': '&amp;',
-			'<': '&lt;',
-			'>': '&gt;',
-			'"': '&quot;',
-			"'": '&#039;'
-		};
-
-		return text.replace(/[&<>"']/g, function(m) { return map[m]; });
-	}
-	// --------------------------------------------------------------------------------------------
 });
 //]]>
 </script>