274 lines
15 KiB
HTML
274 lines
15 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Mailbox-delegatie{% endblock %}
|
||
{% block page_title %}Mailbox-delegatie{% endblock %}
|
||
{% block main_class %}medium{% endblock %}
|
||
{% block loader_text %}Bezig met Google...{% endblock %}
|
||
|
||
{% block extra_css %}
|
||
<style>
|
||
.mailbox-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
|
||
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
|
||
background: var(--primary-light); color: var(--primary-color); font-weight: 800; font-size: 18px; flex-shrink: 0; }
|
||
.mailbox-head .who { flex: 1; min-width: 200px; }
|
||
.mailbox-head .who strong { display: block; font-size: 1.1rem; }
|
||
.counter { font-size: 13px; color: var(--text-muted); }
|
||
.add-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
|
||
.add-form input[type=email] { flex: 1 1 260px; width: auto; }
|
||
.pick-list { list-style: none; margin: 0; padding: 0; }
|
||
.pick-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
|
||
text-decoration: none; color: var(--text); }
|
||
.pick-list a:hover { background: var(--primary-light); }
|
||
.pick-list .ou { color: var(--text-muted); font-size: 13px; }
|
||
.ov-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
|
||
.ov-kop .card-title { margin: 0; }
|
||
.ov-balk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 14px 0 10px; }
|
||
.ov-balk input[type=search] { flex: 0 1 340px; }
|
||
.persoon strong { display: block; font-weight: 600; }
|
||
.persoon span { color: var(--text-muted); font-size: 13px; }
|
||
th.sorteer { cursor: pointer; user-select: none; white-space: nowrap; }
|
||
th.sorteer:hover { color: var(--primary-color); }
|
||
th.sorteer .pijl::after { content: "↕"; opacity: .35; margin-left: 2px; }
|
||
th.sorteer.op .pijl::after { content: "▲"; opacity: 1; }
|
||
th.sorteer.af .pijl::after { content: "▼"; opacity: 1; }
|
||
.tabel-voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
|
||
.paginering { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
|
||
.voortgang { height: 8px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin-top: 8px; }
|
||
.voortgang div { height: 100%; width: 0; background: var(--primary-color); transition: width .4s; }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
{# ---------- Zoeken ---------- #}
|
||
<div class="card">
|
||
<h2 class="card-title">✉️ Welke mailbox?</h2>
|
||
<form class="search-bar" method="GET" action="{{ url_for('gmail_delegatie.overzicht') }}" onsubmit="showLoader()" style="margin:0">
|
||
<input type="text" name="zoek" placeholder="Naam of e-mailadres van de mailbox, bv. secretariaat@..." value="{{ zoek or (mailbox.email if mailbox else '') }}" autofocus>
|
||
<button type="submit">🔍 Zoeken</button>
|
||
</form>
|
||
|
||
{% if zoekresultaten %}
|
||
<p class="muted small" style="margin:14px 0 6px">Kies een mailbox:</p>
|
||
<ul class="pick-list">
|
||
{% for u in zoekresultaten %}
|
||
<li><a href="{{ url_for('gmail_delegatie.overzicht', mailbox=u.email) }}" onclick="showLoader()">
|
||
<span><strong>{{ u.naam }}</strong> · {{ u.email }}</span><span class="ou">{{ u.ou }}</span>
|
||
</a></li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{% if fout %}
|
||
<div class="flash-message error" style="margin-top:20px"><span>{{ fout }}</span></div>
|
||
{% endif %}
|
||
|
||
{# ---------- Gedelegeerden van de gekozen mailbox ---------- #}
|
||
{% if mailbox %}
|
||
<div class="card">
|
||
<div class="mailbox-head">
|
||
<span class="avatar">{{ (mailbox.naam or mailbox.email)[:1]|upper }}</span>
|
||
<div class="who">
|
||
<strong>{{ mailbox.naam or mailbox.email }}</strong>
|
||
<span class="muted">{{ mailbox.email }}{% if mailbox.ou %} · {{ mailbox.ou }}{% endif %}</span>
|
||
{% if mailbox.geschorst %}<span class="badge badge-warning">Geschorst</span>{% endif %}
|
||
</div>
|
||
<span class="counter">{{ delegates|length }} / {{ max_delegates }} gedelegeerden</span>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>Heeft toegang</th><th>Status</th><th class="actions">Actie</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for d in delegates %}
|
||
<tr>
|
||
<td><strong>{{ d.email }}</strong></td>
|
||
<td>
|
||
{% if d.status == 'accepted' %}<span class="badge badge-success">{{ d.status_label }}</span>
|
||
{% elif d.status == 'pending' %}<span class="badge badge-warning">{{ d.status_label }}</span>
|
||
{% else %}<span class="badge">{{ d.status_label }}</span>{% endif %}
|
||
</td>
|
||
<td class="actions">
|
||
<form method="POST" action="{{ url_for('gmail_delegatie.verwijderen') }}"
|
||
onsubmit="if (!confirm('Toegang van {{ d.email }} tot {{ mailbox.email }} intrekken?')) return false; showLoader();">
|
||
<input type="hidden" name="mailbox" value="{{ mailbox.email }}">
|
||
<input type="hidden" name="delegate" value="{{ d.email }}">
|
||
<button type="submit" class="btn-sm btn-danger">✕ Intrekken</button>
|
||
</form>
|
||
</td>
|
||
</tr>
|
||
{% else %}
|
||
<tr class="empty-row"><td colspan="3">Niemand anders heeft toegang tot deze mailbox.</td></tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{% if delegates|length < max_delegates %}
|
||
<form class="add-form" method="POST" action="{{ url_for('gmail_delegatie.toevoegen') }}" onsubmit="showLoader()">
|
||
<input type="hidden" name="mailbox" value="{{ mailbox.email }}">
|
||
<input type="email" name="delegate" required placeholder="E-mailadres van de collega die toegang krijgt">
|
||
<button type="submit" class="btn-success">➕ Toegang geven</button>
|
||
</form>
|
||
<p class="field-hint">Enkel accounts van jullie eigen Google Workspace. De collega ziet de mailbox binnen ongeveer een minuut via het profielmenu in Gmail.</p>
|
||
{% else %}
|
||
<div class="alert alert-warning" style="margin-top:16px">Deze mailbox heeft het maximum van {{ max_delegates }} gedelegeerden bereikt.</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
{# ---------- Alle lopende machtigingen ---------- #}
|
||
<div class="card" id="overzicht">
|
||
<div class="ov-kop">
|
||
<h2 class="card-title">📋 Lopende machtigingen <span class="muted small">({{ machtigingen|length }})</span></h2>
|
||
<form method="POST" action="{{ url_for('gmail_delegatie.overzicht_vernieuwen') }}" style="margin:0">
|
||
<button type="submit" class="btn-light btn-sm" {{ 'disabled' if ov_status.bezig }}>🔄 Vernieuwen</button>
|
||
</form>
|
||
</div>
|
||
<p class="muted small" style="margin:6px 0 0">
|
||
{% if laatst and laatst.Opgehaald %}Alle mailboxen nagekeken op {{ laatst.Opgehaald.strftime('%d-%m-%Y om %H:%M') }}
|
||
({{ laatst.Mailboxen }} mailboxen{% if laatst.Fouten %}, {{ laatst.Fouten }} niet bevraagbaar{% endif %}).
|
||
Wijzigingen via PIVOT staan er meteen in.
|
||
{% else %}Nog niet opgehaald.{% endif %}
|
||
</p>
|
||
{% if ov_fout %}<div class="alert alert-danger" style="margin-top:12px">{{ ov_fout }}</div>{% endif %}
|
||
{% if ov_status.fout and not ov_status.bezig %}<div class="alert alert-danger" style="margin-top:12px">Ophalen mislukt: {{ ov_status.fout }}</div>{% endif %}
|
||
<div id="ovBezig" {{ '' if ov_status.bezig else 'hidden' }} style="margin-top:12px">
|
||
<span class="muted small" id="ovTekst">Mailboxen nakijken...</span>
|
||
<div class="voortgang"><div id="ovBalk"></div></div>
|
||
</div>
|
||
|
||
{% if machtigingen %}
|
||
<div class="ov-balk">
|
||
<input type="search" id="ovZoek" placeholder="Zoek een mailbox of persoon..." aria-label="Zoeken in de machtigingen">
|
||
<span class="per-pagina-plek"></span>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table id="ovTabel">
|
||
<thead>
|
||
<tr>
|
||
<th class="sorteer">Mailbox <span class="pijl"></span></th>
|
||
<th class="sorteer">Heeft toegang <span class="pijl"></span></th>
|
||
<th class="sorteer">Status <span class="pijl"></span></th>
|
||
<th class="actions"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for m in machtigingen %}
|
||
<tr>
|
||
<td class="persoon" data-sort="{{ (m.Mailbox_naam or m.Mailbox)|lower }}"><strong>{{ m.Mailbox_naam or m.Mailbox }}</strong>{% if m.Mailbox_naam %}<span>{{ m.Mailbox }}</span>{% endif %}</td>
|
||
<td class="persoon" data-sort="{{ (m.Gedelegeerde_naam or m.Gedelegeerde)|lower }}"><strong>{{ m.Gedelegeerde_naam or m.Gedelegeerde }}</strong>{% if m.Gedelegeerde_naam %}<span>{{ m.Gedelegeerde }}</span>{% endif %}</td>
|
||
<td data-sort="{{ m.Status or '' }}">
|
||
{% if m.Status == 'accepted' %}<span class="badge badge-success">Actief</span>
|
||
{% elif m.Status == 'pending' %}<span class="badge badge-warning">In afwachting</span>
|
||
{% elif m.Status == 'rejected' %}<span class="badge">Geweigerd</span>
|
||
{% elif m.Status == 'expired' %}<span class="badge">Verlopen</span>
|
||
{% else %}<span class="badge">{{ m.Status or '?' }}</span>{% endif %}
|
||
</td>
|
||
<td class="actions"><a href="{{ url_for('gmail_delegatie.overzicht', mailbox=m.Mailbox) }}" class="btn btn-sm btn-light" onclick="showLoader()">Openen</a></td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="tabel-voet">
|
||
<div class="muted small" id="ovTeller"></div>
|
||
<nav class="paginering" id="ovPaginas" aria-label="Pagina's"></nav>
|
||
</div>
|
||
{% elif laatst and laatst.Opgehaald %}
|
||
<p class="muted" style="margin-top:12px">Er zijn geen lopende machtigingen.</p>
|
||
{% endif %}
|
||
</div>
|
||
|
||
{# ---------- Logboek ---------- #}
|
||
{% if geschiedenis %}
|
||
<div class="card">
|
||
<h3 class="card-title">🕑 {{ 'Wijzigingen voor deze mailbox' if mailbox else 'Recente wijzigingen' }}</h3>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead><tr><th>Tijdstip</th><th>Door</th><th>Actie</th><th>Mailbox</th><th>Gedelegeerde</th></tr></thead>
|
||
<tbody>
|
||
{% for h in geschiedenis %}
|
||
<tr>
|
||
<td class="nowrap">{{ h.Tijdstip.strftime('%d-%m-%Y %H:%M') if h.Tijdstip else '' }}</td>
|
||
<td>{{ h.Gebruiker or '?' }}</td>
|
||
<td>{% if h.Actie == 'toegevoegd' %}<span class="badge badge-success">Toegevoegd</span>{% else %}<span class="badge badge-danger">Ingetrokken</span>{% endif %}</td>
|
||
<td>{{ h.Mailbox }}</td>
|
||
<td>{{ h.Gedelegeerde }}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
// Ophaling op de achtergrond: voortgang tonen en daarna de pagina vernieuwen
|
||
(function () {
|
||
const blok = document.getElementById('ovBezig');
|
||
if (!blok || blok.hidden) return;
|
||
const tekst = document.getElementById('ovTekst'), balk = document.getElementById('ovBalk');
|
||
const kijk = () => fetch({{ url_for('gmail_delegatie.overzicht_status')|tojson }}).then(r => r.json()).then(s => {
|
||
if (s.totaal) {
|
||
tekst.textContent = `Mailboxen nakijken: ${s.voortgang} van ${s.totaal}...`;
|
||
balk.style.width = Math.round(100 * s.voortgang / s.totaal) + '%';
|
||
}
|
||
if (s.bezig) setTimeout(kijk, 2000);
|
||
else location.reload();
|
||
}).catch(() => setTimeout(kijk, 5000));
|
||
kijk();
|
||
})();
|
||
|
||
// Tabel: zoeken, sorteren en pagineren
|
||
(function () {
|
||
const tabel = document.getElementById('ovTabel');
|
||
if (!tabel) return;
|
||
const body = tabel.tBodies[0], zoekveld = document.getElementById('ovZoek');
|
||
let PER_PAGINA = perPagina('gmail-machtigingen'), pagina = 1, zoek = '';
|
||
function toon() {
|
||
const rijen = Array.from(body.rows).filter(tr => !zoek || tr.textContent.toLowerCase().includes(zoek));
|
||
const grootte = PER_PAGINA || Infinity, paginas = Math.max(1, Math.ceil(rijen.length / grootte));
|
||
pagina = Math.min(Math.max(1, pagina), paginas);
|
||
const van = PER_PAGINA ? (pagina - 1) * PER_PAGINA : 0, tot = van + grootte;
|
||
Array.from(body.rows).forEach(tr => tr.style.display = 'none');
|
||
rijen.forEach((tr, i) => tr.style.display = (i >= van && i < tot) ? '' : 'none');
|
||
document.getElementById('ovTeller').textContent = rijen.length
|
||
? `${van + 1}–${Math.min(tot, rijen.length)} van ${rijen.length}` : 'Niets gevonden';
|
||
const nav = document.getElementById('ovPaginas');
|
||
nav.innerHTML = '';
|
||
if (paginas <= 1) return;
|
||
const knop = (label, p, actief) => {
|
||
const b = document.createElement('button');
|
||
b.type = 'button'; b.textContent = label; b.className = 'btn-sm ' + (actief ? 'btn-secondary' : 'btn-light');
|
||
b.onclick = () => { pagina = p; toon(); };
|
||
nav.appendChild(b);
|
||
};
|
||
if (pagina > 1) { knop('«', 1); knop('‹ Vorige', pagina - 1); }
|
||
for (let p = Math.max(1, pagina - 2); p <= Math.min(paginas, pagina + 2); p++) knop(String(p), p, p === pagina);
|
||
if (pagina < paginas) { knop('Volgende ›', pagina + 1); knop('»', paginas); }
|
||
}
|
||
zoekveld.addEventListener('input', () => { zoek = zoekveld.value.trim().toLowerCase(); pagina = 1; toon(); });
|
||
let kol = null, op = true;
|
||
tabel.querySelectorAll('th.sorteer').forEach(th => th.addEventListener('click', () => {
|
||
const k = th.cellIndex;
|
||
op = kol === k ? !op : true;
|
||
kol = k;
|
||
tabel.querySelectorAll('th.sorteer').forEach(x => x.classList.remove('op', 'af'));
|
||
th.classList.add(op ? 'op' : 'af');
|
||
Array.from(body.rows).sort((a, b) => {
|
||
const c = (a.cells[k].dataset.sort || '').localeCompare(b.cells[k].dataset.sort || '', 'nl', { numeric: true, sensitivity: 'base' });
|
||
return op ? c : -c;
|
||
}).forEach(tr => body.appendChild(tr));
|
||
pagina = 1; toon();
|
||
}));
|
||
perPaginaKiezer(document.querySelector('#overzicht .per-pagina-plek'), 'gmail-machtigingen', n => { PER_PAGINA = n; pagina = 1; toon(); });
|
||
toon();
|
||
})();
|
||
</script>
|
||
{% endblock %}
|