From 40a0ba859ead51209fe32a21ffc4cbd17ccc8378 Mon Sep 17 00:00:00 2001
From: Arminas <armisss4@gmail.com>
Date: Thu, 16 Feb 2023 18:17:10 +0200
Subject: [PATCH] Client search (#303)

---
 templates/base.html    | 22 +++++++++++-----------
 templates/clients.html | 22 ++++++++++++++++++++++
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 0f5d686..a2710e0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -46,17 +46,17 @@
             </ul>
 
             <!-- SEARCH FORM -->
-<!--            <form class="form-inline ml-3">-->
-<!--                <div class="input-group input-group-sm">-->
-<!--                    <input class="form-control form-control-navbar" type="search" placeholder="Search"-->
-<!--                        aria-label="Search">-->
-<!--                    <div class="input-group-append">-->
-<!--                        <button class="btn btn-navbar" type="submit">-->
-<!--                            <i class="fas fa-search"></i>-->
-<!--                        </button>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </form>-->
+            <form class="form-inline ml-3" style="display: none" id="search-form">
+                <div class="input-group input-group-sm">
+                    <input class="form-control form-control-navbar" placeholder="Search"
+                        aria-label="Search" id="search-input">
+                    <div class="input-group-append">
+                        <button class="btn-navbar" type="submit" disabled>
+                            <i class="fas fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+            </form>
 
             <!-- Right navbar links -->
             <div class="navbar-nav ml-auto">
diff --git a/templates/clients.html b/templates/clients.html
index 04fb790..239e54e 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -252,6 +252,28 @@ Wireguard Clients
             populateClientList();
         })
 
+        // show search bar and override :contains to be case-insensitive
+        $(document).ready(function () {
+            $("#search-form").show();
+            jQuery.expr[':'].contains = function(a, i, m) {
+                return jQuery(a).text().toUpperCase()
+                    .indexOf(m[3].toUpperCase()) >= 0;
+            };
+        })
+
+        // hide all clients and display only the ones that meet the search criteria (name, email, IP)
+        $('#search-input').keyup(function () {
+            var query = $(this).val();
+            $('.col-lg-4').hide();
+            $(".info-box-text").each(function() {
+                if($(this).children('i.fa-user').length > 0 || $(this).children('i.fa-envelope').length > 0)
+                {
+                    $(this).filter(':contains("' + query + '")').parent().parent().parent().show();
+                }
+                })
+            $(".badge-secondary").filter(':contains("' + query + '")').parent().parent().parent().show();
+        })
+
         // modal_pause_client modal event
         $("#modal_pause_client").on('show.bs.modal', function (event) {
             const button = $(event.relatedTarget);