From fffb83c5e4d8bc23121c310528808e544c3256c3 Mon Sep 17 00:00:00 2001
From: Pavel Loginov <buffoon2001@mail.ru>
Date: Mon, 23 Sep 2019 17:03:23 +0300
Subject: [PATCH] v3.4.9

New the "Add proxy" page
---
 app/templates/add.html  | 42 +++++++++++++++++++++++--
 app/templates/base.html |  7 +++--
 inc/script.js           | 68 ++++++++++++++++++++++-------------------
 inc/style.css           |  8 +++--
 4 files changed, 86 insertions(+), 39 deletions(-)

diff --git a/app/templates/add.html b/app/templates/add.html
index f1cd4430..5b5355d2 100644
--- a/app/templates/add.html
+++ b/app/templates/add.html
@@ -2,6 +2,7 @@
 {% block content %}
 <div id="tabs">
 	<ul>
+		<li><a href="#create">Create proxy</a></li>
 		<li><a href="#listen">Listen</a></li>
 		<li><a href="#frontend">Frontend</a></li>
 		<li><a href="#backend">Backend</a></li>
@@ -13,6 +14,42 @@
 			<a href=/app/login.py title="Login" class="login"> Login</a>
 		{% endif %}
 	</ul>
+	<div id="create">
+		<div class="div-pannel">
+			<div class="div-server">
+				<div class="server-name">
+					<span title="Create Listen" class="redirectListen span-link">Create Listen</span>
+				</div>
+				<div class="server-desc">
+						A "listen" section defines a complete proxy with its frontend and backend parts combined in one section. It is generally useful for TCP-only traffic.
+				</div>
+				
+			</div>
+		</div>
+		<div class="div-pannel">
+			<div class="div-server">
+				<div class="server-name">
+					<span title="Create Frontend" class="redirectFrontend span-link">Create Frontend</span>
+				</div>
+				<div class="server-desc">
+					A "frontend" section describes a set of listening sockets accepting client connections.
+					And forwards them to backend
+				</div>			
+			</div>
+		</div>
+		<div class="div-pannel">
+			<div class="div-server">
+				<div class="server-name">
+					<span title="Create Backend" class="redirectBackend span-link">Create Backend</span>
+				</div>
+				<div class="server-desc">
+					A "backend" section describes a set of servers to which the proxy will connect to forward incoming connections. 
+					<br />
+					<br />
+				</div>			
+			</div>
+		</div>
+	</div>
 	<div id="listen">
 		<form name="add-listner" action="/app/add.py">
 		<table class="add-table">
@@ -235,7 +272,8 @@
 			</td>
 		</tr>
 		</form>
-		</table></div>
+		</table>
+	</div>
 		
 		<!-- Second tabs -->
 		
@@ -366,7 +404,7 @@
 				<div style="font-size: 12px; padding-bottom: 10px;">Start typing backend, or press down</div>
 				<input  name="backend" id="backends" required size="30" placeholder="some_backend" class="form-control">
 				<span style="font-size: 12px; padding-left: 10px;"> .</span>
-				<p style="font-size: 12px"><b>Note:</b> If backend don\t exist, you must <a href="#" style="color: #23527c"  title="Create backend" id="redirectBackend">create backend first</a>.</p>
+				<p style="font-size: 12px"><b>Note:</b> If backend don\t exist, you must <a href="#" style="color: #23527c"  title="Create backend" class="redirectBackend">create backend first</a>.</p>
 			</td>
 		</tr>
 		<tr class="advance-show">
diff --git a/app/templates/base.html b/app/templates/base.html
index 1ba704aa..c3cd1741 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -44,9 +44,10 @@
 							<ul class="v_menu">
 								<li><a href=/app/hapservers.py title="Working with Haproxy Configs" class="overview-link head-submenu">Overview</a> </li>
 							{% if role <= 2 %}
-								<li><a href=/app/add.py#listner title="Add single listen" class="add head-submenu" id="add1">Add listen</a></li>
-								<li><a href=/app/add.py#frontend title="Add single frontend" class="add head-submenu" id="add2">Add frontend</a></li>
-								<li><a href=/app/add.py#backend title="Add single backend" class="add head-submenu" id="add3">Add backend</a></li>
+								<li><a href=/app/add.py#proxy title="Add proxy" class="add head-submenu" id="add1">Add proxy</a></li>
+								<!-- <li><a href=/app/add.py#frontend title="Add single frontend" class="add head-submenu" id="add2">Add frontend</a></li> -->
+								<!-- <li><a href=/app/add.py#frontend title="Add single frontend" class="add head-submenu" id="add2">Add frontend</a></li> -->
+								<!-- <li><a href=/app/add.py#backend title="Add single backend" class="add head-submenu" id="add3">Add backend</a></li> -->
 								<li><a href=/app/versions.py title="Actions with configs versions" class="version head-submenu">Versions</a></li>
 								<li><a href=/app/add.py#ssl title="Upload SSL cert" class="cert head-submenu" id="add4">SSL</a></li>	
 								<li><a href=/app/add.py#option title="Save custom options" class="option head-submenu" id="add5">Options</a></li>	
diff --git a/inc/script.js b/inc/script.js
index af870e28..3802fe17 100644
--- a/inc/script.js
+++ b/inc/script.js
@@ -505,9 +505,15 @@ $( function() {
 		scrollInertia:30
 		});	 */
 	$( "#tabs" ).tabs();
-	$( "#redirectBackend" ).on( "click", function() {
+	$( ".redirectListen" ).on( "click", function() {
+		$( "#tabs" ).tabs( "option", "active", 1 );
+	} );
+	$( ".redirectFrontend" ).on( "click", function() {
 		$( "#tabs" ).tabs( "option", "active", 2 );
 	} );
+	$( ".redirectBackend" ).on( "click", function() {
+		$( "#tabs" ).tabs( "option", "active", 3 );
+	} );
 	$( "select" ).selectmenu();
 		
     //var tooltips = $( "[title]" ).tooltip();
@@ -1236,24 +1242,24 @@ $( function() {
 			});
 			$( "#tabs" ).tabs( "option", "active", 0 );
 		} );
