Able to add peer

This commit is contained in:
donaldzou
2020-10-23 01:31:10 -04:00
parent 8c88440c3e
commit ea52529e06
6 changed files with 136 additions and 27 deletions

View File

@@ -40,7 +40,6 @@
</div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4">
<div class="info mt-4">
<div class="row">
<div class="col-sm">
<small class="text-muted"><strong>CONFIGURATION</strong></small>
@@ -48,7 +47,7 @@
</div>
<div class="col-sm">
<small class="text-muted"><strong>ACTION</strong></small><br>
<input class="mt-2 switch" id="{{conf_data['name']}}" type="checkbox" data-toggle="toggle" {{conf_data['checked']}} data-height="15">
<input class="mt-2 switch" id="{{conf_data['name']}}" type="checkbox" data-toggle="toggle" {{conf_data['checked']}} data-size="sm">
</div>
<div class="w-100"></div>
<div class="col-sm">
@@ -78,6 +77,12 @@
</div>
</div>
<hr>
<div class="button-div" style="text-align: right;">
<button type="button" class="btn btn-outline-primary btn-sm mb-3" data-toggle="modal" data-target="#staticBackdrop">
<strong>ADD PEER</strong>
</button>
</div>
</div>
{% for i in conf_data['peer_data']%}
@@ -135,9 +140,37 @@
{%endfor%}
</main>
</div>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Add a new peer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="public_key">Public Key</label>
<input type="text" class="form-control" id="public_key" aria-describedby="public_key">
</div>
<div class="form-group">
<label for="allowed_ips">Allowed IPs</label>
<input type="text" class="form-control" id="allowed_ips">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="save_peer" conf_id={{conf_data['name']}}>Save</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
@@ -147,12 +180,37 @@
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script>
$('.switch').change(function() {
location.replace("/switch/"+$(this).attr('id'))
})
if ($(this).prop('checked') == false){
if (confirm('Are you sure you want to turn off this connection?')){
location.replace("/switch/"+$(this).attr('id'))
}
}
else{
location.replace("/switch/"+$(this).attr('id'))
}
});
$("#save_peer").click(function(){
if ($("#allowed_ips") != "" && $("#public_key") != ""){
var conf = $(this).attr('conf_id')
setInterval(function(){
location.reload();
}, 10000)
$.ajax({
method: "POST",
url: "/add_peer/"+conf,
headers:{
"Content-Type": "application/json"
},
data: JSON.stringify({"public_key":$("#public_key").val(), "allowed_ips": $("#allowed_ips").val()}),
success: function (response){
console.log(response);
}
})
}
})
// setInterval(function(){
// location.reload();
// }, 10000)
</script>
</html>
</html>

View File

@@ -43,12 +43,15 @@
<div class="card-body">
<div class="row">
<div class="col-sm">
<div class="col">
<small class="text-muted"><strong>CONFIGURATION</strong></small>
<a href="/configuration/{{i['conf']}}">
<h5 class="card-title">{{i['conf']}}</h5>
</a>
</div>
<div class="col">
<input class="mt-2 switch" id="{{i['conf']}}" type="checkbox" data-toggle="toggle" {{i['checked']}} data-size="sm">
</div>
<div class="w-100"></div>
<div class="col-sm">
@@ -59,9 +62,8 @@
<small class="text-muted"><strong>PUBLIC KEY</strong></small>
<h6 style="text-transform: uppercase;"><samp>{{i['public_key']}}</samp></h6>
</div>
<div class="col-sm">
<input class="mt-2 switch" id="{{i['conf']}}" type="checkbox" data-toggle="toggle" {{i['checked']}} data-height="15">
</div>
</div>
</div>
</div>
@@ -80,7 +82,14 @@
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<script>
$('.switch').change(function() {
location.replace("/switch/"+$(this).attr('id'))
})
if ($(this).prop('checked') == false){
if (confirm('Are you sure you want to turn off this connection?')){
location.replace("/switch/"+$(this).attr('id'))
}
}
else{
location.replace("/switch/"+$(this).attr('id'))
}
});
</script>
</html>