diff --git a/custom/js/helper.js b/custom/js/helper.js
index 86f6dc7..df94923 100644
--- a/custom/js/helper.js
+++ b/custom/js/helper.js
@@ -58,6 +58,7 @@ function renderClientList(data) {
${obj.Client.name}
+ ${obj.Client.public_key}
${obj.Client.email}
${prettyDateTime(obj.Client.created_at)}
diff --git a/templates/base.html b/templates/base.html
index 1987ab0..6a04ffe 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -56,6 +56,13 @@
+
diff --git a/templates/clients.html b/templates/clients.html
index 239e54e..5a585f0 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -263,6 +263,7 @@ Wireguard Clients
// hide all clients and display only the ones that meet the search criteria (name, email, IP)
$('#search-input').keyup(function () {
+ $("#status-selector").val("All");
var query = $(this).val();
$('.col-lg-4').hide();
$(".info-box-text").each(function() {
@@ -274,6 +275,70 @@ Wireguard Clients
$(".badge-secondary").filter(':contains("' + query + '")').parent().parent().parent().show();
})
+ $("#status-selector").on('change', function () {
+ $('#search-input').val("");
+ switch ($("#status-selector").val()) {
+ case "All":
+ $('.col-lg-4').show();
+ break;
+ case "Enabled":
+ $('.col-lg-4').hide();
+ $('[id^="paused_"]').each(function () {
+ if ($(this).css("visibility") === "hidden") {
+ $(this).parent().parent().show();
+ }
+ });
+ break;
+ case "Disabled":
+ $('.col-lg-4').hide();
+ $('[id^="paused_"]').each(function () {
+ if ($(this).css("visibility") !== "hidden") {
+ $(this).parent().parent().show();
+ }
+ });
+ break;
+ case "Connected":
+ $('.col-lg-4').hide();
+ $.ajax({
+ cache: false,
+ method: 'GET',
+ url: '{{.basePath}}/status',
+ success: function (data) {
+ const returnedHTML = $(data).find(".table-success").get();
+ var returnedString = "";
+ returnedHTML.forEach(entry => returnedString += entry.outerHTML);
+ $(".fa-key").each(function () {
+ if (returnedString.indexOf($(this).parent().text().trim()) != -1) {
+ $(this).closest('.col-lg-4').show();
+ }
+ })
+ }
+ });
+ break;
+ case "Disconnected":
+ $('.col-lg-4').show();
+ $.ajax({
+ cache: false,
+ method: 'GET',
+ url: '{{.basePath}}/status',
+ success: function (data) {
+ const returnedHTML = $(data).find(".table-success").get();
+ var returnedString = "";
+ returnedHTML.forEach(entry => returnedString += entry.outerHTML);
+ $(".fa-key").each(function () {
+ if (returnedString.indexOf($(this).parent().text().trim()) != -1) {
+ $(this).closest('.col-lg-4').hide();
+ }
+ })
+ }
+ });
+ break;
+ default:
+ $('.col-lg-4').show();
+ break;
+ }
+ });
+
// modal_pause_client modal event
$("#modal_pause_client").on('show.bs.modal', function (event) {
const button = $(event.relatedTarget);