#715 - Support creating/editing collections (boxsets) in web client

dashboard-ui/scripts/advancedserversettings.js

@@ -14,6 +14,7 @@
         $('#txtPortNumber', page).val(config.HttpServerPortNumber);
 
         $('#txtDdns', page).val(config.WanDdns || '');
+        $('#txtServerName', page).val(config.ServerName || '');
 
         $('#chkEnableUpnp', page).checked(config.EnableUPnP).checkboxradio('refresh');
 
@@ -52,6 +53,7 @@
                 config.EnableUPnP = $('#chkEnableUpnp', form).checked();
 
                 config.WanDdns = $('#txtDdns', form).val();
+                config.ServerName = $('#txtServerName', form).val();
 
                 ApiClient.updateServerConfiguration(config).done(Dashboard.processServerConfigurationUpdateResult);
             });

dashboard-ui/scripts/editcollectionitems.js

@@ -0,0 +1,296 @@
+(function ($, document, window, FileReader, escape) {
+
+    var currentItem;
+
+    function updateTabs(page, item) {
+
+        var query = MetadataEditor.getEditQueryString(item);
+
+        $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
+        $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
+    }
+
+    function reload(page) {
+
+        Dashboard.showLoadingMsg();
+
+        $('#btnRemoveItems', page).buttonEnabled(false);
+
+        MetadataEditor.getItemPromise().done(function (item) {
+
+            currentItem = item;
+
+            LibraryBrowser.renderName(item, $('.itemName', page), true);
+
+            updateTabs(page, item);
+
+            reloadTitles(page, item);
+        });
+    }
+
+    function getTitleHtml(item) {
+
+        var html = '<div style="display:inline-block;margin:5px;vertical-align:top;">';
+
+        html += '<div style="width:120px;height:180px;">';
+        if (item.ImageTags.Primary) {
+
+            var imgUrl = ApiClient.getImageUrl(item.Id, {
+                type: "Primary",
+                width: 300,
+                tag: item.ImageTags.Primary
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-width:120px;max-height:180px;" />';
+
+        } 
+        html += '</div>';
+
+        html += '<div style="text-align:center;margin-top:4px;max-width:100px;overflow:hidden;height: 32px;">' + item.Name + '</div>';
+
+        html += '<label for="chkRemove' + item.Id + '">Remove</label><input id="chkRemove' + item.Id + '" class="chkRemoveItem" type="checkbox" data-itemid="' + item.Id + '" data-mini="true" />';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function getSearchResultHtml(item) {
+
+        var html = '<div style="display:inline-block;margin:3px;vertical-align:top;">';
+
+        html += '<div style="width:100px;height:150px;">';
+
+        if (item.PrimaryImageTag) {
+
+            var imgUrl = ApiClient.getImageUrl(item.ItemId, {
+                type: "Primary",
+                width: 200,
+                tag: item.PrimaryImageTag
+            });
+
+            html += '<img src="' + imgUrl + '" style="max-width:100px;max-height:150px;" />';
+
+        }
+        html += '</div>';
+
+        html += '<div style="text-align:center;margin-top:4px;max-width:100px;overflow:hidden;height: 32px;">' + item.Name + '</div>';
+
+        html += '<label for="chkAdd' + item.ItemId + '">Add</label><input id="chkAdd' + item.ItemId + '" class="chkAddItem" type="checkbox" data-itemid="' + item.ItemId + '" data-mini="true" />';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function reloadTitles(page, item) {
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), {
+
+            ParentId: item.Id
+
+        }).done(function (result) {
+
+            // Scroll back up so they can see the results from the beginning
+            $(document).scrollTop(0);
+
+            var html = result.Items.map(getTitleHtml).join('');
+
+            var elem = $('.collectionItems', page).html(html).trigger('create');
+
+            $('.chkRemoveItem', elem).on('change', function () {
+
+                if ($('.chkRemoveItem:checked', elem).length) {
+                    $('#btnRemoveItems', page).buttonEnabled(true);
+                } else {
+                    $('#btnRemoveItems', page).buttonEnabled(false);
+                }
+
+            });
+
+            Dashboard.hideLoadingMsg();
+        });
+
+    }
+
+    function showSearchResults(page, searchTerm) {
+
+        ApiClient.getSearchHints({
+
+            userId: Dashboard.getCurrentUserId(),
+            searchTerm: searchTerm,
+            limit: 50,
+
+            includePeople: false,
+            includeGenres: false,
+            includeStudios: false,
+            includeArtists: false,
+
+            IncludeItemTypes: "Movie,Series,Game,MusicAlbum"
+
+        }).done(function (result) {
+
+            renderSearchResults(page, result.SearchHints);
+
+        });
+
+    }
+
+    function renderSearchResults(page, items) {
+
+        var html = items.map(getSearchResultHtml).join('');
+
+        var elem = $('.collectionItemSearchResults', page).html(html).trigger('create');
+
+        $('.chkAddItem', elem).on('change', function () {
+
+            if ($('.chkAddItem:checked', elem).length) {
+                $('#btnAddItems', page).buttonEnabled(true);
+            } else {
+                $('#btnAddItems', page).buttonEnabled(false);
+            }
+
+        });
+    }
+
+    function addItemsToCollection(page) {
+
+        var items = $('.chkAddItem:checked', page).get().map(function (c) {
+
+            return c.getAttribute('data-itemid');
+
+        });
+
+        if (!items.length) {
+            Dashboard.alert('Please select at least one item.');
+            return;
+        }
+
+        var url = ApiClient.getUrl("Collections/" + currentItem.Id + "/Items", {
+
+            Ids: items.join(',')
+
+        });
+
+        $.ajax({
+            type: "POST",
+            url: url
+
+        }).done(function () {
+
+            Dashboard.hideLoadingMsg();
+
+            $('.popupIdentify', page).popup('close');
+
+            reload(page);
+
+        });
+    }
+    
+    function removeItemsFromCollection(page) {
+        var items = $('.chkRemoveItem:checked', page).get().map(function (c) {
+
+            return c.getAttribute('data-itemid');
+
+        });
+
+        if (!items.length) {
+            Dashboard.alert('Please select at least one item.');
+            return;
+        }
+
+        var url = ApiClient.getUrl("Collections/" + currentItem.Id + "/Items", {
+
+            Ids: items.join(',')
+
+        });
+
+        $.ajax({
+            type: "DELETE",
+            url: url
+
+        }).done(function () {
+
+            Dashboard.hideLoadingMsg();
+
+            reload(page);
+
+        });
+    }
+
+    $(document).on('pageinit', "#editCollectionTitlesPage", function () {
+
+        var page = this;
+
+        $('.libraryTree', page).on('itemclicked', function (event, data) {
+
+            if (data.itemType == "libraryreport") {
+                Dashboard.navigate('libraryreport.html');
+                return;
+            }
+
+            if (data.itemType == "livetvservice") {
+                return;
+            }
+
+            if (data.id != currentItem.Id) {
+
+                MetadataEditor.currentItemId = data.id;
+                MetadataEditor.currentItemName = data.itemName;
+                MetadataEditor.currentItemType = data.itemType;
+                //Dashboard.navigate('edititemmetadata.html?id=' + data.id);
+
+                //$.mobile.urlHistory.ignoreNextHashChange = true;
+                window.location.hash = 'editItemImagesPage?id=' + data.id;
+
+                reload(page);
+            }
+        });
+
+        $('#btnAddItem', page).on('click', function () {
+
+
+            var popup = $('.popupIdentify', page).popup('open');
+
+            $('#txtLookupName', popup).val('');
+            $('.collectionItemSearchResults', popup).empty();
+            $('#btnAddItems', popup).buttonEnabled(false);
+        });
+
+        $('#btnAddItems', page).on('click', function () {
+
+            addItemsToCollection(page);
+        });
+
+        $('#btnRemoveItems', page).on('click', function () {
+
+
+            removeItemsFromCollection(page);
+        });
+
+    }).on('pagebeforeshow', "#editCollectionTitlesPage", function () {
+
+        var page = this;
+
+        reload(page);
+
+    }).on('pagehide', "#editCollectionTitlesPage", function () {
+
+        var page = this;
+
+        currentItem = null;
+
+    });
+
+    window.EditCollectionItemsPage = {
+
+        onSearchFormSubmit: function () {
+
+            var page = $(this).parents('.page');
+
+            showSearchResults(page, $('#txtLookupName', page).val());
+            return false;
+        }
+    };
+
+})(jQuery, document, window, window.FileReader, escape);

dashboard-ui/scripts/edititemimages.js

@@ -14,6 +14,7 @@
 
         $('#btnEditPeople', page).attr('href', 'edititempeople.html?' + query);
         $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
+        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
     }
 
     function getBaseRemoteOptions() {
@@ -268,12 +269,18 @@
 
             updateTabs(page, item);
 
-            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel") {
+            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel" || item.Type == "BoxSet") {
                 $('#btnEditPeople', page).hide();
             } else {
                 $('#btnEditPeople', page).show();
             }
 
+            if (item.Type == "BoxSet") {
+                $('#btnEditCollectionTitles', page).show();
+            } else {
+                $('#btnEditCollectionTitles', page).hide();
+            }
+
             ApiClient.getRemoteImageProviders(getBaseRemoteOptions()).done(function (providers) {
 
                 if (providers.length) {

dashboard-ui/scripts/edititemmetadata.js

@@ -16,6 +16,7 @@
 
         $('#btnEditPeople', page).attr('href', 'edititempeople.html?' + query);
         $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
+        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
     }
 
     function reload(page) {
@@ -82,12 +83,18 @@
             setFieldVisibilities(page, item);
             fillItemInfo(page, item);
 
-            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel") {
+            if (item.Type == "Person" || item.Type == "Studio" || item.Type == "MusicGenre" || item.Type == "Genre" || item.Type == "MusicArtist" || item.Type == "GameGenre" || item.Type == "Channel" || item.Type == "BoxSet") {
                 $('#btnEditPeople', page).hide();
             } else {
                 $('#btnEditPeople', page).show();
             }
 
+            if (item.Type == "BoxSet") {
+                $('#btnEditCollectionTitles', page).show();
+            } else {
+                $('#btnEditCollectionTitles', page).hide();
+            }
+
             Dashboard.hideLoadingMsg();
         });
     }

dashboard-ui/scripts/edititempeople.js

@@ -8,6 +8,7 @@
 
         $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
         $('#btnEditImages', page).attr('href', 'edititemimages.html?' + query);
+        $('#btnEditCollectionTitles', page).attr('href', 'editcollectionitems.html?' + query);
     }
 
     function reload(page) {

dashboard-ui/scripts/itemdetailpage.js

@@ -31,10 +31,18 @@
 
                 if (user.Configuration.IsAdministrator) {
                     $('#editButtonContainer', page).show();
+
                 } else {
                     $('#editButtonContainer', page).hide();
                 }
 
+                if (user.Configuration.IsAdministrator && item.Type == "BoxSet") {
+                    $('#btnEditCollectionTitles', page).show().attr('href', 'editcollectionitems.html?id=' + item.Id);
+
+                } else {
+                    $('#btnEditCollectionTitles', page).hide();
+                }
+
                 if (MediaPlayer.canPlay(item, user)) {
 
                     var url = MediaPlayer.getPlayUrl(item);
@@ -122,7 +130,7 @@
         if (item.Type == "Episode" || item.Type == "Series" || item.Type == "Season") {
             return "tv";
         }
-        if (item.Type == "Movie" || item.Type == "Trailer" || item.Type == "BoxSet") {
+        if (item.Type == "Movie" || item.Type == "Trailer") {
             return "movies";
         }
         if (item.Type == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicVideo") {
@@ -131,6 +139,9 @@
         if (item.MediaType == "Game") {
             return "games";
         }
+        if (item.Type == "BoxSet") {
+            return "boxsets";
+        }
         return "";
     }
 

dashboard-ui/scripts/librarymenu.js

@@ -92,6 +92,8 @@
             html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'games' ? selectedCssClass : '') + '" href="gamesrecommended.html">' + (view == 'games' ? selectedHtml : '') + '<span class="viewName">Games</span></a>';
         }
 
+        html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'boxsets' ? selectedCssClass : '') + '" href="collections.html">' + (view == 'boxsets' ? selectedHtml : '') + '<span class="viewName">Collections</span></a>';
+
         $('.viewMenuRemoteControlButton', page).before(html);
     }
 
