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 %}
<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">

7
app/templates/base.html
View File

@ -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>

68
inc/script.js
View File

@ -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({

8
inc/style.css
View File

@ -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;
}