Redmine #5994 standardize firewall rule advanced button

1 files changed, 42 insertions, 24 deletions

diff --git a/src/usr/local/www/firewall_rules_edit.php b/src/usr/local/www/firewall_rules_edit.php
index e7e7717..777c832 100644
--- a/src/usr/local/www/firewall_rules_edit.php
+++ b/src/usr/local/www/firewall_rules_edit.php
@@ -1366,7 +1366,7 @@ foreach (['src' => 'Source', 'dst' => 'Destination'] as $type => $name) {
 			'Display Advanced',
 			null,
 			'fa-cog'
-		))->addClass('btn-info');
+		))->addClass('btn-info btn-sm');
 	}
 
 	$portValues = ['' => gettext('(other)'), 'any' => gettext('any')];
@@ -1441,23 +1441,19 @@ $section->addInput(new Form_Input(
 	$pconfig['descr']
 ))->setHelp('You may enter a description here for your reference.');
 
-$adv_open = is_aoadv_used($pconfig);
-
-$btnadvanced = new Form_Button(
-	'toggle-advanced',
-	'Advanced Options',
+$btnadv = new Form_Button(
+	'btnadvopts',
+	'Display Advanced',
 	null,
 	'fa-cog'
 );
 
-$btnadvanced->addClass('btn-info');
+$btnadv->addClass('btn-info btn-sm');
 
-if (!$adv_open) {
-	$section->addInput(new Form_StaticText(
-		null,
-		$btnadvanced
-	));
-}
+$section->addInput(new Form_StaticText(
+	'Advanced Options',
+	$btnadv
+));
 
 $form->add($section);
 
@@ -1743,9 +1739,40 @@ events.push(function() {
 
 	var portsenabled = 1;
 	var editenabled = 1;
-	var optionsvisible = 0;
 	var srcportsvisible = false;
 
+	// Show advanced additional opts options ======================================================
+	var showadvopts = false;
+
+	function show_advopts(ispageload) {
+		var text;
+		// On page load decide the initial state based on the data.
+		if (ispageload) {
+			showadvopts = <?php if (is_aoadv_used($pconfig)) {echo 'true';} else {echo 'false';} ?>;
+		} else {
+			// It was a click, swap the state.
+			showadvopts = !showadvopts;
+		}
+
+		hideClass('advanced-options', !showadvopts);
+		if ($('#tcpflags_any').prop('checked')) {
+			$('.table-flags').addClass('hidden');
+		}
+
+		if (showadvopts) {
+			text = "<?=gettext('Hide Advanced');?>";
+		} else {
+			text = "<?=gettext('Display Advanced');?>";
+		}
+		$('#btnadvopts').html('<i class="fa fa-cog"></i> ' + text);
+	}
+
+	$('#btnadvopts').prop('type', 'button');
+
+	$('#btnadvopts').click(function(event) {
+		show_advopts();
+	});
+
 	function ext_change() {
 
 		if (($('#srcbeginport').find(":selected").index() == 0) && portsenabled && editenabled) {
@@ -1927,7 +1954,7 @@ events.push(function() {
 
 	typesel_change();
 
-	hideClass('advanced-options',  ! "<?=$adv_open?>");
+	show_advopts(true);
 	hideClass('srcportrange', true);
 
 	<?php if ((!empty($pconfig['srcbeginport']) && $pconfig['srcbeginport'] != "any") || (!empty($pconfig['srcendport']) && $pconfig['srcendport'] != "any")): ?>
@@ -1936,7 +1963,6 @@ events.push(function() {
 	<?php endif; ?>
 
 	// Make it a regular button, not a submit
-	$('#toggle-advanced').prop('type','button');
 	$("#btnsrcadv").prop('type','button');
 
 	// on click . .
@@ -1983,14 +2009,6 @@ events.push(function() {
 		proto_change();
 	});
 
-	$('#toggle-advanced').click(function() {
-		optionsvisible = 1;
-		hideClass('advanced-options', false);
-		if ($('#tcpflags_any').prop('checked')) {
-			$('.table-flags').addClass('hidden');
-		}
-	});
-
 	$('#tcpflags_any').click(function () {
 		if (this.checked) {
 			$('.table-flags').addClass('hidden');