Add notifications auto refresh

allianceauth/authentication/urls.py

@@ -1,5 +1,4 @@
 from django.conf.urls import url
-from django.contrib.auth.decorators import login_required
 from django.views.generic.base import TemplateView
 
 from . import views
@@ -24,4 +23,9 @@ urlpatterns = [
         name='add_character'
     ),   
     url(r'^dashboard/$', views.dashboard, name='dashboard'),
+    url(
+        r'^notifications_render/$', 
+        views.notifications_render, 
+        name='notifications_render'
+    ),
 ]

allianceauth/authentication/views.py

@@ -6,11 +6,13 @@ from django.contrib.auth import login, authenticate
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
 from django.core import signing
-from django.urls import reverse
+from django.http import HttpResponse
 from django.shortcuts import redirect, render
+from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 
 from allianceauth.eveonline.models import EveCharacter
+
 from esi.decorators import token_required
 from esi.models import Token
 
@@ -59,6 +61,14 @@ def dashboard(request):
     return render(request, 'authentication/dashboard.html', context)
 
 
+@login_required
+def notifications_render(request):
+    """returns html to render the notifications item in the top menu"""
+    unread_count = request.user.notification_set.filter(viewed=False).count()
+    context = {'notifications': unread_count}
+    return render(request, 'allianceauth/notifications_menu_item.html', context)
+
+
 @login_required
 @token_required(scopes=settings.LOGIN_TOKEN_SCOPES)
 def main_character_change(request, token):

allianceauth/static/js/base.js

@@ -0,0 +1,27 @@
+/*
+    Javascript for the base template
+*/
+
+$(function() {
+    var elem = document.getElementById("dataExport");
+    var notificationsRenderUrl = elem.getAttribute("data-notificationsRenderUrl");
+    
+    // render the notifications item in the top menu
+    function render_notifications(){
+        $("#menu_item_notifications").load(
+            notificationsRenderUrl, 
+            function(responseTxt, statusTxt, xhr){
+                if(statusTxt == "error")
+                    console.log(
+                        "Failed to load HTMl to render notifications item. Error: " 
+                        + xhr.status 
+                        + ": " 
+                        + xhr.statusText
+                    );
+        });
+    }
+    render_notifications()
+    
+    // re-render notifications every x seconds
+    setInterval(render_notifications, 5000);
+});

allianceauth/templates/allianceauth/base.html

@@ -45,6 +45,7 @@
 {% endif %}
 {% include 'bundles/bootstrap-js.html' %}
 {% block extra_javascript %}
+    <script src="{% static 'js/base.js' %}"></script>
 {% endblock extra_javascript %}
 <script>
     {% block extra_script %}

allianceauth/templates/allianceauth/notifications_menu_item.html

@@ -0,0 +1,9 @@
+{% if notifications %}
+    <a href="{% url 'notifications:list' %}">Notifications
+        <span class="badge">{{ notifications }}</span>
+    </a>    
+{% else %}
+    <a href="{% url 'notifications:list' %}">
+        <i class="fa fa-bell-o"></i>
+    </a>    
+{% endif %}

allianceauth/templates/allianceauth/top-menu.html

@@ -20,17 +20,11 @@
                     <li>
                         {% include 'allianceauth/night-toggle.html' %}
                     </li>
-                {% if notifications %}
+                    <li 
-                    <li class="{% navactive request 'notifications:' %}">
+                        class="{% navactive request 'notifications:' %}" id="menu_item_notifications"
-                        <a href="{% url 'notifications:list' %}">Notifications
+                    >
-                            <span class="badge">{{ notifications }}</span>
+                        {% include 'allianceauth/notifications_menu_item.html' %}
-                        </a>
                     </li>
-                {% else %}
-                    <li><a href="{% url 'notifications:list' %}">
-                        <i class="fa fa-bell-o"></i></a>
-                    </li>
-                {% endif %}
                 {% if user.is_authenticated %}
                     {% if user.is_staff %}
                         <li><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
@@ -64,3 +58,9 @@
         </div>
     </div>
 </nav>
+<!-- share data with JS part -->
+<div 
+    id="dataExport"     
+    data-notificationsRenderUrl="{% url 'authentication:notifications_render' %}"
+>
+</div>