marinostrusandClaude Opus 5.5
8b7fa3f716
Klik op je naam rechtsboven om een menu te openen met een schakelaar voor het donkere thema. De keuze wordt per browser onthouden. - global.css: donkere kleurvariabelen, alleen op scherm (afdrukken blijft licht) - base.html: gebruikersmenu met themaschakelaar - vaste witte achtergronden en pastelkleuren op enkele pagina's volgen nu het thema Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
154 lines
8.2 KiB
HTML
154 lines
8.2 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Leerlingenbeheer{% endblock %}
|
||
{% block page_title %}Leerlingenbeheer{% endblock %}
|
||
{% block main_class %}wide{% endblock %}
|
||
{% block extra_css %}
|
||
<style>
|
||
/* Bewerken-knop altijd zichtbaar: laatste kolom blijft rechts staan bij horizontaal scrollen */
|
||
.lln-tabel td.actions, .lln-tabel th.actions {
|
||
position: sticky; right: 0; background: var(--surface); white-space: nowrap;
|
||
box-shadow: -6px 0 6px -6px rgba(15, 23, 42, .15);
|
||
}
|
||
.lln-tabel th.actions { background: var(--surface-muted); }
|
||
.lln-tabel td { font-size: 14px; }
|
||
.lln-tabel td.nowrap { white-space: nowrap; }
|
||
.lln-tabel tr.vertrokken td:not(.actions) { color: var(--text-muted, #64748b); }
|
||
</style>
|
||
{% endblock %}
|
||
{% block loader_text %}Synchroniseren met Informat & Smartschool... Even geduld.{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="card">
|
||
<div class="page-head">
|
||
<h2>👥 Leerlingen</h2>
|
||
<div class="actions">
|
||
<button type="button" class="btn-success" onclick="openAddModal()">➕ Leerling toevoegen</button>
|
||
<form action="{{ url_for('students.sync_informat') }}" method="POST" style="margin:0" onsubmit="showLoader()">
|
||
<button type="submit" class="btn-secondary">🔄 Informat & SS sync</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<form class="search-bar" method="POST" action="{{ url_for('students.inventaris_leerlingen') }}">
|
||
<input type="text" name="query" placeholder="Zoek op naam of internnummer..." value="{{ query or '' }}">
|
||
{% if toon_vertrokken %}<input type="hidden" name="vertrokken" value="1">{% endif %}
|
||
<button type="submit" class="btn-search">🔍 Zoeken</button>
|
||
{% if query %}
|
||
<a href="{{ url_for('students.inventaris_leerlingen', vertrokken='1' if toon_vertrokken else None) }}" class="btn btn-light">✕ Wissen</a>
|
||
{% endif %}
|
||
</form>
|
||
{% if aantal_vertrokken %}
|
||
<p class="muted small" style="margin:-4px 0 12px">
|
||
{% if toon_vertrokken %}Vertrokken leerlingen worden getoond ({{ aantal_vertrokken }}).
|
||
<a href="{{ url_for('students.inventaris_leerlingen', query=query or None) }}">Verbergen</a>
|
||
{% else %}{{ aantal_vertrokken }} leerling{{ 'en' if aantal_vertrokken != 1 }} niet meer actief in Informat (vertrokken) verborgen.
|
||
<a href="{{ url_for('students.inventaris_leerlingen', vertrokken='1', query=query or None) }}">Toon ook vertrokken leerlingen</a>{% endif %}
|
||
</p>
|
||
{% endif %}
|
||
|
||
<div class="table-wrap">
|
||
<table class="lln-tabel">
|
||
<thead>
|
||
<tr>
|
||
<th>Internnummer</th>
|
||
<th>Gebruikersnaam</th>
|
||
<th>Voornaam</th>
|
||
<th>Naam</th>
|
||
<th>Smartschool nr.</th>
|
||
<th>Google e-mailadres</th>
|
||
<th>Schooljaar</th>
|
||
<th class="actions">Acties</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% if results %}
|
||
{% for row in results %}
|
||
<tr{% if row['Vertrokken_op'] %} class="vertrokken"{% endif %}>
|
||
<td><strong>{{ row['Internnummer'] }}</strong>{% if row['Vertrokken_op'] %}
|
||
<span class="badge badge-warning" title="Niet meer actief in Informat sinds {{ row['Vertrokken_op'].strftime('%d-%m-%Y') }}">vertrokken</span>{% endif %}</td>
|
||
<td>{{ row['Gebruikersnaam'] or '' }}</td>
|
||
<td>{{ row['Voornaam'] or '' }}</td>
|
||
<td>{{ row['Naam'] or '' }}</td>
|
||
<td class="nowrap">{{ row['SS_nummer'] or '' }}</td>
|
||
<td>{{ row['Google_adres'] or '' }}</td>
|
||
<td class="nowrap">{{ row['Schooljaar'] or '' }}</td>
|
||
<td class="actions">
|
||
<button type="button" class="btn-bewerk btn-sm"
|
||
data-intern="{{ row['Internnummer'] }}"
|
||
data-gebruikersnaam="{{ row['Gebruikersnaam'] or '' }}"
|
||
data-voornaam="{{ row['Voornaam'] or '' }}"
|
||
data-naam="{{ row['Naam'] or '' }}"
|
||
data-ss="{{ row['SS_nummer'] or '' }}"
|
||
data-google="{{ row['Google_adres'] or '' }}"
|
||
onclick="openEditModalFromButton(this)">✏️ Bewerken</button>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
{% else %}
|
||
<tr class="empty-row"><td colspan="8">Geen leerlingen gevonden in de database.</td></tr>
|
||
{% endif %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block modals %}
|
||
<div id="addStudentModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeAddModal()">×</span>
|
||
<h3>Leerling handmatig toevoegen</h3>
|
||
<form action="{{ url_for('students.registreer_leerling') }}" method="POST">
|
||
<div class="field"><label>Internnummer</label><input type="text" name="inter_id" required></div>
|
||
<div class="field"><label>Gebruikersnaam</label><input type="text" name="gebruikersnaam" required></div>
|
||
<div class="field"><label>Voornaam</label><input type="text" name="voornaam"></div>
|
||
<div class="field"><label>Naam</label><input type="text" name="naam"></div>
|
||
<div class="field"><label>Smartschool nummer</label><input type="text" name="ss_nummer"></div>
|
||
<div class="field"><label>Google adres</label><input type="email" name="google_adres"></div>
|
||
<button type="submit" class="btn-block btn-success">💾 Opslaan</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="closeModal()">×</span>
|
||
<h3>Leerling bewerken</h3>
|
||
<form action="{{ url_for('students.bewerk_gebruiker') }}" method="POST">
|
||
<div class="field"><label>Internnummer (ID)</label><input type="text" id="edit_internnummer" name="internnummer" readonly></div>
|
||
<div class="field"><label>Gebruikersnaam</label><input type="text" id="edit_gebruikersnaam" name="gebruikersnaam"></div>
|
||
<div class="field"><label>Voornaam</label><input type="text" id="edit_voornaam" name="voornaam"></div>
|
||
<div class="field"><label>Naam</label><input type="text" id="edit_naam" name="naam"></div>
|
||
<div class="field"><label>Smartschool nummer</label><input type="text" id="edit_ss_nummer" name="ss_nummer"></div>
|
||
<div class="field"><label>Google adres</label><input type="email" id="edit_google_adres" name="google_adres"></div>
|
||
<button type="submit" class="btn-block">💾 Wijzigingen opslaan</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
function openAddModal() { document.getElementById('addStudentModal').style.display = 'block'; }
|
||
function closeAddModal() { document.getElementById('addStudentModal').style.display = 'none'; }
|
||
|
||
function openEditModalFromButton(btn) {
|
||
document.getElementById('edit_internnummer').value = btn.getAttribute('data-intern') || '';
|
||
document.getElementById('edit_gebruikersnaam').value = btn.getAttribute('data-gebruikersnaam') || '';
|
||
document.getElementById('edit_voornaam').value = btn.getAttribute('data-voornaam') || '';
|
||
document.getElementById('edit_naam').value = btn.getAttribute('data-naam') || '';
|
||
document.getElementById('edit_ss_nummer').value = btn.getAttribute('data-ss') || '';
|
||
document.getElementById('edit_google_adres').value = btn.getAttribute('data-google') || '';
|
||
document.getElementById('editModal').style.display = 'block';
|
||
}
|
||
|
||
function closeModal() { document.getElementById('editModal').style.display = 'none'; }
|
||
|
||
window.onclick = function (event) {
|
||
if (event.target == document.getElementById('editModal')) closeModal();
|
||
if (event.target == document.getElementById('addStudentModal')) closeAddModal();
|
||
};
|
||
</script>
|
||
{% endblock %}
|