mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-09-08 04:31:14 +00:00
v20210402
Added more features
This commit is contained in:
Donald Cheng Hong Zou
@@ -8,11 +8,12 @@
|
||||
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='dashboard.css') }}">
|
||||
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Wireguard Dashboard</a>
|
||||
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="/">Wireguard Dashboard</a>
|
||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
|
||||
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
@@ -38,109 +39,9 @@
|
||||
</nav>
|
||||
</div>
|
||||
</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>
|
||||
<h1 class="mb-3">{{conf_data['name']}}</h1>
|
||||
</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-size="sm">
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>STATUS</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['status']}}<span class="dot dot-{{conf_data['status']}}"></span></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>CONNECTED PEERS</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['running_peer']}}</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][0]}} GB</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL RECIEVED</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][1]}} GB</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL SENT</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][2]}} GB</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>PUBLIC KEY</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><samp>{{conf_data['public_key']}}</samp></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LISTEN PORT</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
|
||||
</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="#add_modal">
|
||||
<strong>ADD PEER</strong>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for i in conf_data['peer_data']%}
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>STATUS</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['status']}}<span class="dot dot-{{conf_data['peer_data'][i]['status']}}"></span></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>PEER</strong></small>
|
||||
<h6><samp>{{i}}</samp></h6>
|
||||
</div>
|
||||
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>ALLOWED IP</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['allowed_ip']}}</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['latest_handshake']}}</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>END POINT</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['endpoint']}}</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['total_data']}} GB</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL RECIEVED</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['total_recive']}} GB</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL SENT</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['peer_data'][i]['total_sent']}} GB</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<!-- <small class="text-muted"><strong>ACTION</strong></small> -->
|
||||
<div class="button-group">
|
||||
<button type="button" class="btn btn-outline-danger btn-sm btn-delete-peer" id="{{i}}" data-toggle="modal" data-target="#delete_modal"><span class="material-icons">delete_forever</span></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%endfor%}
|
||||
</main>
|
||||
<div id="config_body">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="add_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
@@ -201,6 +102,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="setting_modal" data-backdrop="static" data-keyboard="false" tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel" aria-hidden="true" conf_id={{conf_data['name']}} peer_id="">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="peer_name"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="peer_name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="peer_name_textbox" placeholder="">
|
||||
</div>
|
||||
</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_name" conf_id={{conf_data['name']}} peer_id="">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="position-fixed top-0 right-0 p-3" style="z-index: 5; right: 0; top: 50px;">
|
||||
<div id="alertToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
|
||||
<div class="toast-header">
|
||||
<strong class="mr-auto">Wireguard Dashboard</strong>
|
||||
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
</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://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
||||
@@ -209,7 +148,32 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
|
||||
<script>
|
||||
function load_data(){
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
url: "/get_config/"+"{{conf_data['name']}}",
|
||||
headers:{
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
async:false,
|
||||
success: function (response){
|
||||
$("#config_body").html(response);
|
||||
$.ajax({
|
||||
url: "{{ url_for('static',filename='bootstrap4-toggle.min.js') }}",
|
||||
dataType: "script",
|
||||
cache: true
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
$(document).ready(function(){
|
||||
load_data();
|
||||
setInterval(function(){
|
||||
load_data();
|
||||
}, 10000)
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$('.switch').change(function() {
|
||||
if ($(this).prop('checked') == false){
|
||||
@@ -221,7 +185,6 @@
|
||||
location.replace("/switch/"+$(this).attr('id'));
|
||||
}
|
||||
});
|
||||
|
||||
$("#save_peer").click(function(){
|
||||
if ($("#allowed_ips") != "" && $("#public_key") != ""){
|
||||
var conf = $(this).attr('conf_id')
|
||||
@@ -246,9 +209,13 @@
|
||||
}
|
||||
})
|
||||
|
||||
$(".btn-delete-peer").click(function(){
|
||||
var peer_id = $(this).attr("id");
|
||||
$("body").on("click", ".btn-delete-peer", function(){
|
||||
var peer_id = $(this).attr("id");
|
||||
$("#delete_peer").attr("peer_id", peer_id);
|
||||
})
|
||||
|
||||
$(".btn-delete-peer").click(function(){
|
||||
|
||||
});
|
||||
|
||||
$("#delete_peer").click(function(){
|
||||
@@ -275,8 +242,48 @@
|
||||
|
||||
|
||||
|
||||
// setInterval(function(){
|
||||
// location.reload();
|
||||
// }, 10000)
|
||||
var myModal = new bootstrap.Modal(document.getElementById('setting_modal'), {
|
||||
keyboard: false
|
||||
})
|
||||
$("body").on("click", ".btn-setting-peer", function(){
|
||||
myModal.toggle();
|
||||
var peer_id = $(this).attr("id");
|
||||
$("#save_peer_name").attr("peer_id", peer_id);
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "/get_peer_name/"+$("#setting_modal").attr("conf_id"),
|
||||
headers:{
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
data: JSON.stringify({"id": peer_id}),
|
||||
success: function(response){
|
||||
if (response == ""){
|
||||
$("#setting_modal .peer_name").html("Untitled Peer");
|
||||
}else{
|
||||
$("#setting_modal .peer_name").html(response);
|
||||
$("#peer_name_textbox").val(response)
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$("#save_peer_name").click(function (){
|
||||
var peer_id = $(this).attr("peer_id");
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: "/save_peer_name/"+"{{conf_data['name']}}",
|
||||
headers:{
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
data: JSON.stringify({id: peer_id, name: $("#peer_name_textbox").val()}),
|
||||
success: function (response){
|
||||
myModal.toggle();
|
||||
load_data();
|
||||
$('#alertToast').toast('show');
|
||||
$('#alertToast .toast-body').html("Name Saved!");
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
112
src/templates/get_conf.html
Normal file
112
src/templates/get_conf.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<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>
|
||||
<h1 class="mb-3">{{conf_data['name']}}</h1>
|
||||
</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-size="sm">
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>STATUS</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['status']}}<span class="dot dot-{{conf_data['status']}}"></span></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>CONNECTED PEERS</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['running_peer']}}</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][0]}} GB</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL RECIEVED</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][1]}} GB</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL SENT</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{conf_data['total_data_usage'][2]}} GB</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>PUBLIC KEY</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><samp>{{conf_data['public_key']}}</samp></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LISTEN PORT</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><samp>{{conf_data['listen_port']}}</samp></h6>
|
||||
</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="#add_modal">
|
||||
<strong>ADD PEER</strong>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for i in conf_data['peer_data']%}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
{% if not i['name']%}
|
||||
{{ "Untitled Peer" }}
|
||||
{% else %}
|
||||
{{i['name']}}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>STATUS</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['status']}}<span class="dot dot-{{i['status']}}"></span></h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>PEER</strong></small>
|
||||
<h6><samp>{{i['id']}}</samp></h6>
|
||||
</div>
|
||||
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>ALLOWED IP</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['allowed_ip']}}</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>LATEST HANDSHAKE</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['latest_handshake']}}</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>END POINT</strong></small>
|
||||
<h6 style="text-transform: uppercase;">{{i['endpoint']}}</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
{# <div class="col-sm">#}
|
||||
{# <small class="text-muted"><strong>TOTAL DATA USAGE</strong></small>#}
|
||||
{# <h6 style="text-transform: uppercase;">{{i['total_data']}} GB</h6>#}
|
||||
{# </div>#}
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL RECEIVED</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</h6>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<small class="text-muted"><strong>TOTAL SENT</strong></small>
|
||||
<h6 style="text-transform: uppercase;"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</h6>
|
||||
</div>
|
||||
<div class="w-100"></div>
|
||||
<div class="col-sm">
|
||||
<!-- <small class="text-muted"><strong>ACTION</strong></small> -->
|
||||
<div class="button-group">
|
||||
<hr>
|
||||
<button type="button" class="btn btn-outline-primary btn-setting-peer btn-control" id="{{i['id']}}" data-toggle="modal"><i class="bi bi-gear-fill"></i></button>
|
||||
<button type="button" class="btn btn-outline-danger btn-delete-peer btn-control" id="{{i['id']}}" data-toggle="modal" data-target="#delete_modal"><i class="bi bi-x-circle-fill"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%endfor%}
|
||||
</main>
|
||||
Reference in New Issue
Block a user