88 lines
3.5 KiB
HTML
88 lines
3.5 KiB
HTML
{% load basefilters %}
|
|
{% load static %}
|
|
{% load i18n %}
|
|
{% load notifications_tags %}
|
|
{% notifications_unread as unread_count %}
|
|
|
|
<div
|
|
class="oh-navbar__notifications"
|
|
x-data="{open: false}"
|
|
hx-get="{% url 'notifications' %}"
|
|
hx-target="#notificationContainer"
|
|
title="Notifications"
|
|
>
|
|
<a href="#" class="oh-navbar__notification-link" @click="open = !open">
|
|
<ion-icon name="notifications-outline" class="oh-navbar__icon"></ion-icon>
|
|
<span class="oh-navbar__notification-beacon">
|
|
{% live_notify_badge %}
|
|
</span>
|
|
</a>
|
|
|
|
<div
|
|
id="showallnotificationbtn"
|
|
class="oh-navbar__notification-tray"
|
|
x-data="{markRead: false, visible: true}"
|
|
x-show="open"
|
|
style="display: none;"
|
|
@click.outside="open = false">
|
|
<div class="oh-navbar__notification-head">
|
|
<span class="oh-navbar__notification-head-title">{% trans "Notifications" %}</span>
|
|
<div class="oh-navbar__notification-links" x-show="visible">
|
|
<a
|
|
hx-get="{% url 'read-notifications' %}"
|
|
hx-swap="none"
|
|
nx-target="#notificationContainer"
|
|
class="oh-navbar__notification-tray-link mr-2"
|
|
x-show="!markRead" @click="markRead = true">
|
|
<ion-icon name="checkmark-done-outline" class="mr-1"></ion-icon> {% trans "Mark as read" %}
|
|
</a>
|
|
<a
|
|
class="oh-navbar__notification-tray-link oh-navbar__notification-tray-link--danger"
|
|
hx-get="{% url 'clear-notifications' %}"
|
|
hx-target="#notificationContainer"
|
|
{% comment %} onclick="return confirm('Do you want to clear all the notifications?')" {% endcomment %}
|
|
@click="visible = false">
|
|
<ion-icon name="close-outline" class="mr-1"></ion-icon> {% trans "Clear" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="oh-navbar__notification-body" x-show="visible" id="notificationContainer">
|
|
{% include 'notification/notification_items.html' %}
|
|
</div>
|
|
<div class="oh-navbar__notification-footer" x-show="visible">
|
|
<a
|
|
{% comment %} href="{% url 'notifications:all' %}" {% endcomment %}
|
|
id="viewallnotification"
|
|
data-target="#allNotifications"
|
|
hx-get="{% url 'all-notifications' %}"
|
|
hx-target="#allNotificationBody"
|
|
class="oh-navbar__notification-tray-link oh-activity-sidebar__open">{% trans "View all comments" %}</a>
|
|
</div>
|
|
<div class="oh-navbar__notification-empty" x-show="!visible">
|
|
<img src="{% static 'images/ui/happy.svg' %}" alt="All caught up" width="50" height="50" loading="lazy" />
|
|
<span class="oh-navbar__notification-empty-title">{% trans "All caught up!" %}</span>
|
|
<span class="oh-navbar__notification-empty-desc">{% trans "You have no new notifications at the moment." %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{% static 'notifications/notify.js' %}" type="text/javascript"></script>
|
|
{% register_notify_callbacks callbacks='fill_notification_list,fill_notification_badge' %}
|
|
<script>
|
|
function markAsRead(notificationId) {
|
|
fetch('/notifications/mark-as-read/' + notificationId + '/')
|
|
.then(response => {
|
|
if (response.ok) {
|
|
// Reload the page to update the notifications
|
|
location.reload();
|
|
} else {
|
|
console.error('Failed to mark notification as read');
|
|
}
|
|
});
|
|
}
|
|
|
|
$("#viewallnotification").click(function () {
|
|
$("#showallnotificationbtn").toggle();
|
|
});
|
|
|
|
</script> |