imap-mail-filter-service/app/templates/dashboard.html

106 lines
3.5 KiB
HTML

{% extends "base.html" %}
{% block title %}Dashboard — IMAP Mail Filter{% endblock %}
{% block content %}
<h1>Dashboard</h1>
{% if accounts %}
<div class="grid">
{% for acc in accounts %}
<article>
<header>
<hgroup>
<h3>{{ acc.name }}</h3>
<p>{{ acc.username }}@{{ acc.imap_host }}</p>
</hgroup>
</header>
<p>
<strong>Status:</strong>
{% if acc.enabled %}
<ins>Aktiv</ins>
{% else %}
<del>Deaktiviert</del>
{% endif %}
</p>
<p><strong>Polling:</strong> alle {{ acc.poll_interval_seconds }}s</p>
<p><strong>Letzter Poll:</strong> {{ acc.last_poll_at or "Noch nie" }}</p>
<p><strong>Filterregeln:</strong> {{ acc.filter_rule_count }}</p>
<p><strong>Verarbeitet:</strong> <span id="processed-{{ acc.id }}">...</span> Mails</p>
<footer>
<div role="group">
<button class="outline" onclick="pollNow({{ acc.id }})">Jetzt prüfen</button>
<button class="outline" onclick="testConnection({{ acc.id }})">Verbindungstest</button>
<button class="outline contrast" onclick="resetProcessed({{ acc.id }}, '{{ acc.name }}')">Zurücksetzen</button>
</div>
</footer>
</article>
{% endfor %}
</div>
{% else %}
<article>
<p>Noch keine Konten eingerichtet. <a href="/accounts/new">Konto hinzufügen</a></p>
</article>
{% endif %}
<div id="status-message" style="display:none"></div>
{% endblock %}
{% block scripts %}
<script>
async function pollNow(accountId) {
const msg = document.getElementById('status-message');
msg.style.display = 'block';
msg.textContent = 'Polling läuft...';
msg.setAttribute('role', 'status');
try {
const resp = await fetch(`/api/accounts/${accountId}/poll-now`, {method: 'POST'});
const data = await resp.json();
msg.textContent = data.message;
setTimeout(() => location.reload(), 1500);
} catch(e) {
msg.textContent = 'Fehler: ' + e.message;
}
}
async function testConnection(accountId) {
const msg = document.getElementById('status-message');
msg.style.display = 'block';
msg.textContent = 'Teste Verbindung...';
try {
const resp = await fetch(`/api/accounts/${accountId}/test`, {method: 'POST'});
const data = await resp.json();
msg.textContent = data.message;
} catch(e) {
msg.textContent = 'Fehler: ' + e.message;
}
}
async function resetProcessed(accountId, name) {
if (!confirm(`Verarbeitung für "${name}" zurücksetzen?\n\nAlle Mails werden beim nächsten Poll erneut gegen die Filterregeln geprüft.`)) return;
const msg = document.getElementById('status-message');
msg.style.display = 'block';
try {
const resp = await fetch(`/api/accounts/${accountId}/processed`, {method: 'DELETE'});
const data = await resp.json();
msg.textContent = data.message;
loadProcessedCounts();
} catch(e) {
msg.textContent = 'Fehler: ' + e.message;
}
}
async function loadProcessedCounts() {
{% for acc in accounts %}
fetch(`/api/accounts/{{ acc.id }}/processed`)
.then(r => r.json())
.then(d => {
const el = document.getElementById('processed-{{ acc.id }}');
if (el) el.textContent = d.processed_count;
})
.catch(() => {});
{% endfor %}
}
loadProcessedCounts();
</script>
{% endblock %}