mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-09-08 04:31:14 +00:00
v2.0-beta-6 Commit
This commit is contained in:
Donald Cheng Hong Zou
@@ -1,14 +1,10 @@
|
||||
<html>
|
||||
|
||||
{% include "header.html" %}
|
||||
|
||||
<body>
|
||||
{% include "navbar.html" %}
|
||||
<div class="container-fluid">
|
||||
{% include "sidebar.html" %}
|
||||
<div id="config_body">
|
||||
|
||||
</div>
|
||||
<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">
|
||||
@@ -35,6 +31,10 @@
|
||||
<label for="allowed_ips">Allowed IPs</label>
|
||||
<input type="text" class="form-control" id="allowed_ips">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="allowed_ips">Name</label>
|
||||
<input type="text" class="form-control" id="new_add_name">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@@ -107,12 +107,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "tools.html" %}
|
||||
</body>
|
||||
{% include "footer.html" %}
|
||||
<script>
|
||||
$(".sb-{{conf_data['name']}}-url").addClass("active");
|
||||
|
||||
|
||||
function load_data(){
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
@@ -123,6 +122,7 @@
|
||||
async:false,
|
||||
success: function (response){
|
||||
$("#config_body").html(response);
|
||||
$("[refresh-interval={{ dashboard_refresh_interval }}]").addClass("active")
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -130,8 +130,22 @@
|
||||
load_data();
|
||||
setInterval(function(){
|
||||
load_data();
|
||||
}, 15000)
|
||||
}, {{dashboard_refresh_interval}})
|
||||
});
|
||||
|
||||
$("body").on("click", ".update_interval", function(){
|
||||
$.ajax({
|
||||
method:"POST",
|
||||
data: "interval="+$(this).attr("refresh-interval"),
|
||||
url: "/update_dashboard_refresh_interval",
|
||||
success: function (res){
|
||||
location.reload()
|
||||
}
|
||||
})
|
||||
});
|
||||
$("body").on("click", ".refresh", function (){
|
||||
load_data();
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
$("body").on("click", ".switch", function (){
|
||||
@@ -149,7 +163,7 @@
|
||||
headers:{
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
data: JSON.stringify({"public_key":$("#public_key").val(), "allowed_ips": $("#allowed_ips").val()}),
|
||||
data: JSON.stringify({"public_key":$("#public_key").val(), "allowed_ips": $("#allowed_ips").val(), "name":$("#new_add_name").val()}),
|
||||
success: function (response){
|
||||
if(response != "true"){
|
||||
$("#add_peer_alert").html(response+$("#add_peer_alert").html());
|
||||
@@ -168,9 +182,6 @@
|
||||
$("#delete_peer").attr("peer_id", peer_id);
|
||||
})
|
||||
|
||||
$(".btn-delete-peer").click(function(){
|
||||
|
||||
});
|
||||
|
||||
$("#delete_peer").click(function(){
|
||||
var peer_id = $(this).attr("peer_id");
|
||||
@@ -183,7 +194,7 @@
|
||||
},
|
||||
data: JSON.stringify({"action": "delete", "peer_id": peer_id}),
|
||||
success: function (response){
|
||||
if(response != "true"){
|
||||
if(response !== "true"){
|
||||
$("#remove_peer_alert").html(response+$("#add_peer_alert").html());
|
||||
$("#remove_peer_alert").removeClass("d-none");
|
||||
}
|
||||
@@ -222,7 +233,6 @@
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$("#save_peer_name").click(function (){
|
||||
var peer_id = $(this).attr("peer_id");
|
||||
$.ajax({
|
||||
|
||||
@@ -5,4 +5,5 @@
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
|
||||
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
|
||||
crossorigin="anonymous"></script>
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="{{ url_for('static',filename='tools.js') }}"></script>
|
||||
@@ -1,4 +1,4 @@
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4">
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mt-4 mb-4">
|
||||
<div class="info mt-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@@ -48,9 +48,16 @@
|
||||
</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>
|
||||
<div class="button-div mb-3" style="text-align: right;">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm btn-group-label refresh"><i class="bi bi-arrow-repeat"></i></button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="5000">5s</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="10000">10s</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="30000">30s</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm update_interval" refresh-interval="60000">1m</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#add_modal">
|
||||
<i class="bi bi-plus-circle-fill"></i> Peer
|
||||
</button>
|
||||
|
||||
</div>
|
||||
@@ -60,7 +67,7 @@
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col-sm">
|
||||
<div class="card-header-body ">
|
||||
{% if not i['name']%}
|
||||
{{ "Untitled Peer" }}
|
||||
@@ -70,7 +77,7 @@
|
||||
<span class="dot dot-{{i['status']}}"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="text-align: right">
|
||||
<div class="col-sm peer_data_group">
|
||||
<p class="text-primary" style="text-transform: uppercase; display: inline-block; margin-bottom: 0; margin-right: 1rem"><i class="bi bi-arrow-down-right"></i> {{i['total_receive']}} GB</p>
|
||||
<p class="text-success" style="text-transform: uppercase; display: inline-block; margin-bottom: 0"><i class="bi bi-arrow-up-right"></i> {{i['total_sent']}} GB</p>
|
||||
</div>
|
||||
@@ -81,10 +88,6 @@
|
||||
</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 class="ml-auto">{{i['id']}}</samp></h6>
|
||||
@@ -105,7 +108,6 @@
|
||||
</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>
|
||||
|
||||
@@ -5,9 +5,6 @@
|
||||
<link rel="icon" href="{{ url_for('static',filename='logo.png') }}"/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
|
||||
<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">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.1/dist/chart.min.js"></script>
|
||||
</head>
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{% include "navbar.html" %}
|
||||
<div class="container-fluid">
|
||||
{% include "sidebar.html" %}
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4 mb-4">
|
||||
<h1 class="pb-4 mt-4">Home</h1>
|
||||
{% for i in conf%}
|
||||
<div class="card mt-3">
|
||||
@@ -24,7 +24,7 @@
|
||||
<small class="text-muted"><strong>PUBLIC KEY</strong></small>
|
||||
<h6 style="text-transform: uppercase; margin:0 !important;"><samp>{{i['public_key']}}</samp></h6>
|
||||
</div>
|
||||
<div class="col-md">
|
||||
<div class="col-md index-switch">
|
||||
{% if i['checked'] == "checked" %}
|
||||
<a href="#" id="{{i['conf']}}" {{i['checked']}} class="switch text-primary tt"><i class="bi bi-toggle2-on"></i></a>
|
||||
{% else %}
|
||||
@@ -40,6 +40,7 @@
|
||||
{%endfor%}
|
||||
</main>
|
||||
</div>
|
||||
{% include "tools.html" %}
|
||||
</body>
|
||||
{% include "footer.html" %}
|
||||
<script>
|
||||
|
||||
@@ -26,7 +26,9 @@
|
||||
<form action="/update_wg_conf_path" method="post" class="update_wg_conf_path">
|
||||
<div class="form-group">
|
||||
<label for="username">Path</label>
|
||||
|
||||
<input type="text" class="form-control mb-4" id="wg_conf_path" name="wg_conf_path" value="{{ wg_conf_path }}">
|
||||
<p>Remember to remove <code>/</code> at the end of your path. e.g <code>/etc/wireguard</code></p>
|
||||
<button class="btn btn-danger change_path">Update Path & Restart Dashboard</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
<li class="nav-item"><a class="nav-link sb-settings-url" href="/settings">Settings</a></li>
|
||||
{% endif %}
|
||||
{% if session['update'] == "true" %}
|
||||
<li class="nav-item sb-update-li"><a class="nav-link sb-update-url" href="https://github.com/donaldzou/wireguard-dashboard/#-how-to-update-the-dashboard">New Update Available!<span class="dot dot-running"></span></a></li>
|
||||
<li class="nav-item sb-update-li">
|
||||
<a class="nav-link sb-update-url" data-toggle="modal" data-target="#update_modal" href="#">New Update Available!<span class="dot dot-running"></span></a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<hr>
|
||||
@@ -21,6 +23,16 @@
|
||||
{%endfor%}
|
||||
</ul>
|
||||
<hr>
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
|
||||
<span>Tools</span>
|
||||
</h6>
|
||||
<ul class="nav flex-column">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#ping_modal" href="#">Ping</a></li>
|
||||
<li class="nav-item"><a class="nav-link" data-toggle="modal" data-target="#traceroute_modal" href="#">Traceroute</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
<hr>
|
||||
{% if "username" in session %}
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item"><a class="nav-link text-danger" href="/signout" style="font-weight: bold">Sign Out</a></li>
|
||||
|
||||
@@ -29,10 +29,6 @@
|
||||
<label for="password" class="text-left">Password</label>
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="form-group form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Keep you login</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-dark" style="width: 100%;">Sign In</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
121
src/templates/tools.html
Normal file
121
src/templates/tools.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<div class="modal fade" id="ping_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">Ping</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="row">
|
||||
<div class="col-sm">
|
||||
<div class="mb-3">
|
||||
<small>Configuration</small>
|
||||
<select class="form-control mt-2 conf_dropdown">
|
||||
<option value="none" selected="selected" disabled>Select Configuration</option>
|
||||
{% for i in conf%}
|
||||
<option value="{{ i['conf'] }}">{{ i['conf'] }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="mb-3">
|
||||
<small>IP</small>
|
||||
<select class="form-control mt-2 ip_dropdown">
|
||||
<option value="none" selected="selected" disabled>Choose an IP</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="mb-3">
|
||||
<small>Ping Count</small>
|
||||
<input type="number" class="form-control mt-2 ping_count" min=1 value=4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ping_result">
|
||||
<table class="table">
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary send_ping" disabled>Ping</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="traceroute_modal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">Traceroute</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="row">
|
||||
<div class="col-sm">
|
||||
<div class="mb-3">
|
||||
<small>Configuration</small>
|
||||
<select class="form-control mt-2 conf_dropdown">
|
||||
<option value="none" selected="selected" disabled>Select Configuration</option>
|
||||
{% for i in conf%}
|
||||
<option value="{{ i['conf'] }}">{{ i['conf'] }}</option>
|
||||
{%endfor%}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div class="mb-3">
|
||||
<small>IP</small>
|
||||
<select class="form-control mt-2 ip_dropdown">
|
||||
<option value="none" selected="selected" disabled>Choose an IP</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary send_traceroute" disabled>Traceroute</button>
|
||||
<hr>
|
||||
<div class="traceroute_result">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Hop</th>
|
||||
<th scope="col">IP</th>
|
||||
<th scope="col">Avg RTT</th>
|
||||
<th scope="col">Min RTT</th>
|
||||
<th scope="col">Max RTT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="update_modal" 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">How to update dashboard</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre><code>$ sudo sh wgd.sh stop</code><br><code>$ sudo sh wgd.sh update</code><br><code>$ sudo sh wgd.sh start</code></pre>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user