From 87a82eae9eda98168f37ef28441edf690605986d Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 25 Oct 2013 11:52:10 -0400
Subject: [PATCH] add user profile settings about virtual episodes

---
 dashboard-ui/edituser.html             |  14 +--
 dashboard-ui/library.html              |   1 +
 dashboard-ui/scripts/Itemdetailpage.js |  57 +++++-----
 dashboard-ui/scripts/edituserpage.js   |  37 +------
 dashboard-ui/scripts/librarybrowser.js |   3 +-
 dashboard-ui/scripts/usersettings.js   | 146 +++++++++++++++++++++++++
 dashboard-ui/updatepassword.html       |   3 +-
 dashboard-ui/userimage.html            |   5 +-
 dashboard-ui/usersettings.html         |  56 ++++++++++
 9 files changed, 244 insertions(+), 78 deletions(-)
 create mode 100644 dashboard-ui/scripts/usersettings.js
 create mode 100644 dashboard-ui/usersettings.html

diff --git a/dashboard-ui/edituser.html b/dashboard-ui/edituser.html
index 90924a3ccf..bc5401a7d1 100644
--- a/dashboard-ui/edituser.html
+++ b/dashboard-ui/edituser.html
@@ -10,6 +10,7 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" style="display: none;" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">Profile</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Settings</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">Image</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('updatepassword.html', true);">Password</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('library.html', true);" class="lnkMediaLibrary" style="display: none;">Media Library</a>
@@ -52,20 +53,7 @@
                             </li>
                         </ul>
                     </div>
-                    <h2>Video Playback Settings</h2>
                     <ul data-role="listview" class="ulForm">
-                        <li>
-                            <label for="selectAudioLanguage">Audio language preference: </label>
-                            <select name="selectAudioLanguage" id="selectAudioLanguage"></select>
-                        </li>
-                        <li>
-                            <label for="selectSubtitleLanguage">Subtitle language preference: </label>
-                            <select name="selectSubtitleLanguage" id="selectSubtitleLanguage"></select>
-                        </li>
-                        <li>
-                            <input type="checkbox" id="chkForcedSubtitlesOnly" name="chkForcedSubtitlesOnly" />
-                            <label for="chkForcedSubtitlesOnly">Display only forced subtitles</label>
-                        </li>
                         <li>
                             <button type="submit" data-theme="b" data-icon="ok">
                                 Save
diff --git a/dashboard-ui/library.html b/dashboard-ui/library.html
index 9a7f37ef5c..fff51b064a 100644
--- a/dashboard-ui/library.html
+++ b/dashboard-ui/library.html
@@ -10,6 +10,7 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" style="display: none;" data-mini="true">
                     <a href="#" data-role="button" onclick="Dashboard.navigate('edituser.html', true);">Profile</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Settings</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">Image</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('updatepassword.html', true);">Password</a>
                     <a href="#" data-role="button" class="ui-btn-active">Media Library</a>
diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js
index ead573bd24..2382413d57 100644
--- a/dashboard-ui/scripts/Itemdetailpage.js
+++ b/dashboard-ui/scripts/Itemdetailpage.js
@@ -20,9 +20,20 @@
             LibraryBrowser.renderParentName(item, $('.parentName', page));
 
             var context = getContext(item);
-            setInitialCollapsibleState(page, item, context);
-            renderDetails(page, item, context);
-            LibraryBrowser.renderDetailPageBackdrop(page, item);
+
+            Dashboard.getCurrentUser().done(function (user) {
+
+                setInitialCollapsibleState(page, item, context, user);
+                renderDetails(page, item, context);
+                LibraryBrowser.renderDetailPageBackdrop(page, item);
+
+                if (user.Configuration.IsAdministrator) {
+                    $('#editButtonContainer', page).show();
+                } else {
+                    $('#editButtonContainer', page).hide();
+                }
+
+            });
 
             if (item.LocationType == "Offline") {
 
@@ -33,7 +44,7 @@
             }
 
             var isMissingEpisode = false;
