cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 03:18:19 -07:00
Code Issues Packages Projects Releases Wiki 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
Show Stats 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;
}
.btnMarkReadContainer {
.btnMarkReadContainer, .btnNotificationListContainer {
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);

118
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) {
elem.addClass('level' + summary.MaxUnreadNotificationLevel);
item.addClass('level' + summary.MaxUnreadNotificationLevel);
}
});
}
};
function showNotificationsFlyout() {
self.showNotificationsFlyout = function() {
var context = this;
@ -40,6 +46,9 @@
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 class="btnNotificationListContainer"><button class="btnNotificationList" type="button" data-icon="check" data-mini="true" data-theme="b">View Notifications</button></p>';
html += '</div>';
html += '</div>';
@ -52,65 +61,96 @@
}).on('click', '.btnMarkRead', function() {
var ids = $('.unreadFlyoutNotification').map(function() {
return this.getAttribute('data-notificationid');
}).get();
ApiClient.markNotificationsRead(Dashboard.getCurrentUserId(), ids, true).done(function () {
self.markNotificationsRead(ids, function() {
$('.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() {
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('<p style="padding:.5em 1em;">No unread notifications.</p>');
$('.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;
}
$('<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) {
@ -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);
})(jQuery, document, Dashboard, LibraryBrowser);