From 91a9b271066ccd4a578881c18b5a45a28ffb7b1c Mon Sep 17 00:00:00 2001
From: Luc Didry <luc@didry.org>
Date: Wed, 27 Nov 2024 09:55:24 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E2=80=94=20Filter=20form=20on?=
 =?UTF-8?q?=20domains=20list=20(fix=20#66)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                        |  1 +
 argos/server/templates/domains.html | 48 ++++++++++++++++++++++-------
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b4debd..a48e0e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - ✨ — Retry check right after a httpx.ReadError
 - ✨ — The HTTP method used by checks is now configurable
 - ♻️ — Refactor some agent code
+- 💄 — Filter form on domains list (#66)
 
 ## 0.5.0
 
diff --git a/argos/server/templates/domains.html b/argos/server/templates/domains.html
index 14ffdf8..e9d9d4b 100644
--- a/argos/server/templates/domains.html
+++ b/argos/server/templates/domains.html
@@ -13,7 +13,15 @@
                 </li>
             </ul>
             {# djlint:off H021 #}
-            <ul id="status-selector" style="display: none;">{# djlint:on #}
+            <ul id="js-only" style="display: none; ">{# djlint:on #}
+                <li>
+                    <input id="domain-search"
+                           type="search"
+                           spellcheck="false"
+                           placeholder="Filter domains list"
+                           aria-label="Filter domains list"
+                    />
+                </li>
                 <li>
                     <label for="select-status">Show domains with status:</label>
                     <select id="select-status">
@@ -38,7 +46,8 @@
 
             <tbody id="domains-body">
                 {% for (domain, status) in domains %}
-                <tr data-status="{{ status }}">
+                <tr data-status="{{ status }}"
+                    data-domain="{{ domain }}">
                     <td>
                         <a href="{{ url_for('get_domain_tasks_view', domain=domain) }}">
                             {{ domain }}
@@ -62,29 +71,46 @@
         </table>
     </div>
     <script>
-        document.getElementById('select-status').addEventListener('change', (e) => {
-            if (e.currentTarget.value === 'all') {
+        function filterDomains(e) {
+            let status = document.getElementById('select-status');
+            let filter = document.getElementById('domain-search').value;
+            console.log(filter)
+            if (status.value === 'all') {
                 document.querySelectorAll('[data-status]').forEach((item) => {
-                    item.style.display = null;
+                    if (filter && item.dataset.domain.indexOf(filter) == -1) {
+                        item.style.display = 'none';
+                    } else {
+                        item.style.display = null;
+                    }
                 })
-            } else if (e.currentTarget.value === 'not-ok') {
+            } else if (status.value === 'not-ok') {
                 document.querySelectorAll('[data-status]').forEach((item) => {
                     if (item.dataset.status !== 'ok') {
-                        item.style.display = null;
+                        if (filter && item.dataset.domain.indexOf(filter) == -1) {
+                            item.style.display = 'none';
+                        } else {
+                            item.style.display = null;
+                        }
                     } else {
                         item.style.display = 'none';
                     }
                 })
             } else {
                 document.querySelectorAll('[data-status]').forEach((item) => {
-                    if (item.dataset.status === e.currentTarget.value) {
-                        item.style.display = null;
+                    if (item.dataset.status === status.value) {
+                        if (filter && item.dataset.domain.indexOf(filter) == -1) {
+                            item.style.display = 'none';
+                        } else {
+                            item.style.display = null;
+                        }
                     } else {
                         item.style.display = 'none';
                     }
                 })
             }
-        });
+        }
+        document.getElementById('select-status').addEventListener('change', filterDomains);
+        document.getElementById('domain-search').addEventListener('input', filterDomains);
         document.querySelectorAll('[data-status]').forEach((item) => {
             if (item.dataset.status !== 'ok') {
                 item.style.display = null;
@@ -92,6 +118,6 @@
                 item.style.display = 'none';
             }
         })
-        document.getElementById('status-selector').style.display = null;
+        document.getElementById('js-only').style.display = null;
     </script>
 {% endblock content %}