-            
+
             if (item.LocationType == "Virtual" && item.Type == "Episode") {
                 try {
                     if (item.PremiereDate && (new Date().getTime() >= parseISO8601Date(item.PremiereDate, { toLocal: true }).getTime())) {
@@ -43,7 +54,7 @@
 
                 }
             }
-            
+
             if (isMissingEpisode) {
 
                 $('#missingIndicator', page).show();
@@ -58,16 +69,6 @@
                 $('#playButtonContainer', page).hide();
             }
 
-            Dashboard.getCurrentUser().done(function (user) {
-
-                if (user.Configuration.IsAdministrator) {
-                    $('#editButtonContainer', page).show();
-                } else {
-                    $('#editButtonContainer', page).hide();
-                }
-
-            });
-
             $(".autoNumeric").autoNumeric('init');
 
             setPeopleHeader(page, item);
@@ -150,11 +151,11 @@
         }
     }
 
-    function setInitialCollapsibleState(page, item, context) {
+    function setInitialCollapsibleState(page, item, context, user) {
 
         if (item.ChildCount) {
             $('#childrenCollapsible', page).removeClass('hide');
-            renderChildren(page, item);
+            renderChildren(page, item, user);
         }
         else {
             $('#childrenCollapsible', page).addClass('hide');
@@ -235,7 +236,7 @@
             $('.itemCommunityRating', page).hide();
         }
 
-        if (item.Type != "Episode" && item.Type != "Movie") {
+        if (item.Type != "Episode" && item.Type != "Movie" && item.Type != "Series") {
             var premiereDateElem = $('#itemPremiereDate', page).show();
             LibraryBrowser.renderPremiereDate(premiereDateElem, item);
         } else {
@@ -445,14 +446,14 @@
             }).join(',');
         }
 
-        if (item.Studios.length) {
-            html += ' on <a class="textlink" href="itembynamedetails.html?context=' + context + '&studio=' + ApiClient.encodeName(item.Studios[0].Name) + '">' + item.Studios[0].Name + '</a>';
-        }
-
         if (item.AirTime) {
             html += ' at ' + item.AirTime;
         }
 
+        if (item.Studios.length) {
+            html += ' on <a class="textlink" href="itembynamedetails.html?context=' + context + '&studio=' + ApiClient.encodeName(item.Studios[0].Name) + '">' + item.Studios[0].Name + '</a>';
+        }
+
         if (html) {
             html = (item.Status == 'Ended' ? 'Aired ' : 'Airs ') + html;
 
@@ -481,17 +482,21 @@
         }
     }
 
