remove inline event handlers, add addEventListener

backend/templates/admin.html

@@ -231,7 +231,8 @@
     <div class="section">
         <div class="section-header">
             <h2>👥 Scholengroep ICT medewerkers</h2>
-            <button class="btn btn-primary btn-sm" onclick="openModal('addSgIct')">+ Toevoegen</button>
+            <button class="btn btn-primary btn-sm" id="btnAddSgIct">
+                + Toevoegen</button>
         </div>
         <table>
             <thead><tr><th>Naam</th><th>E-mail</th><th>Laatste login</th><th></th></tr></thead>
@@ -243,7 +244,8 @@
     <div class="section">
         <div class="section-header">
             <h2>🏫 Scholen</h2>
-            <button class="btn btn-primary btn-sm" onclick="openModal('addSchool')">+ School toevoegen</button>
+            <button class="btn btn-primary btn-sm" id="btnAddSchool">
+                + School toevoegen</button>
         </div>
         <table>
             <thead><tr><th>Naam</th><th>Slug</th><th>E-maildomeinen</th><th>Gebruikers</th><th></th></tr></thead>
@@ -269,8 +271,8 @@
         </div>
         <div class="form-error" id="sg-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addSgIct()">Toevoegen</button>
+        <button class="btn btn-secondary" id="btnCancelSg">Annuleren</button>
+        <button class="btn btn-primary" id="addSgIct()">Toevoegen</button>
         </div>
     </div>
 </div>
@@ -295,8 +297,8 @@
         </div>
         <div class="form-error" id="school-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addSchool()">Toevoegen</button>
+        <button class="btn btn-secondary" id="btnCancelSchool">Annuleren</button>
+        <button class="btn btn-primary" id="addSchool()">Toevoegen</button>
         </div>
     </div>
 </div>
@@ -314,8 +316,8 @@
         </div>
         <div class="form-error" id="edit-school-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="saveSchool()">Opslaan</button>
+        <button class="btn btn-secondary" id="btnCancelEdit">Annuleren</button>
+        <button class="btn btn-primary" id="saveSchool()">Opslaan</button>
         </div>
     </div>
 </div>
