Add chat notification to navbar

chat_box/views.py

@@ -425,3 +425,23 @@ def toggle_ignore(request, **kwargs):
     Ignore.toggle_ignore(request.profile, other_user)
     next_url = request.GET.get('next', '/')
     return HttpResponseRedirect(next_url)
+
+
+@login_required
+def get_unread_boxes(request):
+    if (request.method != 'GET'):
+        return HttpResponseBadRequest()
+
+    mess = Message.objects.filter(room=OuterRef('room'),
+                                  time__gte=OuterRef('last_seen'))\
+            .exclude(author=request.profile)\
+            .order_by().values('room')\
+            .annotate(unread_count=Count('pk')).values('unread_count')
+
+    unread_boxes = UserRoom.objects\
+        .filter(user=request.profile, room__isnull=False)\
+        .annotate(
+            unread_count=Coalesce(Subquery(mess, output_field=IntegerField()), 0),
+        ).filter(unread_count__gte=1).count()
+
+    return JsonResponse({'unread_boxes': unread_boxes})

dmoj/urls.py

@@ -383,6 +383,7 @@ urlpatterns = [
         url(r'^update_last_seen$', update_last_seen, name='update_last_seen'),
         url(r'^online_status/user/ajax$', user_online_status_ajax, name='user_online_status_ajax'),
         url(r'^toggle_ignore/(?P<user_id>\d+)$', toggle_ignore, name='toggle_ignore'),
+        url(r'^get_unread_boxes$', get_unread_boxes, name='get_unread_boxes'),
     ])),
 
     url(r'^notifications/', 

resources/chatbox.scss

@@ -171,6 +171,13 @@
     cursor: pointer;
     margin-top: 0.5em;
 }
+.unread_boxes {
+    background-color: darkcyan;
+    color: white;
+    border-radius: 50%;
+    padding: 0 3px;
+    margin-left: -4px;
+}
 @media (max-width: 799px) {
     #chat-area {
         height: 500px;

templates/base.html

@@ -150,6 +150,20 @@
                 id: '{{ request.user.id|escapejs }}',
                 name: '{{ request.user.username|escapejs }}'
             };
+            $(function() {
+                if ($('.nav-chat').length) {
+                    $.get("{{url('get_unread_boxes')}}")
+                        .done(function(data) {
+                            if (data.unread_boxes) {
+                                var html = `<sub class="unread_boxes">${data.unread_boxes}</sub>`;
+                                $('.nav-chat').append(html);        
+                            }
+                        })
+                        .fail(function(data) {
+                            console.log('Fail to get unread boxes');
+                        });
+                }
+            });
         </script>
     {% else %}
         <script>window.user = {};</script>