From a31c12e037feb0c96ca6820212b467adbedc707c Mon Sep 17 00:00:00 2001
From: Luc Didry <luc@didry.org>
Date: Thu, 14 Nov 2024 09:26:19 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20=E2=80=94=20Fix=20not-OK=20domains?=
 =?UTF-8?q?=20display=20if=20javascript=20is=20disabled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0671f72..e36e838 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## [Unreleased]
 
 - 💄 — Show only not-OK domains by default in domains list, to reduce the load on browser
+- ♿️ — Fix not-OK domains display if javascript is disabled
 
 ## 0.5.0
 
diff --git a/argos/server/templates/domains.html b/argos/server/templates/domains.html
index 2e045ac..14ffdf8 100644
--- a/argos/server/templates/domains.html
+++ b/argos/server/templates/domains.html
@@ -12,7 +12,8 @@
                     </a>
                 </li>
             </ul>
-            <ul>
+            {# djlint:off H021 #}
+            <ul id="status-selector" style="display: none;">{# djlint:on #}
                 <li>
                     <label for="select-status">Show domains with status:</label>
                     <select id="select-status">
@@ -37,7 +38,7 @@
 
             <tbody id="domains-body">
                 {% for (domain, status) in domains %}
-                <tr data-status={{ status }} {% if status == "ok" -%}style="display: none;"{%- endif -%}>
+                <tr data-status="{{ status }}">
                     <td>
                         <a href="{{ url_for('get_domain_tasks_view', domain=domain) }}">
                             {{ domain }}
@@ -84,5 +85,13 @@
                 })
             }
         });
+        document.querySelectorAll('[data-status]').forEach((item) => {
+            if (item.dataset.status !== 'ok') {
+                item.style.display = null;
+            } else {
+                item.style.display = 'none';
+            }
+        })
+        document.getElementById('status-selector').style.display = null;
     </script>
 {% endblock content %}