💄 — Filter form on domains list (fix #66)

This commit is contained in:
Luc Didry 2024-11-27 09:55:24 +01:00
parent 4117f9f628
commit 91a9b27106
No known key found for this signature in database
GPG key ID: EA868E12D0257E3C
2 changed files with 38 additions and 11 deletions

View file

@ -7,6 +7,7 @@
- ✨ — Retry check right after a httpx.ReadError - ✨ — Retry check right after a httpx.ReadError
- ✨ — The HTTP method used by checks is now configurable - ✨ — The HTTP method used by checks is now configurable
- ♻️ — Refactor some agent code - ♻️ — Refactor some agent code
- 💄 — Filter form on domains list (#66)
## 0.5.0 ## 0.5.0

View file

@ -13,7 +13,15 @@
</li> </li>
</ul> </ul>
{# djlint:off H021 #} {# 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> <li>
<label for="select-status">Show domains with status:</label> <label for="select-status">Show domains with status:</label>
<select id="select-status"> <select id="select-status">
@ -38,7 +46,8 @@
<tbody id="domains-body"> <tbody id="domains-body">
{% for (domain, status) in domains %} {% for (domain, status) in domains %}
<tr data-status="{{ status }}"> <tr data-status="{{ status }}"
data-domain="{{ domain }}">
<td> <td>
<a href="{{ url_for('get_domain_tasks_view', domain=domain) }}"> <a href="{{ url_for('get_domain_tasks_view', domain=domain) }}">
{{ domain }} {{ domain }}
@ -62,29 +71,46 @@
</table> </table>
</div> </div>
<script> <script>
document.getElementById('select-status').addEventListener('change', (e) => { function filterDomains(e) {
if (e.currentTarget.value === 'all') { 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) => { 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) => { document.querySelectorAll('[data-status]').forEach((item) => {
if (item.dataset.status !== 'ok') { 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 { } else {
item.style.display = 'none'; item.style.display = 'none';
} }
}) })
} else { } else {
document.querySelectorAll('[data-status]').forEach((item) => { document.querySelectorAll('[data-status]').forEach((item) => {
if (item.dataset.status === e.currentTarget.value) { if (item.dataset.status === status.value) {
item.style.display = null; if (filter && item.dataset.domain.indexOf(filter) == -1) {
item.style.display = 'none';
} else {
item.style.display = null;
}
} else { } else {
item.style.display = 'none'; item.style.display = 'none';
} }
}) })
} }
}); }
document.getElementById('select-status').addEventListener('change', filterDomains);
document.getElementById('domain-search').addEventListener('input', filterDomains);
document.querySelectorAll('[data-status]').forEach((item) => { document.querySelectorAll('[data-status]').forEach((item) => {
if (item.dataset.status !== 'ok') { if (item.dataset.status !== 'ok') {
item.style.display = null; item.style.display = null;
@ -92,6 +118,6 @@
item.style.display = 'none'; item.style.display = 'none';
} }
}) })
document.getElementById('status-selector').style.display = null; document.getElementById('js-only').style.display = null;
</script> </script>
{% endblock content %} {% endblock content %}