split out parental controls into a separate edit page

dashboard-ui/scripts/site.js

@@ -487,7 +487,7 @@ var Dashboard = {
             html += '<img style="max-height:125px;max-width:200px;" src="' + imageUrl + '" />';
             html += '</p>';
 
-            html += '<p><a data-mini="true" data-role="button" href="edituser.html?userId=' + user.Id + '" data-icon="user">View Profile</button></a>';
+            html += '<p><a data-mini="true" data-role="button" href="useredit.html?userId=' + user.Id + '" data-icon="user">View Profile</button></a>';
             html += '<p><button data-mini="true" type="button" onclick="Dashboard.logout();" data-icon="lock">Sign Out</button></p>';
             html += '</div>';
 

dashboard-ui/scripts/useredit.js

@@ -1,52 +1,12 @@
 (function ($, window, document) {
 
-    function populateRatings(allParentalRatings, page) {
+    function loadUser(page, user, loggedInUser) {
-
-        var html = "";
-
-        html += "<option value=''></option>";
-
-        var ratings = [];
-        var i, length, rating;
-
-        for (i = 0, length = allParentalRatings.length; i < length; i++) {
-
-            rating = allParentalRatings[i];
-
-            if (ratings.length) {
-
-                var lastRating = ratings[ratings.length - 1];
-
-                if (lastRating.Value === rating.Value) {
-
-                    lastRating.Name += "/" + rating.Name;
-                    continue;
-                }
-
-            }
-
-            ratings.push({ Name: rating.Name, Value: rating.Value });
-        }
-
-        for (i = 0, length = ratings.length; i < length; i++) {
-
-            rating = ratings[i];
-
-            html += "<option value='" + rating.Value + "'>" + rating.Name + "</option>";
-        }
-
-        $('#selectMaxParentalRating', page).html(html).selectmenu("refresh");
-    }
-
-    function loadUser(page, user, loggedInUser, parentalRatingsPromise) {
 
         if (!loggedInUser.Configuration.IsAdministrator) {
-            $('#parentalControlDiv', page).hide();
             $('#fldIsAdmin', page).hide();
             $('#fldEnableRemoteControlOtherUsers', page).hide();
             $('#accessControlDiv', page).hide();
         } else {
-            $('#parentalControlDiv', page).show();
             $('#accessControlDiv', page).show();
             $('#fldIsAdmin', page).show();
             $('#fldEnableRemoteControlOtherUsers', page).show();
@@ -56,27 +16,6 @@
 
         $('#txtUserName', page).val(user.Name);
 
-        parentalRatingsPromise.done(function (allParentalRatings) {
-
-            populateRatings(allParentalRatings, page);
-
-            var ratingValue = "";
-
-            if (user.Configuration.MaxParentalRating) {
-
-                for (var i = 0, length = allParentalRatings.length; i < length; i++) {
-
-                    var rating = allParentalRatings[i];
-
-                    if (user.Configuration.MaxParentalRating >= rating.Value) {
-                        ratingValue = rating.Value;
-                    }
-                }
-            }
-
-            $('#selectMaxParentalRating', page).val(ratingValue).selectmenu("refresh");
-        });
-
         $('#chkIsAdmin', page).checked(user.Configuration.IsAdministrator || false).checkboxradio("refresh");
         $('#chkBlockNotRated', page).checked(user.Configuration.BlockNotRated || false).checkboxradio("refresh");
 
@@ -105,7 +44,6 @@
     function saveUser(user, page) {
 
         user.Name = $('#txtUserName', page).val();
-        user.Configuration.MaxParentalRating = $('#selectMaxParentalRating', page).val() || null;
 
         user.Configuration.IsAdministrator = $('#chkIsAdmin', page).checked();
 
@@ -172,9 +110,9 @@
         Dashboard.getCurrentUser().done(function (loggedInUser) {
 
             if (loggedInUser.Configuration.IsAdministrator) {
-                $('.lnkMediaLibrary', page).show().prev().removeClass('ui-last-child');
+                $('#lnkParentalControl', page).show();
             } else {
-                $('.lnkMediaLibrary', page).hide().prev().addClass('ui-last-child');
+                $('#lnkParentalControl', page).hide();
             }
         });
 
@@ -204,15 +142,13 @@
 
         var promise2 = Dashboard.getCurrentUser();
 
-        var parentalRatingsPromise = ApiClient.getParentalRatings();
-
         $.when(promise1, promise2).done(function (response1, response2) {
 
-            loadUser(page, response1[0] || response1, response2[0], parentalRatingsPromise);
+            loadUser(page, response1[0] || response1, response2[0]);
 
         });
 
-        $("#editUserProfileForm input:first").focus();
+        $("form input:first", page).focus();
     });
 
 })(jQuery, window, document);

dashboard-ui/scripts/userimagepage.js

@@ -185,9 +185,9 @@
         Dashboard.getCurrentUser().done(function (loggedInUser) {
 
             if (loggedInUser.Configuration.IsAdministrator) {
-                $('.lnkMediaLibrary', page).show().prev().removeClass('ui-last-child');
+                $('#lnkParentalControl', page).show();
             } else {
-                $('.lnkMediaLibrary', page).hide().prev().addClass('ui-last-child');
+                $('#lnkParentalControl', page).hide();
             }
         });
 

dashboard-ui/scripts/userparentalcontrol.js

@@ -0,0 +1,144 @@
+(function ($, window, document) {
+
+    function populateRatings(allParentalRatings, page) {
+
+        var html = "";
+
+        html += "<option value=''></option>";
+
+        var ratings = [];
+        var i, length, rating;
+
+        for (i = 0, length = allParentalRatings.length; i < length; i++) {
+
+            rating = allParentalRatings[i];
+
+            if (ratings.length) {
+
+                var lastRating = ratings[ratings.length - 1];
+
+                if (lastRating.Value === rating.Value) {
+
+                    lastRating.Name += "/" + rating.Name;
+                    continue;
+                }
+
+            }
+
+            ratings.push({ Name: rating.Name, Value: rating.Value });
+        }
+
+        for (i = 0, length = ratings.length; i < length; i++) {
+
+            rating = ratings[i];
+
+            html += "<option value='" + rating.Value + "'>" + rating.Name + "</option>";
+        }
+
+        $('#selectMaxParentalRating', page).html(html).selectmenu("refresh");
+    }
+
+    function loadUser(page, user, loggedInUser, allParentalRatings) {
+
+        Dashboard.setPageTitle(user.Name);
+
+        populateRatings(allParentalRatings, page);
+
+        var ratingValue = "";
+
+        if (user.Configuration.MaxParentalRating) {
+
+            for (var i = 0, length = allParentalRatings.length; i < length; i++) {
+
+                var rating = allParentalRatings[i];
+
+                if (user.Configuration.MaxParentalRating >= rating.Value) {
+                    ratingValue = rating.Value;
+                }
+            }
+        }
+
+        $('#selectMaxParentalRating', page).val(ratingValue).selectmenu("refresh");
+
+        $('#chkBlockNotRated', page).checked(user.Configuration.BlockNotRated || false).checkboxradio("refresh");
+
+        Dashboard.hideLoadingMsg();
+    }
+
+    function onSaveComplete(page) {
+
+        Dashboard.hideLoadingMsg();
+
+        Dashboard.validateCurrentUser(page);
+
+        Dashboard.alert("Settings saved.");
+    }
+
+    function saveUser(user, page) {
+
+        user.Configuration.MaxParentalRating = $('#selectMaxParentalRating', page).val() || null;
+
+        user.Configuration.BlockNotRated = $('#chkBlockNotRated', page).checked();
+
+        ApiClient.updateUser(user).done(function () {
+            onSaveComplete(page);
+        });
+    }
+
+    window.UserParentalControlPage = {
+
+        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;
+        }
+    };
+
+    $(document).on('pageshow', "#userParentalControlPage", 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 promise3 = ApiClient.getParentalRatings();
+
+        $.when(promise1, promise2, promise3).done(function (response1, response2, response3) {
+
+            loadUser(page, response1[0] || response1, response2[0], response3[0]);
+
+        });
+
+        $("form input:first", page).focus();
+    });
+
+})(jQuery, window, document);

dashboard-ui/scripts/userpassword.js

@@ -101,9 +101,9 @@
         Dashboard.getCurrentUser().done(function (loggedInUser) {
 
             if (loggedInUser.Configuration.IsAdministrator) {
-                $('.lnkMediaLibrary', page).show().prev().removeClass('ui-last-child');
+                $('#lnkParentalControl', page).show();
             } else {
-                $('.lnkMediaLibrary', page).hide().prev().addClass('ui-last-child');
+                $('#lnkParentalControl', page).hide();
             }
         });
 

dashboard-ui/scripts/userprofilespage.js

@@ -22,7 +22,7 @@
 
             html += "<li>";
 
-            html += "<a href='edituser.html?userId=" + user.Id + "'>";
+            html += "<a href='useredit.html?userId=" + user.Id + "'>";
 
             if (user.PrimaryImageTag) {
 

dashboard-ui/scripts/usersettings.js

@@ -91,20 +91,12 @@
 
         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');
+                $('#lnkParentalControl', page).show();
             } else {
-                $('.lnkMediaLibrary', page).hide().prev().addClass('ui-last-child');
+                $('#lnkParentalControl', page).hide();
             }
         });
 

dashboard-ui/useredit.html

@@ -10,9 +10,10 @@
             <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('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">Parental Control</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">Password</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Preferences</a>
                 </div>
                 <form id="editUserProfileForm">
                     <ul data-role="listview" class="ulForm">
@@ -29,33 +30,20 @@
                             <label for="chkEnableRemoteControlOtherUsers">Allow this user to remote control other users</label>
                         </li>
                     </ul>
-                    <div id="accessControlDiv" style="display: none">
+                    <div id="accessControlDiv" style="display: none" data-role="collapsible">
-                        <h2>Access Control</h2>
+                        <h2>Advanced Control</h2>
-                        <ul data-role="listview" class="ulForm">
+                        <div id="fldIsEnabled" style="margin: 1em 0 2em;">
-                            <li id="fldIsEnabled">
+                            <input type="checkbox" id="chkDisabled" name="chkDisabled" />
-                                <input type="checkbox" id="chkDisabled" name="chkDisabled" />
+                            <label for="chkDisabled">Disable this user</label>
-                                <label for="chkDisabled">Disable this user</label>
+                            <div class="fieldDescription">If disabled the server will not allow any connections from this user. Existing connections will be abruptly terminated.</div>
-                                <div class="fieldDescription">If disabled the server will not allow any connections from this user. Existing connections will be abruptly terminated.</div>
+                        </div>
-                            </li>
+                        <p id="fldIsHidden">
-                            <li id="fldIsHidden">
+                            <input type="checkbox" id="chkIsHidden" name="chkIsHidden" />
-                                <input type="checkbox" id="chkIsHidden" name="chkIsHidden" />
+                            <label for="chkIsHidden">Hide this user from login screens</label>
-                                <label for="chkIsHidden">Hide this user from login screens</label>
+
-                            </li>
+                        </p>
-                        </ul>
-                    </div>
-                    <div id="parentalControlDiv" style="display: none">
-                        <h2>Parental Control</h2>
-                        <ul data-role="listview" class="ulForm">
-                            <li id="fldMaxParentalRating">
-                                <label for="selectMaxParentalRating">Maximum allowed parental rating:</label>
-                                <select name="selectMaxParentalRating" id="selectMaxParentalRating"></select>
-                            </li>
-                            <li id="fldBlockNotRated">
-                                <input type="checkbox" id="chkBlockNotRated" name="chkBlockNotRated" />
-                                <label for="chkBlockNotRated">Hide content with no rating information</label>
-                            </li>
-                        </ul>
                     </div>
+                    <br />
                     <ul data-role="listview" class="ulForm">
                         <li>
                             <button type="submit" data-theme="b" data-icon="check">

dashboard-ui/userimage.html

@@ -9,10 +9,11 @@
         <div data-role="content">
             <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="#" onclick="Dashboard.navigate('useredit.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('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">Parental Control</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">Password</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Preferences</a>
                 </div>
                 <div class="readOnlyContent">
                     <p id="fldImage"></p>

dashboard-ui/userparentalcontrol.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+</head>
+<body>
+    <div id="userParentalControlPage" 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" data-mini="true">
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('useredit.html', true);">Profile</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('userimage.html', true);">Image</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" class="ui-btn-active">Parental Control</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">Password</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Preferences</a>
+                </div>
+                <form class="userParentalControlForm">
+                    
+                    <ul data-role="listview" class="ulForm">
+                        <li>
+                            <label for="selectMaxParentalRating">Maximum allowed parental rating:</label>
+                            <select name="selectMaxParentalRating" id="selectMaxParentalRating"></select>
+                        </li>
+                        <li>
+                            <input type="checkbox" id="chkBlockNotRated" name="chkBlockNotRated" />
+                            <label for="chkBlockNotRated">Hide content with no rating information</label>
+                        </li>
+                    </ul>
+                    <ul data-role="listview" class="ulForm">
+                        <li>
+                            <button type="submit" data-theme="b" data-icon="check">
+                                Save
+                            </button>
+                            <button type="button" onclick="history.back();" data-icon="delete">
+                                Cancel
+                            </button>
+                        </li>
+                    </ul>
+                </form>
+            </div>
+        </div>
+        <script type="text/javascript">
+            $('.userParentalControlForm').off('submit', UserParentalControlPage.onSubmit).on('submit', UserParentalControlPage.onSubmit);
+        </script>
+    </div>
+</body>
+</html>

dashboard-ui/userpassword.html

@@ -9,10 +9,11 @@
         <div data-role="content">
             <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="#" onclick="Dashboard.navigate('useredit.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" onclick="Dashboard.navigate('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">Parental Control</a>
                     <a href="#" data-role="button" class="ui-btn-active">Password</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('usersettings.html', true);">Preferences</a>
                 </div>
                 <h2 class="formheader" style="display: none;">Create Password</h2>
                 <form id="updatePasswordForm">

dashboard-ui/userprofiles.html

@@ -16,7 +16,7 @@
 
                 <div class="readOnlyContent">
                     <p id="pAddUser">
-                        <button type="button" data-icon="plus" onclick="Dashboard.navigate('edituser.html');">
+                        <button type="button" data-icon="plus" onclick="Dashboard.navigate('useredit.html');">
                             Add User
                         </button>
                     </p>

dashboard-ui/usersettings.html

@@ -8,11 +8,12 @@
 
         <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">
+                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
-                    <a href="#" data-role="button" onclick="Dashboard.navigate('edituser.html', true);">Profile</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('useredit.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('userparentalcontrol.html', true);" id="lnkParentalControl" style="display: none;">Parental Control</a>
+                    <a href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">Password</a>
+                    <a href="#" data-role="button" class="ui-btn-active">Preferences</a>
                 </div>
                 <form id="userSettingsForm">
                     <ul data-role="listview" class="ulForm">