added sync job database

dashboard-ui/scripts/dashboardpage.js

@@ -227,7 +227,7 @@
 
         var parentElement = $('.activeDevices', page);
 
-        $('.activeSession', parentElement).addClass('deadSession');
+        $('.card', parentElement).addClass('deadSession');
 
         for (var i = 0, length = sessions.length; i < length; i++) {
 
@@ -244,7 +244,7 @@
 
             var nowPlayingItem = session.NowPlayingItem;
 
-            var className = nowPlayingItem ? 'playingSession activeSession' : 'activeSession';
+            var className = nowPlayingItem ? 'card card-16-9 activeSession manualSize' : 'card card-16-9 activeSession manualSize';
 
             if (session.TranscodingInfo && session.TranscodingInfo.CompletionPercentage) {
                 className += ' transcodingSession';
@@ -252,6 +252,12 @@
 
             html += '<div class="' + className + '" id="' + rowId + '">';
 
+            html += '<div class="cardBox">';
+            html += '<div class="cardScalable">';
+
+            html += '<div class="cardPadder"></div>';
+            html += '<div class="cardContent">';
+
             html += '<div class="sessionNowPlayingContent"';
 
             var imgUrl = DashboardPage.getNowPlayingImageUrl(nowPlayingItem);
@@ -332,9 +338,17 @@
             } else {
                 html += '<div class="sessionTranscodingFramerate"></div>';
             }
+            html += '</div>';
 
             html += '</div>';
 
+            // cardScalable
+            html += '</div>';
+
+            // cardBox
+            html += '</div>';
+
+            // card
             html += '</div>';
 
         }

dashboard-ui/scripts/dashboardsync.js

@@ -0,0 +1,57 @@
+(function () {
+
+    function getSyncTargetName(targets, id) {
+
+        var target = targets.filter(function (t) {
+
+            return t.Id == id;
+        })[0];
+
+        return target ? target.Name : 'Unknown Device';
+    }
+
+    function loadData(page, jobs, targets) {
+
+        var html = '';
+        var lastTargetName = '';
+
+        for (var i = 0, length = jobs.length; i < length; i++) {
+
+            var job = jobs[i];
+            var targetName = getSyncTargetName(targets, job.TargetId);
+
+            if (targetName != lastTargetName) {
+                html += '<p style="font-size: 24px; border-bottom: 1px solid #ddd; margin: .5em 0; font-weight:300;">' + targetName + '</p>';
+
+                lastTargetName = targetName;
+            }
+        }
+
+        $('.syncActivity', page).html(html).trigger('create');
+    }
+
+    $(document).on('pageshow', "#dashboardSyncPage", function () {
+
+        Dashboard.showLoadingMsg();
+
+        var page = this;
+
+        var promise1 = ApiClient.getJSON(ApiClient.getUrl('Sync/Jobs'));
+
+        var promise2 = ApiClient.getJSON(ApiClient.getUrl('Sync/Targets'));
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            loadData(page, response1[0].Items, response2[0]);
+
+            Dashboard.hideLoadingMsg();
+
+        });
+
+    }).on('pageinit', "#dashboardSyncPage", function () {
+
+        var page = this;
+
+    });
+
+})();

dashboard-ui/scripts/itemdetailpage.js

