jostreff/wireguard-ui
1
0
Fork 0
mirror of https://github.com/ngoduykhanh/wireguard-ui.git synced 2025-05-24 00:24:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Edit wireguard client (#19)

Browse source 
* Add the ability to modify an existing client
* Update client page using Ajax
This commit is contained in:
Khanh Ngo 2020-06-02 11:20:50 +07:00 • committed by GitHub
parent 9169e75e88
commit cd7f6e500a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 445 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

60
custom/js/helper.js Normal file
View file

@ -0,0 +1,60 @@
function renderClientList(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>&nbsp;`;
})
// render client allowed ip addresses
let allowedIpsHtml = "";
$.each(obj.Client.allowed_ips, function(index, obj) {
allowedIpsHtml += `<small class="badge badge-secondary">${obj}</small>&nbsp;`;
})
// 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" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">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);
});
}