-    function renderChildren(page, item) {
+    function renderChildren(page, item, user) {
 
         var sortBy = item.Type == "BoxSet" ? "ProductionYear,SortName" : "SortName";
 
-        ApiClient.getItems(Dashboard.getCurrentUserId(), {
-
+        var query = {
             ParentId: item.Id,
             SortBy: sortBy,
             Fields: "PrimaryImageAspectRatio,ItemCounts,DateCreated,AudioInfo"
+        };
 
-        }).done(function (result) {
+        if (item.Type == "Series" || item.Type == "Season" && !user.Configuration.DisplayVirtualEpisodes) {
+            query.ExcludeLocationTypes = "virtual";
+        }
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             if (item.Type == "MusicAlbum") {
 
diff --git a/dashboard-ui/scripts/edituserpage.js b/dashboard-ui/scripts/edituserpage.js
index b181ab6de6..998b8b8b96 100644
--- a/dashboard-ui/scripts/edituserpage.js
+++ b/dashboard-ui/scripts/edituserpage.js
@@ -1,21 +1,5 @@
 (function ($, window, document) {
 
-    function populateLanguages(select, allCultures) {
-
-        var html = "";
-
-        html += "<option value=''>None</option>";
-
-        for (var i = 0, length = allCultures.length; i < length; i++) {
-
-            var culture = allCultures[i];
-
-            html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
-        }
-
-        select.html(html).selectmenu("refresh");
-    }
-
     function populateRatings(allParentalRatings, page) {
 
         var html = "";
@@ -32,7 +16,7 @@
             if (ratings.length) {
 
                 var lastRating = ratings[ratings.length - 1];
-                
+
                 if (lastRating.Value === rating.Value) {
 
                     lastRating.Name += "/" + rating.Name;
@@ -54,7 +38,7 @@
         $('#selectMaxParentalRating', page).html(html).selectmenu("refresh");
     }
 
-    function loadUser(page, user, loggedInUser, parentalRatingsPromise, allCulturesPromise) {
+    function loadUser(page, user, loggedInUser, parentalRatingsPromise) {
 
         if (!loggedInUser.Configuration.IsAdministrator) {
             $('#parentalControlDiv', page).hide();
@@ -91,16 +75,6 @@
             $('#selectMaxParentalRating', page).val(ratingValue).selectmenu("refresh");
         });
 
-        allCulturesPromise.done(function (allCultures) {
-
-            populateLanguages($('#selectAudioLanguage', page), allCultures);
-            populateLanguages($('#selectSubtitleLanguage', page), allCultures);
-
-            $('#selectAudioLanguage', page).val(user.Configuration.AudioLanguagePreference || "").selectmenu("refresh");
-            $('#selectSubtitleLanguage', page).val(user.Configuration.SubtitleLanguagePreference || "").selectmenu("refresh");
-        });
-
-        $('#chkForcedSubtitlesOnly', page).checked(user.Configuration.UseForcedSubtitlesOnly || false).checkboxradio("refresh");
         $('#chkIsAdmin', page).checked(user.Configuration.IsAdministrator || false).checkboxradio("refresh");
         $('#chkBlockNotRated', page).checked(user.Configuration.BlockNotRated || false).checkboxradio("refresh");
 
@@ -132,9 +106,6 @@
 
         user.Configuration.IsAdministrator = $('#chkIsAdmin', page).checked();
 
-        user.Configuration.AudioLanguagePreference = $('#selectAudioLanguage', page).val();
-        user.Configuration.SubtitleLanguagePreference = $('#selectSubtitleLanguage', page).val();
-        user.Configuration.UseForcedSubtitlesOnly = $('#chkForcedSubtitlesOnly', page).checked();
         user.Configuration.BlockNotRated = $('#chkBlockNotRated', page).checked();
 
         user.Configuration.IsHidden = $('#chkIsHidden', page).checked();
@@ -231,11 +202,9 @@
 
         var parentalRatingsPromise = ApiClient.getParentalRatings();
 
-        var allCulturesPromise = ApiClient.getCultures();
-
         $.when(promise1, promise2).done(function (response1, response2) {
 
-            loadUser(page, response1[0] || response1, response2[0], parentalRatingsPromise, allCulturesPromise);
+            loadUser(page, response1[0] || response1, response2[0], parentalRatingsPromise);
 
         });
 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index a2e712e616..8a8f1d2371 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -2027,8 +2027,7 @@
 
             if (item.Genres && item.Genres.length) {
 
-                var prefix = item.Genres.length > 1 ? "Genres" : "Genre";
-                var html = prefix + ':&nbsp;&nbsp;';
+                var html = '';
 
                 for (var i = 0, length = item.Genres.length; i < length; i++) {
 
diff --git a/dashboard-ui/scripts/usersettings.js b/dashboard-ui/scripts/usersettings.js
new file mode 100644
index 0000000000..f3b813cede
--- /dev/null
+++ b/dashboard-ui/scripts/usersettings.js
@@ -0,0 +1,146 @@
+(function ($, window, document) {
+
+    function populateLanguages(select, allCultures) {
+
+        var html = "";
+
+        html += "<option value=''>None</option>";
+
+        for (var i = 0, length = allCultures.length; i < length; i++) {
+
+            var culture = allCultures[i];
+
+            html += "<option value='" + culture.ThreeLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
+        }
+
+        select.html(html).selectmenu("refresh");
+    }
+
+    function loadUser(page, user, loggedInUser, allCulturesPromise) {
+
+        Dashboard.setPageTitle(user.Name);
+
+        allCulturesPromise.done(function (allCultures) {
+
+            populateLanguages($('#selectAudioLanguage', page), allCultures);
+            populateLanguages($('#selectSubtitleLanguage', page), allCultures);
+
+            $('#selectAudioLanguage', page).val(user.Configuration.AudioLanguagePreference || "").selectmenu("refresh");
+            $('#selectSubtitleLanguage', page).val(user.Configuration.SubtitleLanguagePreference || "").selectmenu("refresh");
+        });
+
+        $('#chkForcedSubtitlesOnly', page).checked(user.Configuration.UseForcedSubtitlesOnly || false).checkboxradio("refresh");
+        $('#chkDisplayVirtualEpisodes', page).checked(user.Configuration.DisplayVirtualEpisodes || false).checkboxradio("refresh");
+
+        Dashboard.hideLoadingMsg();
+    }
+
+    function onSaveComplete(page) {
+
+        Dashboard.hideLoadingMsg();
+
+        var userId = getParameterByName("userId");
+
+        Dashboard.validateCurrentUser(page);
+
+        if (userId) {
+            Dashboard.alert("Settings saved.");
+        } else {
+            Dashboard.navigate("userprofiles.html");
+        }
+    }
+
+    function saveUser(user, page) {
+
+        user.Configuration.AudioLanguagePreference = $('#selectAudioLanguage', page).val();
+        user.Configuration.SubtitleLanguagePreference = $('#selectSubtitleLanguage', page).val();
+        user.Configuration.UseForcedSubtitlesOnly = $('#chkForcedSubtitlesOnly', page).checked();
+        user.Configuration.DisplayVirtualEpisodes = $('#chkDisplayVirtualEpisodes', page).checked();
+
+        ApiClient.updateUser(user).done(function () {
+            onSaveComplete(page);
+        });
+    }
+
+    function userSettingsPage() {
+
+        var self = this;
+
+        self.onSubmit = function () {
+
+            var page = $(this).parents('.page');
+
+            Dashboard.showLoadingMsg();
+
+            var userId = getParameterByName("userId");
+
+            ApiClient.getUser(userId).done(function (result) {
+                saveUser(result, page);
+            });
+
+            // Disable default form submission
+            return false;
+        };
+    }
+
+    window.UserSettingsPage = new userSettingsPage();
+
+    $(document).on('pagebeforeshow', "#userSettingsPage", function () {
+
+        var page = this;
+
+        var userId = getParameterByName("userId");
+
+        if (userId) {
+            $('#userProfileNavigation', page).show();
+        } else {
+            $('#userProfileNavigation', page).hide();
+        }
+
+        Dashboard.getCurrentUser().done(function (loggedInUser) {
+
+            if (loggedInUser.Configuration.IsAdministrator) {
+                $('.lnkMediaLibrary', page).show().prev().removeClass('ui-last-child');
+            } else {
+                $('.lnkMediaLibrary', page).hide().prev().addClass('ui-last-child');
+            }
+        });
+
+    }).on('pageshow', "#userSettingsPage", function () {
+
+        var page = this;
+
+        Dashboard.showLoadingMsg();
+
+        var userId = getParameterByName("userId");
+
+        var promise1;
+
+        if (!userId) {
+
+            var deferred = $.Deferred();
+
+            deferred.resolveWith(null, [{
+                Configuration: {}
+            }]);
+
+            promise1 = deferred.promise();
+        } else {
+
+            promise1 = ApiClient.getUser(userId);
+        }
+
+        var promise2 = Dashboard.getCurrentUser();
+
+        var allCulturesPromise = ApiClient.getCultures();
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+
+            loadUser(page, response1[0] || response1, response2[0], allCulturesPromise);
+
+        });
+
+        $("#userSettingsForm input:first").focus();
+    });
+
+})(jQuery, window, document);
\ No newline at end of file
diff --git a/dashboard-ui/updatepassword.html b/dashboard-ui/updatepassword.html
index bdfa61e6c4..9470ab0ea6 100644
--- a/dashboard-ui/updatepassword.html
+++ b/dashboard-ui/updatepassword.html
@@ -10,9 +10,10 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" onclick="Dashboard.navigate('edituser.html', true);" data-role="button">Profile</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Settings</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">Image</a>
                     <a href="#" data-role="button" class="ui-btn-active">Password</a>
-                    <a href="#" data-role="button" class="lnkMediaLibrary" style="display:none;" onclick="Dashboard.navigate('library.html', true);">Media Library</a>
+                    <a href="#" data-role="button" class="lnkMediaLibrary" style="display: none;" onclick="Dashboard.navigate('library.html', true);">Media Library</a>
                 </div>
                 <h3 style="display: none;">Create Password</h3>
                 <form id="updatePasswordForm">
diff --git a/dashboard-ui/userimage.html b/dashboard-ui/userimage.html
index fe07147d1c..4478c55b30 100644
--- a/dashboard-ui/userimage.html
+++ b/dashboard-ui/userimage.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title> </title>
+    <title></title>
 </head>
 <body>
     <div id="userImagePage" data-role="page" class="page type-interior userProfilesConfigurationPage">
@@ -10,9 +10,10 @@
             <div class="content-primary">
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" onclick="Dashboard.navigate('edituser.html', true);" data-role="button">Profile</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Settings</a>
                     <a href="#" data-role="button" class="ui-btn-active">Image</a>
                     <a href="#" data-role="button" onclick="Dashboard.navigate('updatepassword.html', true);">Password</a>
-                    <a href="#" data-role="button" onclick="Dashboard.navigate('library.html', true);" class="lnkMediaLibrary" style="display:none;">Media Library</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('library.html', true);" class="lnkMediaLibrary" style="display: none;">Media Library</a>
                 </div>
                 <div class="readOnlyContent">
                     <p id="fldImage"></p>
diff --git a/dashboard-ui/usersettings.html b/dashboard-ui/usersettings.html
new file mode 100644
index 0000000000..bd29ec83c2
--- /dev/null
+++ b/dashboard-ui/usersettings.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+</head>
+<body>
+    <div id="userSettingsPage" data-role="page" class="page type-interior userProfilesConfigurationPage">
+
+        <div data-role="content">
+            <div class="content-primary">
+                <div data-role="controlgroup" data-type="horizontal" class="localnav" id="userProfileNavigation" style="display: none;" data-mini="true">
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('edituser.html', true);">Profile</a>
+                    <a href="#" data-role="button" class="ui-btn-active">Settings</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">Image</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('updatepassword.html', true);">Password</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('library.html', true);" class="lnkMediaLibrary" style="display: none;">Media Library</a>
+                </div>
+                <form id="userSettingsForm">
+                    <ul data-role="listview" class="ulForm">
+                        <li>
+                            <input type="checkbox" id="chkDisplayVirtualEpisodes" name="chkDisplayVirtualEpisodes" />
+                            <label for="chkDisplayVirtualEpisodes">Display missing and unaired episodes within seasons</label>
+                        </li>
+                    </ul>
+                    <h2>Video Playback Settings</h2>
+                    <ul data-role="listview" class="ulForm">
+                        <li>
+                            <label for="selectAudioLanguage">Audio language preference: </label>
+                            <select name="selectAudioLanguage" id="selectAudioLanguage"></select>
+                        </li>
+                        <li>
+                            <label for="selectSubtitleLanguage">Subtitle language preference: </label>
+                            <select name="selectSubtitleLanguage" id="selectSubtitleLanguage"></select>
+                        </li>
+                        <li>
+                            <input type="checkbox" id="chkForcedSubtitlesOnly" name="chkForcedSubtitlesOnly" />
+                            <label for="chkForcedSubtitlesOnly">Display only forced subtitles</label>
+                        </li>
+                        <li>
+                            <button type="submit" data-theme="b" data-icon="ok">
+                                Save
+                            </button>
+                            <button type="button" onclick="history.back();" data-icon="delete">
+                                Cancel
+                            </button>
+                        </li>
+                    </ul>
+                </form>
+            </div>
+        </div>
+        <script type="text/javascript">
+            $('#userSettingsForm').on('submit', UserSettingsPage.onSubmit);
+        </script>
+    </div>
+</body>
+</html>