From d1cf0ca7ebc57e111e6efa2a12a964627f0c6d21 Mon Sep 17 00:00:00 2001
From: Arminas <armisss4@gmail.com>
Date: Wed, 15 Mar 2023 22:24:44 +0200
Subject: [PATCH] Client filtration (#330)
---
custom/js/helper.js | 1 +
templates/base.html | 7 +++++
templates/clients.html | 65 ++++++++++++++++++++++++++++++++++++++++++
3 files changed, 73 insertions(+)
diff --git a/custom/js/helper.js b/custom/js/helper.js
index f337e5d..39bc1fa 100644
--- a/custom/js/helper.js
+++ b/custom/js/helper.js
@@ -58,6 +58,7 @@ function renderClientList(data) {
</div>
<hr>
<span class="info-box-text"><i class="fas fa-user"></i> ${obj.Client.name}</span>
+ <span class="info-box-text" style="display: none"><i class="fas fa-key"></i> ${obj.Client.public_key}</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>
${prettyDateTime(obj.Client.created_at)}</span>
diff --git a/templates/base.html b/templates/base.html
index e1db8ca..6c2e3f3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -56,6 +56,13 @@
</button>
</div>
</div>
+ <select name="status-selector" id="status-selector" class="form-control selectpicker show-tick" style="margin-left: 10px">
+ <option value="All">All</option>
+ <option value="Enabled">Enabled</option>
+ <option value="Disabled">Disabled</option>
+ <option value="Connected">Connected</option>
+ <option value="Disconnected">Disconnected</option>
+ </select>
</form>
<!-- Right navbar links -->
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);