added dashboard tour

dashboard-ui/dashboard.html

@@ -16,6 +16,13 @@
                     <!--<a href="dashboardsync.html" data-role="button">${TabSync}</a>-->
                 </div>
                 <div class="dashboardContent">
+                    <div class="ui-bar-a welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em 0; font-weight: normal; max-width: 800px;">
+                        <h1 style="margin-top: 0;">${HeaderWelcomeToMediaBrowserServerDashboard}</h1>
+                        <p>
+                            <button class="btnTakeTour" type="button" data-icon="arrow-r" data-iconpos="right">${ButtonTakeTheTour}</button>
+                        </p>
+                    </div>
+
                     <div class="readOnlyContent dashboardHomeLeftColumn">
 
                         <div data-role="collapsible" data-collapsed="false">

dashboard-ui/index.html

@@ -19,7 +19,7 @@
             <div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
                 <h1 style="margin-top: 0;">${HeaderWelcomeToMediaBrowserWebClient}</h1>
                 <p>
-                    <button class="btnDismissWelcome" type="button" data-icon="arrow-r" data-iconpos="right">${ButtonTakeTheTour}</button>
+                    <button class="btnTakeTour" type="button" data-icon="arrow-r" data-iconpos="right">${ButtonTakeTheTour}</button>
                 </p>
             </div>
 

dashboard-ui/scripts/dashboardpage.js

@@ -1069,10 +1069,7 @@ $(document).on('pagebeforeshow', "#dashboardPage", DashboardPage.onPageShow)
 
         var color = entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn' ? '#cc0000' : 'green';
 
-        html += '<div style="margin: 0;color:' + color + ';">' + date.toLocaleDateString() + ' ' + date.toLocaleTimeString().toLowerCase() + '</div>';
+        html += '<div style="margin: 0;color:' + color + ';">';
-
-        html += '<div class="notificationName" style="margin:.5em 0 0;white-space:nowrap;">';
-
         if (entry.UserId && entry.UserPrimaryImageTag) {
 
             var userImgUrl = ApiClient.getUserImageUrl(entry.UserId, {
@@ -1083,6 +1080,10 @@ $(document).on('pagebeforeshow', "#dashboardPage", DashboardPage.onPageShow)
             html += '<img src="' + userImgUrl + '" style="height:20px;vertical-align:middle;margin-right:5px;" />';
         }
 
+        html += date.toLocaleDateString() + ' ' + date.toLocaleTimeString().toLowerCase();
+        html += '</div>';
+
+        html += '<div class="notificationName" style="margin:.5em 0 0;white-space:nowrap;">';
         html += entry.Name;
         html += '</div>';
 
@@ -1242,3 +1243,74 @@ $(document).on('pagebeforeshow', "#dashboardPage", DashboardPage.onPageShow)
     };
 
 })(jQuery, document, window);
+
+(function ($, document, window) {
+
+    var welcomeDismissValue = '6';
+    var welcomeTourKey = 'welcomeTour';
+
+    function dismissWelcome(page, userId) {
+
+        ApiClient.getDisplayPreferences('dashboard', userId, 'dashboard').done(function (result) {
+
+            result.CustomPrefs[welcomeTourKey] = welcomeDismissValue;
+            ApiClient.updateDisplayPreferences('dashboard', result, userId, 'dashboard');
+
+            $(page).off('pagebeforeshow.checktour');
+        });
+    }
+
+    function showWelcomeIfNeeded(page) {
+
+        var userId = Dashboard.getCurrentUserId();
+
+        ApiClient.getDisplayPreferences('dashboard', userId, 'dashboard').done(function (result) {
+
+            if (result.CustomPrefs[welcomeTourKey] == welcomeDismissValue) {
+                $('.welcomeMessage', page).hide();
+            } else {
+                $('.welcomeMessage', page).show();
+            }
+        });
+    }
+
+    function takeTour(page, userId) {
+
+        $.swipebox([
+                { href: 'css/images/tour/dashboard/dashboard.png', title: Globalize.translate('DashboardTourDashboard') },
+                { href: 'css/images/tour/dashboard/users.png', title: Globalize.translate('DashboardTourUsers') },
+                { href: 'css/images/tour/dashboard/cinemamode.png', title: Globalize.translate('DashboardTourCinemaMode') },
+                { href: 'css/images/tour/dashboard/chapters.png', title: Globalize.translate('DashboardTourChapters') },
+                { href: 'css/images/tour/dashboard/subtitles.png', title: Globalize.translate('DashboardTourSubtitles') },
+                { href: 'css/images/tour/dashboard/plugins.png', title: Globalize.translate('DashboardTourPlugins') },
+                { href: 'css/images/tour/dashboard/notifications.png', title: Globalize.translate('DashboardTourNotifications') },
+                { href: 'css/images/tour/dashboard/scheduledtasks.png', title: Globalize.translate('DashboardTourScheduledTasks') },
+                { href: 'css/images/tour/enjoy.jpg', title: Globalize.translate('MessageEnjoyYourStay') }
+        ], {
+            afterClose: function () {
+                dismissWelcome(page, userId);
+                $('.welcomeMessage', page).hide();
+            },
+            hideBarsDelay: 30000
+        });
+    }
+
+    $(document).on('pageinit', "#dashboardPage", function () {
+
+        var page = this;
+
+        var userId = Dashboard.getCurrentUserId();
+
+        $('.btnTakeTour', page).on('click', function () {
+            takeTour(page, userId);
+        });
+
+    }).on('pagebeforeshow.checktour', "#dashboardPage", function () {
+
+        var page = this;
+
+        showWelcomeIfNeeded(page);
+
+    });
+
+})(jQuery, document, window);

