Sam
5d0e4f9c91
All checks were successful
Build & Push / Build & Push image (push) Successful in 1m1s
670 lines
33 KiB
HTML
670 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Leerdoelen Tracker</title>
|
|
<style>
|
|
/* Zelfde CSS als origineel - ingekort voor leesbaarheid */
|
|
:root {
|
|
--primary: #4f46e5; --primary-dark: #4338ca;
|
|
--success: #10b981; --warning: #f59e0b; --danger: #ef4444;
|
|
--gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
|
|
--gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
|
|
--gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
|
|
--kleur-engageren: #c084fc; --kleur-begrijpen: #fbbf24; --kleur-gebruiken: #34d399;
|
|
--status-groen: #10b981; --status-groen-bg: #d1fae5;
|
|
--status-oranje: #f59e0b; --status-oranje-bg: #fef3c7;
|
|
--status-roze: #ec4899; --status-roze-bg: #fce7f3;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--gray-100); color: var(--gray-800); }
|
|
.container { max-width: 1400px; margin: 0 auto; padding: 1rem; }
|
|
.header { background: white; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
|
|
.header h1 { font-size: 1.4rem; color: var(--gray-900); display: flex; align-items: center; gap: 0.5rem; }
|
|
.user-info { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--gray-600); }
|
|
.user-info strong { color: var(--gray-800); }
|
|
.btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; }
|
|
.btn-secondary { background: var(--gray-100); color: var(--gray-700); }
|
|
.btn-secondary:hover { background: var(--gray-200); }
|
|
.btn-danger { background: var(--danger); color: white; }
|
|
.vak-selector { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
|
|
.vak-selector label { font-weight: 600; color: var(--gray-700); font-size: 0.9rem; }
|
|
.vak-selector select { padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.95rem; min-width: 250px; cursor: pointer; }
|
|
.vak-selector select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
|
|
.stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
|
|
.stat-card { background: white; border-radius: 8px; padding: 0.75rem 1rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
.stat-card.highlight { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; }
|
|
.stat-value { font-size: 1.5rem; font-weight: 700; }
|
|
.stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
|
|
.filters-container { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
|
|
.filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.filter-group label { font-size: 0.75rem; font-weight: 500; color: var(--gray-500); }
|
|
.filter-group input, .filter-group select { padding: 0.5rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.9rem; }
|
|
.filter-group input:focus, .filter-group select:focus { outline: none; border-color: var(--primary); }
|
|
.leeftijd-checkboxes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
|
|
.leeftijd-checkbox { display: flex; align-items: center; gap: 0.25rem; padding: 0.3rem 0.5rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.15s; user-select: none; }
|
|
.leeftijd-checkbox:has(input:checked) { background: var(--primary); border-color: var(--primary); color: white; }
|
|
.leeftijd-checkbox input { display: none; }
|
|
.table-container { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; }
|
|
.table-scroll { overflow-x: auto; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
|
|
thead { background: var(--gray-50); }
|
|
th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--gray-600); border-bottom: 2px solid var(--gray-200); white-space: nowrap; }
|
|
td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
|
|
tr:hover { background: var(--gray-50); }
|
|
tr.status-groen { background: var(--status-groen-bg); }
|
|
tr.status-oranje { background: var(--status-oranje-bg); }
|
|
tr.status-roze { background: var(--status-roze-bg); }
|
|
.status-selector { width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--gray-300); background: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: bold; transition: all 0.15s; }
|
|
.status-selector:hover { transform: scale(1.1); }
|
|
.status-selector.status-none { color: var(--gray-400); }
|
|
.status-selector.status-none::after { content: '○'; }
|
|
.status-selector.status-groen { background: var(--status-groen); border-color: var(--status-groen); color: white; }
|
|
.status-selector.status-groen::after { content: '✓'; }
|
|
.status-selector.status-oranje { background: var(--status-oranje); border-color: var(--status-oranje); color: white; }
|
|
.status-selector.status-oranje::after { content: '~'; }
|
|
.status-selector.status-roze { background: var(--status-roze); border-color: var(--status-roze); color: white; }
|
|
.status-selector.status-roze::after { content: '!'; }
|
|
.ebg-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
|
|
.ebg-engageren { background: var(--kleur-engageren); color: white; }
|
|
.ebg-begrijpen { background: var(--kleur-begrijpen); color: var(--gray-800); }
|
|
.ebg-gebruiken { background: var(--kleur-gebruiken); color: white; }
|
|
.leeftijden { display: flex; flex-wrap: wrap; gap: 0.25rem; }
|
|
.leeftijd-badge { font-size: 0.7rem; padding: 0.15rem 0.35rem; background: var(--gray-200); border-radius: 3px; color: var(--gray-600); }
|
|
.beschrijving-cell { max-width: 400px; }
|
|
.mia-container { background: var(--gray-50); border-radius: 6px; padding: 0.5rem; font-size: 0.8rem; margin-top: 0.5rem; }
|
|
.mia-items { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
|
|
.mia-item { background: white; padding: 0.2rem 0.4rem; border-radius: 3px; border: 1px solid var(--gray-200); }
|
|
.empty-state { text-align: center; padding: 3rem; color: var(--gray-500); }
|
|
.loading { text-align: center; padding: 3rem; color: var(--gray-500); }
|
|
.spinner { width: 40px; height: 40px; border: 3px solid var(--gray-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.notification { position: fixed; bottom: 1rem; right: 1rem; padding: 1rem 1.5rem; border-radius: 8px; color: white; font-weight: 500; transform: translateY(100px); opacity: 0; transition: all 0.3s; z-index: 1001; }
|
|
.notification.show { transform: translateY(0); opacity: 1; }
|
|
.notification.success { background: var(--success); }
|
|
.notification.error { background: var(--danger); }
|
|
.saving-indicator { font-size: 0.8rem; color: var(--gray-400); margin-left: auto; }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--gray-50: #1a1a2e;
|
|
--gray-100: #16213e;
|
|
--gray-200: #0f3460;
|
|
--gray-300: #1a1a3e;
|
|
--gray-400: #6b7280;
|
|
--gray-500: #9ca3af;
|
|
--gray-600: #d1d5db;
|
|
--gray-700: #e5e7eb;
|
|
--gray-800: #f3f4f6;
|
|
--gray-900: #f9fafb;
|
|
}
|
|
|
|
body { background: #0f172a; color: #e2e8f0; }
|
|
|
|
/* Kaarten en secties */
|
|
.card, .section, .stat-card, .school-card,
|
|
.table-container, .filters-container, .legend-container,
|
|
.stats-bar .stat-card, .stats-overview, .vak-stats,
|
|
.import-section, .detail-section, .filters-bar,
|
|
.header:not([class*="gradient"]) {
|
|
background: #1e293b !important;
|
|
border-color: #334155 !important;
|
|
}
|
|
|
|
/* Header kaart in leerkracht.html */
|
|
.header { background: #1e293b !important; }
|
|
|
|
/* Tabellen */
|
|
thead, th { background: #1e293b !important; color: #94a3b8 !important; border-color: #334155 !important; }
|
|
td { border-color: #1e293b !important; color: #e2e8f0; }
|
|
tr:hover td, tr:hover { background: #263548 !important; }
|
|
tr.status-groen { background: #064e3b !important; }
|
|
tr.status-groen:hover { background: #065f46 !important; }
|
|
tr.status-oranje { background: #451a03 !important; }
|
|
tr.status-oranje:hover { background: #78350f !important; }
|
|
tr.status-roze { background: #500724 !important; }
|
|
tr.status-roze:hover { background: #701a35 !important; }
|
|
|
|
/* Inputs en selects */
|
|
input, select, textarea {
|
|
background: #0f172a !important;
|
|
color: #e2e8f0 !important;
|
|
border-color: #334155 !important;
|
|
}
|
|
input::placeholder { color: #64748b !important; }
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: #6366f1 !important;
|
|
box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important;
|
|
}
|
|
|
|
/* Role select inline */
|
|
.role-select {
|
|
background: #1e293b !important;
|
|
color: #e2e8f0 !important;
|
|
border-color: #334155 !important;
|
|
}
|
|
|
|
/* Modals */
|
|
.modal { background: #1e293b !important; color: #e2e8f0; }
|
|
.modal h2 { color: #f1f5f9; }
|
|
|
|
/* Knoppen */
|
|
.btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
|
|
.btn-secondary:hover { background: #475569 !important; }
|
|
|
|
/* Status selector knoppen (leerkracht tabel) */
|
|
.status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
|
|
|
|
/* Stat cards */
|
|
.stat-card { background: #1e293b !important; }
|
|
|
|
/* School card header */
|
|
.school-card-header { background: #162032 !important; border-color: #334155 !important; }
|
|
.school-card { border-color: #334155 !important; }
|
|
|
|
/* Drop zone */
|
|
.drop-zone { background: #162032 !important; border-color: #334155 !important; }
|
|
.drop-zone:hover, .drop-zone.over { background: #1a2744 !important; border-color: #6366f1 !important; }
|
|
|
|
/* Domain chips */
|
|
.domain-chip { background: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; }
|
|
|
|
/* Badges */
|
|
.leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
|
|
.ebg-begrijpen { color: #1f2937 !important; }
|
|
|
|
/* MIA container */
|
|
.mia-container { background: #162032 !important; }
|
|
.mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
|
|
.mia-item.niet-aanklikbaar { background: #162032 !important; color: #64748b !important; }
|
|
|
|
/* Not configured box */
|
|
.not-configured { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
|
|
.not-configured code { background: #0f172a !important; color: #a5b4fc !important; }
|
|
|
|
/* Profile section */
|
|
.profile-section { background: #162032 !important; }
|
|
|
|
/* Leeftijd checkboxes */
|
|
.leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
|
|
.leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
|
|
|
|
/* Vak indicator */
|
|
.vak-indicator { /* gradient blijft, ziet er goed uit */ }
|
|
|
|
/* Progress bars achtergrond */
|
|
.progress-bar { background: #334155 !important; }
|
|
|
|
/* Vak card */
|
|
.vak-card { background: #162032 !important; }
|
|
|
|
/* Upload results */
|
|
.upload-ok { background: #064e3b !important; border-color: #065f46 !important; }
|
|
.upload-err { background: #450a0a !important; border-color: #7f1d1d !important; }
|
|
|
|
/* Alert boxes */
|
|
.alert-error { background: #450a0a !important; border-color: #7f1d1d !important; color: #fca5a5 !important; }
|
|
.alert-success { background: #064e3b !important; border-color: #065f46 !important; color: #6ee7b7 !important; }
|
|
.alert-warning { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
|
|
.alert-info { background: #1e3a5f !important; border-color: #1d4ed8 !important; color: #93c5fd !important; }
|
|
|
|
/* Error text */
|
|
.form-error, #sa-error, #addUser-error { color: #f87171 !important; }
|
|
.form-hint { color: #64748b !important; }
|
|
|
|
/* Superadmin toggle */
|
|
.superadmin-toggle { border-color: #334155 !important; }
|
|
.superadmin-toggle button { color: #475569 !important; }
|
|
.superadmin-toggle button:hover { color: #94a3b8 !important; }
|
|
|
|
/* Superadmin form inputs */
|
|
.superadmin-form label { color: #94a3b8 !important; }
|
|
|
|
/* Footer */
|
|
.footer { color: #64748b !important; }
|
|
.status-legend { background: #162032 !important; border-color: #334155 !important; color: #94a3b8 !important; }
|
|
|
|
/* Scrollbar (webkit) */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #0f172a; }
|
|
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #475569; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>📚 Leerdoelen Tracker</h1>
|
|
<div class="user-info">
|
|
<span id="userInfo">Laden...</span>
|
|
<span class="saving-indicator" id="savingIndicator"></span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;">
|
|
<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;">
|
|
✎ Wijzigen
|
|
</button>
|
|
</div>
|
|
<a href="/auth/logout" class="btn btn-secondary">Uitloggen</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="vak-selector">
|
|
<label>Vak:</label>
|
|
<select id="vakSelector" onchange="switchVak()">
|
|
<option value="">-- Kies een vak --</option>
|
|
</select>
|
|
<span id="vakProgress" style="color: var(--gray-500); font-size: 0.85rem;"></span>
|
|
</div>
|
|
|
|
<div class="stats-bar">
|
|
<div class="stat-card"><div class="stat-value" id="statTotal">-</div><div class="stat-label">Totaal</div></div>
|
|
<div class="stat-card" style="border-left: 3px solid var(--status-groen);"><div class="stat-value" id="statGroen">-</div><div class="stat-label">Groen</div></div>
|
|
<div class="stat-card" style="border-left: 3px solid var(--status-oranje);"><div class="stat-value" id="statOranje">-</div><div class="stat-label">Oranje</div></div>
|
|
<div class="stat-card" style="border-left: 3px solid var(--status-roze);"><div class="stat-value" id="statRoze">-</div><div class="stat-label">Roze</div></div>
|
|
<div class="stat-card highlight"><div class="stat-value" id="statBeoordeeld">-</div><div class="stat-label">Beoordeeld</div></div>
|
|
</div>
|
|
|
|
<div class="filters-container">
|
|
<div class="filters-grid">
|
|
<div class="filter-group">
|
|
<label>Zoeken</label>
|
|
<input type="text" id="searchInput" placeholder="Zoek in beschrijving of code..." oninput="applyFilters()">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Status</label>
|
|
<select id="statusFilter" onchange="applyFilters()">
|
|
<option value="all">Alle statussen</option>
|
|
<option value="groen">✓ Groen</option>
|
|
<option value="oranje">~ Oranje</option>
|
|
<option value="roze">! Roze</option>
|
|
<option value="none">○ Geen status</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>E/B/G</label>
|
|
<select id="ebgFilter" onchange="applyFilters()">
|
|
<option value="all">Alle types</option>
|
|
<option value="engageren">Engageren</option>
|
|
<option value="begrijpen">Begrijpen</option>
|
|
<option value="gebruiken">Gebruiken</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Sectie</label>
|
|
<select id="sectieFilter" onchange="applyFilters()">
|
|
<option value="all">Alle secties</option>
|
|
</select>
|
|
</div>
|
|
<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'] %}
|
|
<label class="leeftijd-checkbox"><input type="checkbox" value="{{ age }}" onchange="applyFilters()"><span>{{ age }}</span></label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width:50px;">Status</th>
|
|
<th>Code</th>
|
|
<th>E/B/G</th>
|
|
<th>Leeftijden</th>
|
|
<th>Sectie</th>
|
|
<th>Beschrijving</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody">
|
|
<tr><td colspan="6" class="empty-state">Selecteer een vak om te beginnen</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Klassen modal -->
|
|
<div id="klasModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;align-items:center;justify-content:center;">
|
|
<div style="background:var(--gray-800, white);border-radius:12px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.3);">
|
|
<h2 style="font-size:1.1rem;margin-bottom:.5rem;">📚 Mijn klassen instellen</h2>
|
|
<p style="font-size:.85rem;color:var(--gray-400);margin-bottom:1rem;">
|
|
Selecteer de klassen waarvoor jij beoordelingen invult.
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification" id="notification"></div>
|
|
|
|
<script>
|
|
// ── State ────────────────────────────────────────────────────────────────────
|
|
let currentUser = null;
|
|
let currentVakId = null;
|
|
let vakData = {}; // cache van geladen vak JSON
|
|
let assessments = {}; // { goal_id: status } voor huidig vak
|
|
let doelzinnen = [];
|
|
let filteredData = [];
|
|
let saveTimeout = null;
|
|
|
|
// ── Init ─────────────────────────────────────────────────────────────────────
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
await loadUser();
|
|
await loadVakken();
|
|
});
|
|
|
|
async function loadUser() {
|
|
const res = await fetch('/api/me');
|
|
const data = await res.json();
|
|
currentUser = data.user;
|
|
document.getElementById('userInfo').textContent =
|
|
`${currentUser.full_name} — ${currentUser.school?.name || ''}`;
|
|
await loadKlassen();
|
|
}
|
|
|
|
// ── Klassen ───────────────────────────────────────────────────────────────────
|
|
let allKlassen = [];
|
|
let myKlassen = [];
|
|
|
|
async function loadKlassen() {
|
|
const res = await fetch('/api/my/classes');
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
allKlassen = data.all_classes || [];
|
|
myKlassen = data.my_classes || [];
|
|
renderKlasChips();
|
|
if (allKlassen.length > 0) {
|
|
document.getElementById('klasSelector').style.display = 'flex';
|
|
}
|
|
}
|
|
|
|
function renderKlasChips() {
|
|
const container = document.getElementById('klasChips');
|
|
if (!myKlassen.length) {
|
|
container.innerHTML = '<span style="font-size:.75rem;color:var(--gray-500);font-style:italic;">Geen klas</span>';
|
|
} else {
|
|
container.innerHTML = myKlassen.map(c =>
|
|
`<span style="background:var(--primary);color:white;padding:.15rem .5rem;border-radius:4px;font-size:.75rem;">${c.name}</span>`
|
|
).join('');
|
|
}
|
|
}
|
|
|
|
function openKlasModal() {
|
|
const container = document.getElementById('klasCheckboxes');
|
|
container.innerHTML = allKlassen.map(c => `
|
|
<label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.4rem;border-radius:4px;">
|
|
<input type="checkbox" value="${c.id}"
|
|
${myKlassen.some(m => m.id === c.id) ? 'checked' : ''}>
|
|
<span>${c.name}</span>
|
|
</label>`).join('');
|
|
document.getElementById('klasModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeKlasModal() {
|
|
document.getElementById('klasModal').style.display = 'none';
|
|
}
|
|
|
|
async function saveKlassen() {
|
|
const checked = [...document.querySelectorAll('#klasCheckboxes input:checked')].map(i => parseInt(i.value));
|
|
const res = await fetch('/api/my/classes', {
|
|
method: 'PUT', headers: {'Content-Type':'application/json'},
|
|
body: JSON.stringify({ class_ids: checked })
|
|
});
|
|
if (!res.ok) { showNotification('Opslaan mislukt', 'error'); return; }
|
|
const data = await res.json();
|
|
myKlassen = data.my_classes;
|
|
renderKlasChips();
|
|
closeKlasModal();
|
|
showNotification('Klassen opgeslagen', 'success');
|
|
}
|
|
|
|
async function loadVakken() {
|
|
const res = await fetch('/api/doelen/index');
|
|
if (!res.ok) { showNotification('Kon vakken niet laden', 'error'); return; }
|
|
const data = await res.json();
|
|
|
|
const sel = document.getElementById('vakSelector');
|
|
// Sorteer op naam — API levert ze al gesorteerd, maar voor de zekerheid
|
|
const sorted = [...data.vakken].sort((a,b) => (a.naam||a.id).localeCompare(b.naam||b.id, 'nl'));
|
|
|
|
sorted.forEach(v => {
|
|
const opt = document.createElement('option');
|
|
opt.value = v.id;
|
|
// Gebruik naam uit API, fallback op lokale functie
|
|
opt.textContent = `${v.naam || vakNaam(v.id)} (${v.aantalDoelzinnen} doelen)`;
|
|
sel.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
// ── Vak wisselen ─────────────────────────────────────────────────────────────
|
|
async function switchVak() {
|
|
const vakId = document.getElementById('vakSelector').value;
|
|
if (!vakId) {
|
|
currentVakId = null; doelzinnen = []; renderEmptyState(); updateStats(); return;
|
|
}
|
|
currentVakId = vakId;
|
|
showLoading();
|
|
|
|
// Laad vak data (cache)
|
|
if (!vakData[vakId]) {
|
|
const res = await fetch(`/api/doelen/${vakId}`);
|
|
if (!res.ok) { showNotification(`Kon ${vakId} niet laden`, 'error'); return; }
|
|
vakData[vakId] = await res.json();
|
|
}
|
|
|
|
// Laad beoordelingen voor dit vak
|
|
const res2 = await fetch(`/api/assessments?vak_id=${vakId}`);
|
|
const data2 = await res2.json();
|
|
assessments = {};
|
|
data2.assessments.forEach(a => { assessments[a.goal_id] = a.status; });
|
|
|
|
processVakData(vakId);
|
|
populateSectieFilter();
|
|
resetFilters();
|
|
}
|
|
|
|
function processVakData(vakId) {
|
|
const data = vakData[vakId];
|
|
doelzinnen = [];
|
|
const sectieLookup = {};
|
|
data.rijen.forEach(r => {
|
|
if (['onderwerp','rubriek','subrubriek','subthema'].includes(r.type))
|
|
sectieLookup[r.id] = r.inhoud;
|
|
});
|
|
const miaPerDoel = {};
|
|
data.rijen.forEach(r => {
|
|
if (r.parentDoelzinId && r.type?.startsWith('MIA')) {
|
|
(miaPerDoel[r.parentDoelzinId] = miaPerDoel[r.parentDoelzinId] || []).push(r);
|
|
}
|
|
});
|
|
data.rijen.forEach(r => {
|
|
if (r.type === 'doelzin' && r.goNr) {
|
|
doelzinnen.push({
|
|
id: r.goNr, inhoud: r.inhoud, goNr: r.goNr,
|
|
kennisverwerking: r.kennisverwerking,
|
|
leeftijden: r.leeftijden || [],
|
|
sectie: r.parentId ? sectieLookup[r.parentId] : null,
|
|
mia: miaPerDoel[r.id] || []
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Filters ───────────────────────────────────────────────────────────────────
|
|
function applyFilters() {
|
|
if (!currentVakId) return;
|
|
const search = document.getElementById('searchInput').value.toLowerCase();
|
|
const status = document.getElementById('statusFilter').value;
|
|
const ebg = document.getElementById('ebgFilter').value;
|
|
const sectie = document.getElementById('sectieFilter').value;
|
|
const leeftijd = [...document.querySelectorAll('.leeftijd-checkboxes input:checked')].map(c => c.value);
|
|
|
|
filteredData = doelzinnen.filter(d => {
|
|
if (search && !`${d.goNr} ${d.inhoud}`.toLowerCase().includes(search)) return false;
|
|
const ds = assessments[d.id] || '';
|
|
if (status === 'none' && ds) return false;
|
|
if (status !== 'all' && status !== 'none' && ds !== status) return false;
|
|
if (ebg !== 'all' && (d.kennisverwerking||'').toLowerCase() !== ebg) return false;
|
|
if (sectie !== 'all' && d.sectie !== sectie) return false;
|
|
if (leeftijd.length > 0 && !leeftijd.some(l => d.leeftijden.includes(l))) return false;
|
|
return true;
|
|
});
|
|
|
|
renderTable();
|
|
updateStats();
|
|
}
|
|
|
|
function resetFilters() {
|
|
document.getElementById('searchInput').value = '';
|
|
document.getElementById('statusFilter').value = 'all';
|
|
document.getElementById('ebgFilter').value = 'all';
|
|
document.getElementById('sectieFilter').value = 'all';
|
|
document.querySelectorAll('.leeftijd-checkboxes input').forEach(c => c.checked = false);
|
|
applyFilters();
|
|
}
|
|
|
|
function populateSectieFilter() {
|
|
const secties = [...new Set(doelzinnen.map(d => d.sectie).filter(Boolean))].sort();
|
|
const sel = document.getElementById('sectieFilter');
|
|
sel.innerHTML = '<option value="all">Alle secties</option>';
|
|
secties.forEach(s => { const o = document.createElement('option'); o.value = o.textContent = s; sel.appendChild(o); });
|
|
}
|
|
|
|
// ── Render ────────────────────────────────────────────────────────────────────
|
|
function renderTable() {
|
|
const tbody = document.getElementById('tableBody');
|
|
if (!filteredData.length) {
|
|
tbody.innerHTML = `<tr><td colspan="6" class="empty-state">${currentVakId ? 'Geen doelen gevonden' : 'Selecteer een vak'}</td></tr>`;
|
|
return;
|
|
}
|
|
tbody.innerHTML = filteredData.map(d => {
|
|
const s = assessments[d.id] || '';
|
|
const ebg = (d.kennisverwerking||'').toLowerCase();
|
|
return `
|
|
<tr class="${s ? 'status-'+s : ''}">
|
|
<td><button class="status-selector status-${s||'none'}" onclick="cycleStatus('${d.id}')"></button></td>
|
|
<td><strong>${d.goNr}</strong></td>
|
|
<td>${ebg ? `<span class="ebg-badge ebg-${ebg}">${ebg.charAt(0).toUpperCase()+ebg.slice(1)}</span>` : '-'}</td>
|
|
<td><div class="leeftijden">${d.leeftijden.map(l=>`<span class="leeftijd-badge">${l}</span>`).join('')}</div></td>
|
|
<td>${d.sectie||'-'}</td>
|
|
<td class="beschrijving-cell">
|
|
${d.inhoud}
|
|
${renderMIA(d.mia)}
|
|
</td>
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
|
|
function renderMIA(items) {
|
|
if (!items?.length) return '';
|
|
const aankl = items.filter(m => m.type === 'MIA - aanklikbaar');
|
|
const niet = items.filter(m => m.type === 'MIA - niet aanklikbaar');
|
|
const titels = items.filter(m => m.type === 'MIA - titel');
|
|
if (!aankl.length && !niet.length) return '';
|
|
return `<div class="mia-container">
|
|
${titels.length ? `<strong>${titels.map(t=>t.inhoud).join(' ')}</strong>` : ''}
|
|
<div class="mia-items">
|
|
${aankl.map(m=>`<span class="mia-item">${m.inhoud}</span>`).join('')}
|
|
${niet.map(m=>`<span class="mia-item" style="opacity:.6;font-style:italic">${m.inhoud}</span>`).join('')}
|
|
</div></div>`;
|
|
}
|
|
|
|
function showLoading() {
|
|
document.getElementById('tableBody').innerHTML =
|
|
`<tr><td colspan="6" class="loading"><div class="spinner"></div>Laden...</td></tr>`;
|
|
}
|
|
|
|
function renderEmptyState() {
|
|
document.getElementById('tableBody').innerHTML =
|
|
`<tr><td colspan="6" class="empty-state">Selecteer een vak om te beginnen</td></tr>`;
|
|
}
|
|
|
|
// ── Status ────────────────────────────────────────────────────────────────────
|
|
function cycleStatus(goalId) {
|
|
const cycle = ['', 'groen', 'oranje', 'roze'];
|
|
const cur = assessments[goalId] || '';
|
|
const next = cycle[(cycle.indexOf(cur) + 1) % cycle.length];
|
|
|
|
if (next === '') delete assessments[goalId];
|
|
else assessments[goalId] = next;
|
|
|
|
// Optimistisch de UI updaten
|
|
renderTable();
|
|
updateStats();
|
|
|
|
// Debounced save naar API
|
|
clearTimeout(saveTimeout);
|
|
setSavingIndicator('Opslaan...');
|
|
saveTimeout = setTimeout(() => saveToApi(goalId, next), 500);
|
|
}
|
|
|
|
async function saveToApi(goalId, status) {
|
|
try {
|
|
const res = await fetch('/api/assessments', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ vak_id: currentVakId, goal_id: goalId, status })
|
|
});
|
|
if (!res.ok) throw new Error('Opslaan mislukt');
|
|
setSavingIndicator('✓ Opgeslagen');
|
|
setTimeout(() => setSavingIndicator(''), 2000);
|
|
} catch(e) {
|
|
showNotification('Opslaan mislukt!', 'error');
|
|
setSavingIndicator('⚠ Fout bij opslaan');
|
|
}
|
|
}
|
|
|
|
function setSavingIndicator(text) {
|
|
document.getElementById('savingIndicator').textContent = text;
|
|
}
|
|
|
|
// ── Stats ─────────────────────────────────────────────────────────────────────
|
|
function updateStats() {
|
|
const total = doelzinnen.length;
|
|
const vals = Object.values(assessments);
|
|
const groen = vals.filter(s=>s==='groen').length;
|
|
const oranje = vals.filter(s=>s==='oranje').length;
|
|
const roze = vals.filter(s=>s==='roze').length;
|
|
const pct = total > 0 ? Math.round((groen+oranje+roze)/total*100) : 0;
|
|
|
|
document.getElementById('statTotal').textContent = total || '-';
|
|
document.getElementById('statGroen').textContent = groen || '-';
|
|
document.getElementById('statOranje').textContent = oranje || '-';
|
|
document.getElementById('statRoze').textContent = roze || '-';
|
|
document.getElementById('statBeoordeeld').textContent = total > 0 ? `${pct}%` : '-';
|
|
document.getElementById('vakProgress').textContent =
|
|
currentVakId ? `${groen+oranje+roze}/${total} beoordeeld` : '';
|
|
}
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
function vakNaam(id) {
|
|
// Naam komt uit de API (index.json via /api/doelen/index, veld 'naam').
|
|
// Deze functie is enkel een fallback als de naam niet beschikbaar is.
|
|
return id.replace(/^doelenset-bao-/, '').replace(/-/g, ' ')
|
|
.replace(/\b\w/g, c => c.toUpperCase());
|
|
}
|
|
|
|
function showNotification(msg, type='success') {
|
|
const el = document.getElementById('notification');
|
|
el.textContent = msg;
|
|
el.className = `notification ${type} show`;
|
|
setTimeout(() => el.classList.remove('show'), 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|