79 lines
3.2 KiB
HTML
79 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Emails Outlook{% endblock %}
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h3 mb-0">Emails de {{ account.email }}</h1>
|
|
<div>
|
|
<button id="sync-btn" class="btn btn-primary" onclick="syncMails()">
|
|
<i class="bi bi-arrow-clockwise"></i> Synchroniser
|
|
</button>
|
|
<a href="{{ url_for('outlook_pages.index') }}" class="btn btn-secondary">Retour</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="sync-status" class="mb-3" style="display:none;"></div>
|
|
|
|
{% if mails %}
|
|
<div class="list-group">
|
|
{% for mail in mails %}
|
|
<div class="list-group-item {% if not mail.is_read %}list-group-item-info{% endif %}">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<h5 class="mb-1">{{ mail.subject or '(sans sujet)' }}</h5>
|
|
<p class="mb-1 text-muted">
|
|
<strong>De:</strong> {{ mail.from_name or mail.sender_email or 'Inconnu' }}
|
|
{% if mail.from_email %}<{{ mail.from_email }}>{% endif %}
|
|
</p>
|
|
<small class="text-muted">{{ mail.received_at|datetime_fmt if mail.received_at else '-' }}</small>
|
|
</div>
|
|
{% if mail.has_attachments %}
|
|
<span class="badge bg-secondary"><i class="bi bi-paperclip"></i></span>
|
|
{% endif %}
|
|
</div>
|
|
<p class="mt-2 mb-0">{{ mail.body_preview[:200] }}{% if mail.body_preview|length > 200 %}...{% endif %}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle"></i> Aucun email synchronisé. Cliquez sur "Synchroniser" pour récupérer vos emails.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function syncMails() {
|
|
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 = 'Synchronisation en cours...';
|
|
|
|
fetch('/outlook/api/sync-mails/{{ account.id }}', {method: 'POST'})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
status.className = 'alert alert-success mb-3';
|
|
status.innerHTML = data.message || 'Synchronisation réussie';
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
} else {
|
|
status.className = 'alert alert-danger mb-3';
|
|
status.innerHTML = data.error || 'Erreur de synchronisation';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
status.className = 'alert alert-danger mb-3';
|
|
status.innerHTML = 'Erreur: ' + error.message;
|
|
})
|
|
.finally(() => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Synchroniser';
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|