github
/
haproxy-wi
mirror of https://github.com/Aidaho12/haproxy-wi
1
0
Fork 0
Code Issues Releases Wiki Activity

v3.4.9 

New the "Add proxy" page
pull/145/head
Pavel Loginov 2019-09-23 17:03:23 +03:00
parent b252f8fa3b
commit fffb83c5e4
4 changed files with 86 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/templates/add.html
View File

@ -2,6 +2,7 @@
{% block content %} {% block content %}
<div id="tabs"> <div id="tabs">
<ul> <ul>
<li><a href="#create">Create proxy</a></li>
<li><a href="#listen">Listen</a></li> <li><a href="#listen">Listen</a></li>
<li><a href="#frontend">Frontend</a></li> <li><a href="#frontend">Frontend</a></li>
<li><a href="#backend">Backend</a></li> <li><a href="#backend">Backend</a></li>
@ -13,6 +14,42 @@
<a href=/app/login.py title="Login" class="login"> Login</a> <a href=/app/login.py title="Login" class="login"> Login</a>
{% endif %} {% endif %}
</ul> </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"> <div id="listen">
<form name="add-listner" action="/app/add.py"> <form name="add-listner" action="/app/add.py">
<table class="add-table"> <table class="add-table">
@ -235,7 +272,8 @@
</td> </td>
</tr> </tr>
</form> </form>
</table></div> </table>
</div>
<!-- Second tabs --> <!-- Second tabs -->
@ -366,7 +404,7 @@
<div style="font-size: 12px; padding-bottom: 10px;">Start typing backend, or press down</div> <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"> <input name="backend" id="backends" required size="30" placeholder="some_backend" class="form-control">
<span style="font-size: 12px; padding-left: 10px;"> .</span> <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> </td>
</tr> </tr>
<tr class="advance-show"> <tr class="advance-show">

7
app/templates/base.html
View File

