135 lines
8.1 KiB
HTML
135 lines
8.1 KiB
HTML
{% extends "base.html" %}
|
||
{% from "_personeel.html" import subnav, status_badge, soort_label, periode with context %}
|
||
|
||
{% block title %}{{ SOORTEN[item.Soort].label }} – {{ item.Naam }}{% endblock %}
|
||
{% block page_title %}{{ SOORTEN[item.Soort].icoon }} {{ SOORTEN[item.Soort].label }}{% endblock %}
|
||
{% block main_class %}medium{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
|
||
.detail-head h2 { margin: 0 0 4px; }
|
||
dl.facts { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; }
|
||
dl.facts dt { color: var(--text-muted); font-size: 14px; }
|
||
dl.facts dd { margin: 0; font-weight: 500; }
|
||
@media (max-width: 560px) { dl.facts { grid-template-columns: 1fr; gap: 2px; } dl.facts dd { margin-bottom: 8px; } }
|
||
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
|
||
.chips span { padding: 2px 10px; border-radius: 999px; background: var(--primary-light); color: var(--primary-color); font-size: 13px; font-weight: 600; }
|
||
.timeline { list-style: none; margin: 0; padding: 0; }
|
||
.timeline li { position: relative; padding: 0 0 18px 28px; }
|
||
.timeline li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
|
||
.timeline li:last-child::before { display: none; }
|
||
.timeline .dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--border-strong); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--border); }
|
||
.timeline .dot.goedgekeurd { background: var(--success); } .timeline .dot.geweigerd { background: var(--danger); }
|
||
.timeline .dot.vraag { background: #f59e0b; } .timeline .dot.antwoord, .timeline .dot.commentaar { background: var(--primary-color); }
|
||
.timeline .who { font-weight: 600; } .timeline .when { color: var(--text-muted); font-size: 13px; }
|
||
.timeline .txt { margin-top: 4px; padding: 8px 12px; background: var(--surface-muted); border-radius: var(--radius-sm); white-space: pre-line; }
|
||
.decision-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.panel { border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
|
||
.panel.directie { border-color: #fde68a; background: #fffdf3; }
|
||
.panel.vraag { border-color: #fde68a; background: #fffbeb; }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{{ subnav('') }}
|
||
|
||
<div class="card">
|
||
<div class="detail-head">
|
||
<div>
|
||
<h2>{{ item.Titel }}</h2>
|
||
<div class="muted">{{ item.Naam or item.Email }}{% if item.Ingediend_door %} · gemeld door {{ item.Ingediend_door }}{% endif %}</div>
|
||
</div>
|
||
<div>{{ status_badge(item.Status) }}</div>
|
||
</div>
|
||
<dl class="facts">
|
||
<dt>Soort</dt><dd>{{ soort_label(item.Soort) }}</dd>
|
||
<dt>Wanneer</dt><dd>{{ periode(item) }}</dd>
|
||
{% if item.Locatie %}<dt>Locatie</dt><dd>{{ item.Locatie }}</dd>{% endif %}
|
||
{% if item.Klassen %}<dt>{{ 'Klassen mee' if item.Soort == 'uitstap' else 'Klassen' }}</dt>
|
||
<dd><div class="chips">{% for k in item.Klassen.split(',') %}<span>{{ k.strip() }}</span>{% endfor %}</div></dd>{% endif %}
|
||
{% if item.Begeleiders %}<dt>Begeleiders</dt><dd>{{ item.Begeleiders }}</dd>{% endif %}
|
||
{% if item.Kost %}<dt>Kost</dt><dd>€ {{ '%.2f'|format(item.Kost)|replace('.', ',') }}</dd>{% endif %}
|
||
{% if item.Omschrijving %}<dt>{{ 'Opmerking' if item.Soort == 'afwezigheid' else 'Toelichting' }}</dt><dd style="white-space:pre-line">{{ item.Omschrijving }}</dd>{% endif %}
|
||
{% if 'secretariaat' in p_rollen and item.Klassen and item.Soort != 'uitstap' %}
|
||
<dt>Vervanging</dt>
|
||
<dd>{% if item.Vervanging_ok %}<span class="badge badge-success">✓ Geregeld</span>{% else %}<span class="badge badge-warning">Nog te regelen</span>{% endif %}
|
||
{% if item.Vervanging_info %}<span class="muted"> · {{ item.Vervanging_info }}</span>{% endif %}</dd>
|
||
{% endif %}
|
||
</dl>
|
||
</div>
|
||
|
||
{# ---------- Directie: beslissen ---------- #}
|
||
{% if 'directie' in p_rollen and SOORTEN[item.Soort].goedkeuring and item.Status in ('ingediend', 'vraag') %}
|
||
<div class="card panel directie">
|
||
<h3 class="card-title">Beslissing directie</h3>
|
||
{% if item.Status == 'vraag' %}<p class="muted small">Je hebt een vraag gesteld; de leerkracht heeft nog niet geantwoord. Je kan toch al beslissen.</p>{% endif %}
|
||
<form method="POST" action="{{ url_for('personeel.beslissing', aid=item.ID) }}" onsubmit="showLoader()">
|
||
<div class="field">
|
||
<label for="tekst">Commentaar <span class="muted">(verplicht bij weigeren of vraag)</span></label>
|
||
<textarea id="tekst" name="tekst" placeholder="bv. Akkoord, graag verslag op de personeelsvergadering."></textarea>
|
||
</div>
|
||
<div class="decision-buttons">
|
||
<button type="submit" name="actie" value="goedgekeurd" class="btn-success">✓ Goedkeuren</button>
|
||
<button type="submit" name="actie" value="vraag" class="btn-warning">❓ Vraag stellen</button>
|
||
<button type="submit" name="actie" value="geweigerd" class="btn-danger">✕ Weigeren</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# ---------- Leerkracht: antwoorden op vraag ---------- #}
|
||
{% if is_eigenaar and item.Status == 'vraag' %}
|
||
<div class="card panel vraag">
|
||
<h3 class="card-title">❓ De directie heeft een vraag</h3>
|
||
<form method="POST" action="{{ url_for('personeel.antwoord', aid=item.ID) }}" onsubmit="showLoader()">
|
||
<div class="field"><textarea name="tekst" required placeholder="Je antwoord..."></textarea></div>
|
||
<button type="submit">Antwoord versturen</button>
|
||
</form>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# ---------- Secretariaat: vervanging ---------- #}
|
||
{% if 'secretariaat' in p_rollen and item.Status in ('gemeld', 'goedgekeurd') and item.Soort != 'uitstap' %}
|
||
<div class="card">
|
||
<h3 class="card-title">🔁 Vervanging</h3>
|
||
<form method="POST" action="{{ url_for('personeel.vervanging', aid=item.ID) }}" class="search-bar" style="margin:0">
|
||
<input type="text" name="info" value="{{ item.Vervanging_info or '' }}" placeholder="bv. 3A studie, 4B les door Jan">
|
||
<button type="submit" name="ok" value="1" class="btn-success">✓ Geregeld</button>
|
||
{% if item.Vervanging_ok %}<button type="submit" name="ok" value="0" class="btn-light">Nog niet geregeld</button>{% endif %}
|
||
</form>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# ---------- Verloop + commentaar ---------- #}
|
||
<div class="card">
|
||
<h3 class="card-title">Verloop</h3>
|
||
<ul class="timeline">
|
||
{% set labels = {'ingediend': 'diende de aanvraag in', 'gemeld': 'meldde de afwezigheid', 'goedgekeurd': 'keurde goed',
|
||
'geweigerd': 'weigerde', 'vraag': 'stelde een vraag', 'antwoord': 'antwoordde',
|
||
'commentaar': 'schreef', 'geannuleerd': 'annuleerde', 'vervanging': 'vervanging'} %}
|
||
{% for r in reacties %}
|
||
<li>
|
||
<span class="dot {{ r.Actie }}"></span>
|
||
<span class="who">{{ r.Naam or r.Email or '?' }}</span> {{ labels.get(r.Actie, r.Actie) }}
|
||
<span class="when"> · {{ r.Tijdstip.strftime('%d/%m %H:%M') }}</span>
|
||
{% if r.Tekst %}<div class="txt">{{ r.Tekst }}</div>{% endif %}
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% if item.Status not in ('geannuleerd',) %}
|
||
<form method="POST" action="{{ url_for('personeel.commentaar', aid=item.ID) }}" class="search-bar" style="margin: 6px 0 0">
|
||
<input type="text" name="tekst" placeholder="Opmerking toevoegen..." required>
|
||
<button type="submit" class="btn-light">Toevoegen</button>
|
||
</form>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if (is_eigenaar or 'secretariaat' in p_rollen) and item.Status not in ('geannuleerd', 'geweigerd') and item.Tot_datum >= vandaag %}
|
||
<form method="POST" action="{{ url_for('personeel.annuleren', aid=item.ID) }}" style="text-align:right"
|
||
onsubmit="return confirm('Deze {{ SOORTEN[item.Soort].label|lower }} annuleren?')">
|
||
<button type="submit" class="btn-link">{{ 'Afwezigheid intrekken' if item.Soort == 'afwezigheid' else 'Aanvraag annuleren' }}</button>
|
||
</form>
|
||
{% endif %}
|
||
{% endblock %}
|