mirror of
https://github.com/ngoduykhanh/wireguard-ui.git
synced 2025-06-08 00:56:58 +03:00
Update client page using jax
This commit is contained in:
Khanh Ngo
parent
e3fac242bb
commit
ec2b447b7b
8 changed files with 133 additions and 76 deletions
|
|
@ -246,7 +246,28 @@
|
|||
<script src="static/plugins/jquery-tags-input/dist/jquery.tagsinput.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="static/dist/js/adminlte.min.js"></script>
|
||||
<!-- Custom js -->
|
||||
<script src="static/custom/js/helper.js"></script>
|
||||
<script>
|
||||
// populateClient function for render new client info
|
||||
// on the client page.
|
||||
function populateClient(client_id) {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
method: 'GET',
|
||||
url: '/api/client/' + client_id,
|
||||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (resp) {
|
||||
renderClientList([resp]);
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
toastr.error(responseJson['message']);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// submitNewClient function for new client form submission
|
||||
function submitNewClient() {
|
||||
const name = $("#client_name").val();
|
||||
|
|
@ -261,7 +282,6 @@
|
|||
|
||||
const data = {"name": name, "email": email, "allocated_ips": allocated_ips, "allowed_ips": allowed_ips,
|
||||
"enabled": enabled};
|
||||
console.log(data);
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
|
|
@ -270,12 +290,12 @@
|
|||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
data: JSON.stringify(data),
|
||||
success: function(data) {
|
||||
success: function(resp) {
|
||||
$("#modal_new_client").modal('hide');
|
||||
toastr.success('Created new client successfully');
|
||||
// Refresh the home page (clients page) after adding successfully
|
||||
// Update the home page (clients page) after adding successfully
|
||||
if (window.location.pathname === "/") {
|
||||
location.reload();
|
||||
populateClient(resp.id);
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, exception) {
|
||||
|
|
@ -377,6 +397,8 @@
|
|||
// New Client modal event
|
||||
$(document).ready(function () {
|
||||
$("#modal_new_client").on('shown.bs.modal', function (e) {
|
||||
$("#client_name").val("");
|
||||
$("#client_email").val("");
|
||||
$("#client_allocated_ips").importTags('');
|
||||
updateIPAllocationSuggestion();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -125,71 +125,7 @@ Wireguard Clients
|
|||
{{end}}
|
||||
|
||||
{{define "bottom_js"}}
|
||||
<script type="text/html" id="template">
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function renderClient(data) {
|
||||
$.each(data, function(index, obj) {
|
||||
// render client status css tag style
|
||||
let clientStatusHtml = '>'
|
||||
if (obj.Client.enabled) {
|
||||
clientStatusHtml = `style="visibility: hidden;">`
|
||||
}
|
||||
|
||||
// render client allocated ip addresses
|
||||
let allocatedIpsHtml = "";
|
||||
$.each(obj.Client.allocated_ips, function(index, obj) {
|
||||
allocatedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
|
||||
})
|
||||
|
||||
// render client allowed ip addresses
|
||||
let allowedIpsHtml = "";
|
||||
$.each(obj.Client.allowed_ips, function(index, obj) {
|
||||
allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>`;
|
||||
})
|
||||
|
||||
// render client html content
|
||||
let html = `<div class="col-sm-6" id="client_${obj.Client.id}">
|
||||
<div class="info-box">
|
||||
<div class="overlay" id="paused_${obj.Client.id}"` + clientStatusHtml
|
||||
+ `<i class="paused-client fas fa-3x fa-play" onclick="resumeClient('${obj.Client.id}')"></i>
|
||||
</div>
|
||||
<img src="${obj.QRCode}" />
|
||||
<div class="info-box-content">
|
||||
<div class="btn-group">
|
||||
<button onclick="location.href='/download?clientid=${obj.Client.id}'" type="button"
|
||||
class="btn btn-outline-success btn-sm">Download</button>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
|
||||
data-target="#modal_edit_client">Edit</button>
|
||||
<button type="button" class="btn btn-outline-warning btn-sm" data-toggle="modal"
|
||||
data-target="#modal_pause_client" data-clientid="${obj.Client.id}"
|
||||
data-clientname="${obj.Client.name}">Disable</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-toggle="modal"
|
||||
data-target="#modal_remove_client" data-clientid="${obj.Client.id}"
|
||||
data-clientname="${obj.Client.name}">Remove</button>
|
||||
</div>
|
||||
<hr>
|
||||
<span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
|
||||
<span class="info-box-text"><i class="fas fa-envelope"></i> ${obj.Client.email}</span>
|
||||
<span class="info-box-text"><i class="fas fa-clock"></i>
|
||||
${obj.Client.created_at}</span>
|
||||
<span class="info-box-text"><i class="fas fa-history"></i>
|
||||
${obj.Client.updated_at}</span>
|
||||
<span class="info-box-text"><strong>IP Allocation</strong></span>`
|
||||
+ allocatedIpsHtml
|
||||
+ `<span class="info-box-text"><strong>Allowed IPs</strong></span>`
|
||||
+ allowedIpsHtml
|
||||
+`</div>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
// add the client html elements to the list
|
||||
$('#client-list').append(html);
|
||||
});
|
||||
}
|
||||
function populateClientList() {
|
||||
$.ajax({
|
||||
cache: false,
|
||||
|
|
@ -198,7 +134,7 @@ Wireguard Clients
|
|||
dataType: 'json',
|
||||
contentType: "application/json",
|
||||
success: function (data) {
|
||||
renderClient(data);
|
||||
renderClientList(data);
|
||||
},
|
||||
error: function (jqXHR, exception) {
|
||||
const responseJson = jQuery.parseJSON(jqXHR.responseText);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue