diff --git a/dashboard-ui/css/notifications.css b/dashboard-ui/css/notifications.css index 5c96a2315e..93cc1e9f67 100644 --- a/dashboard-ui/css/notifications.css +++ b/dashboard-ui/css/notifications.css @@ -83,7 +83,7 @@ background-color: #ECEEF4; } -.btnMarkReadContainer { +.btnMarkReadContainer, .btnNotificationListContainer { padding: .5em; } diff --git a/dashboard-ui/notificationlist.html b/dashboard-ui/notificationlist.html new file mode 100644 index 0000000000..fa78fdf8a8 --- /dev/null +++ b/dashboard-ui/notificationlist.html @@ -0,0 +1,34 @@ + + + + ${TitleAdvanced} + + +
+ +
+
+ +
+ ${TabGeneral} + ${TabNotifications} + ${TabPaths} + ${TabServer} + ${TabTranscoding} +
+ +
+ +

Notifications

+ +
+
+ + + +
+
+
+
+ + diff --git a/dashboard-ui/scripts/notificationlist.js b/dashboard-ui/scripts/notificationlist.js new file mode 100644 index 0000000000..90a7cdd9d4 --- /dev/null +++ b/dashboard-ui/scripts/notificationlist.js @@ -0,0 +1,51 @@ +(function ($, document, Notifications) { + + $(document).on("pagebeforeshow", ".page", function () { + + var elem = $(".notificationsList"); + var btn = $(".btnMarkReadContainer"); + var startIndex = 0; + var limit = 10; + + Notifications.showNotificationsList(startIndex, limit, elem, btn); + + elem.on("click", ".btnPreviousPage", function(e) { + + e.preventDefault(); + + startIndex = startIndex - limit; + + if (startIndex < 0) startIndex = 0; + + Notifications.showNotificationsList(startIndex, limit, elem, btn); + + }) + .on("click", ".btnNextPage", function(e) { + + e.preventDefault(); + + startIndex = startIndex + limit; + + Notifications.showNotificationsList(startIndex, limit, elem, btn); + + }); + + $(".readOnlyContent").on("click", ".btnMarkRead", function() { + + var ids = $(".notificationsList div").map(function() { + + return this.getAttribute('data-notificationid'); + + }).get(); + + Notifications.markNotificationsRead(ids, function() { + + Notifications.showNotificationsList(startIndex, limit, elem, btn); + + }); + + }); + + }); + +})(jQuery, document, Notifications); \ No newline at end of file diff --git a/dashboard-ui/scripts/notifications.js b/dashboard-ui/scripts/notifications.js index 1d4640a8f0..039580cb70 100644 --- a/dashboard-ui/scripts/notifications.js +++ b/dashboard-ui/scripts/notifications.js @@ -1,116 +1,156 @@ -(function ($, document, Dashboard) { +(function ($, document, Dashboard, LibraryBrowser) { - var getNotificationsSummaryPromise; + function notifications() { - function getNotificationsSummary() { + var self = this; - getNotificationsSummaryPromise = getNotificationsSummaryPromise || ApiClient.getNotificationSummary(Dashboard.getCurrentUserId()); + self.getNotificationsSummaryPromise = null; - return getNotificationsSummaryPromise; - } + self.total = 0; - function updateNotificationCount() { + self.getNotificationsSummary = function() { - getNotificationsSummary().done(function (summary) { + self.getNotificationsSummaryPromise = self.getNotificationsSummaryPromise || ApiClient.getNotificationSummary(Dashboard.getCurrentUserId()); - var elem = $('.btnNotifications').removeClass('levelNormal').removeClass('levelWarning').removeClass('levelError').html(summary.UnreadCount); + return self.getNotificationsSummaryPromise; + }; - if (summary.UnreadCount) { - elem.addClass('level' + summary.MaxUnreadNotificationLevel); - } - }); - } + self.updateNotificationCount = function() { - function showNotificationsFlyout() { + self.getNotificationsSummary().done(function(summary) { - var context = this; + var item = $('.btnNotifications').removeClass('levelNormal').removeClass('levelWarning').removeClass('levelError').html(summary.UnreadCount); - var html = '
'; + if (summary.UnreadCount) { + item.addClass('level' + summary.MaxUnreadNotificationLevel); + } + }); + }; - html += 'Close'; + self.showNotificationsFlyout = function() { - html += '
'; - html += '

Notifications

'; - html += '
'; + var context = this; - html += '
'; + var html = '
'; - html += '

Loading...'; + html += 'Close'; - html += '

'; + html += '
'; + html += '

Notifications

'; + html += '
'; - html += ''; - html += '
'; + html += '
'; - html += '
'; + html += '

Loading...'; - $(document.body).append(html); + html += '

'; - $('.notificationsFlyout').popup({ positionTo: context }).trigger('create').popup("open").on("popupafterclose", function () { + html += ''; - $(this).off("popupafterclose").remove(); + html += '

'; - }).on('click', '.btnMarkRead', function () { + html += '
'; + html += '
'; - var ids = $('.unreadFlyoutNotification').map(function () { + $(document.body).append(html); - return this.getAttribute('data-notificationid'); + $('.notificationsFlyout').popup({ positionTo: context }).trigger('create').popup("open").on("popupafterclose", function() { - }).get(); + $(this).off("popupafterclose").remove(); - ApiClient.markNotificationsRead(Dashboard.getCurrentUserId(), ids, true).done(function () { + }).on('click', '.btnMarkRead', function() { - $('.notificationsFlyout').popup("close"); + var ids = $('.unreadFlyoutNotification').map(function() { - getNotificationsSummaryPromise = null; + return this.getAttribute('data-notificationid'); + + }).get(); + + self.markNotificationsRead(ids, function() { + + $('.notificationsFlyout').popup("close"); + + }); + + }).on("click", ".btnNotificationList", function(e) { + + e.preventDefault(); + + Dashboard.navigate("notificationlist.html"); - updateNotificationCount(); }); - }); + var startIndex = 0; + var limit = 5; + var elem = $('.notificationsFlyoutlist'); + var markReadButton = $('.btnMarkReadContainer'); - refreshFlyoutContents(); + refreshNotifications(startIndex, limit, elem, markReadButton); + }; + + self.markNotificationsRead = function(ids, callback) { + + ApiClient.markNotificationsRead(Dashboard.getCurrentUserId(), ids, true).done(function() { + + self.getNotificationsSummaryPromise = null; + + self.updateNotificationCount(); + + callback(); + + }); + + }; + + self.showNotificationsList = function(startIndex, limit, elem, btn) { + + refreshNotifications(startIndex, limit, elem, btn); + + }; } - function refreshFlyoutContents() { - - var limit = 5; - var startIndex = 0; + function refreshNotifications(startIndex, limit, elem, btn) { ApiClient.getNotifications(Dashboard.getCurrentUserId(), { StartIndex: startIndex, Limit: limit }).done(function (result) { - listUnreadNotifications(result.Notifications, result.TotalRecordCount, startIndex, limit); + listUnreadNotifications(result.Notifications, result.TotalRecordCount, startIndex, limit, elem, btn); }); } - function listUnreadNotifications(notifications, totalRecordCount, startIndex, limit) { - - var elem = $('.notificationsFlyoutlist'); + function listUnreadNotifications(list, totalRecordCount, startIndex, limit, elem, btn) { if (!totalRecordCount) { elem.html('

No unread notifications.

'); - $('.btnMarkReadContainer').hide(); + btn.hide(); return; } - if (notifications.filter(function (n) { + Notifications.total = totalRecordCount; + + if (list.filter(function (n) { return !n.IsRead; }).length) { - $('.btnMarkReadContainer').show(); + btn.show(); } else { - $('.btnMarkReadContainer').hide(); + btn.hide(); } - var html = ''; - for (var i = 0, length = notifications.length; i < length; i++) { + if (totalRecordCount > limit) { - var notification = notifications[i]; + var query = { StartIndex: startIndex, Limit: limit }; + + html += LibraryBrowser.getPagingHtml(query, totalRecordCount, false, limit, false); + } + + for (var i = 0, length = list.length; i < length; i++) { + + var notification = list[i]; html += getNotificationHtml(notification); @@ -169,15 +209,17 @@ } + window.Notifications = new notifications(); + $(Dashboard).on('interiorheaderrendered', function (e, header, user) { if (!user || $('.notificationsButton', header).length) { return; } - $('0').insertAfter($('.btnCurrentUser', header)).on('click', showNotificationsFlyout); + $('0').insertAfter($('.btnCurrentUser', header)).on('click', Notifications.showNotificationsFlyout); - updateNotificationCount(); + Notifications.updateNotificationCount(); }); $(ApiClient).on("websocketmessage", function (e, msg) { @@ -185,12 +227,12 @@ if (msg.MessageType === "NotificationUpdated" || msg.MessageType === "NotificationAdded" || msg.MessageType === "NotificationsMarkedRead") { - getNotificationsSummaryPromise = null; + Notifications.getNotificationsSummaryPromise = null; - updateNotificationCount(); + Notifications.updateNotificationCount(); } }); -})(jQuery, document, Dashboard); \ No newline at end of file +})(jQuery, document, Dashboard, LibraryBrowser); \ No newline at end of file