53 lines
2.0 KiB
HTML
53 lines
2.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Уведомления — InfoUser Monitor{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2>Уведомления</h2>
|
|
<div class="d-flex gap-2">
|
|
<a href="/" class="btn btn-outline-secondary btn-sm">← Назад</a>
|
|
<button id="mark-all-read" class="btn btn-outline-primary btn-sm">Прочитать все</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="notifications-list">
|
|
{% if notifications %}
|
|
{% for n in notifications %}
|
|
<div class="card mb-2 notification-card {% if not n.is_read %}border-start border-danger border-4{% endif %}" data-id="{{ n.id }}">
|
|
<div class="card-body d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="card-title mb-1">{{ n.title }}</h6>
|
|
<p class="card-text mb-1 text-muted small">{{ n.message }}</p>
|
|
<p class="card-text"><small class="text-muted">{{ n.sent_at.strftime('%Y-%m-%d %H:%M') if n.sent_at else '-' }}</small></p>
|
|
</div>
|
|
{% if not n.is_read %}
|
|
<button class="btn btn-sm btn-outline-success mark-read" data-id="{{ n.id }}">Прочитать</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="alert alert-info">Уведомлений пока нет.</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
async function markRead(id) {
|
|
const res = await fetch(`/api/notifications/${id}/read`, { method: 'POST', credentials: 'include' });
|
|
if (res.ok) location.reload();
|
|
}
|
|
|
|
document.querySelectorAll('.mark-read').forEach(btn => {
|
|
btn.addEventListener('click', () => markRead(btn.dataset.id));
|
|
});
|
|
|
|
document.getElementById('mark-all-read')?.addEventListener('click', async () => {
|
|
const res = await fetch('/api/notifications/read-all', { method: 'POST', credentials: 'include' });
|
|
if (res.ok) location.reload();
|
|
});
|
|
</script>
|
|
{% endblock %}
|