dashboard-ui/scripts/indexpage.js

@@ -536,6 +536,10 @@
         });
     }
 
+    function showWelcomeIfNeeded() {
+        
+    }
+
     function takeTour(page, userId) {
 
         $.swipebox([
@@ -568,7 +572,7 @@
 
         var userId = Dashboard.getCurrentUserId();
 
-        $('.btnDismissWelcome', page).on('click', function () {
+        $('.btnTakeTour', page).on('click', function () {
             takeTour(page, userId);
         });
 

dashboard-ui/scripts/librarybrowser.js

@@ -591,6 +591,8 @@
 
         getUserDataCssClass: function (key) {
 
+            if (!key) return '';
+
             return 'libraryItemUserData' + key.replace(new RegExp(' ', 'g'), '');
         },
 

dashboard-ui/scripts/notifications.js

@@ -46,8 +46,6 @@
 
             html += '</div>';
 
-            html += '<div style="display:none;" class="btnMarkReadContainer"><button class="btnMarkRead" type="button" data-icon="check" data-mini="true">' + Globalize.translate('ButtonMarkTheseRead') + '</button></div>';
-
             html += '</div>';
 
             html += '</div>';
@@ -58,30 +56,18 @@
 
                 $(this).off("panelclose").remove();
 
-            }).on('click', '.btnMarkRead', function () {
-
-                var ids = $('.unreadFlyoutNotification').map(function () {
-
-                    return this.getAttribute('data-notificationid');
-
-                }).get();
-
-                self.markNotificationsRead(ids, function () {
-
-                    $('.notificationsFlyout').panel("close");
-
-                });
-
             });
 
             self.isFlyout = true;
 
             var startIndex = 0;
-            var limit = 5;
+            var limit = 4;
             var elem = $('.notificationsFlyoutlist');
-            var markReadButton = $('.btnMarkReadContainer');
 
-            refreshNotifications(startIndex, limit, elem, markReadButton, false);
+            refreshNotifications(startIndex, limit, elem, null, false).done(function() {
+                
+                self.markNotificationsRead([]);
+            });
         };
 
         self.markNotificationsRead = function (ids, callback) {
@@ -92,7 +78,9 @@
 
                 self.updateNotificationCount();
 
+                if (callback) {
                     callback();
+                }
 
             });
 
@@ -107,7 +95,7 @@
 
     function refreshNotifications(startIndex, limit, elem, btn, showPaging) {
 
-        ApiClient.getNotifications(Dashboard.getCurrentUserId(), { StartIndex: startIndex, Limit: limit }).done(function (result) {
+        return ApiClient.getNotifications(Dashboard.getCurrentUserId(), { StartIndex: startIndex, Limit: limit }).done(function (result) {
 
             listUnreadNotifications(result.Notifications, result.TotalRecordCount, startIndex, limit, elem, btn, showPaging);
 
@@ -118,12 +106,16 @@
 
         if (!totalRecordCount) {
             elem.html('<p style="padding:.5em 1em;">' + Globalize.translate('LabelNoUnreadNotifications') + '</p>');
+
+            if (btn) {
                 btn.hide();
+            }
             return;
         }
 
         Notifications.total = totalRecordCount;
 
+        if (btn) {
             if (list.filter(function (n) {
 
                 return !n.IsRead;
@@ -133,6 +125,7 @@
             } else {
                 btn.hide();
             }
+        }
 
         var html = '';
 

dashboard-ui/thirdparty/mediabrowser.apiclient.js

@@ -334,7 +334,7 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
                 throw new Error("null userId");
             }
 
-            if (!idList || !idList.length) {
+            if (!idList) {
                 throw new Error("null idList");
             }