@@ -324,6 +326,14 @@
 
 <script nonce="{{ csp_nonce() }}">
 document.addEventListener('DOMContentLoaded', async () => {
+    document.getElementById('btnCancelSg').addEventListener('click', () => { closeModal() });
+    document.getElementById('btnConfirmSg').addEventListener('click', () => { addSgIct() });
+    document.getElementById('btnCancelSchool').addEventListener('click', () => { closeModal() });
+    document.getElementById('btnConfirmSchool').addEventListener('click', () => { addSchool() });
+    document.getElementById('btnCancelEdit').addEventListener('click', () => { closeModal() });
+    document.getElementById('btnConfirmEdit').addEventListener('click', () => { saveSchool() });
+    document.getElementById('btnAddSgIct').addEventListener('click', () => { openModal('addSgIct') });
+    document.getElementById('btnAddSchool').addEventListener('click', () => { openModal('addSchool') });
     await loadStats();
     await loadSgIct();
     await loadSchools();

backend/templates/directeur.html

@@ -231,12 +231,12 @@
         <div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;">
             <div style="display:flex;flex-direction:column;gap:0.2rem;">
                 <label style="font-size:0.7rem;opacity:0.75;text-transform:uppercase;letter-spacing:0.05em;">Schooljaar</label>
-                <select id="jaarSelector" onchange="switchJaar()"
+                <select id="jaarSelector"
                     style="padding:0.35rem 0.6rem;border:1px solid rgba(255,255,255,0.3);border-radius:6px;background:rgba(255,255,255,0.15);color:white;font-size:0.85rem;cursor:pointer;">
                     <option value="">Laden...</option>
                 </select>
             </div>
-            <button class="btn btn-light" onclick="loadOverview()">↻ Vernieuwen</button>
+            <button id="btnVernieuw" class="btn btn-light">↻ Vernieuwen</button>
             <a href="/auth/logout" class="btn btn-light">Uitloggen</a>
         </div>
     </div>
@@ -255,16 +255,16 @@
     <div class="section">
         <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
             <h2>👩‍🏫 Leerkrachten</h2>
-            <button class="btn btn-primary" onclick="openAddTeacher()">+ Leerkracht toevoegen</button>
+            <button id="btnAddTeacher" class="btn btn-primary">+ Leerkracht toevoegen</button>
         </div>
         <div class="teacher-list" id="teacherList">Laden...</div>
     </div>
 
     <!-- Tab navigatie -->
     <div style="display:flex;gap:.25rem;margin-bottom:.5rem;">
-        <button class="tab-btn active" onclick="switchTab('doelen')" id="tab-doelen">📋 Doelen</button>
-        <button class="tab-btn" onclick="switchTab('klassen')" id="tab-klassen">🏫 Klasoverzicht</button>
-        <button class="tab-btn" onclick="switchTab('vergelijk')" id="tab-vergelijk">⚖️ Klasvergelijking</button>
+        <button class="tab-btn active" id="tab-doelen">📋 Doelen</button>
+        <button class="tab-btn" id="tab-klassen">🏫 Klasoverzicht</button>
+        <button class="tab-btn" id="tab-vergelijk">⚖️ Klasvergelijking</button>
     </div>
 
     <!-- Tab: Doelen (bestaande view) -->
@@ -272,25 +272,25 @@
         <div class="filters-bar">
             <div class="filter-group">
                 <label>Vak</label>
-                <select id="filterVak" onchange="applyFilters()">
+                <select id="filterVak">
                     <option value="all">Alle vakken</option>
                 </select>
             </div>
             <div class="filter-group">
                 <label>Leerkracht</label>
-                <select id="filterTeacher" onchange="applyFilters()">
+                <select id="filterTeacher">
                     <option value="all">Alle leerkrachten</option>
                 </select>
             </div>
             <div class="filter-group">
                 <label>Klas</label>
-                <select id="filterKlas" onchange="applyFilters()">
+                <select id="filterKlas">
                     <option value="all">Alle klassen</option>
                 </select>
             </div>
             <div class="filter-group">
                 <label>Status</label>
-                <select id="filterStatus" onchange="applyFilters()">
+                <select id="filterStatus">
                     <option value="all">Alle statussen</option>
                     <option value="consensus">✓ Iedereen groen</option>
                     <option value="verschil">⚠ Verschillen</option>
@@ -299,20 +299,20 @@
             </div>
             <div class="filter-group">
                 <label>Zoeken</label>
-                <input type="text" id="filterSearch" placeholder="Code of beschrijving..." oninput="applyFilters()">
+                <input type="text" id="filterSearch" placeholder="Code of beschrijving...">
             </div>
             <div class="filter-group" style="min-width:unset;">
                 <label>Leeftijd</label>
                 <div style="display:flex;flex-wrap:wrap;gap:.3rem;">
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="2,5-4"   onchange="applyFilters()"><span>2,5-4</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="4-5"   onchange="applyFilters()"><span>4-5</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="5-6"   onchange="applyFilters()"><span>5-6</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="6-7"   onchange="applyFilters()"><span>6-7</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="7-8"   onchange="applyFilters()"><span>7-8</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="8-9"   onchange="applyFilters()"><span>8-9</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="9-10"  onchange="applyFilters()"><span>9-10</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="10-11" onchange="applyFilters()"><span>10-11</span></label>
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="11-12" onchange="applyFilters()"><span>11-12</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="2,5-4"><span>2,5-4</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="4-5"><span>4-5</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="5-6"><span>5-6</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="6-7"><span>6-7</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="7-8"><span>7-8</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="8-9"><span>8-9</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="9-10"><span>9-10</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="10-11"><span>10-11</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="11-12"><span>11-12</span></label>
                 </div>
             </div>
         </div>
@@ -340,8 +340,8 @@
         <div class="form-group"><label>Tijdelijk wachtwoord</label><input type="password" id="newPassword"></div>
         <div id="addTeacherError" style="color:var(--danger);font-size:0.85rem;display:none;"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addTeacher()">Toevoegen</button>
+            <button id="btnCancelTeacher" class="btn btn-secondary">Annuleren</button>
+            <button id="btnConfirmTeacher" class="btn btn-primary">Toevoegen</button>
         </div>
     </div>
 </div>
@@ -356,6 +356,20 @@ let overviewData = null;
 let activeYearId = null;   // null = huidig actief jaar
 
 document.addEventListener('DOMContentLoaded', async () => {
+    document.getElementById('jaarSelector').addEventListener('change', switchJaar);
+    document.getElementById('btnVernieuw').addEventListener('click', loadOverview);
+    document.getElementById('btnAddTeacher').addEventListener('click', openAddTeacher);
+    document.getElementById('tab-doelen').addEventListener('click', () => switchTab('doelen'));
+    document.getElementById('tab-klassen').addEventListener('click', () => switchTab('klassen'));
+    document.getElementById('tab-vergelijk') && document.getElementById('tab-vergelijk').addEventListener('click', () => switchTab('vergelijk'));
+    document.getElementById('btnCancelTeacher').addEventListener('click', closeModal);
+    document.getElementById('btnConfirmTeacher').addEventListener('click', addTeacher);
+    document.getElementById('filterVak').addEventListener('change', applyFilters);
+    document.getElementById('filterTeacher').addEventListener('change', applyFilters);
+    document.getElementById('filterKlas') && document.getElementById('filterKlas').addEventListener('change', applyFilters);
+    document.getElementById('filterStatus').addEventListener('change', applyFilters);
+    document.getElementById('filterSearch').addEventListener('input', applyFilters);
+    document.querySelectorAll('.leeftijd-checkbox input').forEach(cb => cb.addEventListener('change', applyFilters));
     await loadUser();
     await loadJaren();
     await loadTeachers();

backend/templates/doelen_beheer.html

@@ -25,6 +25,8 @@
         .section-header h2{font-size:1.05rem;color:var(--gray-700);}
         .section-hint{color:var(--gray-500);font-size:.83rem;margin-bottom:1.25rem;line-height:1.6;}
         .btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;}
+        .btn-primary{background:var(--primary);color:white;} .btn-primary:hover{background:var(--primary-dark);}
+        .btn-secondary{background:var(--gray-200);color:var(--gray-700);} .btn-secondary:hover{background:var(--gray-300);}
         .btn-danger{background:var(--danger);color:white;} .btn-danger:hover{background:#dc2626;}
         .btn-sm{padding:.25rem .55rem;font-size:.78rem;}
         table{width:100%;border-collapse:collapse;font-size:.875rem;}
@@ -54,7 +56,8 @@
         .notification.success{background:var(--success);}
         .notification.error{background:var(--danger);}
         .notification.warning{background:var(--warning);}
-
+        .info-box{background:var(--gray-50);border:1px solid var(--gray-200);border-left:4px solid var(--primary);border-radius:6px;padding:.85rem 1rem;margin-bottom:1rem;font-size:.83rem;color:var(--gray-600);}
+        .info-box a{color:var(--primary);}
         @media (prefers-color-scheme: dark) {
             :root {
                 --gray-50:#1a1a2e;--gray-100:#16213e;--gray-200:#0f3460;
@@ -71,7 +74,6 @@
             .upload-ok{background:#064e3b !important;border-color:#065f46 !important;}
             .upload-err{background:#450a0a !important;border-color:#7f1d1d !important;}
             .versie-badge{background:#064e3b !important;color:#6ee7b7 !important;}
-            ::-webkit-scrollbar{width:8px;} ::-webkit-scrollbar-track{background:#0f172a;} ::-webkit-scrollbar-thumb{background:#334155;border-radius:4px;}
         }
     </style>
 </head>
@@ -101,12 +103,10 @@
 
         <!-- Format tabs -->
         <div style="display:flex;gap:.5rem;margin-bottom:1rem;">
-            <button class="btn btn-primary" id="tabXlsx" onclick="switchUploadTab('xlsx')"
-                style="font-size:.85rem;">
+            <button class="btn btn-primary" id="tabXlsx" style="font-size:.85rem;">
                 📊 Excel (.xlsx) — aanbevolen
             </button>
-            <button class="btn btn-secondary" id="tabJson" onclick="switchUploadTab('json')"
-                style="font-size:.85rem;">
+            <button class="btn btn-secondary" id="tabJson" style="font-size:.85rem;">
                 📄 JSON
             </button>
         </div>
@@ -119,29 +119,22 @@
                 gebeurt automatisch op de server — geen tussentijdse stap nodig.
                 Bij een update gewoon opnieuw uploaden.
             </p>
-            <div class="info-box" style="background:var(--gray-50);border:1px solid var(--gray-200);
-                border-left:4px solid var(--primary);border-radius:6px;padding:.85rem 1rem;
-                margin-bottom:1rem;font-size:.83rem;color:var(--gray-600);">
+            <div class="info-box">
                 💡 <strong>Nieuwe versie van GO!?</strong>
                 De GO! publiceert updates van de doelensets op
-                <a href="https://pro.g-o.be/themas/leerplannen/basisonderwijs/nieuw-leerplan-basisonderwijs/" target="_blank"
-                   rel="noopener noreferrer" style="color:var(--primary);">
+                <a href="https://pro.g-o.be/themas/leerplannen/basisonderwijs/nieuw-leerplan-basisonderwijs/"
+                   target="_blank" rel="noopener noreferrer">
                     pro.g-o.be → Leerplannen → BaO
                 </a>.
                 Er is geen automatische synchronisatie — download de nieuwe xlsx bestanden
                 manueel en upload ze hier.
             </div>
-            <div class="drop-zone" id="dropZoneXlsx"
-                 onclick="document.getElementById('fileInputXlsx').click()"
-                 ondragover="event.preventDefault();this.classList.add('over')"
-                 ondragleave="this.classList.remove('over')"
-                 ondrop="this.classList.remove('over');handleDropXlsx(event)">
+            <div class="drop-zone" id="dropZoneXlsx">
                 <div class="drop-icon">📊</div>
                 <strong>Klik of sleep Excel bestanden hier</strong>
                 <p>Meerdere bestanden tegelijk · Enkel .xlsx · Max. 10 MB per bestand</p>
             </div>
-            <input type="file" id="fileInputXlsx" accept=".xlsx" multiple style="display:none"
-                   onchange="uploadXlsx(this.files)">
+            <input type="file" id="fileInputXlsx" accept=".xlsx" multiple style="display:none">
         </div>
 
         <!-- JSON upload -->
@@ -151,17 +144,12 @@
                 de Excel bestanden niet beschikbaar hebt of als je handmatig aangepaste
                 JSON wil laden.
             </p>
-            <div class="drop-zone" id="dropZoneJson"
-                 onclick="document.getElementById('fileInputJson').click()"
-                 ondragover="event.preventDefault();this.classList.add('over')"
-                 ondragleave="this.classList.remove('over')"
-                 ondrop="this.classList.remove('over');handleDropJson(event)">
+            <div class="drop-zone" id="dropZoneJson">
                 <div class="drop-icon">📄</div>
                 <strong>Klik of sleep JSON bestanden hier</strong>
                 <p>Meerdere bestanden tegelijk · Enkel .json · Max. 10 MB per bestand</p>
             </div>
-            <input type="file" id="fileInputJson" accept=".json" multiple style="display:none"
-                   onchange="uploadJson(this.files)">
+            <input type="file" id="fileInputJson" accept=".json" multiple style="display:none">
         </div>
 
         <div id="uploadResults" style="margin-top:.85rem;display:none;"></div>
@@ -185,7 +173,7 @@
                 </tr>
             </thead>
             <tbody id="doelenBody">
-                <tr class="empty-row"><td colspan="5">Laden...</td></tr>
+                <tr class="empty-row"><td colspan="6">Laden...</td></tr>
             </tbody>
         </table>
     </div>
@@ -194,10 +182,32 @@
 <div class="notification" id="notification"></div>
 <script nonce="{{ csp_nonce() }}">
 document.addEventListener('DOMContentLoaded', () => {
+    // ── Tab knoppen ──────────────────────────────────────────────────────────
+    document.getElementById('tabXlsx').addEventListener('click', () => switchUploadTab('xlsx'));
+    document.getElementById('tabJson').addEventListener('click', () => switchUploadTab('json'));
+
+    // ── Drop zones ───────────────────────────────────────────────────────────
+    setupDropZone('dropZoneXlsx', 'fileInputXlsx', uploadXlsx);
+    setupDropZone('dropZoneJson', 'fileInputJson', uploadJson);
+
+    // ── File inputs ──────────────────────────────────────────────────────────
+    document.getElementById('fileInputXlsx').addEventListener('change', function() { uploadXlsx(this.files); });
+    document.getElementById('fileInputJson').addEventListener('change', function() { uploadJson(this.files); });
+
+    // ── Init ─────────────────────────────────────────────────────────────────
     loadDoelen();
     switchUploadTab('xlsx');
 });
 
+function setupDropZone(zoneId, inputId, uploadFn) {
+    const zone  = document.getElementById(zoneId);
+    const input = document.getElementById(inputId);
+    zone.addEventListener('click',      () => input.click());
+    zone.addEventListener('dragover',   (e) => { e.preventDefault(); zone.classList.add('over'); });
+    zone.addEventListener('dragleave',  ()  => zone.classList.remove('over'));
+    zone.addEventListener('drop',       (e) => { e.preventDefault(); zone.classList.remove('over'); uploadFn(e.dataTransfer.files); });
+}
+
 // ── Tab wisselen ──────────────────────────────────────────────────────────────
 function switchUploadTab(tab) {
     document.getElementById('panelXlsx').style.display = tab === 'xlsx' ? '' : 'none';
@@ -228,7 +238,6 @@ async function loadDoelen() {
         return;
     }
     tbody.innerHTML = vakken.map(v => {
-        const vn = v.naam.replace(/\\/g,'\\\\').replace(/'/g,"\\'");
         const datum = v.bronDatum
             ? `<span title="'Gewijzigd op' datum uit Excel metadata van GO!">${v.bronDatum}</span>`
             : `<span style="color:var(--gray-400)">onbekend</span>`;
@@ -238,10 +247,14 @@ async function loadDoelen() {
             <td>${(v.aantalDoelzinnen||0).toLocaleString('nl-BE')}</td>
             <td><span class="versie-badge">${v.versie || '?'}</span></td>
             <td style="font-size:.83rem;">${datum}</td>
-            <td><button class="btn btn-danger btn-sm"
-                onclick="deleteDoelen('${v.id}','${vn}')">Verwijderen</button></td>
+            <td><button class="btn btn-danger btn-sm" data-vak-id="${v.id}" data-vak-naam="${v.naam}">Verwijderen</button></td>
         </tr>`;
     }).join('');
+
+    // Event listeners op verwijder knoppen — na renderen
+    tbody.querySelectorAll('.btn-danger').forEach(btn => {
+        btn.addEventListener('click', () => deleteDoelen(btn.dataset.vakId, btn.dataset.vakNaam));
+    });
 }
 
 // ── Upload helpers ────────────────────────────────────────────────────────────
@@ -281,13 +294,8 @@ async function doUpload(endpoint, files) {
     }
 }
 
-// ── XLSX upload ───────────────────────────────────────────────────────────────
-function handleDropXlsx(e) { e.preventDefault(); uploadXlsx(e.dataTransfer.files); }
-function uploadXlsx(files)  { doUpload('/admin/doelen/upload-xlsx', files); }
-
-// ── JSON upload ───────────────────────────────────────────────────────────────
-function handleDropJson(e) { e.preventDefault(); uploadJson(e.dataTransfer.files); }
-function uploadJson(files)  { doUpload('/admin/doelen/upload', files); }
+function uploadXlsx(files) { doUpload('/admin/doelen/upload-xlsx', files); }
+function uploadJson(files)  { doUpload('/admin/doelen/upload',      files); }
 
 // ── Verwijderen ───────────────────────────────────────────────────────────────
 async function deleteDoelen(vakId, vakNaam) {

backend/templates/leerkracht.html

@@ -246,8 +246,7 @@
             <div id="klasSelector" style="display:none;align-items:center;gap:.4rem;">
                 <label style="font-size:.75rem;color:var(--gray-400);white-space:nowrap;">Mijn klassen:</label>
                 <div id="klasChips" style="display:flex;gap:.3rem;flex-wrap:wrap;"></div>
-                <button onclick="openKlasModal()"
-                    style="background:none;border:1px dashed var(--gray-500);border-radius:4px;color:var(--gray-400);font-size:.75rem;padding:.2rem .5rem;cursor:pointer;">
+                <button id="btnOpenKlas" style="background:none;border:1px dashed var(--gray-500);border-radius:6px;padding:.4rem .8rem;font-size:.8rem;color:var(--gray-600);cursor:pointer;">
                     ✎ Wijzigen
                 </button>
             </div>
@@ -257,7 +256,7 @@
 
     <div class="vak-selector">
         <label>Vak:</label>
-        <select id="vakSelector" onchange="switchVak()">
+        <select id="vakSelector">
             <option value="">-- Kies een vak --</option>
         </select>
         <span id="vakProgress" style="color: var(--gray-500); font-size: 0.85rem;"></span>
@@ -275,11 +274,11 @@
         <div class="filters-grid">
             <div class="filter-group">
                 <label>Zoeken</label>
-                <input type="text" id="searchInput" placeholder="Zoek in beschrijving of code..." oninput="applyFilters()">
+                <input type="text" id="searchInput" placeholder="Zoek in beschrijving of code...">
             </div>
             <div class="filter-group">
                 <label>Status</label>
-                <select id="statusFilter" onchange="applyFilters()">
+                <select id="statusFilter">
                     <option value="all">Alle statussen</option>
                     <option value="groen">✓ Groen</option>
                     <option value="oranje">~ Oranje</option>
@@ -289,7 +288,7 @@
             </div>
             <div class="filter-group">
                 <label>E/B/G</label>
-                <select id="ebgFilter" onchange="applyFilters()">
+                <select id="ebgFilter">
                     <option value="all">Alle types</option>
                     <option value="engageren">Engageren</option>
                     <option value="begrijpen">Begrijpen</option>
@@ -298,7 +297,7 @@
             </div>
             <div class="filter-group">
                 <label>Sectie</label>
-                <select id="sectieFilter" onchange="applyFilters()">
+                <select id="sectieFilter">
                     <option value="all">Alle secties</option>
                 </select>
             </div>
@@ -306,7 +305,7 @@
                 <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'] %}
-                    <label class="leeftijd-checkbox"><input type="checkbox" value="{{ age }}" onchange="applyFilters()"><span>{{ age }}</span></label>
+                    <label class="leeftijd-checkbox"><input type="checkbox" value="{{ age }}"><span>{{ age }}</span></label>
                     {% endfor %}
                 </div>
             </div>
@@ -343,8 +342,8 @@
         </p>
         <div id="klasCheckboxes" style="display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;max-height:250px;overflow-y:auto;"></div>
         <div style="display:flex;gap:.5rem;justify-content:flex-end;">
-            <button onclick="closeKlasModal()" class="btn btn-secondary">Annuleren</button>
-            <button onclick="saveKlassen()" class="btn btn-primary">Opslaan</button>
+            <button class="btn btn-secondary">Annuleren</button>
+            <button id="btnSlaKlas" class="btn btn-primary">Opslaan</button>
         </div>
     </div>
 </div>
@@ -363,6 +362,15 @@ let saveTimeout   = null;
 
 // ── Init ─────────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', async () => {
+    document.getElementById('btnOpenKlas').addEventListener('click', openKlasModal);
+    document.getElementById('btnSluitKlas').addEventListener('click', closeKlasModal);
+    document.getElementById('btnSlaKlas').addEventListener('click', saveKlassen);
+    document.getElementById('vakSelector').addEventListener('change', switchVak);
+    document.getElementById('searchInput').addEventListener('input', applyFilters);
+    document.getElementById('statusFilter').addEventListener('change', applyFilters);
+    document.getElementById('ebgFilter').addEventListener('change', applyFilters);
+    document.getElementById('sectieFilter').addEventListener('change', applyFilters);
+    document.querySelectorAll('.leeftijd-checkboxes input').forEach(cb => cb.addEventListener('change', applyFilters));
     await loadUser();
     await loadVakken();
 });

backend/templates/login.html

@@ -291,7 +291,7 @@
 
         <!-- Superadmin fallback — zichtbaar maar discreet -->
         <div class="superadmin-toggle">
-            <button onclick="toggleSuperadmin()">Platformbeheerder</button>
+            <button id="btnToggleSuperadmin">Platformbeheerder</button>
         </div>
 
         <div class="superadmin-form" id="superadminForm">
@@ -306,7 +306,7 @@
                 <label>Wachtwoord</label>
                 <input type="password" id="saPassword" autocomplete="current-password">
             </div>
-            <button class="btn-superadmin" onclick="superadminLogin()">Inloggen</button>
+            <button class="btn-superadmin" id="btnSuperadminLogin">Inloggen</button>
             <div id="sa-error"></div>
         </div>
     </div>
@@ -345,6 +345,11 @@
         document.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && saVisible) superadminLogin();
         });
-    </script>
+    
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('btnToggleSuperadmin').addEventListener('click', () => { toggleSuperadmin() });
+    document.getElementById('btnSuperadminLogin').addEventListener('click', () => { superadminLogin() });
+});
+</script>
 </body>
 </html>

backend/templates/scholengroep_ict.html

@@ -133,7 +133,7 @@
     <div class="section">
         <div class="section-header">
             <h2>👥 Scholengroep ICT medewerkers</h2>
-            <button class="btn btn-primary btn-sm" onclick="openModal('addSgIct')">+ Toevoegen</button>
+            <button class="btn btn-primary btn-sm">+ Toevoegen</button>
         </div>
         <p class="section-hint">
             Scholengroep ICT medewerkers kunnen alle scholen en gebruikers beheren,
@@ -151,7 +151,7 @@
     <div class="section">
         <div class="section-header">
             <h2>📅 Schooljaren</h2>
-            <button class="btn btn-primary btn-sm" onclick="openModal('addJaar')">+ Nieuw schooljaar</button>
+            <button class="btn btn-primary btn-sm">+ Nieuw schooljaar</button>
         </div>
         <p class="section-hint">
             Het actieve schooljaar geldt voor alle scholen tegelijk.
@@ -168,7 +168,8 @@
     <div class="section">
         <div class="section-header">
             <h2>🏫 Scholen</h2>
-            <button class="btn btn-primary btn-sm" onclick="openModal('addSchool')">+ School toevoegen</button>
+            <button id="btnAddSchool" class="btn btn-primary btn-sm">+ School
+toevoegen</button>
         </div>
         <table>
             <thead>
@@ -187,7 +188,7 @@
     <div class="section">
         <div class="section-header">
             <h2>👥 Gebruikers per school</h2>
-            <button class="btn btn-primary btn-sm" onclick="openModal('addUser')">+ Gebruiker toevoegen</button>
+            <button id="btnAddUser" class="btn btn-primary btn-sm">+ Gebruiker toevoegen</button>
         </div>
         <div class="schools-grid" id="schoolsGrid">Laden...</div>
     </div>
@@ -197,7 +198,7 @@
         <div class="section-header">
             <h2>📋 Auditlog</h2>
             <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
-                <select id="auditCategory" onchange="loadAuditLog()"
+                <select id="auditCategory"
                     style="padding:.35rem .5rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.85rem;">
                     <option value="">Alle categorieën</option>
                     <option value="auth">Aanmeldingen</option>
@@ -208,12 +209,11 @@
                     <option value="system">Systeem</option>
                     <option value="doelen">Leerdoelen</option>
                 </select>
-                <select id="auditSchoolFilter" onchange="loadAuditLog()"
+                <select id="auditSchoolFilter"
                     style="padding:.35rem .5rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.85rem;">
                     <option value="">Alle scholen</option>
                 </select>
                 <input id="auditSearch" type="text" placeholder="Zoeken..."
-                    oninput="loadAuditLog()"
                     style="padding:.35rem .5rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.85rem;width:150px;">
             </div>
         </div>
@@ -249,8 +249,8 @@
         <div class="form-group"><label>E-maildomeinen</label><input type="text" id="schoolDomains" placeholder="dekrekel.be, sintjan.gent.be"><div class="form-hint">Komma-gescheiden. Gebruikers met dit domein worden automatisch gekoppeld.</div></div>
         <div class="form-error" id="school-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addSchool()">Toevoegen</button>
+            <button class="btn btn-secondary" id="btnCancelSchool">Annuleren</button>
+        <button class="btn btn-primary" id="btnSaveSchool">Toevoegen</button>
         </div>
     </div>
 </div>
@@ -263,8 +263,8 @@
         <div class="form-group"><label>E-maildomeinen</label><input type="text" id="editSchoolDomains"><div class="form-hint">Komma-gescheiden.</div></div>
         <div class="form-error" id="edit-school-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="saveSchool()">Opslaan</button>
+            <button class="btn btn-secondary" id="btnCancelEditSch">Annuleren</button>
+        <button class="btn btn-primary" id="btnSaveEditSch">Opslaan</button>
         </div>
     </div>
 </div>
@@ -279,8 +279,8 @@
         <div class="form-group"><label>E-mailadres</label><input type="email" id="sgEmail"></div>
         <div class="form-error" id="sg-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addSgIct()">Toevoegen</button>
+            <button class="btn btn-secondary" id="btnCancelSgIct">Annuleren</button>
+        <button class="btn btn-primary" id="btnSaveSgIct">Toevoegen</button>
         </div>
     </div>
 </div>
@@ -300,8 +300,8 @@
         </div>
         <div class="form-error" id="jaar-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addJaar()">Aanmaken</button>
+            <button class="btn btn-secondary" id="btnCancelJaar">Annuleren</button>
+        <button class="btn btn-primary" id="btnSaveJaar">Aanmaken</button>
         </div>
     </div>
 </div>
@@ -324,8 +324,8 @@
         </div>
         <div class="form-error" id="addUser-error"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addUser()">Toevoegen</button>
+            <button class="btn btn-secondary" id="btnCancelUser">Annuleren</button>
+        <button class="btn btn-primary" id="btnSaveUser">Toevoegen</button>
         </div>
     </div>
 </div>
@@ -343,6 +343,21 @@ const SCHOOL_ROLLEN = [
 ];
 
 document.addEventListener('DOMContentLoaded', async () => {
+    document.getElementById('btnAddSgIct') && document.getElementById('btnAddSgIct').addEventListener('click', () => openModal('addSgIct'));
+    document.getElementById('btnAddJaar') && document.getElementById('btnAddJaar').addEventListener('click', () => openModal('addJaar'));
+    document.getElementById('btnAddSchool') && document.getElementById('btnAddSchool').addEventListener('click', () => openModal('addSchool'));
+    document.getElementById('btnAddUser') && document.getElementById('btnAddUser').addEventListener('click', () => openModal('addUser'));
+    document.getElementById('auditCategory').addEventListener('change', loadAuditLog);
+    document.getElementById('auditSchoolFilter') && document.getElementById('auditSchoolFilter').addEventListener('change', loadAuditLog);
+    document.getElementById('auditSearch').addEventListener('input', loadAuditLog);
+    document.getElementById('btnCancelSchool') && document.getElementById('btnCancelSchool').addEventListener('click', closeModal);
+    document.getElementById('btnSaveSchool') && document.getElementById('btnSaveSchool').addEventListener('click', addSchool);
+    document.getElementById('btnCancelSgIct') && document.getElementById('btnCancelSgIct').addEventListener('click', closeModal);
+    document.getElementById('btnSaveSgIct') && document.getElementById('btnSaveSgIct').addEventListener('click', addSgIct);
+    document.getElementById('btnCancelJaar') && document.getElementById('btnCancelJaar').addEventListener('click', closeModal);
+    document.getElementById('btnSaveJaar') && document.getElementById('btnSaveJaar').addEventListener('click', addJaar);
+    document.getElementById('btnCancelUser') && document.getElementById('btnCancelUser').addEventListener('click', closeModal);
+    document.getElementById('btnSaveUser') && document.getElementById('btnSaveUser').addEventListener('click', addUser);
     const tasks = [loadStats(), loadSchoolsTable(), loadSchoolsGrid()];
     if (IS_SUPERADMIN) tasks.push(loadSgIct());
     await Promise.all(tasks);

backend/templates/school_ict.html

@@ -222,7 +222,7 @@
     <div class="section">
         <div class="section-header">
             <h2>👥 Gebruikers</h2>
-            <button class="btn btn-primary btn-sm" onclick="openModal()">+ Gebruiker toevoegen</button>
+            <button id="btnAddUser" class="btn btn-primary btn-sm">+ Gebruiker toevoegen</button>
         </div>
         <table>
             <thead>
@@ -243,7 +243,7 @@
     <div class="section">
         <div class="section-header">
             <h2>🏫 Klassen</h2>
-            <button class="btn btn-primary btn-sm" onclick="openAddKlas()">+ Klas toevoegen</button>
+            <button id="btnAddKlas" class="btn btn-primary btn-sm">+ Klas toevoegen</button>
         </div>
         <div id="klassenList">Laden...</div>
     </div>
@@ -253,7 +253,7 @@
         <div class="section-header">
             <h2>📋 Auditlog</h2>
             <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
-                <select id="auditCategory" onchange="loadAuditLog()"
+                <select id="auditCategory"
                     style="padding:.35rem .5rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.85rem;">
                     <option value="">Alle categorieën</option>
                     <option value="auth">Aanmeldingen</option>
@@ -262,7 +262,6 @@
                     <option value="assessment">Beoordelingen</option>
                 </select>
                 <input id="auditSearch" type="text" placeholder="Zoeken..."
-                    oninput="loadAuditLog()"
                     style="padding:.35rem .5rem;border:1px solid var(--gray-300);border-radius:6px;font-size:.85rem;width:150px;">
             </div>
         </div>
@@ -311,8 +310,8 @@
         </div>
         <div class="form-error" id="addError"></div>
         <div class="modal-buttons">
-            <button class="btn btn-secondary" onclick="closeModal()">Annuleren</button>
-            <button class="btn btn-primary" onclick="addUser()">Toevoegen</button>
+            <button class="btn btn-secondary" id="btnCancelUser">Annuleren</button>
+            <button id="btnConfirmUser" class="btn btn-primary">Toevoegen</button>
         </div>
     </div>
 </div>
@@ -329,6 +328,12 @@ const ROLLEN = [
 ];
 
 document.addEventListener('DOMContentLoaded', async () => {
+    document.getElementById('btnAddUser') && document.getElementById('btnAddUser').addEventListener('click', openModal);
+    document.getElementById('btnAddKlas') && document.getElementById('btnAddKlas').addEventListener('click', openAddKlas);
+    document.getElementById('btnCancelUser') && document.getElementById('btnCancelUser').addEventListener('click', closeModal);
+    document.getElementById('btnConfirmUser') && document.getElementById('btnConfirmUser').addEventListener('click', addUser);
+    document.getElementById('auditCategory') && document.getElementById('auditCategory').addEventListener('change', loadAuditLog);
+    document.getElementById('auditSearch') && document.getElementById('auditSearch').addEventListener('input', loadAuditLog);
     const me = await fetch('/api/me').then(r => r.json());
     mySchoolId = me.user?.school_id;
     document.getElementById('schoolName').textContent = me.user?.school_name || '';

backend/templates/superadmin_login.html

@@ -238,7 +238,7 @@
             <label>Wachtwoord</label>
             <input type="password" id="password" autocomplete="current-password">
         </div>
-        <button class="btn" onclick="doLogin()">Inloggen</button>
+        <button class="btn" id="btnLogin">Inloggen</button>
 
         <a href="/auth/login" class="back-link">← Terug naar normale loginpagina</a>
     </div>
@@ -269,6 +269,10 @@
                 errorEl.style.display = 'block';
             }
         }
-    </script>
+    
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('btnLogin').addEventListener('click', () => { doLogin() });
+});
+</script>
 </body>
 </html>