SGR/Pivot
2
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PIVOT 1.1.0

Browse Source
This commit is contained in:
marijn committed 2026-10-14 13:34:37 +02:00
commit 8a53234eb6
161 files changed
+31109
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/gmail_delegatie.html
+273
View File
@@ -0,0 +1,273 @@
{% 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 %}