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>
135 lines
8.3 KiB
HTML
135 lines
8.3 KiB
HTML
{% extends "base.html" %}
|
||
{% from "_personeel.html" import subnav, status_badge, soort_label with context %}
|
||
|
||
{% block title %}Dagoverzicht{% endblock %}
|
||
{% block page_title %}Dagoverzicht secretariaat{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.nav-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
|
||
.nav-bar .date-title { font-size: 1.25rem; font-weight: 700; margin: 0 8px; }
|
||
.nav-bar form { display: flex; gap: 6px; margin: 0; }
|
||
.nav-bar input[type=date] { width: auto; }
|
||
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
|
||
.seg a { padding: 8px 14px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; background: var(--surface); }
|
||
.seg a.on { background: var(--primary-color); color: #fff; }
|
||
.day { margin-bottom: 20px; }
|
||
.day-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
|
||
.day-head h3 { margin: 0; text-transform: capitalize; }
|
||
.day-head.today h3::after { content: "vandaag"; margin-left: 8px; font-size: 12px; font-weight: 700; color: #fff; background: var(--primary-color); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
|
||
.cols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
|
||
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
|
||
.cols .card + .card { margin-top: 0; }
|
||
.card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
|
||
.person { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
||
.person:last-child { border-bottom: 0; }
|
||
.person .nm { font-weight: 700; }
|
||
.person .what { font-size: 13px; color: var(--text-muted); }
|
||
.person .right { text-align: right; }
|
||
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
|
||
.chips span { padding: 1px 8px; border-radius: 999px; background: var(--primary-light); color: var(--primary-color); font-size: 12px; font-weight: 600; }
|
||
.klas-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
|
||
.klas-row:last-child { border-bottom: 0; }
|
||
.klas-row .k { font-weight: 800; font-size: 1.05rem; min-width: 60px; }
|
||
.empty { color: var(--text-muted); padding: 6px 0; }
|
||
.pending { margin-top: 10px; font-size: 13px; color: var(--text-muted); }
|
||
.vv-form { display: inline; }
|
||
@media print {
|
||
.tabs, .nav-bar form, .seg, .vv-form button, .pending { display: none !important; }
|
||
.card { break-inside: avoid; }
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{{ subnav('dagoverzicht') }}
|
||
|
||
<div class="nav-bar">
|
||
<a class="btn btn-light" href="{{ url_for('personeel.dagoverzicht', datum=vorige.isoformat(), weergave=weergave) }}">‹</a>
|
||
<a class="btn btn-light" href="{{ url_for('personeel.dagoverzicht', weergave=weergave) }}">Vandaag</a>
|
||
<a class="btn btn-light" href="{{ url_for('personeel.dagoverzicht', datum=volgende.isoformat(), weergave=weergave) }}">›</a>
|
||
<span class="date-title">
|
||
{% if weergave == 'week' %}Week van {{ van.strftime('%d/%m') }} tot {{ tot.strftime('%d/%m/%Y') }}{% else %}{{ dag.strftime('%d/%m/%Y') }}{% endif %}
|
||
</span>
|
||
<span class="seg">
|
||
<a class="{{ 'on' if weergave == 'dag' }}" href="{{ url_for('personeel.dagoverzicht', datum=dag.isoformat(), weergave='dag') }}">Dag</a>
|
||
<a class="{{ 'on' if weergave == 'week' }}" href="{{ url_for('personeel.dagoverzicht', datum=dag.isoformat(), weergave='week') }}">Week</a>
|
||
</span>
|
||
<form method="GET" action="{{ url_for('personeel.dagoverzicht') }}">
|
||
<input type="hidden" name="weergave" value="{{ weergave }}">
|
||
<input type="date" name="datum" value="{{ dag.isoformat() }}" onchange="this.form.submit()">
|
||
</form>
|
||
<span style="flex:1"></span>
|
||
<a class="btn btn-light" href="{{ url_for('personeel.nieuw', soort='afwezigheid') }}">➕ Afwezigheid melden</a>
|
||
<button type="button" class="btn-light" onclick="window.print()">🖨️ Afdrukken</button>
|
||
</div>
|
||
|
||
{% set weekdagen = ['maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag','zondag'] %}
|
||
{% for d in dagen %}
|
||
<div class="day">
|
||
<div class="day-head {{ 'today' if d.datum == vandaag }}">
|
||
<h3>{{ weekdagen[d.datum.weekday()] }} {{ d.datum.strftime('%d/%m') }}</h3>
|
||
<span class="muted small">{{ d.personen|length }} afwezig · {{ d.klassen|length }} klas(sen) weg
|
||
{% if d.open_vervanging %} · <strong style="color:var(--warning-text)">{{ d.open_vervanging }} vervanging(en) te regelen</strong>{% endif %}</span>
|
||
</div>
|
||
<div class="cols">
|
||
<div class="card">
|
||
<h4>👤 Afwezige personeelsleden</h4>
|
||
{% for p in d.personen %}
|
||
{% set i = p.item %}
|
||
<div class="person">
|
||
<div>
|
||
<div class="nm">{{ p.naam }}</div>
|
||
<div class="what">
|
||
{% if p.rol == 'begeleider' %}🚌 begeleider uitstap "{{ i.Titel }}" ({{ i.Naam }})
|
||
{% else %}{{ soort_label(i.Soort) }}{% if i.Soort != 'afwezigheid' %}: {{ i.Titel }}{% endif %}{% endif %}
|
||
· {{ DAGDELEN.get(i.Dagdeel) }}{% if i.Dagdeel == 'uren' and i.Lesuren %} ({{ i.Lesuren }}){% endif %}
|
||
</div>
|
||
{% if p.rol != 'begeleider' and i.Soort != 'uitstap' and i.Klassen %}
|
||
<div class="chips">{% for k in i.Klassen.split(',') %}<span>{{ k.strip() }}</span>{% endfor %}</div>
|
||
{% endif %}
|
||
{% if p.rol != 'begeleider' and i.Soort == 'afwezigheid' and i.Omschrijving %}<div class="what" style="margin-top:4px">💬 {{ i.Omschrijving }}</div>{% endif %}
|
||
</div>
|
||
<div class="right">
|
||
{% if p.rol != 'begeleider' and i.Soort != 'uitstap' and i.Klassen %}
|
||
<form class="vv-form" method="POST" action="{{ url_for('personeel.vervanging', aid=i.ID) }}">
|
||
<input type="hidden" name="terug" value="{{ request.full_path }}">
|
||
<input type="hidden" name="info" value="{{ i.Vervanging_info or '' }}">
|
||
{% if i.Vervanging_ok %}
|
||
<span class="badge badge-success">✓ Vervanging</span>
|
||
<button type="submit" name="ok" value="0" class="btn-ghost btn-sm" title="Terug op 'te regelen' zetten">↺</button>
|
||
{% else %}
|
||
<span class="badge badge-warning">Vervanging te regelen</span>
|
||
<button type="submit" name="ok" value="1" class="btn-light btn-sm" title="Markeer als geregeld">✓ Geregeld</button>
|
||
{% endif %}
|
||
</form>
|
||
{% endif %}
|
||
<div><a class="small" href="{{ url_for('personeel.detail', aid=i.ID) }}">details</a></div>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="empty">Niemand afwezig. 🎉</div>
|
||
{% endfor %}
|
||
</div>
|
||
<div class="card">
|
||
<h4>🚌 Klassen weg</h4>
|
||
{% for k in d.klassen %}
|
||
<div class="klas-row">
|
||
<span class="k">{{ k.klas }}</span>
|
||
<span class="muted small" style="flex:1">{{ k.item.Titel }}{% if k.item.Locatie %} · {{ k.item.Locatie }}{% endif %}<br>
|
||
{{ DAGDELEN.get(k.item.Dagdeel) }}{% if k.item.Dagdeel == 'uren' and k.item.Lesuren %} ({{ k.item.Lesuren }}){% endif %} · {{ k.item.Naam }}</span>
|
||
</div>
|
||
{% else %}
|
||
<div class="empty">Geen klassen weg.</div>
|
||
{% endfor %}
|
||
{% if d.wachtend %}
|
||
<div class="pending">⏳ Nog niet goedgekeurd:
|
||
{% for w in d.wachtend %}<a href="{{ url_for('personeel.detail', aid=w.ID) }}">{{ SOORTEN[w.Soort].icoon }} {{ w.Naam }} – {{ w.Titel }}</a>{{ ', ' if not loop.last }}{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% endblock %}
|