.
This commit is contained in:
@@ -45,10 +45,16 @@
|
||||
<p class="help">Configure typed rota constraint options. Click Edit to open the form showing typed fields and descriptions.</p>
|
||||
<p><button class="button is-link" hx-get="{% url 'rota:rota_options' rota.id %}" hx-target="#modal" hx-swap="innerHTML">Edit constraint options</button></p>
|
||||
<hr />
|
||||
<h3 class="subtitle is-6">Configured constraint values</h3>
|
||||
<div style="max-height:200px; overflow:auto; margin-bottom:0.75em;">
|
||||
{% if configured_constraints %}
|
||||
<table class="table is-fullwidth is-striped is-narrow">
|
||||
<details class="constraints-details" style="margin-top:0.5rem;">
|
||||
<summary class="subtitle is-6" style="cursor:pointer; outline:none;">Configured constraint values{% if configured_constraints %} ({{ configured_constraints|length }}){% endif %}</summary>
|
||||
<div style="margin-top:0.5rem;">
|
||||
<div style="display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem;">
|
||||
<input id="constraint-filter-{{ rota.id }}" class="input is-small" type="search" placeholder="Filter constraints (key or value)..." aria-label="Filter constraints" />
|
||||
<button id="constraint-clear-{{ rota.id }}" class="button is-small is-light" type="button">Clear</button>
|
||||
</div>
|
||||
<div class="constraints-scroll" style="max-height:600px; overflow:auto; margin-bottom:0.75em;">
|
||||
{% if configured_constraints %}
|
||||
<table class="table is-fullwidth is-striped is-narrow" id="constraint-table-{{ rota.id }}">
|
||||
<thead><tr><th>Key</th><th>Value</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{% for key, info in configured_constraints.items %}
|
||||
@@ -71,7 +77,31 @@
|
||||
{% else %}
|
||||
<p class="help">No typed constraint options have been configured for this rota.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function(){
|
||||
const input = document.getElementById('constraint-filter-{{ rota.id }}');
|
||||
const clearBtn = document.getElementById('constraint-clear-{{ rota.id }}');
|
||||
const table = document.getElementById('constraint-table-{{ rota.id }}');
|
||||
if(!input || !table) return;
|
||||
const rows = Array.from(table.tBodies[0].rows);
|
||||
function normalize(s){ return (s||'').toString().toLowerCase(); }
|
||||
function applyFilter(){
|
||||
const q = normalize(input.value.trim());
|
||||
if(!q){ rows.forEach(r => r.style.display=''); return; }
|
||||
rows.forEach(r => {
|
||||
const key = normalize(r.cells[0].innerText);
|
||||
const val = normalize(r.cells[1].innerText);
|
||||
r.style.display = (key.indexOf(q) !== -1 || val.indexOf(q) !== -1) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
let debounce;
|
||||
input.addEventListener('input', ()=>{ clearTimeout(debounce); debounce = setTimeout(applyFilter, 150); });
|
||||
clearBtn.addEventListener('click', ()=>{ input.value=''; applyFilter(); input.focus(); });
|
||||
})();
|
||||
</script>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user