jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-07-16 18:48:15 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjustment to have enable/disable client on UI

Browse source
This commit is contained in:
Khanh Ngo 2020-04-22 17:11:28 +07:00
parent e52ffaf686
commit dbb85cb759
No known key found for this signature in database
GPG key ID: D5FAA6A16150E49E
6 changed files with 138 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
templates/base.html
View file

@ -25,6 +25,10 @@
<link rel="stylesheet" href="static/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<!-- START: On page css -->
{{template "top_css" .}}
<!-- END: On page css -->
</head>
<body class="hold-transition sidebar-mini">

98
templates/clients.html
View file

@ -2,6 +2,16 @@
Wireguard Clients
{{end}}
{{define "top_css"}}
<style>
.paused-client {
transition: transform .2s;
cursor: pointer;
}
i[class^="paused-client"]:hover { transform: scale(1.5); }
</style>
{{end}}
{{define "username"}}
Admin
{{end}}
@ -18,14 +28,21 @@ Wireguard Clients
{{range .clientDataList}}
<div class="col-sm-6">
<div class="info-box">
<div class="overlay" id="paused_{{.Client.ID}}" {{if eq .Client.Enabled true}}style="display: none;"{{end}}>
<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('{{.Client.ID}}')"></i>
</div>
<img
src="{{ .QRCode }}" />
<div class="info-box-content">
<div class="btn-group">
<button type="button" class="btn btn-outline-success btn-sm">Download</button>
<button type="button" class="btn btn-outline-primary btn-sm">Edit</button>
<button type="button" class="btn btn-outline-warning btn-sm">Disable</button>
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal" data-target="#modal_remove_client" data-clientid="{{ .Client.ID }}" data-clientname="{{ .Client.Name }}">Remove</button>
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
data-target="#modal_pause_client" data-clientid="{{ .Client.ID }}"
data-clientname="{{ .Client.Name }}">Disable</button>
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
data-target="#modal_remove_client" data-clientid="{{ .Client.ID }}"
data-clientname="{{ .Client.Name }}">Remove</button>
</div>
<hr>
<span class="info-box-text"><i class="fas fa-user"></i> {{ .Client.Name }}</span>
@ -54,6 +71,28 @@ Wireguard Clients
</div>
</section>
<div class="modal fade" id="modal_pause_client">
<div class="modal-dialog">
<div class="modal-content bg-warning">
<div class="modal-header">
<h4 class="modal-title">Disable</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-dark" id="pause_client_confirm">Apply</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal_remove_client">
<div class="modal-dialog">
<div class="modal-content bg-danger">
@ -66,8 +105,8 @@ Wireguard Clients
<div class="modal-body">
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-outline-light" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-light" id="remove_client_confirm">Apply</button>
<button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-outline-dark" id="remove_client_confirm">Apply</button>
</div>
</div>
<!-- /.modal-content -->
@ -79,6 +118,57 @@ Wireguard Clients
{{define "bottom_js"}}
<script>
function setClientStatus(clientID, status) {
var data = {"id": clientID, "status": status}
$.ajax({
cache: false,
method: 'POST',
url: '/client/set-status',
dataType: 'json',
contentType: "application/json",
data: JSON.stringify(data),
success: function (data) {
console.log("Set client " + clientID + " status to " + status)
},
error: function (jqXHR, exception) {
var responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
}
function resumeClient(clientID) {
setClientStatus(clientID, true);
var divElement = document.getElementById("paused_" + clientID);
divElement.style.display = "none";
}
function pauseClient(clientID) {
setClientStatus(clientID, false);
var divElement = document.getElementById("paused_" + clientID);
divElement.style.display = "block";
}
</script>
<script>
// modal_pause_client modal event
$('#modal_pause_client').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var client_id = button.data('clientid');
var client_name = button.data('clientname');
var modal = $(this);
modal.find('.modal-body').text("You are about to disable client " + client_name);
modal.find('#pause_client_confirm').val(client_id);
})
// pause_client_confirm button event
$(document).ready(function () {
$('#pause_client_confirm').click(function () {
var client_id = $(this).val();
pauseClient(client_id);
$('#modal_pause_client').modal('hide');
});
});
// modal_remove_client modal event
$('#modal_remove_client').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);

3
templates/global_settings.html
View file

@ -2,6 +2,9 @@
Global Settings
{{end}}
{{define "top_css"}}
{{end}}
{{define "username"}}
Admin
{{end}}

3
templates/server.html
View file

@ -2,6 +2,9 @@
Wireguard Server
{{end}}
{{define "top_css"}}
{{end}}
{{define "username"}}
Admin
{{end}}