added searchbar to docker container list

tobychui · Nov 18, 2024 · 373845f · 373845f
1 parent 6515eb9
commit 373845f
Showing 1 changed file with 34 additions and 11 deletions.
diff --git a/src/web/snippet/dockerContainersList.html b/src/web/snippet/dockerContainersList.html
@@ -10,17 +10,27 @@
   <body>
     <br />
     <div class="ui container">
-      <div class="field">
-        <div class="ui checkbox">
-          <input type="checkbox" id="showUnexposed" class="hidden" />
-          <label for="showUnexposed"
-            >Show Containers with Unexposed Ports
-            <br />
-            <small
-              >Please make sure Zoraxy and the target container share a
-              network</small
-            >
-          </label>
+      <div class="ui form">
+        <div class="field">
+          <input
+            id="searchbar"
+            type="text"
+            placeholder="Search..."
+            autocomplete="off"
+          />
+        </div>
+        <div class="field">
+          <div class="ui checkbox">
+            <input type="checkbox" id="showUnexposed" class="hidden" />
+            <label for="showUnexposed"
+              >Show Containers with unexposed ports
+              <br />
+              <small
+                >Please make sure Zoraxy and the target container share a
+                network</small
+              >
+            </label>
+          </div>
         </div>
       </div>
       <div class="ui header">
@@ -46,6 +56,9 @@
     </div>
 
     <script>
+      // TODO: refactor for better readability / consistent use of jQuery
+      // TODO: add persistence for showUnexposed checkbox
+
       let lines = {};
       let linesAdded = {};
 
@@ -64,6 +77,16 @@
           getDockerContainers();
         });
 
+      $("#searchbar").on("input", () => {
+        // TODO: this should probably be debounced to avoid unnecessary calls during typing
+        const search = $("#searchbar").val().toLowerCase();
+        console.log("search", search);
+        $("#containersList .item").each((index, item) => {
+          const content = $(item).text().toLowerCase();
+          $(item).toggle(content.includes(search));
+        });
+      });
+
       function getDockerContainers() {
         const hostRequest = $.get("/api/proxy/list?type=host");
         const dockerRequest = $.get("/api/docker/containers");