@@ -249,7 +249,7 @@
         else if (context == 'movies' || item.Type == 'Movie') {
             elem = $('#movieTabs', page).show();
             $('a', elem).removeClass('ui-btn-active');
-            
+
             if (item.Type == 'BoxSet') {
                 $('.lnkCollections', page).addClass('ui-btn-active');
             } else {
@@ -1101,7 +1101,10 @@
 
             var onclick = item.PlayAccess == 'Full' ? ' onclick="ItemDetailPage.play(' + chapter.StartPositionTicks + ');"' : '';
 
-            html += '<a class="posterItem smallBackdropPosterItem" href="#play-Chapter-' + i + '"' + onclick + '>';
+            html += '<a class="card card-16-9 manualSize detailPage169Card" href="#play-Chapter-' + i + '"' + onclick + '>';
+
+            html += '<div class="cardBox">';
+            html += '<div class="cardScalable">';
 
             var imgUrl;
 
@@ -1117,15 +1120,27 @@
                 imgUrl = "css/images/items/list/chapter.png";
             }
 
-            html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="cardPadder"></div>';
 
-            html += '<div class="posterItemTextOverlay">';
-            html += '<div class="posterItemText">' + chapterName + '</div>';
-            html += '<div class="posterItemText">';
+            html += '<div class="cardContent">';
+            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
 
+            html += '<div class="cardFooter">';
+            html += '<div class="cardText">' + chapterName + '</div>';
+            html += '<div class="cardText">';
             html += Dashboard.getDisplayTime(chapter.StartPositionTicks);
-
             html += '</div>';
+
+            //cardFooter
+            html += "</div>";
+
+            // cardContent
+            html += '</div>';
+
+            // cardScalable
+            html += '</div>';
+
+            // cardBox
             html += '</div>';
 
             html += '</a>';
@@ -1291,7 +1306,7 @@
 
             var item = items[i];
 
-            var cssClass = "posterItem smallBackdropPosterItem";
+            var cssClass = "card card-16-9 manualSize detailPage169Card";
 
             var href = "itemdetails.html?id=" + item.Id;
 
@@ -1299,6 +1314,9 @@
 
             html += '<a class="' + cssClass + '" href="' + href + '"' + onclick + '>';
 
+            html += '<div class="cardBox">';
+            html += '<div class="cardScalable">';
+
             var imageTags = item.ImageTags || {};
 
             var imgUrl;
@@ -1315,12 +1333,14 @@
                 imgUrl = "css/images/items/detail/video.png";
             }
 
-            html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+            html += '<div class="cardPadder"></div>';
 
-            html += '<div class="posterItemTextOverlay">';
-            html += '<div class="posterItemText">' + item.Name + '</div>';
-            html += '<div class="posterItemText">';
+            html += '<div class="cardContent">';
+            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
 
+            html += '<div class="cardFooter">';
+            html += '<div class="cardText">' + item.Name + '</div>';
+            html += '<div class="cardText">';
             if (item.RunTimeTicks != "") {
                 html += Dashboard.getDisplayTime(item.RunTimeTicks);
             }
@@ -1328,10 +1348,20 @@
                 html += "&nbsp;";
             }
             html += '</div>';
+
+            //cardFooter
+            html += "</div>";
+
+            // cardContent
+            html += '</div>';
+
+            // cardScalable
+            html += '</div>';
+
+            // cardBox
             html += '</div>';
 
             html += '</a>';
-
         }
 
         if (limit && items.length > limit) {

dashboard-ui/scripts/librarybrowser.js

@@ -564,11 +564,15 @@
             return '';
         },
 
