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);