71 lines
4.0 KiB
JavaScript
71 lines
4.0 KiB
JavaScript
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> `;
|
|
})
|
|
|
|
// 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 private subnets
|
|
let privateSubnetsHtml = "";
|
|
$.each(obj.Client.private_subnets, function(index, obj) {
|
|
privateSubnetsHtml += `<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>`
|
|
if (obj.Client.hasPrivateSubnet == false) {
|
|
html = html + `<img src="${obj.QRCode}" />`
|
|
}
|
|
html = html + `<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
|
|
+ `<span class="info-box-text"><strong>Private Subnets</strong></span>`
|
|
+ privateSubnetsHtml
|
|
+`</div>
|
|
</div>
|
|
</div>`
|
|
|
|
// add the client html elements to the list
|
|
$('#client-list').append(html);
|
|
});
|
|
}
|