+        getUserDataCssClass: function(key) {
+            return 'libraryItemUserData' + key;
+        },
+
         getListViewHtml: function (options) {
 
             var outerHtml = "";
 
-            outerHtml += '<ul data-role="listview" data-inset="true" class="itemsListview">';
+            outerHtml += '<ul data-role="listview" class="itemsListview">';
 
             var index = 0;
             var groupTitle = '';
@@ -593,7 +597,7 @@
                 var cssClass = 'ui-li-has-thumb listItem';
 
                 if (item.UserData) {
-                    cssClass += ' libraryItemUserData' + item.UserData.Key;
+                    cssClass += ' ' + LibraryBrowser.getUserDataCssClass(item.UserData.Key);
                 }
 
                 var href = LibraryBrowser.getHref(item, options.context);
@@ -987,7 +991,7 @@
                 var href = options.linkItem === false ? '#' : LibraryBrowser.getHref(item, options.context);
 
                 if (item.UserData) {
-                    cssClass += ' libraryItemUserData' + item.UserData.Key;
+                    cssClass += ' ' + LibraryBrowser.getUserDataCssClass(item.UserData.Key);
                 }
 
                 if (options.showChildCountIndicator && item.ChildCount) {

dashboard-ui/scripts/librarylist.js

@@ -688,7 +688,9 @@
 
     function onUserDataChanged(userData) {
 
-        $('.libraryItemUserData' + userData.Key).each(function () {
+        var cssClass = LibraryBrowser.getUserDataCssClass(userData.Key);
+
+        $('.' + cssClass).each(function () {
 
             this.setAttribute('data-positionticks', (userData.PlaybackPositionTicks || 0));
 

dashboard-ui/scripts/loginpage.js

@@ -126,30 +126,37 @@
         for (var i = 0, length = users.length; i < length; i++) {
             var user = users[i];
 
-            var linkId = "lnkUser" + i;
+            html += '<div class="card card-1-1"><div class="cardBox visualCardBox">';
 
-            html += "<a class='posterItem squarePosterItem' id='" + linkId + "' data-haspw='" + user.HasPassword + "' data-username='" + user.Name + "' data-userid='" + user.Id + "' href='#' data-ajax='false' \">";
+            html += '<div class="cardScalable">';
+
+            html += '<div class="cardPadder"></div>';
+            html += '<a class="cardContent" href="#" data-ajax="false" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
 
             if (user.PrimaryImageTag) {
 
                 var imgUrl = ApiClient.getUserImageUrl(user.Id, {
-                    width: 500,
+                    width: 300,
                     tag: user.PrimaryImageTag,
                     type: "Primary"
                 });
 
-                html += '<div class="posterItemImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+                html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
             }
             else {
 
                 var background = LibraryBrowser.getMetroColor(user.Id);
 
-                html += '<div class="posterItemImage" style="background-color:' + background + ';"></div>';
+                html += '<div class="cardImage" style="background-color:' + background + ';"></div>';
             }
 
-            html += '<div class="posterItemText" style="color:#000;">' + user.Name + '</div>';
+            html += '</a>';
+            html += '</div>';
 
-            html += '<div class="posterItemText" style="color:#000;">';
+            html += '<div class="cardFooter">';
+            html += '<div class="cardText">' + user.Name + '</div>';
+
+            html += '<div class="cardText">';
             var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
             if (lastSeen != "") {
                 html += lastSeen;
@@ -158,13 +165,15 @@
                 html += "&nbsp;";
             }
             html += '</div>';
+            html += '</div>';
+            html += '</div>';
 
-            html += '</a>';
+            html += '</div>';
         }
 
         var elem = $('#divUsers', '#loginPage').html(html);
 
-        $('.posterItem', elem).on('click', function () {
+        $('a', elem).on('click', function () {
 
             var name = this.getAttribute('data-username');
             var haspw = this.getAttribute('data-haspw');

dashboard-ui/scripts/mypreferencesdisplay.js

@@ -24,7 +24,7 @@
                 var isChecked = user.Configuration.ExcludeFoldersFromGrouping.indexOf(i.Id) == -1;
                 var checkedHtml = isChecked ? ' checked="checked"' : '';
 
-                currentHtml += '<input class="chkGroupFolder" data-folderid="' + i.Id + '" type="checkbox" data-mini="true" id="' + id + '"' + checkedHtml + ' />';
+                currentHtml += '<input class="chkGroupFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
 
                 return currentHtml;
 
@@ -57,7 +57,7 @@
                 var isChecked = user.Configuration.DisplayChannelsWithinViews.indexOf(i.Id) != -1;
                 var checkedHtml = isChecked ? ' checked="checked"' : '';
 
-                currentHtml += '<input class="chkGroupChannel" data-channelid="' + i.Id + '" type="checkbox" data-mini="true" id="' + id + '"' + checkedHtml + ' />';
+                currentHtml += '<input class="chkGroupChannel" data-channelid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
 
                 return currentHtml;
 

dashboard-ui/scripts/plugincatalogpage.js

@@ -59,12 +59,18 @@
             var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
             var target = plugin.externalUrl ? ' target="_blank"' : '';
 
-            html += "<a class='backdropPosterItem posterItem' style='margin: .75em 5px 1em;' href='" + href + "' " + target + ">";
+            html += "<div class='card card-16-9'>";
 
+            html += '<div class="cardBox visualCardBox">';
+            html += '<div class="cardScalable">';
+
+            html += '<div class="cardPadder"></div>';
+
+            html += '<a class="cardContent" href="' + href + '"' + target + '>';
             if (plugin.thumbImage) {
-                html += '<div class="posterItemImage" style="background-image:url(\'' + plugin.thumbImage + '\');background-size:cover;">';
+                html += '<div class="cardImage" style="background-image:url(\'' + plugin.thumbImage + '\');">';
             } else {
-                html += '<div class="posterItemImage defaultPosterItemImage" style="background-image:url(\'css/images/items/list/collection.png\');">';
+                html += '<div class="cardImage" style="background-image:url(\'css/images/items/list/collection.png\');">';
             }
 
             if (plugin.isPremium) {
@@ -76,14 +82,20 @@
             }
             html += "</div>";
 
-            html += "<div class='posterItemText' style='color:#000;'>";
+            // cardContent
+            html += "</a>";
 
+            // cardScalable
+            html += "</div>";
+
+            html += '<div class="cardFooter">';
+
+            html += "<div class='cardText'>";
             html += plugin.name;
-
             html += "</div>";
 
             if (!plugin.isExternal) {
-                html += "<div class='posterItemText packageReviewText' style='color:#000;'>";
+                html += "<div class='cardText packageReviewText'>";
                 html += plugin.price > 0 ? "$" + plugin.price.toFixed(2) : Globalize.translate('LabelFree');
                 html += RatingHelpers.getStoreRatingHtml(plugin.avgRating, plugin.id, plugin.name);
 
@@ -98,7 +110,7 @@
                 return ip.Name == plugin.name;
             })[0];
 
-            html += "<div class='posterItemText' style='color:#000;'>";
+            html += "<div class='cardText'>";
 
             if (installedPlugin) {
                 html += Globalize.translate('LabelVersionInstalled').replace("{0}", installedPlugin.Version);
@@ -107,7 +119,14 @@
             }
             html += "</div>";
 
-            html += "</a>";
+            // cardFooter
+            html += "</div>";
+
+            // cardBox
+            html += "</div>";
+
+            // card
+            html += "</div>";
 
             pluginhtml += html;
 

dashboard-ui/scripts/site.js

@@ -601,9 +601,7 @@ var Dashboard = {
 
         if (!sidebar.length) {
 
-            var html = '<div class="content-secondary ui-bar-a toolsSidebar">';
-
-            html += '<br/>';
+            var html = '<div class="content-secondary toolsSidebar">';
 
             html += '<div class="sidebarLinks">';
 
@@ -640,9 +638,9 @@ var Dashboard = {
             // content-secondary
             html += '</div>';
 
-            html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
+            html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="a">';
 
-            html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span>MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
+            html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 15px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">MEDIA</span><span class="mediaBrowserAccent">BROWSER</span></a></p>';
 
             for (i = 0, length = links.length; i < length; i++) {
 
@@ -669,7 +667,8 @@ var Dashboard = {
 
             html += '</div>';
 
-            $(page).append(html).trigger('create');
+            $('.content-primary', page).before(html);
+            $(page).trigger('create');
         }
     },
 
@@ -681,6 +680,10 @@ var Dashboard = {
             name: Globalize.translate('TabServer'),
             href: "dashboard.html",
             selected: page.hasClass("dashboardHomePage")
+        }, {
+            name: Globalize.translate('TabUsers'),
+            href: "userprofiles.html",
+            selected: page.hasClass("userProfilesPage")
         }, {
             name: Globalize.translate('TabLibrary'),
             divider: true,

dashboard-ui/scripts/sync.js

@@ -2,21 +2,22 @@
 
     function submitJob(userId, items, form) {
 
-        var targets = $('.chkSyncTarget:checked', form).get().map(function (c) {
+        var target = $('.radioSync:checked', form).get().map(function (c) {
 
             return c.getAttribute('data-targetid');
-        });
 
-        if (!targets.length) {
+        })[0];
 
-            Dashboard.alert('Please select one or more sync targets.');
+        if (!target) {
+
+            Dashboard.alert('Please select a device to sync to.');
             return;
         }
 
         var options = {
 
             userId: userId,
-            TargetIds: targets.join(','),
+            TargetId: target,
 
             ItemIds: items.map(function (i) {
                 return i.Id;
@@ -34,7 +35,6 @@
 
         }).done(function () {
 
-            $('.syncPanel').panel('close');
         });
     }
 
@@ -61,8 +61,8 @@
 
             html += targets.map(function (t) {
 
-                var targetHtml = '<label for="chkSync' + t.Id + '">' + t.Name + '</label>';
-                targetHtml += '<input class="chkSyncTarget" data-targetid="' + t.Id + '" type="checkbox" id="chkSync' + t.Id + '" />';
+                var targetHtml = '<label for="radioSync' + t.Id + '">' + t.Name + '</label>';
+                targetHtml += '<input class="radioSync" data-targetid="' + t.Id + '" type="radio" id="radioSync' + t.Id + '" />';
 
                 return targetHtml;
 
@@ -109,6 +109,7 @@
     }
 
     function isAvailable(item, user) {
+
         return item.SupportsSync;
     }