130 lines
6 KiB
HTML
130 lines
6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ folder.display_name or folder.name }} - {{ account.email }}{% endblock %}
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<a href="{{ url_for('outlook_pages.account_detail', account_id=account.id) }}" class="btn btn-outline-secondary btn-sm">
|
|
<i class="bi bi-arrow-left"></i> Retour aux dossiers
|
|
</a>
|
|
<h4 class="d-inline ms-3">
|
|
{% if folder.folder_type == 'inbox' %}
|
|
<i class="bi bi-inbox"></i>
|
|
{% elif folder.folder_type == 'sentitems' %}
|
|
<i class="bi bi-send"></i>
|
|
{% elif folder.folder_type == 'drafts' %}
|
|
<i class="bi bi-file-earmark"></i>
|
|
{% elif folder.folder_type == 'deleteditems' %}
|
|
<i class="bi bi-trash"></i>
|
|
{% elif folder.folder_type == 'junkemail' %}
|
|
<i class="bi bi-exclamation-triangle"></i>
|
|
{% else %}
|
|
<i class="bi bi-folder"></i>
|
|
{% endif %}
|
|
{{ folder.display_name or folder.name }}
|
|
</h4>
|
|
{% if unread_count > 0 %}
|
|
<span class="badge bg-primary ms-2">{{ unread_count }} non lus</span>
|
|
{% endif %}
|
|
<small class="text-muted ms-2">({{ folder.total_items }} messages dans le dossier)</small>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button id="sync-btn" class="btn btn-primary btn-sm" onclick="syncMails()">
|
|
<i class="bi bi-arrow-clockwise"></i> Synchroniser
|
|
</button>
|
|
<button class="btn btn-outline-primary btn-sm" onclick="syncMails(500)">
|
|
<i class="bi bi-arrow-down"></i> + de messages
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sync-status" class="mb-3" style="display:none;"></div>
|
|
|
|
{% if mails %}
|
|
<div class="list-group">
|
|
{% for mail in mails %}
|
|
<a href="{{ url_for('outlook_pages.mail_view', account_id=account.id, mail_id=mail.id) }}"
|
|
class="list-group-item list-group-item-action {% if not mail.is_read %}list-group-item-info{% endif %}">
|
|
<div class="d-flex justify-content-between">
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex align-items-center mb-1">
|
|
{% if not mail.is_read %}
|
|
<span class="badge bg-primary me-2">Nouveau</span>
|
|
{% endif %}
|
|
{% if mail.importance == 'high' %}
|
|
<i class="bi bi-exclamation-circle text-danger me-2" title="Priorité haute"></i>
|
|
{% endif %}
|
|
<strong>{{ mail.from_name or mail.from_email or 'Inconnu' }}</strong>
|
|
{% if mail.has_attachments %}
|
|
<i class="bi bi-paperclip ms-2 text-muted" title="Pièce(s) jointe(s)"></i>
|
|
{% endif %}
|
|
</div>
|
|
<h6 class="mb-1 {% if not mail.is_read %}fw-bold{% endif %}">
|
|
{{ mail.subject or '(sans sujet)' }}
|
|
</h6>
|
|
<p class="mb-1 text-muted small">
|
|
{{ mail.body_preview[:150] }}{% if mail.body_preview|length > 150 %}...{% endif %}
|
|
</p>
|
|
</div>
|
|
<small class="text-muted text-end" style="min-width: 100px;">
|
|
{{ mail.received_at.strftime('%d/%m/%Y') if mail.received_at else '-' }}<br>
|
|
{{ mail.received_at.strftime('%H:%M') if mail.received_at else '' }}
|
|
</small>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="card">
|
|
<div class="card-body text-center text-muted py-5">
|
|
<i class="bi bi-inbox display-4"></i>
|
|
<p class="mt-3">Ce dossier est vide</p>
|
|
<button class="btn btn-primary" onclick="syncMails()">
|
|
<i class="bi bi-arrow-clockwise"></i> Synchroniser les emails
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function syncMails(maxMessages) {
|
|
maxMessages = maxMessages || 200;
|
|
const btn = document.getElementById('sync-btn');
|
|
const status = document.getElementById('sync-status');
|
|
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Synchronisation...';
|
|
|
|
status.className = 'alert alert-info mb-3';
|
|
status.style.display = 'block';
|
|
status.innerHTML = '<i class="bi bi-hourglass-split"></i> Récupération des emails...';
|
|
|
|
fetch('/outlook/api/sync-mails/{{ account.id }}/{{ folder.folder_id }}?max=' + maxMessages, {method: 'POST'})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
status.className = data.skipped ? 'alert alert-warning mb-3' : 'alert alert-success mb-3';
|
|
let msg = data.message || 'Emails synchronisés';
|
|
if (data.total) {
|
|
msg += ' <strong>(' + data.total + ' messages)</strong>';
|
|
}
|
|
if (data.warning) msg += '<br>' + data.warning;
|
|
status.innerHTML = '<i class="bi bi-check-circle"></i> ' + msg;
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
} else {
|
|
status.className = 'alert alert-danger mb-3';
|
|
status.innerHTML = '<i class="bi bi-exclamation-triangle"></i> ' + (data.error || 'Erreur de synchronisation');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
status.className = 'alert alert-danger mb-3';
|
|
status.innerHTML = '<i class="bi bi-exclamation-triangle"></i> Erreur: ' + error.message;
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Synchroniser';
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|