-		$( "#add2" ).on( "click", function() {
-			$('.menu li ul li').each(function () {
-				$(this).find('a').css('padding-left', '20px')
-				$(this).find('a').css('border-left', '0px solid #5D9CEB');
-				$(this).children("#add2").css('padding-left', '30px');
-				$(this).children("#add2").css('border-left', '4px solid #5D9CEB');
-			});
-			$( "#tabs" ).tabs( "option", "active", 1 );
-		} );
-		$( "#add3" ).on( "click", function() {
-			$('.menu li ul li').each(function () {
-				$(this).find('a').css('padding-left', '20px')
-				$(this).find('a').css('border-left', '0px solid #5D9CEB');
-				$(this).children("#add3").css('padding-left', '30px');
-				$(this).children("#add3").css('border-left', '4px solid #5D9CEB');
-			});
-			$( "#tabs" ).tabs( "option", "active", 2 );
-		} );
+		// $( "#add2" ).on( "click", function() {
+			// $('.menu li ul li').each(function () {
+				// $(this).find('a').css('padding-left', '20px')
+				// $(this).find('a').css('border-left', '0px solid #5D9CEB');
+				// $(this).children("#add2").css('padding-left', '30px');
+				// $(this).children("#add2").css('border-left', '4px solid #5D9CEB');
+			// });
+			// $( "#tabs" ).tabs( "option", "active", 1 );
+		// } );
+		// $( "#add3" ).on( "click", function() {
+			// $('.menu li ul li').each(function () {
+				// $(this).find('a').css('padding-left', '20px')
+				// $(this).find('a').css('border-left', '0px solid #5D9CEB');
+				// $(this).children("#add3").css('padding-left', '30px');
+				// $(this).children("#add3").css('border-left', '4px solid #5D9CEB');
+			// });
+			// $( "#tabs" ).tabs( "option", "active", 2 );
+		// } );
 		$( "#add4" ).on( "click", function() {
 			$('.menu li ul li').each(function () {
 				$(this).find('a').css('padding-left', '20px')
@@ -1261,7 +1267,7 @@ $( function() {
 				$(this).children("#add4").css('padding-left', '30px');;
 				$(this).children("#add4").css('border-left', '4px solid #5D9CEB');
 			});
-			$( "#tabs" ).tabs( "option", "active", 3 );
+			$( "#tabs" ).tabs( "option", "active", 4 );
 		} );
 		$( "#add5" ).on( "click", function() {
 			$('.menu li ul li').each(function () {
@@ -1270,7 +1276,7 @@ $( function() {
 				$(this).children("#add5").css('padding-left', '30px');;
 				$(this).children("#add5").css('border-left', '4px solid #5D9CEB');
 			});
-			$( "#tabs" ).tabs( "option", "active", 4 );
+			$( "#tabs" ).tabs( "option", "active", 5 );
 		} );
 	}
 	if (cur_url[0] == "/app/users.py" || cur_url[0] == "/app/servers.py") {
@@ -1326,15 +1332,15 @@ $( function() {
 				$( "#tabs" ).tabs( "option", "active", 2 );
 			} );
 		}
-		$( ".role" ).on( "click", function() {
-			$('.menu li ul li').each(function () {
-				$(this).find('a').css('border-left', '0px solid #5D9CEB');
-				$(this).find('a').css('padding-left', '20px')
-				$(this).children(".role").css('padding-left', '30px');
-				$(this).children(".role").css('border-left', '4px solid #5D9CEB');
-			});
-			$( "#tabs" ).tabs( "option", "active", 3 );
-		} );
+		// $( ".role" ).on( "click", function() {
+			// $('.menu li ul li').each(function () {
+				// $(this).find('a').css('border-left', '0px solid #5D9CEB');
+				// $(this).find('a').css('padding-left', '20px')
+				// $(this).children(".role").css('padding-left', '30px');
+				// $(this).children(".role").css('border-left', '4px solid #5D9CEB');
+			// });
+			// $( "#tabs" ).tabs( "option", "active", 3 );
+		// } );
 		$( ".admin" ).on( "click", function() {
 			$('.menu li ul li').each(function () {
 				$(this).find('a').css('border-left', '0px solid #5D9CEB');
@@ -1342,7 +1348,7 @@ $( function() {
 				$(this).children(".admin").css('padding-left', '30px');
 				$(this).children(".admin").css('border-left', '4px solid #5D9CEB');
 			});
-			$( "#tabs" ).tabs( "option", "active", 4 );
+			$( "#tabs" ).tabs( "option", "active", 3 );
 		} );
 	}
 	$( "#path-cert-listen" ).autocomplete({
diff --git a/inc/style.css b/inc/style.css
index cfdcca3c..4a7c2f30 100644
--- a/inc/style.css
+++ b/inc/style.css
@@ -76,7 +76,7 @@ pre {
 }
 .container {
 	min-height: calc(99vh - 50px);
-	height: 100%;
+	height: auto;
 	max-width: 91%;
 	min-width: 40%;
 	background-color: #fff;
@@ -86,7 +86,7 @@ pre {
 }
 .footer {
 	min-height: 50px;
-	top: calc(99vh - 40px);
+	/* top: calc(99vh - 40px); */
 	right: 0;
 	left: 0;
 	max-width: 91%;
@@ -96,7 +96,6 @@ pre {
 	margin-right: 20px;
 	border-top: 1px solid #ddd;
 	clear: both;
-	position: fixed;
 }
 .footer-div {
 	display: block;
@@ -755,4 +754,7 @@ label {
 .top-info {
 	display: inline-block;
 	width: 350px;
+}
+.span-link {
+	cursor: pointer;
 }
\ No newline at end of file