adding people edit screen

dashboard-ui/css/tileitem.css

@@ -241,7 +241,7 @@
         height: 150px;
     }
 
-    .backdropTileItem, .squareTileItem {
+    .backdropTileItem, .squareTileItem, .backdropTileItem.posterTileItem {
         width: 31.5%;
     }
 
@@ -264,7 +264,7 @@
         height: 170px;
     }
 
-    .backdropTileItem {
+    .backdropTileItem, .backdropTileItem.posterTileItem {
         width: 32%;
     }
 
@@ -283,7 +283,7 @@
 
 
 @media all and (min-width: 1920px) {
-    .backdropTileItem {
+    .backdropTileItem, .backdropTileItem.posterTileItem {
         width: 31.5%;
     }
 
@@ -309,7 +309,7 @@
 }
 
 @media all and (min-width: 2000px) {
-    .backdropTileItem {
+    .backdropTileItem, .backdropTileItem.posterTileItem {
         width: 23.5%;
     }
 
@@ -335,7 +335,7 @@
 }
 
 @media all and (min-width: 2200px) {
-    .backdropTileItem {
+    .backdropTileItem, .backdropTileItem.posterTileItem {
         width: 24%;
     }
 
@@ -361,7 +361,7 @@
 }
 
 @media all and (min-width: 2540px) {
-    .backdropTileItem {
+    .backdropTileItem, .backdropTileItem.posterTileItem {
         width: 18.75%;
     }
 

dashboard-ui/edititemimages.html

@@ -14,6 +14,7 @@
                 <br />
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" onclick="Dashboard.navigate('edititemmetadata.html', true);">Metadata</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('edititempeople.html', true);">People</a>
                     <a href="#" data-role="button" class="ui-btn-active">Images</a>
                 </div>
 

dashboard-ui/edititemmetadata.html

@@ -13,6 +13,7 @@
                 <br />
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">Metadata</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('edititempeople.html', true);">People</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('edititemimages.html', true);">Images</a>
                 </div>
 
@@ -133,7 +134,7 @@
                             <div data-role="editableListviewContainer">
                                 <div data-role="fieldcontain">
                                     <input type="text" data-mini="true" />    
-                                    <a data-role="button" data-theme="b" data-inline="true" data-mini="true" data-icon="plus" data-action="add">Add</a>
+                                    <a data-role="button" data-theme="b" data-inline="true" data-mini="true" data-icon="plus"  onclick="EditItemMetadataPage.AddElementToEditableListview(this)">Add</a>
                                 </div>
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listGenres"></ul>
                             </div>
@@ -143,7 +144,7 @@
                             <div data-role="editableListviewContainer">
                                 <div data-role="fieldcontain">
                                     <input type="text" data-mini="true" />    
-                                    <a data-role="button" data-theme="b" data-inline="true" data-mini="true" data-icon="plus" data-action="add">Add</a>
+                                    <a data-role="button" data-theme="b" data-inline="true" data-mini="true" data-icon="plus" onclick="EditItemMetadataPage.AddElementToEditableListview(this)">Add</a>
                                 </div>
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listStudios"></ul>
                             </div>
@@ -153,7 +154,7 @@
                             <div data-role="editableListviewContainer">
                                 <div data-role="fieldcontain">
                                     <input type="text" data-mini="true" />    
-                                    <a data-role="button" data-theme="b" data-inline="true" data-mini="true" data-icon="plus" data-action="add">Add</a>
+                                    <a data-role="button" data-theme="b" data-inline="true" data-mini="true" data-icon="plus" onclick="EditItemMetadataPage.AddElementToEditableListview(this)">Add</a>
                                 </div>
                                 <ul data-role="listview" data-inset="true" data-split-icon="delete" id="listTags"></ul>
                             </div>

dashboard-ui/edititempeople.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Browser</title>
+</head>
+<body>
+    <div id="editItemPeoplePage" data-role="page" class="page libraryPage" data-theme="a">
+        <div class="ui-bar-c parentName" style="display: none;">
+        </div>
+        <div data-role="content">
+            <div class="ehsContent">
+                <h1 class="itemName detailPageName"></h1>
+                <br />
+                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('edititemmetadata.html', true);">Metadata</a>
+                    <a href="#" data-role="button" class="ui-btn-active">People</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('edititemimages.html', true);">Images</a>
+                </div>
+                <button type="button" data-icon="plus" data-inline="true" onclick="EditItemPeoplePage.addPerson();">Add Person</button>
+            </div>
+            <div class="itemsContainer" id="peopleContainer"></div>
+        </div>
+    </div>
+</body>
+</html>

dashboard-ui/scripts/edititemmetadata.js

@@ -30,23 +30,6 @@
 
             Dashboard.hideLoadingMsg();
         });
-
-        $(page).on('click', 'ul[data-role="listview"] li a.removeBtn', function () {
-            var list = $(this).parents('ul[data-role="listview"]');
-            $(this).parent().remove();
-            list.listview('refresh');
-        });
-        
-        $('[data-role="editableListviewContainer"] a[data-action="add"]', page).click(function () {
-            var input = $(this).parent().find('input[type="text"]');
-            var text = input.val();
-            input.val('');
-            if (text == '') return;
-            var list = $(this).parents('[data-role="editableListviewContainer"]').find('ul[data-role="listview"]');
-            var items = editableListViewValues(list);
-            items.push(text);
-            populateListView(list, items);
-        });
     }
 
     function setFieldVisibilities(page, item) {
@@ -202,7 +185,7 @@
         populateAirDays(selectAirDays);
         selectAirDays.val(item.AirDays || "").selectmenu('refresh');
         populateListView($('#listGenres', page), item.Genres);
-        populateListView($('#listStudios', page), item.Studios.map(function (element) { return element.Name; }));
+        populateListView($('#listStudios', page), item.Studios.map(function (element) { return element.Name || ''; }));
         populateListView($('#listTags', page), item.Tags);
         
         $('#txtName', page).val(item.Name || "");
@@ -374,7 +357,7 @@
         items.sort(function(a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); });
         var html = '';
         for (var i = 0; i < items.length; i++) {
-            html += '<li><a class="data">' + items[i] + '</a><a class="removeBtn"></a></li>';
+            html += '<li><a class="data">' + items[i] + '</a><a onclick="EditItemMetadataPage.RemoveElementFromListview(this)"></a></li>';
         }
         list.html(html).listview('refresh');
     }
@@ -425,6 +408,7 @@
                 Language: $('#selectLanguage', form).val(),
                 OfficialRating: $('#selectOfficialRating', form).val(),
                 CustomRating: $('#selectCustomRating', form).val(),
+                People: currentItem.People,
                 
                 ProviderIds:
                 {
@@ -447,6 +431,22 @@
 
             return false;
         };
+        self.AddElementToEditableListview = function(source) {
+            var input = $(source).parent().find('input[type="text"]');
+            var text = input.val();
+            input.val('');
+            if (text == '') return;
+            var list = $(source).parents('[data-role="editableListviewContainer"]').find('ul[data-role="listview"]');
+            var items = editableListViewValues(list);
+            items.push(text);
+            populateListView(list, items);
+        };
+
+        self.RemoveElementFromListview = function(source) {
+            var list = $(source).parents('ul[data-role="listview"]');
+            $(source).parent().remove();
+            list.listview('refresh');
+        };
     }
 
     window.EditItemMetadataPage = new editItemMetadataPage();

dashboard-ui/scripts/edititempeople.js

@@ -0,0 +1,253 @@
+(function ($, document, window) {
+
+    var currentItem;
+
+    function reload(page) {
+
+        var id = getParameterByName('id');
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+            if (item.IsFolder) {
+                $('#fldRecursive', page).show();
+            } else {
+                $('#fldRecursive', page).hide();
+            }
+
+            $('#btnRefresh', page).button('enable');
+
+            $('#refreshLoading', page).hide();
+
+            currentItem = item;
+            LibraryBrowser.renderName(item, $('.itemName', page), true);
+            LibraryBrowser.renderParentName(item, $('.parentName', page));
+            fillPeopleContainer(item.People,$('#peopleContainer',page));
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    function fillPeopleContainer(people, container) {
+        people = people || new Array();
+        var html = '';
+        for (var i = 0; i < people.length; i++) {
+            html += constructPerson(people[i]);
+        }
+
+        container.html(html).trigger('create');
+    }
+
+    function constructPerson(person) {
+        var html = '<div class="tileItem posterTileItem">';
+        var imgUrl;
+        var name = person.Name || "";
+        var role = person.Role || "";
+        var type = person.Type || "";
+        
+        if (person.PrimaryImageTag) {
+
+            imgUrl = ApiClient.getPersonImageUrl(person.Name, {
+                width: 130,
+                tag: person.PrimaryImageTag,
+                type: "primary"
+            });
+
+        } else {
+
+            imgUrl = "css/images/items/list/person.png";
+        }
+        html += '<div class="tileImage" style="background-image: url(\''+imgUrl+'\');"></div>';
+        html += '<div class="tileContent">';
+        html += '<div data-role="fieldcontain">';
+        html += '<input type="hidden" name="originalName" value="' + name + '">';
+        html += '<input type="hidden" name="originalRole" value="' + role + '">';
+        html += '<input type="hidden" name="originalType" value="' + type + '">';
+        html += '<label for="txtName">Name:</label>';
+        html += '<span class="read" style="font-size: 16px;line-height: 1.4;"> ' + (name) + '</span><span style="display:none;" class="edit">';
+        html += '<input type="text" name="txtName" required="required" data-mini="true" value="' + (name) + '"/>';
+        html += '</span>';
+        html += '</div>';
+        html += '<div data-role="fieldcontain">';
+        html += '<label for="txtRole">Role:</label>';
+        html += '<span class="read" style="font-size: 16px;line-height: 1.4;"> ' + (role) + '</span><span style="display:none;" class="edit">';
+        html += '<input type="text" name="txtRole" required="required" data-mini="true" value="' + (role) + '"/>';
+        html += '</span>';
+        html += '</div>';
+        html += '<div data-role="fieldcontain">';
+        html += '<label for="selectType">Type:</label>';
+        html += '<span class="read" style="font-size: 16px;line-height: 1.4;"> ' + (type) + '</span><span style="display:none;" class="edit">';
+        html += '<select name="selectType">';
+        html += generateTypes(type);
+        html += '</select>';
+        html += '</span>';
+        html += '</div>';
+        html += '<p>';
+        html += '<span class="read">';
+        html += '<button type="button" class="edit" data-mini="true" data-inline="true"  onclick="EditItemPeoplePage.displayEdit(this)">Edit</button>';
+        html += '</span><span style="display:none;" class="edit">';
+        html += '<button type="button" data-mini="true" data-inline="true" onclick="EditItemPeoplePage.hideEdit(this)">Cancel</button>';
+        html += '<button type="button" data-icon="check" data-mini="true" data-inline="true" data-theme="b" onclick="EditItemPeoplePage.savePerson(this)">Save</button>';
+        html += '<button type="button" data-icon="delete" data-mini="true" data-inline="true" data-iconpos="notext" onclick="EditItemPeoplePage.removePerson(this)">Delete</button>';
+        html += '</span>';
+        html += '</p>';
+        html += '</div>';
+        html += '</div>';
+        return html;
+    }
+
+    function generateTypes(type) {
+        var types = new Array("", "Actor", "Director", "Composer", "Writer", "GuestStar", "Producer");
+        var html = "";
+
+        for (var i = 0; i < types.length; i++) {
+            html += '<option val="' + types[i] + '" ' + (types[i] == type ? 'selected="selected"' : '') + '>' + types[i] + '</option>';
+        }
+
+        return html;
+    }
+    function editItemPeoplePage() {
+
+        var self = this;
+        self.displayEdit = function (source) {
+            $(source).parents('.tileItem').find('span.edit').show();
+            $(source).parents('.tileItem').find('span.read').hide();
+        };
+        self.hideEdit = function (source) {
+            var item = $(source).parents('.tileItem');
+            item.find('span.edit').hide();
+            item.find('span.read').show();
+            item.find('input[name="txtName"]').val(item.find('input[name="originalName"]').val());
+            item.find('input[name="txtRole"]').val(item.find('input[name="originalRole"]').val());
+            item.find('select[name="selectType"]').val(item.find('input[name="originalType"]').val()).selectmenu('refresh');
+        };
+
+        self.removePerson = function (source) {
+
+            var page = $.mobile.activePage;
+
+            Dashboard.confirm("Are you sure you wish to delete this person?", "Delete Person", function (result) {
+                if (result) {
+                    var item = $(source).parents('.tileItem');
+                    var originalName = item.find('input[name="originalName"]').val();
+                    var originalRole = item.find('input[name="originalRole"]').val();
+                    var originalType = item.find('input[name="originalType"]').val();
+                    for (var i = 0; i < currentItem.People.length; i++) {
+                        var name = currentItem.People[i].Name || "";
+                        var role = currentItem.People[i].Role || "";
+                        var type = currentItem.People[i].Type || "";
+                        if ((name + role + type) == (originalName + originalRole + originalType)) {
+                            currentItem.People.splice(i, 1);
+                            ApiClient.updateItem(currentItem).done(function () {
+                                reload(page);
+                            });
+                        }
+                    }
+
+                }
+            });
+        };
+        self.savePerson = function(source) {
+
+            var page = $.mobile.activePage;
+
+            var item = $(source).parents('.tileItem');
+            var originalName = item.find('input[name="originalName"]').val();
+            var originalRole = item.find('input[name="originalRole"]').val();
+            var originalType = item.find('input[name="originalType"]').val();
+            for (var i = 0; i < currentItem.People.length; i++) {
+                var name = currentItem.People[i].Name || "";
+                var role = currentItem.People[i].Role || "";
+                var type = currentItem.People[i].Type || "";
+                if ((name + role + type) == (originalName + originalRole + originalType)) {
+                    currentItem.People[i].Name = item.find('input[name="txtName"]').val();
+                    currentItem.People[i].Role = item.find('input[name="txtRole"]').val();
+                    currentItem.People[i].Type = item.find('select[name="selectType"]').val();
+                    ApiClient.updateItem(currentItem).done(function() {
+                        reload(page);
+                    });
+                    break;
+                }
+            }
+        };
+
+        self.addPerson = function() {
+            var page = $.mobile.activePage;
+
+            var html = '<div data-role="popup" id="popupCreatePerson" class="ui-corner-all popup" style=" width: 270px;" >';
+
+            html += '<div class="ui-corner-top ui-bar-a" style="text-align: center; padding: 0 20px;">';
+            html += '<h3>Add Person</h3>';
+            html += '</div>';
+
+            html += '<div data-role="content" class="ui-corner-bottom ui-content" style="padding:10px;">';
+            html += '<form>';
+            html += '<label for="txtPersonName">Name:</label>';
+            html += '<input type="text" id="txtPersonName" name="txtPersonName" required="required"/>';
+            
+            html += '<label for="txtPersonRole">Role:</label>';
+            html += '<input type="text" id="txtPersonRole" name="txtPersonRole" style="font-weight:bold;" />';
+            
+            html += '<label for="selectPersonType">Type:</label>';
+            html += '<select id="selectPersonType" name="selectPersonType">';
+            html += generateTypes('');
+            html += '</select>';
+
+            html += '<p>';
+            html += '<button type="submit" data-theme="b" data-icon="ok">OK</button>';
+            html += '<button type="button" data-icon="delete" onclick="$(this).parents(\'.popup\').popup(\'close\');">Cancel</button>';
+            html += '</p>';
+            html += '</form>';
+            html += '</div>';
+            html += '</div>';
+
+            $(page).append(html);
+
+            var popup = $('#popupCreatePerson').popup().trigger('create').on("popupafteropen", function() {
+                $('#popupCreatePerson input:first', this).focus();
+            }).popup("open").on("popupafterclose", function() {
+
+                $('form', this).off("submit");
+                $(this).off("click").off("popupafterclose").remove();
+
+            });
+            
+            $('form', popup).on('submit', function () {
+
+                var form = $(this);
+
+                var name = $('#txtPersonName',form).val();
+                if (name != '') {
+                    var role = $('#txtPersonRole', form).val();
+                    var type = $('#selectPersonType', form).val();
+                    currentItem.People.push({ Name: name, Role: role, Type: type });
+                    ApiClient.updateItem(currentItem).done(function () {
+                        reload(page);
+                    });
+                    popup.popup("close");
+                }
+                return false;
+            });
+        };
+    }
+
+    window.EditItemPeoplePage = new editItemPeoplePage();
+
+    $(document).on('pageinit', "#editItemPeoplePage", function () {
+
+        var page = this;
+
+    }).on('pageshow', "#editItemPeoplePage", function () {
+
+        var page = this;
+
+        reload(page);
+
+    }).on('pagehide', "#editItemPeoplePage", function () {
+
+        var page = this;
+
+        currentItem = null;
+    });
+
+})(jQuery, document, window);