@ -44,9 +44,10 @@
<ul class="v_menu"> <ul class="v_menu">
<li><a href=/app/hapservers.py title="Working with Haproxy Configs" class="overview-link head-submenu">Overview</a> </li> <li><a href=/app/hapservers.py title="Working with Haproxy Configs" class="overview-link head-submenu">Overview</a> </li>
{% if role <= 2 %} {% 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#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/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/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#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> <li><a href=/app/add.py#option title="Save custom options" class="option head-submenu" id="add5">Options</a></li>

68
inc/script.js
View File

@ -505,9 +505,15 @@ $( function() {
scrollInertia:30 scrollInertia:30
}); */ }); */
$( "#tabs" ).tabs(); $( "#tabs" ).tabs();
$( "#redirectBackend" ).on( "click", function() { $( ".redirectListen" ).on( "click", function() {
$( "#tabs" ).tabs( "option", "active", 1 );
} );
$( ".redirectFrontend" ).on( "click", function() {
$( "#tabs" ).tabs( "option", "active", 2 ); $( "#tabs" ).tabs( "option", "active", 2 );
} ); } );
$( ".redirectBackend" ).on( "click", function() {
$( "#tabs" ).tabs( "option", "active", 3 );
} );
$( "select" ).selectmenu(); $( "select" ).selectmenu();
//var tooltips = $( "[title]" ).tooltip(); //var tooltips = $( "[title]" ).tooltip();
@ -1236,24 +1242,24 @@ $( function() {
}); });
$( "#tabs" ).tabs( "option", "active", 0 ); $( "#tabs" ).tabs( "option", "active", 0 );
} ); } );
$( "#add2" ).on( "click", function() { // $( "#add2" ).on( "click", function() {
$('.menu li ul li').each(function () { // $('.menu li ul li').each(function () {
$(this).find('a').css('padding-left', '20px') // $(this).find('a').css('padding-left', '20px')
$(this).find('a').css('border-left', '0px solid #5D9CEB'); // $(this).find('a').css('border-left', '0px solid #5D9CEB');
$(this).children("#add2").css('padding-left', '30px'); // $(this).children("#add2").css('padding-left', '30px');
$(this).children("#add2").css('border-left', '4px solid #5D9CEB'); // $(this).children("#add2").css('border-left', '4px solid #5D9CEB');
}); // });
$( "#tabs" ).tabs( "option", "active", 1 ); // $( "#tabs" ).tabs( "option", "active", 1 );
} ); // } );
$( "#add3" ).on( "click", function() { // $( "#add3" ).on( "click", function() {
$('.menu li ul li').each(function () { // $('.menu li ul li').each(function () {
$(this).find('a').css('padding-left', '20px') // $(this).find('a').css('padding-left', '20px')
$(this).find('a').css('border-left', '0px solid #5D9CEB'); // $(this).find('a').css('border-left', '0px solid #5D9CEB');
$(this).children("#add3").css('padding-left', '30px'); // $(this).children("#add3").css('padding-left', '30px');
$(this).children("#add3").css('border-left', '4px solid #5D9CEB'); // $(this).children("#add3").css('border-left', '4px solid #5D9CEB');
}); // });
$( "#tabs" ).tabs( "option", "active", 2 ); // $( "#tabs" ).tabs( "option", "active", 2 );
} ); // } );
$( "#add4" ).on( "click", function() { $( "#add4" ).on( "click", function() {
$('.menu li ul li').each(function () { $('.menu li ul li').each(function () {
$(this).find('a').css('padding-left', '20px') $(this).find('a').css('padding-left', '20px')
@ -1261,7 +1267,7 @@ $( function() {
$(this).children("#add4").css('padding-left', '30px');; $(this).children("#add4").css('padding-left', '30px');;
$(this).children("#add4").css('border-left', '4px solid #5D9CEB'); $(this).children("#add4").css('border-left', '4px solid #5D9CEB');
}); });
$( "#tabs" ).tabs( "option", "active", 3 ); $( "#tabs" ).tabs( "option", "active", 4 );
} ); } );
$( "#add5" ).on( "click", function() { $( "#add5" ).on( "click", function() {
$('.menu li ul li').each(function () { $('.menu li ul li').each(function () {
@ -1270,7 +1276,7 @@ $( function() {
$(this).children("#add5").css('padding-left', '30px');; $(this).children("#add5").css('padding-left', '30px');;
$(this).children("#add5").css('border-left', '4px solid #5D9CEB'); $(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") { if (cur_url[0] == "/app/users.py" || cur_url[0] == "/app/servers.py") {
@ -1326,15 +1332,15 @@ $( function() {
$( "#tabs" ).tabs( "option", "active", 2 ); $( "#tabs" ).tabs( "option", "active", 2 );
} ); } );
} }
$( ".role" ).on( "click", function() { // $( ".role" ).on( "click", function() {
$('.menu li ul li').each(function () { // $('.menu li ul li').each(function () {
$(this).find('a').css('border-left', '0px solid #5D9CEB'); // $(this).find('a').css('border-left', '0px solid #5D9CEB');
$(this).find('a').css('padding-left', '20px') // $(this).find('a').css('padding-left', '20px')
$(this).children(".role").css('padding-left', '30px'); // $(this).children(".role").css('padding-left', '30px');
$(this).children(".role").css('border-left', '4px solid #5D9CEB'); // $(this).children(".role").css('border-left', '4px solid #5D9CEB');
}); // });
$( "#tabs" ).tabs( "option", "active", 3 ); // $( "#tabs" ).tabs( "option", "active", 3 );
} ); // } );
$( ".admin" ).on( "click", function() { $( ".admin" ).on( "click", function() {
$('.menu li ul li').each(function () { $('.menu li ul li').each(function () {
$(this).find('a').css('border-left', '0px solid #5D9CEB'); $(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('padding-left', '30px');
$(this).children(".admin").css('border-left', '4px solid #5D9CEB'); $(this).children(".admin").css('border-left', '4px solid #5D9CEB');
}); });
$( "#tabs" ).tabs( "option", "active", 4 ); $( "#tabs" ).tabs( "option", "active", 3 );
} ); } );
} }
$( "#path-cert-listen" ).autocomplete({ $( "#path-cert-listen" ).autocomplete({

8
inc/style.css
View File

@ -76,7 +76,7 @@ pre {
} }
.container { .container {
min-height: calc(99vh - 50px); min-height: calc(99vh - 50px);
height: 100%; height: auto;
max-width: 91%; max-width: 91%;
min-width: 40%; min-width: 40%;
background-color: #fff; background-color: #fff;
@ -86,7 +86,7 @@ pre {
} }
.footer { .footer {
min-height: 50px; min-height: 50px;
top: calc(99vh - 40px); /* top: calc(99vh - 40px); */
right: 0; right: 0;
left: 0; left: 0;
max-width: 91%; max-width: 91%;
@ -96,7 +96,6 @@ pre {
margin-right: 20px; margin-right: 20px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
clear: both; clear: both;
position: fixed;
} }
.footer-div { .footer-div {
display: block; display: block;
@ -755,4 +754,7 @@ label {
.top-info { .top-info {
display: inline-block; display: inline-block;
width: 350px; width: 350px;
}
.span-link {
cursor: pointer;
} }