sgr5/leerdoelen_tracker
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Activity

fix: update age range in filters for consistency across templates
All checks were successful
Build & Push / Build & Push image (push) Successful in 39s
Details

Browse Source
This commit is contained in:
Sam Geyskens
2026-03-06 12:11:20 +01:00
parent 04fe593d0c
commit 26ad6cd650
2 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
backend/templates/directeur.html
View File

@@ -65,16 +65,25 @@
.lft-cb:has(input:checked) { background: var(--primary); border-color: var(--primary); color: white; }
.lft-cb input { display: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .83rem; }
thead { background: var(--gray-50); position: sticky; top: 0; z-index: 5; }
th { padding: .65rem .6rem; text-align: center; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
th.goal-col { text-align: left; min-width: 240px; }
th.klas-col { min-width: 75px; font-size: .75rem; }
td { padding: .45rem .6rem; border-bottom: 1px solid var(--gray-100); text-align: center; }
td.goal-cell { text-align: left; }
tr:hover { background: var(--gray-50); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .83rem; }
thead { position: sticky; top: 0; z-index: 10; }
th { padding: .6rem .5rem; text-align: center; font-weight: 600; color: var(--gray-600);
border-bottom: 2px solid var(--gray-200); white-space: nowrap;
background: var(--gray-50); }
th.goal-col { text-align: left; min-width: 220px; max-width: 280px;
position: sticky; left: 0; z-index: 11;
background: var(--gray-50); box-shadow: 2px 0 4px rgba(0,0,0,.06); }
th.klas-col { min-width: 64px; max-width: 90px; font-size: .72rem;
overflow: hidden; text-overflow: ellipsis; }
th.sum-col { min-width: 56px; }
td { padding: .4rem .5rem; border-bottom: 1px solid var(--gray-100); text-align: center; }
td.goal-cell { text-align: left; position: sticky; left: 0; z-index: 1;
background: white; box-shadow: 2px 0 4px rgba(0,0,0,.06); }
tr:hover td { background: var(--gray-50); }
tr:hover td.goal-cell { background: var(--gray-50); }
.goal-nr { font-weight: 600; font-size: .82rem; }
.goal-desc { font-size: .77rem; color: var(--gray-500); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-desc { font-size: .77rem; color: var(--gray-500); max-width: 220px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lft-badges { display: flex; flex-wrap: wrap; gap: .2rem; }
.lft-badge { font-size: .68rem; padding: .1rem .3rem; background: var(--gray-200); border-radius: 3px; color: var(--gray-600); }
.si { width: 26px; height: 26px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; }
@@ -119,6 +128,9 @@
th,thead { background:#1e293b!important;color:#94a3b8!important;border-color:#334155!important; }
td { border-color:#1e293b!important; }
tr:hover { background:#263548!important; }
td.goal-cell { background:#0f172a!important; }
tr:hover td.goal-cell { background:#263548!important; }
th.goal-col { background:#1e293b!important;box-shadow:2px 0 4px rgba(0,0,0,.3)!important; }
select,input { background:#0f172a!important;color:#e2e8f0!important;border-color:#334155!important; }
.vak-card,.klas-chip { background:#162032!important;border-color:#334155!important; }
.lft-badge { background:#334155!important;color:#94a3b8!important; }
@@ -320,7 +332,7 @@ let currentUser = null;
// ── Init ───────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', async () => {
// Leeftijd checkboxes dynamisch aanmaken (vermijdt Jinja in inline handlers)
const ages = ['2,5-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'];
const ages = ['3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'];
const cbContainer = document.getElementById('leeftijdCbs');
ages.forEach(age => {
const lbl = document.createElement('label');
@@ -642,9 +654,12 @@ function applyFilters() {
function renderTable(rows, klassen) {
const thead = document.getElementById('tblHead');
const tbody = document.getElementById('tblBody');
let hdr = '<tr><th class="goal-col">Doel</th><th>Leeftijden</th>';
klassen.forEach(k => hdr += `<th class="klas-col">${k.name}</th>`);
hdr += '<th>Samenvatting</th></tr>';
let hdr = '<tr><th class="goal-col">Doel</th><th style="min-width:72px;">Leeftijden</th>';
klassen.forEach(k => {
const label = k.name.length > 6 ? k.name.substring(0,6) + '…' : k.name;
hdr += `<th class="klas-col" title="${k.name}">${label}</th>`;
});
hdr += '<th class="sum-col">∑</th></tr>';
thead.innerHTML = hdr;
if (!rows.length) {
tbody.innerHTML = `<tr><td colspan="${klassen.length+3}" class="empty">Geen doelen gevonden met huidige filters</td></tr>`;
@@ -703,7 +718,10 @@ function renderVergelijk() {
const goals = allGoals[vakId] || [];
if (!goals.length) { el.innerHTML = '<div class="empty">Vak nog niet geladen of geen doelen</div>'; return; }
let html = `<div class="table-wrap"><table>
<thead><tr><th class="goal-col">Doel</th><th class="klas-col">${klasA?.name||'A'}</th><th class="klas-col">${klasB?.name||'B'}</th></tr></thead><tbody>`;
<thead><tr><th class="goal-col">Doel</th>
<th class="klas-col" title="${klasA?.name||'A'}">${(klasA?.name||'A').substring(0,8)}</th>
<th class="klas-col" title="${klasB?.name||'B'}">${(klasB?.name||'B').substring(0,8)}</th>
</tr></thead><tbody>`;
goals.forEach(goal => {
const sA = goalsA[goal.id]||'', sB = goalsB[goal.id]||'';
const symA = sA==='groen'?'✓':sA==='oranje'?'~':sA==='roze'?'!':'○';

2
backend/templates/leerkracht.html
View File

@@ -267,7 +267,7 @@
<div class="filter-group" style="grid-column:span 2;">
<label>Leeftijd</label>
<div class="leeftijd-checkboxes">
{% for age in ['2,5-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'] %}
{% for age in ['3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12'] %}
<label class="leeftijd-checkbox"><input type="checkbox" value="{{ age }}"><span>{{ age }}</span></label>
{% endfor %}
</div>