💄 — 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
- ✨ — The HTTP method used by checks is now configurable
- ♻️ — Refactor some agent code
- 💄 — Filter form on domains list (#66)
## 0.5.0

View file

@ -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 %}