From 6fe1c34defad377351c38d04ebf1fc9a467f77fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= Date: Fri, 26 Aug 2016 11:05:50 +0200 Subject: [PATCH] WIP: integration with pillar-notifserv See https://github.com/armadillica/pillar-notifserv --- src/scripts/tutti/5_notifications.js | 223 ++++++++++++--------------- src/templates/_notifications.jade | 5 +- src/templates/layout.jade | 2 +- 3 files changed, 104 insertions(+), 126 deletions(-) diff --git a/src/scripts/tutti/5_notifications.js b/src/scripts/tutti/5_notifications.js index e1831ee4..e1f19982 100644 --- a/src/scripts/tutti/5_notifications.js +++ b/src/scripts/tutti/5_notifications.js @@ -2,125 +2,102 @@ // Store the title, to later append notifications count var page_title = document.title; -var unread_on_load = 0; -var unread_new = 0; -var first_load = false; +/** + * Adds a new notification to the top of the notification list. + */ +function addNotification(no) { + var $notifications_list = $('#notifications-list'); -// getNotifications by fetching json every X seconds -function getNotifications(){ - $.getJSON( "/notifications/", function( data ) { + // There is a notification to be shown, so remove any "no notifications yet" message. + $notifications_list.find('li.nc-item-empty').remove(); - if (!first_load) { - unread_on_load = data['items'].length; - first_load = true; - } - - var items = []; - unread_new = 0; - - // Only if there's actual data - if (data['items'][0]){ - - // Loop through each item - $.each(data['items'], function(i, no){ - - // Increase the unread_new counter - if (!no['is_read']){ unread_new++ }; - - // Check if the current item has been read, to style it - var is_read = no['is_read'] ? 'is_read' : ''; - - var read_info = 'data-id="'+ no['_id'] + '" data-read="' + no['is_read'] + '"'; - - // Notification list item - var content = '
  • '; - - // User's avatar - content += '
    '; - content += ' '; - content += '
    '; - - // Text of the notification - content += '
    '; - - // Username and action - content += no['username'] + ' ' + no['action'] + ' '; - - // Object - content += ''; - content += no['context_object_name'] + ' '; - content += ' '; - - // Date - content += ''; - content += ''; - content += no['date']; - content += ''; - content += ''; - - // Read Toggle - content += ''; - if (no['is_read']){ - content += ''; - } else { - content += ''; - }; - content += ''; - - // Subscription Toggle - content += ''; - if (no['is_subscribed']){ - content += ''; - } else { - content += ''; - }; - content += ''; - - content += '
    '; - content += '
    • '; - - items.push(content); - }); // each - - if (unread_new > 0) { - // Set page title, display notifications and set counter - document.title = '(' + unread_new + ') ' + page_title; - $('#notifications-count').addClass('bloom'); - $('#notifications-count').html('' + unread_new + ''); - $('#notifications-toggle i').removeClass('pi-notifications-none').addClass('pi-notifications-active'); - } else { - document.title = page_title; - $('#notifications-count').removeAttr('class'); - $('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none'); - }; - - checkPopNotification( - data['items'][0]['_id'], - data['items'][0]['username'], - data['items'][0]['username_avatar'], - data['items'][0]['action'], - data['items'][0]['date'], - data['items'][0]['context_object_name'], - data['items'][0]['object_url']); - - } else { - var content = '
  • '; - content += 'No notifications... yet.'; - content += '
    • '; - - items.push(content); - }; // if items - - // Populate the list - $('ul#notifications-list').html( items.join('')); - }) - .done(function(){ - // clear the counter - unread_on_load = unread_new; - }); + console.log('New notification:', no); + return; + // + // // Increase the unread_new counter + // if (!no['is_read']){ unread_new++ }; + // + // // Check if the current item has been read, to style it + // var is_read = no['is_read'] ? 'is_read' : ''; + // + // var read_info = 'data-id="'+ no['_id'] + '" data-read="' + no['is_read'] + '"'; + // + // // Notification list item + // var content = '
  • '; + // + // // User's avatar + // content += '
    '; + // content += ' '; + // content += '
    '; + // + // // Text of the notification + // content += '
    '; + // + // // Username and action + // content += no['username'] + ' ' + no['action'] + ' '; + // + // // Object + // content += ''; + // content += no['context_object_name'] + ' '; + // content += ' '; + // + // // Date + // content += ''; + // content += ''; + // content += no['date']; + // content += ''; + // content += ''; + // + // // Read Toggle + // content += ''; + // if (no['is_read']){ + // content += ''; + // } else { + // content += ''; + // }; + // content += ''; + // + // // Subscription Toggle + // content += ''; + // if (no['is_subscribed']){ + // content += ''; + // } else { + // content += ''; + // }; + // content += ''; + // + // content += '
    '; + // content += '
    • '; + // + // items.push(content); + // }); // each + // + // if (unread_new > 0) { + // // Set page title, display notifications and set counter + // document.title = '(' + unread_new + ') ' + page_title; + // $('#notifications-count').addClass('bloom'); + // $('#notifications-count').html('' + unread_new + ''); + // $('#notifications-toggle i').removeClass('pi-notifications-none').addClass('pi-notifications-active'); + // } else { + // document.title = page_title; + // $('#notifications-count').removeAttr('class'); + // $('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none'); + // }; + // + // checkPopNotification( + // data['items'][0]['_id'], + // data['items'][0]['username'], + // data['items'][0]['username_avatar'], + // data['items'][0]['action'], + // data['items'][0]['date'], + // data['items'][0]['context_object_name'], + // data['items'][0]['object_url']); + // + // // Populate the list + // $('#notifications-list').html( items.join('')); + // }) }; - // Used when we click somewhere in the page function hideNotifications(){ $('#notifications').hide(); @@ -319,11 +296,13 @@ $(function() { }); }); - -function getNotificationsLoop() { - getNotifications(); - - var getLoop = setTimeout(function () { - getNotificationsLoop(); - }, 30000); +/** + * Uses ServerSide Events (SSE) to fetch notifications from Pillar-Notifserv. + */ +function setupNotifications() { + var source = new EventSource('/notifications', {withCredentials: true}); + source.addEventListener('notification', function (event) { + var notif = JSON.parse(event.data); + addNotification(notif); + }, false); } diff --git a/src/templates/_notifications.jade b/src/templates/_notifications.jade index cf1b56ea..bf780b22 100644 --- a/src/templates/_notifications.jade +++ b/src/templates/_notifications.jade @@ -1,4 +1,3 @@ ul#notifications-list - li.nc-item - #notifications-loader - i.pi-spin.spin + li.nc-item.nc-item-empty + |No notifications... yet. diff --git a/src/templates/layout.jade b/src/templates/layout.jade index 4c30efa2..957e4353 100644 --- a/src/templates/layout.jade +++ b/src/templates/layout.jade @@ -414,7 +414,7 @@ html(lang="en") script. $(document).ready(function() { {% if current_user.is_authenticated %} - getNotificationsLoop(); // Check for new notifications in the background + setupNotifications(); // Check for new notifications in the background // Resize #notifications and change overflow for scrollbars $(window).on("resize", function() { notificationsResize(); });