173 lines
9.4 KiB
HTML
173 lines
9.4 KiB
HTML
{% extends "base.html" %}
|
|
{% from "_personeel.html" import subnav with context %}
|
|
|
|
{% block title %}{{ SOORTEN[soort].label }}{% endblock %}
|
|
{% block page_title %}{{ SOORTEN[soort].icoon }} {{ 'Afwezigheid melden' if soort == 'afwezigheid' else SOORTEN[soort].label ~ ' aanvragen' }}{% endblock %}
|
|
{% block main_class %}medium{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.soort-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
|
|
.soort-switch a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; }
|
|
.soort-switch a.on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
|
|
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
|
|
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
|
|
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
|
|
.dagdeel { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.dagdeel label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-weight: 500; }
|
|
.dagdeel input:checked + span { font-weight: 700; color: var(--primary-color); }
|
|
.klassen-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--surface-muted); }
|
|
.klassen-box input[type=search] { margin-bottom: 8px; }
|
|
.klassen { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; }
|
|
.klas { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
|
|
.klas input { width: 14px; height: 14px; }
|
|
.klas.on { background: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); }
|
|
.gekozen { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
|
|
.info-note { font-size: 13px; color: var(--text-muted); background: var(--surface-muted); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 16px; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{{ subnav('') }}
|
|
|
|
<div class="soort-switch">
|
|
{% for key, s in SOORTEN.items() %}
|
|
<a class="{{ 'on' if key == soort }}" href="{{ url_for('personeel.nieuw', soort=key) }}">{{ s.icoon }} {{ s.label }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<form class="card" method="POST" action="{{ url_for('personeel.nieuw') }}" onsubmit="showLoader('Versturen...')">
|
|
<input type="hidden" name="soort" value="{{ soort }}">
|
|
|
|
<div class="info-note">
|
|
{% if soort == 'afwezigheid' %}Het secretariaat ziet je afwezigheid meteen en krijgt een mail. Geen goedkeuring nodig.
|
|
{% elif soort == 'nascholing' %}De directie krijgt je aanvraag en kan goedkeuren, weigeren of een vraag stellen. Je krijgt een mail bij elke beslissing.
|
|
{% else %}De directie keurt de uitstap goed. Daarna ziet het secretariaat welke klassen en begeleiders weg zijn.{% endif %}
|
|
</div>
|
|
|
|
{% if is_secr %}
|
|
<div class="field">
|
|
<label for="namens">Namens leerkracht <span class="muted">(leeg = jezelf)</span></label>
|
|
<input type="email" id="namens" name="namens" value="{{ form.get('namens', '') }}" placeholder="voornaam.naam@school.be">
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if soort != 'afwezigheid' %}
|
|
<div class="field">
|
|
<label for="titel">{{ 'Naam van de nascholing' if soort == 'nascholing' else 'Bestemming / activiteit' }}</label>
|
|
<input type="text" id="titel" name="titel" required maxlength="255" value="{{ form.get('titel', '') }}"
|
|
placeholder="{{ 'bv. Differentiëren in de klas' if soort == 'nascholing' else 'bv. Bezoek Technopolis' }}">
|
|
</div>
|
|
{% else %}
|
|
<div class="field">
|
|
<label for="titel">Reden <span class="muted">(optioneel, enkel zichtbaar voor secretariaat en directie)</span></label>
|
|
<select id="titel" name="titel">
|
|
{% for r in ['Ziek', 'Familiale omstandigheden', 'Dokter / ziekenhuis', 'Overmacht', 'Andere'] %}
|
|
<option {{ 'selected' if form.get('titel') == r }}>{{ r }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="grid2">
|
|
<div class="field">
|
|
<label for="van">{{ 'Datum' if soort != 'afwezigheid' else 'Van' }}</label>
|
|
<input type="date" id="van" name="van" required value="{{ form.get('van', vandaag.isoformat()) }}" onchange="syncTot()">
|
|
</div>
|
|
<div class="field">
|
|
<label for="tot">Tot en met</label>
|
|
<input type="date" id="tot" name="tot" value="{{ form.get('tot', '') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Wanneer</label>
|
|
<div class="dagdeel">
|
|
{% for key, label in DAGDELEN.items() %}
|
|
<label><input type="radio" name="dagdeel" value="{{ key }}" {{ 'checked' if form.get('dagdeel', 'dag') == key }} onchange="toggleUren()"><span>{{ label }}</span></label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="field" id="urenField" style="display:none">
|
|
<label for="lesuren">Lesuren</label>
|
|
<input type="text" id="lesuren" name="lesuren" maxlength="50" value="{{ form.get('lesuren', '') }}" placeholder="bv. 3-5 of 1, 2, 7">
|
|
</div>
|
|
|
|
{% if soort != 'afwezigheid' %}
|
|
<div class="grid2">
|
|
<div class="field">
|
|
<label for="locatie">Locatie</label>
|
|
<input type="text" id="locatie" name="locatie" maxlength="255" value="{{ form.get('locatie', '') }}">
|
|
</div>
|
|
<div class="field">
|
|
<label for="kost">Kost <span class="muted">(€, optioneel)</span></label>
|
|
<input type="text" id="kost" name="kost" inputmode="decimal" value="{{ form.get('kost', '') }}" placeholder="0,00">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="field">
|
|
<label>{{ 'Klassen die mee op uitstap gaan' if soort == 'uitstap' else 'Klassen waar je les hebt (voor vervanging)' }}</label>
|
|
<div class="klassen-box">
|
|
{% if klassen %}
|
|
<input type="search" placeholder="Zoek klas..." oninput="filterKlassen(this.value)">
|
|
<div class="klassen" id="klassen">
|
|
{% set gekozen = form.getlist('klassen') if form else [] %}
|
|
{% for k in klassen %}
|
|
<label class="klas {{ 'on' if k in gekozen }}" data-k="{{ k|lower }}">
|
|
<input type="checkbox" name="klassen" value="{{ k }}" {{ 'checked' if k in gekozen }} onchange="this.parentElement.classList.toggle('on', this.checked); telKlassen()">{{ k }}</label>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="gekozen" id="gekozen"></div>
|
|
<input type="text" name="klassen_extra" value="{{ form.get('klassen_extra', '') }}" placeholder="Andere groepen (optioneel, komma-gescheiden)" style="margin-top:8px">
|
|
{% else %}
|
|
<input type="text" name="klassen_extra" value="{{ form.get('klassen_extra', '') }}" placeholder="bv. 3A, 3B, 4ECWI">
|
|
<div class="gekozen">De klassenlijst uit Smartschool kon niet geladen worden; typ de klassen in.</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if soort == 'uitstap' %}
|
|
<div class="field">
|
|
<label for="begeleiders">Andere begeleiders</label>
|
|
<input type="text" id="begeleiders" name="begeleiders" value="{{ form.get('begeleiders', '') }}" placeholder="bv. Els Janssens, Tom Vermeulen">
|
|
<div class="field-hint">Begeleiders verschijnen ook als afwezig in het dagoverzicht van het secretariaat.</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="field">
|
|
<label for="omschrijving">{{ 'Opmerking voor het secretariaat' if soort == 'afwezigheid' else 'Toelichting' }}</label>
|
|
<textarea id="omschrijving" name="omschrijving" placeholder="{{ 'bv. taken voor de klassen staan op Smartschool' if soort == 'afwezigheid' else 'Doel, programma, vervoer, ...' }}">{{ form.get('omschrijving', '') }}</textarea>
|
|
</div>
|
|
|
|
<div class="modal-footer" style="justify-content: space-between">
|
|
<a class="btn btn-ghost" href="{{ url_for('personeel.mijn') }}">Annuleren</a>
|
|
<button type="submit" class="btn-lg">{{ 'Melden' if soort == 'afwezigheid' else 'Aanvraag indienen' }}</button>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function toggleUren() {
|
|
const v = document.querySelector('input[name=dagdeel]:checked').value;
|
|
document.getElementById('urenField').style.display = v === 'uren' ? '' : 'none';
|
|
}
|
|
function syncTot() {
|
|
const van = document.getElementById('van'), tot = document.getElementById('tot');
|
|
if (!tot.value || tot.value < van.value) tot.value = van.value;
|
|
tot.min = van.value;
|
|
}
|
|
function filterKlassen(q) {
|
|
q = q.toLowerCase();
|
|
document.querySelectorAll('#klassen .klas').forEach(k => { k.style.display = k.dataset.k.includes(q) ? '' : 'none'; });
|
|
}
|
|
function telKlassen() {
|
|
const el = document.getElementById('gekozen'); if (!el) return;
|
|
const g = [...document.querySelectorAll('#klassen input:checked')].map(i => i.value);
|
|
el.textContent = g.length ? `Gekozen: ${g.join(', ')}` : '';
|
|
}
|
|
toggleUren(); syncTot(); telKlassen();
|
|
</script>
|
|
{% endblock %}
|