public_git
/
wireguard-ui
mirror of https://github.com/ngoduykhanh/wireguard-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

QR code behind button and faster modal loading

This commit is contained in:
Luke Lambert 2022-01-22 13:12:07 -06:00
parent f3a788e3a4
commit 7a0d7acc4c
2 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
custom/js/helper.js
View File

@ -24,11 +24,15 @@ function renderClientList(data) {
<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">
<a href="/download?clientid=${obj.Client.id}" class="btn btn-outline-success btn-sm">Download</a>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
data-target="#modal_qr_client" data-clientid="${obj.Client.id}"
data-clientname="${obj.Client.name}">Scan</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary btn-sm" data-toggle="modal"
data-target="#modal_email_client" data-clientid="${obj.Client.id}"

47
templates/clients.html
View File

@ -57,6 +57,24 @@ Wireguard Clients
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal_qr_client">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Email Configuration</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<img id="qr_code" class="w-100" style="image-rendering: pixelated;" src="" alt="QR code" />
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade" id="modal_edit_client">
<div class="modal-dialog">
@ -275,7 +293,7 @@ Wireguard Clients
// Edit client modal event
$(document).ready(function () {
$("#modal_edit_client").on('shown.bs.modal', function (event) {
$("#modal_edit_client").on('show.bs.modal', function (event) {
let modal = $(this);
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
@ -415,7 +433,7 @@ Wireguard Clients
}
}
$("#modal_email_client").on('shown.bs.modal', function (event) {
$("#modal_email_client").on('show.bs.modal', function (event) {
let modal = $(this);
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
@ -439,6 +457,31 @@ Wireguard Clients
});
});
$("#modal_qr_client").on('show.bs.modal', function (event) {
let modal = $(this);
const button = $(event.relatedTarget);
const client_id = button.data('clientid');
const QRCodeImg = modal.find("#qr_code");
QRCodeImg.hide();
$.ajax({
cache: false,
method: 'GET',
url: '/api/client/' + client_id,
dataType: 'json',
contentType: "application/json",
success: function (resp) {
const client = resp.Client;
modal.find(".modal-title").text("QR Code for " + client.name);
QRCodeImg.attr('src', resp.QRCode).show();
},
error: function (jqXHR, exception) {
const responseJson = jQuery.parseJSON(jqXHR.responseText);
toastr.error(responseJson['message']);
}
});
});
$(document).ready(function () {
$.validator.setDefaults({
submitHandler: function (form) {