218 lines
10 KiB
HTML
218 lines
10 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Notification Details" %} - ATS{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
|
<i class="fas fa-bell me-2"></i>
|
|
{% trans "Notification Details" %}
|
|
</h1>
|
|
<p class="text-muted mb-0">{% trans "View notification details and manage your preferences" %}</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<a href="{% url 'notification_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Notifications" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- Notification Header -->
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge bg-{{ notification.get_status_bootstrap_class }} me-2">
|
|
{{ notification.get_status_display }}
|
|
</span>
|
|
<span class="badge bg-secondary me-2">
|
|
{{ notification.get_notification_type_display }}
|
|
</span>
|
|
<small class="text-muted">
|
|
<i class="fas fa-clock me-1"></i>
|
|
{{ notification.created_at|date:"Y-m-d H:i:s" }}
|
|
</small>
|
|
</div>
|
|
<h4 class="mb-3">{{ notification.message|linebreaksbr }}</h4>
|
|
</div>
|
|
<div class="d-flex flex-column gap-2">
|
|
{% if notification.status == 'PENDING' %}
|
|
<a href="{% url 'notification_mark_read' notification.id %}" class="btn btn-success">
|
|
<i class="fas fa-check me-1"></i> {% trans "Mark as Read" %}
|
|
</a>
|
|
{% else %}
|
|
<a href="{% url 'notification_mark_unread' notification.id %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-envelope me-1"></i> {% trans "Mark as Unread" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Content -->
|
|
<div class="notification-content">
|
|
{% if notification.related_meeting %}
|
|
<div class="alert alert-info">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-video me-2"></i>{% trans "Related Meeting" %}
|
|
</h6>
|
|
<p class="mb-2">
|
|
<strong>{% trans "Topic:" %}</strong> {{ notification.related_meeting.topic }}
|
|
</p>
|
|
<p class="mb-2">
|
|
<strong>{% trans "Start Time:" %}</strong> {{ notification.related_meeting.start_time|date:"Y-m-d H:i" }}
|
|
</p>
|
|
<p class="mb-0">
|
|
<strong>{% trans "Duration:" %}</strong> {{ notification.related_meeting.duration }} {% trans "minutes" %}
|
|
</p>
|
|
<div class="mt-3">
|
|
<a href="{% url 'meeting_details' notification.related_meeting.slug %}" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-external-link-alt me-1"></i> {% trans "View Meeting" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if notification.scheduled_for and notification.scheduled_for != notification.created_at %}
|
|
<div class="alert alert-warning">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-calendar-alt me-2"></i>{% trans "Scheduled For" %}
|
|
</h6>
|
|
<p class="mb-0">
|
|
{{ notification.scheduled_for|date:"Y-m-d H:i:s" }}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if notification.attempts > 1 %}
|
|
<div class="alert alert-warning">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-redo me-2"></i>{% trans "Delivery Attempts" %}
|
|
</h6>
|
|
<p class="mb-0">
|
|
{% blocktrans count count=notification.attempts %}
|
|
This notification has been attempted {{ count }} time.
|
|
{% plural %}
|
|
This notification has been attempted {{ count }} times.
|
|
{% endblocktrans %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if notification.last_error %}
|
|
<div class="alert alert-danger">
|
|
<h6 class="alert-heading">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>{% trans "Last Error" %}
|
|
</h6>
|
|
<p class="mb-0">
|
|
<code>{{ notification.last_error }}</code>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<!-- Notification Actions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">{% trans "Actions" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
{% if notification.status == 'PENDING' %}
|
|
<a href="{% url 'notification_mark_read' notification.id %}" class="btn btn-success">
|
|
<i class="fas fa-check me-1"></i> {% trans "Mark as Read" %}
|
|
</a>
|
|
{% else %}
|
|
<a href="{% url 'notification_mark_unread' notification.id %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-envelope me-1"></i> {% trans "Mark as Unread" %}
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'notification_delete' notification.id %}" class="btn btn-outline-danger">
|
|
<i class="fas fa-trash me-1"></i> {% trans "Delete" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Info -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">{% trans "Information" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Status" %}</small>
|
|
<span class="badge bg-{{ notification.get_status_bootstrap_class }}">
|
|
{{ notification.get_status_display }}
|
|
</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Type" %}</small>
|
|
<span class="badge bg-secondary">
|
|
{{ notification.get_notification_type_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-muted d-block">{% trans "Created" %}</small>
|
|
{{ notification.created_at|date:"Y-m-d H:i:s" }}
|
|
</div>
|
|
|
|
{% if notification.scheduled_for %}
|
|
<div class="mb-3">
|
|
<small class="text-muted d-block">{% trans "Scheduled For" %}</small>
|
|
{{ notification.scheduled_for|date:"Y-m-d H:i:s" }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if notification.attempts %}
|
|
<div class="mb-3">
|
|
<small class="text-muted d-block">{% trans "Delivery Attempts" %}</small>
|
|
{{ notification.attempts }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
/*document.addEventListener('DOMContentLoaded', function() {
|
|
// Auto-refresh notification count every 30 seconds
|
|
setInterval(function() {
|
|
fetch('/api/notification-count/')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update notification badge if it exists
|
|
const badge = document.querySelector('.notification-badge');
|
|
if (badge) {
|
|
badge.textContent = data.count;
|
|
if (data.count > 0) {
|
|
badge.classList.remove('d-none');
|
|
} else {
|
|
badge.classList.add('d-none');
|
|
}
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching notifications:', error));
|
|
}, 30000);
|
|
});
|
|
*/
|
|
</script>
|
|
{% endblock %}
|