@@ -130,7 +132,7 @@
 
                     { text: 'Suggested', href: 'moviesrecommended.html' },
                     { text: 'Movies', href: 'movies.html' },
-                    { text: 'Collections', href: 'boxsets.html' },
+                    { text: 'Collections', href: 'collections.html' },
                     { text: 'Trailers', href: 'movietrailers.html' },
                     { text: 'Genres', href: 'moviegenres.html' },
                     { text: 'People', href: 'moviepeople.html' },

dashboard-ui/scripts/moviecollections.js

@@ -95,6 +95,13 @@
         $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
     }
 
+    function showNewCollectionPanel(page) {
+
+        $('#newCollectionPanel', page).panel('toggle');
+
+        $('#txtNewCollectionName', page).focus();
+    }
+
     $(document).on('pageinit', "#boxsetsPage", function () {
 
         var page = this;
@@ -164,6 +171,11 @@
             reloadItems(page);
         });
 
+        $('#btnNewCollection', page).on('click', function () {
+
+            showNewCollectionPanel(page);
+        });
+
     }).on('pagebeforeshow', "#boxsetsPage", function () {
 
         var limit = LibraryBrowser.getDefaultPageSize();
@@ -183,11 +195,35 @@
         updateFilterControls(this);
     });
 
-    window.BoxSetsPage = {        
-        
-        onNewCollectionSubmit: function() {
+    window.BoxSetsPage = {
+
+        onNewCollectionSubmit: function () {
+
+            Dashboard.showLoadingMsg();
+
+            var page = $(this).parents('.page');
+
+            var url = ApiClient.getUrl("Collections", {
+                
+                Name: $('#txtNewCollectionName', page).val(),
+                IsLocked: !$('#chkEnableInternetMetadata', page).checked()
+
+            });
+
+            $.ajax({
+                type: "POST",
+                url: url
+
+            }).done(function () {
+
+                Dashboard.hideLoadingMsg();
+
+                $('#newCollectionPanel', page).panel('toggle');
+
+                reloadItems(page);
+
+            });
 
-            Dashboard.alert('Coming soon');
             return false;
         }
     };

dashboard-ui/scripts/site.js

@@ -721,14 +721,14 @@ var Dashboard = {
             name: "Metadata",
             href: "metadata.html",
             selected: pageElem.id == "metadataConfigurationPage" || pageElem.id == "advancedMetadataConfigurationPage" || pageElem.id == "metadataImagesConfigurationPage"
-        }, {
-            name: "Auto-Organize",
-            href: "autoorganizelog.html",
-            selected: page.hasClass("organizePage")
         }, {
             name: "Plugins",
             href: "plugins.html",
             selected: page.hasClass("pluginConfigurationPage")
+        }, {
+            name: "Auto-Organize",
+            href: "autoorganizelog.html",
+            selected: page.hasClass("organizePage")
         }, {
             name: "Live TV",
             href: "livetvstatus.html",
@@ -1141,9 +1141,7 @@ var Dashboard = {
             return;
         }
 
-        var pageElem = page[0];
-
-        if (pageElem.hasPageTitle) {
+        if ($('.pageTitle', page).length) {
             return;
         }
 
@@ -1154,8 +1152,6 @@ var Dashboard = {
         }
 
         $(parent).prepend("<h2 class='pageTitle'>" + (document.title || "&nbsp;") + "</h2>");
-
-        pageElem.hasPageTitle = true;
     },
 
     setPageTitle: function (title) {