mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Added notification list page

Browse source 
Totally basic but gets the job done
This commit is contained in:
Tim Hobbs 2014-05-26 21:29:35 -07:00
parent 8cadabcbe5
commit 6d764f3e5f
4 changed files with 188 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dashboard-ui/css/notifications.css
View file

@ -83,7 +83,7 @@
background-color: #ECEEF4; background-color: #ECEEF4;
} }
.btnMarkReadContainer { .btnMarkReadContainer, .btnNotificationListContainer {
padding: .5em; padding: .5em;
} }

34
dashboard-ui/notificationlist.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<title>${TitleAdvanced}</title>
</head>
<body>
<div id="notificationsPage" data-role="page" class="page type-interior advancedConfigurationPage">
<div data-role="content">
<div class="content-primary">
<div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
<a href="advanced.html" data-role="button">${TabGeneral}</a>
<a href="#" data-role="button" class="ui-btn-active">${TabNotifications}</a>
<a href="advancedpaths.html" data-role="button">${TabPaths}</a>
<a href="advancedserversettings.html" data-role="button">${TabServer}</a>
<a href="encodingsettings.html" data-role="button">${TabTranscoding}</a>
</div>
<div class="readOnlyContent">
<h3 style="margin: .5em 0;">Notifications</h3>
<div class="notificationsList" style="margin-top: 2em;">
</div>
<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true" data-theme="b">Mark these read</button></p>
</div>
</div>
</div>
</div>
</body>
</html>

51
dashboard-ui/scripts/notificationlist.js Normal file
View file

@ -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);

124
dashboard-ui/scripts/notifications.js
View file

@ -1,27 +1,33 @@
(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;
};
self.updateNotificationCount = function() {
self.getNotificationsSummary().done(function(summary) {
var item = $('.btnNotifications').removeClass('levelNormal').removeClass('levelWarning').removeClass('levelError').html(summary.UnreadCount);
if (summary.UnreadCount) { if (summary.UnreadCount) {
elem.addClass('level' + summary.MaxUnreadNotificationLevel); item.addClass('level' + summary.MaxUnreadNotificationLevel);
} }
}); });
} };
function showNotificationsFlyout() { self.showNotificationsFlyout = function() {
var context = this; var context = this;
@ -40,77 +46,111 @@
html += '</p>'; html += '</p>';
html += '<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true" data-theme="b">Mark these read</button></p>'; html += '<p style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true" data-theme="b">Mark these read</button></p>';
html += '<p class="btnNotificationListContainer"><button class="btnNotificationList" type="button" data-icon="check" data-mini="true" data-theme="b">View Notifications</button></p>';
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
$(document.body).append(html); $(document.body).append(html);
$('.notificationsFlyout').popup({ positionTo: context }).trigger('create').popup("open").on("popupafterclose", function () { $('.notificationsFlyout').popup({ positionTo: context }).trigger('create').popup("open").on("popupafterclose", function() {
$(this).off("popupafterclose").remove(); $(this).off("popupafterclose").remove();
}).on('click', '.btnMarkRead', function () { }).on('click', '.btnMarkRead', function() {
var ids = $('.unreadFlyoutNotification').map(function() {
var ids = $('.unreadFlyoutNotification').map(function () {
return this.getAttribute('data-notificationid'); return this.getAttribute('data-notificationid');
}).get(); }).get();
ApiClient.markNotificationsRead(Dashboard.getCurrentUserId(), ids, true).done(function () { self.markNotificationsRead(ids, function() {
$('.notificationsFlyout').popup("close"); $('.notificationsFlyout').popup("close");
getNotificationsSummaryPromise = null;
updateNotificationCount();
}); });
}).on("click", ".btnNotificationList", function(e) {
e.preventDefault();
Dashboard.navigate("notificationlist.html");
}); });
refreshFlyoutContents(); var startIndex = 0;
var limit = 5;
var elem = $('.notificationsFlyoutlist');
var markReadButton = $('.btnMarkReadContainer');
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() { function refreshNotifications(startIndex, limit, elem, btn) {
var limit = 5;
var startIndex = 0;
ApiClient.getNotifications(Dashboard.getCurrentUserId(), { StartIndex: startIndex, Limit: limit }).done(function (result) { 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) { function listUnreadNotifications(list, totalRecordCount, startIndex, limit, elem, btn) {
var elem = $('.notificationsFlyoutlist');
if (!totalRecordCount) { if (!totalRecordCount) {
elem.html('<p style="padding:.5em 1em;">No unread notifications.</p>'); elem.html('<p style="padding:.5em 1em;">No unread notifications.</p>');
$('.btnMarkReadContainer').hide(); btn.hide();
return; return;
} }
if (notifications.filter(function (n) { Notifications.total = totalRecordCount;
if (list.filter(function (n) {
return !n.IsRead; return !n.IsRead;
}).length) { }).length) {
$('.btnMarkReadContainer').show(); btn.show();
} else { } else {
$('.btnMarkReadContainer').hide(); btn.hide();
} }
var html = ''; 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); html += getNotificationHtml(notification);
@ -169,15 +209,17 @@
} }
window.Notifications = new notifications();
$(Dashboard).on('interiorheaderrendered', function (e, header, user) { $(Dashboard).on('interiorheaderrendered', function (e, header, user) {
if (!user || $('.notificationsButton', header).length) { if (!user || $('.notificationsButton', header).length) {
return; return;
} }
$('<a class="imageLink btnNotifications" href="#" title="Notifications">0</a>').insertAfter($('.btnCurrentUser', header)).on('click', showNotificationsFlyout); $('<a class="imageLink btnNotifications" href="#" title="Notifications">0</a>').insertAfter($('.btnCurrentUser', header)).on('click', Notifications.showNotificationsFlyout);
updateNotificationCount(); Notifications.updateNotificationCount();
}); });
$(ApiClient).on("websocketmessage", function (e, msg) { $(ApiClient).on("websocketmessage", function (e, msg) {
@ -185,12 +227,12 @@
if (msg.MessageType === "NotificationUpdated" || msg.MessageType === "NotificationAdded" || msg.MessageType === "NotificationsMarkedRead") { if (msg.MessageType === "NotificationUpdated" || msg.MessageType === "NotificationAdded" || msg.MessageType === "NotificationsMarkedRead") {
getNotificationsSummaryPromise = null; Notifications.getNotificationsSummaryPromise = null;
updateNotificationCount(); Notifications.updateNotificationCount();
} }
}); });
})(jQuery, document, Dashboard); })(jQuery, document, Dashboard, LibraryBrowser);