Sam Geyskens
1acaf26a38
All checks were successful
Build & Push / Build & Push image (push) Successful in 42s
- Dropped the existing assessments table to remove user_id association. - Created a new assessments table linked to classes (class_id) allowing multiple teachers to share assessments. - Added necessary indexes for performance optimization. - Downgrade functionality to revert back to user-based assessments if needed.
732 lines
40 KiB
HTML
732 lines
40 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>
|
|
: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); }
|
|
.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-primary { background: var(--primary); color: white; }
|
|
.btn-primary:hover { background: var(--primary-dark); }
|
|
.btn-secondary { background: var(--gray-100); color: var(--gray-700); }
|
|
.btn-secondary:hover { background: var(--gray-200); }
|
|
.btn-import { background: var(--warning); color: white; }
|
|
.btn-import:hover { background: #d97706; }
|
|
|
|
/* Klas + vak selector balk */
|
|
.selector-bar { 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: 1.5rem; flex-wrap: wrap; }
|
|
.selector-group { display: flex; flex-direction: column; gap: 0.25rem; }
|
|
.selector-group label { font-size: 0.75rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.selector-group select { padding: 0.5rem 0.75rem; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 0.95rem; min-width: 200px; cursor: pointer; background: white; color: var(--gray-800); }
|
|
.selector-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
|
|
|
|
/* Geen klas waarschuwing */
|
|
.no-klas-banner { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 1rem 1.5rem; margin-bottom: 1rem; font-size: 0.9rem; color: #92400e; }
|
|
|
|
.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; }
|
|
|
|
.legend-container { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
|
|
.legend-title { font-weight: 600; color: var(--gray-700); margin-bottom: .75rem; font-size: .9rem; }
|
|
.legend-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
|
|
.legend-section { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
|
|
.legend-item { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
|
|
.legend-color { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
|
|
.legend-divider { width: 1px; height: 24px; background: var(--gray-300); }
|
|
|
|
.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-groen:hover { background: #a7f3d0; }
|
|
tr.status-oranje { background: var(--status-oranje-bg); } tr.status-oranje:hover { background: #fde68a; }
|
|
tr.status-roze { background: var(--status-roze-bg); } tr.status-roze:hover { background: #fbcfe8; }
|
|
|
|
.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: '\u25cb'; }
|
|
.status-selector.status-groen { background: var(--status-groen); border-color: var(--status-groen); color: white; }
|
|
.status-selector.status-groen::after { content: '\u2713'; }
|
|
.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; }
|
|
.opm-col { width: 200px; min-width: 150px; }
|
|
.opm-cell { padding: 0.4rem 0.5rem; vertical-align: middle; }
|
|
.opm-input { width: 100%; padding: 0.3rem 0.4rem; border: 1px solid var(--gray-300); border-radius: 4px; font-size: 0.8rem; background: transparent; color: var(--gray-700); transition: border-color 0.15s; }
|
|
.opm-input:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 2px rgba(79,70,229,0.1); }
|
|
.opm-input::placeholder { color: var(--gray-400); }
|
|
.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); }
|
|
.notification.warning { background: var(--warning); }
|
|
.saving-indicator { font-size: 0.8rem; color: var(--gray-400); margin-left: auto; }
|
|
|
|
/* Klassen modal */
|
|
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; align-items: center; justify-content: center; }
|
|
.modal-overlay.active { display: flex; }
|
|
.modal-inner { background: white; border-radius: 12px; padding: 1.5rem; max-width: 400px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
|
|
.modal-inner h2 { font-size: 1.1rem; margin-bottom: .5rem; }
|
|
|
|
@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; }
|
|
.header, .selector-bar, .stat-card, .legend-container, .filters-container, .table-container { background: #1e293b !important; border-color: #334155 !important; }
|
|
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; }
|
|
input, select, textarea { background: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; }
|
|
input::placeholder { color: #64748b !important; }
|
|
input:focus, select:focus { border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.2) !important; }
|
|
.btn-secondary { background: #334155 !important; color: #e2e8f0 !important; }
|
|
.btn-secondary:hover { background: #475569 !important; }
|
|
.status-selector.status-none { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
|
|
.leeftijd-badge { background: #334155 !important; color: #94a3b8 !important; }
|
|
.leeftijd-checkbox { border-color: #334155 !important; color: #e2e8f0; }
|
|
.leeftijd-checkbox:has(input:checked) { background: var(--primary) !important; }
|
|
.legend-title { color: #94a3b8 !important; }
|
|
.legend-divider { background: #334155 !important; }
|
|
.mia-container { background: #162032 !important; }
|
|
.mia-item { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
|
|
.opm-input { background: transparent !important; color: #e2e8f0 !important; border-color: #334155 !important; }
|
|
.opm-input:focus { background: #0f172a !important; border-color: #6366f1 !important; }
|
|
.opm-input::placeholder { color: #475569 !important; }
|
|
.modal-inner { background: #1e293b !important; color: #e2e8f0; }
|
|
.no-klas-banner { background: #451a03 !important; border-color: #78350f !important; color: #fcd34d !important; }
|
|
::-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">
|
|
|
|
<!-- Header -->
|
|
<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;">
|
|
<button id="btnOpenKlas" class="btn btn-secondary" style="display:none;">
|
|
✎ Mijn klassen wijzigen
|
|
</button>
|
|
<button id="btnImportJson" class="btn btn-import"
|
|
title="Importeer beoordelingen uit de vorige standalone versie van de app">
|
|
📥 Vorige beoordelingen importeren
|
|
</button>
|
|
<input type="file" id="importJsonFile" accept=".json" style="display:none">
|
|
{% if director_mode %}
|
|
<a href="/dashboard" class="btn btn-secondary" style="font-weight:600;">
|
|
← Terug naar directeurdashboard
|
|
</a>
|
|
{% else %}
|
|
<a href="/auth/logout" class="btn btn-secondary">Uitloggen</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Klas + Vak selector -->
|
|
<div class="selector-bar">
|
|
<div class="selector-group">
|
|
<label>Actieve klas</label>
|
|
<select id="klasSelector">
|
|
<option value="">-- Kies een klas --</option>
|
|
</select>
|
|
</div>
|
|
<div class="selector-group">
|
|
<label>Vak</label>
|
|
<select id="vakSelector" disabled>
|
|
<option value="">-- Kies eerst een klas --</option>
|
|
</select>
|
|
</div>
|
|
<span id="vakProgress" style="color:var(--gray-500);font-size:0.85rem;margin-top:1.25rem;"></span>
|
|
</div>
|
|
|
|
<!-- Waarschuwing: geen klassen toegewezen -->
|
|
<div class="no-klas-banner" id="noKlasBanner" style="display:none;">
|
|
⚠️ Je hebt nog geen klassen toegewezen gekregen.
|
|
Vraag je ICT-beheerder of directeur om je aan een klas te koppelen.
|
|
</div>
|
|
|
|
<!-- Statistieken -->
|
|
<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>
|
|
|
|
<!-- Legenda -->
|
|
<div class="legend-container">
|
|
<div class="legend-title">Legenda</div>
|
|
<div class="legend-grid">
|
|
<div class="legend-section">
|
|
<div class="legend-item"><div class="status-selector status-groen" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div><span>Doen we al</span></div>
|
|
<div class="legend-item"><div class="status-selector status-oranje" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div><span>Doen we ongeveer</span></div>
|
|
<div class="legend-item"><div class="status-selector status-roze" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div><span>Nieuw (doen we nog niet)</span></div>
|
|
<div class="legend-item"><div class="status-selector status-none" style="width:22px;height:22px;font-size:.85rem;pointer-events:none;flex-shrink:0;"></div><span>Nog geen status</span></div>
|
|
</div>
|
|
<div class="legend-divider"></div>
|
|
<div class="legend-section">
|
|
<div class="legend-item"><div class="legend-color" style="background:var(--kleur-engageren);"></div><span><strong>Engageren</strong></span></div>
|
|
<div class="legend-item"><div class="legend-color" style="background:var(--kleur-begrijpen);"></div><span><strong>Begrijpen</strong></span></div>
|
|
<div class="legend-item"><div class="legend-color" style="background:var(--kleur-gebruiken);"></div><span><strong>Gebruiken</strong></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<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...">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Status</label>
|
|
<select id="statusFilter">
|
|
<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">
|
|
<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"><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 }}"><span>{{ age }}</span></label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabel -->
|
|
<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>
|
|
<th class="opm-col">Opm.</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody">
|
|
<tr><td colspan="7" class="empty-state">Selecteer een klas en een vak om te beginnen</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Klassen modal -->
|
|
<div class="modal-overlay" id="klasModal">
|
|
<div class="modal-inner">
|
|
<h2>📚 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 id="btnSluitKlas" class="btn btn-secondary">Annuleren</button>
|
|
<button id="btnSlaKlas" class="btn btn-primary">Opslaan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification" id="notification"></div>
|
|
|
|
<script nonce="{{ csp_nonce() }}">
|
|
// ── State ─────────────────────────────────────────────────────────────────────
|
|
let currentUser = null;
|
|
let activeKlasId = null;
|
|
let currentVakId = null;
|
|
let vakData = {};
|
|
let assessments = {};
|
|
let opmerkingen = {};
|
|
let doelzinnen = [];
|
|
let filteredData = [];
|
|
let allKlassen = [];
|
|
let myKlassen = [];
|
|
let saveTimeout = null;
|
|
let opmTimer = null;
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────────────────
|
|
function bind(id, ev, fn) {
|
|
const el = document.getElementById(id);
|
|
if (el) el.addEventListener(ev, fn);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
bind('klasSelector', 'change', switchKlas);
|
|
bind('vakSelector', 'change', switchVak);
|
|
bind('btnOpenKlas', 'click', openKlasModal);
|
|
bind('btnSluitKlas', 'click', closeKlasModal);
|
|
bind('btnSlaKlas', 'click', saveKlassen);
|
|
bind('btnImportJson', 'click', () => document.getElementById('importJsonFile').click());
|
|
bind('importJsonFile', 'change', function() { importLegacyJson(this.files[0]); this.value=''; });
|
|
bind('searchInput', 'input', applyFilters);
|
|
bind('statusFilter', 'change', applyFilters);
|
|
bind('ebgFilter', 'change', applyFilters);
|
|
bind('sectieFilter', 'change', applyFilters);
|
|
document.querySelectorAll('.leeftijd-checkboxes input').forEach(cb => cb.addEventListener('change', applyFilters));
|
|
try { await loadUser(); } catch(e) { console.error('loadUser fout:', e); }
|
|
await loadVakken();
|
|
});
|
|
|
|
async function loadUser() {
|
|
const res = await fetch('/api/me');
|
|
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
const data = await res.json();
|
|
currentUser = data.user;
|
|
document.getElementById('userInfo').textContent =
|
|
currentUser.full_name + ' — ' + (currentUser.school?.name || '');
|
|
await loadKlassen();
|
|
}
|
|
|
|
// ── Klassen ───────────────────────────────────────────────────────────────────
|
|
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 || [];
|
|
|
|
const sel = document.getElementById('klasSelector');
|
|
sel.innerHTML = '<option value="">-- Kies een klas --</option>';
|
|
|
|
if (!myKlassen.length) {
|
|
document.getElementById('noKlasBanner').style.display = 'block';
|
|
} else {
|
|
document.getElementById('noKlasBanner').style.display = 'none';
|
|
myKlassen.forEach(c => {
|
|
const opt = document.createElement('option');
|
|
opt.value = c.id;
|
|
opt.textContent = c.name;
|
|
sel.appendChild(opt);
|
|
});
|
|
if (myKlassen.length === 1) {
|
|
sel.value = myKlassen[0].id;
|
|
await switchKlas();
|
|
}
|
|
}
|
|
|
|
if (allKlassen.length > 0) {
|
|
document.getElementById('btnOpenKlas').style.display = 'inline-flex';
|
|
}
|
|
}
|
|
|
|
async function switchKlas() {
|
|
const klasId = parseInt(document.getElementById('klasSelector').value);
|
|
activeKlasId = klasId || null;
|
|
currentVakId = null;
|
|
assessments = {};
|
|
opmerkingen = {};
|
|
doelzinnen = [];
|
|
|
|
const vakSel = document.getElementById('vakSelector');
|
|
if (!activeKlasId) {
|
|
vakSel.disabled = true;
|
|
vakSel.innerHTML = '<option value="">-- Kies eerst een klas --</option>';
|
|
renderEmptyState();
|
|
updateStats();
|
|
return;
|
|
}
|
|
vakSel.disabled = false;
|
|
vakSel.value = '';
|
|
renderEmptyState();
|
|
updateStats();
|
|
}
|
|
|
|
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').classList.add('active');
|
|
}
|
|
|
|
function closeKlasModal() {
|
|
document.getElementById('klasModal').classList.remove('active');
|
|
}
|
|
|
|
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;
|
|
closeKlasModal();
|
|
await loadKlassen();
|
|
showNotification('Klassen opgeslagen', 'success');
|
|
}
|
|
|
|
// ── Vakken ────────────────────────────────────────────────────────────────────
|
|
async function loadVakken() {
|
|
const sel = document.getElementById('vakSelector');
|
|
try {
|
|
const res = await fetch('/api/doelen/index');
|
|
if (!res.ok) { showNotification('Fout bij laden vakken', 'error'); return; }
|
|
const data = await res.json();
|
|
if (!data.vakken?.length) {
|
|
sel.innerHTML = '<option value="">Geen vakken beschikbaar</option>';
|
|
return;
|
|
}
|
|
const sorted = [...data.vakken].sort((a,b) => (a.naam||a.id).localeCompare(b.naam||b.id,'nl'));
|
|
sel.innerHTML = '<option value="">-- Kies een vak --</option>';
|
|
sorted.forEach(v => {
|
|
const opt = document.createElement('option');
|
|
opt.value = v.id;
|
|
opt.textContent = (v.naam || v.id) + ' (' + v.aantalDoelzinnen + ' doelen)';
|
|
sel.appendChild(opt);
|
|
});
|
|
} catch(e) {
|
|
showNotification('Netwerkfout bij laden vakken', 'error');
|
|
}
|
|
}
|
|
|
|
// ── Vak wisselen ──────────────────────────────────────────────────────────────
|
|
async function switchVak() {
|
|
if (!activeKlasId) { showNotification('Selecteer eerst een klas', 'warning'); return; }
|
|
const vakId = document.getElementById('vakSelector').value;
|
|
if (!vakId) { currentVakId = null; doelzinnen = []; renderEmptyState(); updateStats(); return; }
|
|
currentVakId = vakId;
|
|
showLoading();
|
|
|
|
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();
|
|
}
|
|
|
|
const res2 = await fetch('/api/assessments?class_id=' + activeKlasId + '&vak_id=' + vakId);
|
|
const data2 = await res2.json();
|
|
assessments = {};
|
|
opmerkingen = {};
|
|
(data2.assessments || []).forEach(a => {
|
|
if (a.status) assessments[a.goal_id] = a.status;
|
|
if (a.opmerking) opmerkingen[a.goal_id] = a.opmerking;
|
|
});
|
|
|
|
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 && 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 escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str || '';
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function renderTable() {
|
|
const tbody = document.getElementById('tableBody');
|
|
if (!filteredData.length) {
|
|
tbody.innerHTML = '<tr><td colspan="7" class="empty-state">' + (currentVakId ? 'Geen doelen gevonden' : 'Selecteer een klas en 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') + '" data-action="cycleStatus" data-id="' + 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">' + escapeHtml(d.inhoud) + renderMIA(d.mia) + '</td>' +
|
|
'<td class="opm-cell"><input type="text" class="opm-input" maxlength="150" value="' + escapeHtml(opmerkingen[d.id] || '') + '" data-action="saveOpmerking" data-id="' + d.id + '" placeholder="..."></td>' +
|
|
'</tr>';
|
|
}).join('');
|
|
}
|
|
|
|
function renderMIA(items) {
|
|
if (!items || !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">' + escapeHtml(m.inhoud) + '</span>').join('') +
|
|
niet.map(m => '<span class="mia-item" style="opacity:.6;font-style:italic">' + escapeHtml(m.inhoud) + '</span>').join('') +
|
|
'</div></div>';
|
|
}
|
|
|
|
function showLoading() {
|
|
document.getElementById('tableBody').innerHTML =
|
|
'<tr><td colspan="7" class="loading"><div class="spinner"></div>Laden...</td></tr>';
|
|
}
|
|
|
|
function renderEmptyState() {
|
|
document.getElementById('tableBody').innerHTML =
|
|
'<tr><td colspan="7" class="empty-state">Selecteer een klas en een vak om te beginnen</td></tr>';
|
|
document.getElementById('vakProgress').textContent = '';
|
|
}
|
|
|
|
// ── Status ────────────────────────────────────────────────────────────────────
|
|
function cycleStatus(goalId) {
|
|
if (!activeKlasId || !currentVakId) return;
|
|
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;
|
|
renderTable();
|
|
updateStats();
|
|
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({ class_id: activeKlasId, vak_id: currentVakId, goal_id: goalId, status })
|
|
});
|
|
if (!res.ok) throw new Error('Opslaan mislukt');
|
|
setSavingIndicator('\u2713 Opgeslagen');
|
|
setTimeout(() => setSavingIndicator(''), 2000);
|
|
} catch(e) {
|
|
showNotification('Opslaan mislukt!', 'error');
|
|
setSavingIndicator('\u26a0 Fout bij opslaan');
|
|
}
|
|
}
|
|
|
|
function setSavingIndicator(text) {
|
|
document.getElementById('savingIndicator').textContent = text;
|
|
}
|
|
|
|
// ── Opmerkingen ───────────────────────────────────────────────────────────────
|
|
function saveOpmerking(goalId, tekst) {
|
|
if (!activeKlasId || !currentVakId) return;
|
|
if (tekst.trim()) opmerkingen[goalId] = tekst.trim();
|
|
else delete opmerkingen[goalId];
|
|
clearTimeout(opmTimer);
|
|
opmTimer = setTimeout(async () => {
|
|
try {
|
|
await fetch('/api/assessments/opmerking', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ class_id: activeKlasId, vak_id: currentVakId, goal_id: goalId, opmerking: tekst.trim() })
|
|
});
|
|
} catch(e) { console.error('Opmerking opslaan mislukt:', e); }
|
|
}, 600);
|
|
}
|
|
|
|
// ── 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 =
|
|
(activeKlasId && currentVakId) ? (groen+oranje+roze) + '/' + total + ' beoordeeld' : '';
|
|
}
|
|
|
|
// ── Legacy import ─────────────────────────────────────────────────────────────
|
|
async function importLegacyJson(file) {
|
|
if (!file) return;
|
|
if (!activeKlasId) { showNotification('Selecteer eerst een klas voor je importeert', 'warning'); return; }
|
|
let data;
|
|
try {
|
|
data = JSON.parse(await file.text());
|
|
if (!data.vakken) { showNotification('Ongeldig bestand', 'error'); return; }
|
|
} catch(e) { showNotification('Ongeldig JSON bestand', 'error'); return; }
|
|
|
|
showNotification('Bezig met importeren...', 'warning');
|
|
try {
|
|
const res = await fetch('/api/assessments/bulk-import', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ class_id: activeKlasId, vakken: data.vakken })
|
|
});
|
|
const result = await res.json();
|
|
if (!res.ok) { showNotification(result.error || 'Import mislukt', 'error'); return; }
|
|
showNotification('Import klaar: ' + result.totaal + ' beoordelingen' + (result.fouten > 0 ? ', ' + result.fouten + ' fouten' : ''),
|
|
result.fouten > 0 ? 'warning' : 'success');
|
|
if (currentVakId) await switchVak();
|
|
} catch(e) { showNotification('Netwerkfout tijdens import', 'error'); }
|
|
}
|
|
|
|
// ── Event delegation ──────────────────────────────────────────────────────────
|
|
document.addEventListener('click', function(e) {
|
|
const btn = e.target.closest('[data-action="cycleStatus"]');
|
|
if (btn) cycleStatus(btn.dataset.id);
|
|
});
|
|
document.addEventListener('change', function(e) {
|
|
const inp = e.target.closest('[data-action="saveOpmerking"]');
|
|
if (inp) saveOpmerking(inp.dataset.id, inp.value);
|
|
});
|
|
|
|
// ── Notificaties ──────────────────────────────────────────────────────────────
|
|
function showNotification(msg, type) {
|
|
type = type || 'success';
|
|
const el = document.getElementById('notification');
|
|
el.textContent = msg;
|
|
el.className = 'notification ' + type + ' show';
|
|
setTimeout(() => el.classList.remove('show'), 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |