fixes #552 - Add parental control usage limits

dashboard-ui/scripts/userparentalcontrol.js

@@ -100,9 +100,67 @@
 
         $('#selectMaxParentalRating', page).val(ratingValue).selectmenu("refresh");
 
+        if (user.Configuration.IsAdministrator) {
+            $('.accessScheduleSection', page).hide();
+        } else {
+            $('.accessScheduleSection', page).show();
+        }
+
+        renderAccessSchedule(page, user.Configuration.AccessSchedules || []);
+
         Dashboard.hideLoadingMsg();
     }
 
+    function getDisplayTime(hour) {
+
+        return new Date(2000, 1, 1, hour, 0, 0, 0).toLocaleTimeString();
+
+    }
+
+    function deleteAccessSchedule(page, schedules, index) {
+
+        schedules.splice(index, 1);
+
+        renderAccessSchedule(page, schedules);
+    }
+
+    function renderAccessSchedule(page, schedules) {
+
+        var html = '<ul data-role="listview" data-inset="true" data-split-icon="minus">';
+        var index = 0;
+
+        html += schedules.map(function (a) {
+
+            var itemHtml = '';
+
+            itemHtml += '<li class="liSchedule" data-day="' + a.DayOfWeek + '" data-start="' + a.StartHour + '" data-end="' + a.EndHour + '">';
+
+            itemHtml += '<a href="#">';
+            itemHtml += '<h3>' + a.DayOfWeek + '</h3>';
+            itemHtml += '<p>' + getDisplayTime(a.StartHour) + ' - ' + getDisplayTime(a.EndHour) + '</p>';
+            itemHtml += '</a>';
+
+            itemHtml += '<a href="#" data-icon="delete" class="btnDelete" data-index="' + index + '">';
+            itemHtml += '</a>';
+
+            itemHtml += '</li>';
+
+            index++;
+
+            return itemHtml;
+
+        }).join('');
+
+        html += '</ul>';
+
+        var elem = $('.accessScheduleList', page).html(html).trigger('create');
+
+        $('.btnDelete', elem).on('click', function () {
+
+            deleteAccessSchedule(page, schedules, parseInt(this.getAttribute('data-index')));
+        });
+    }
+
     function onSaveComplete(page) {
 
         Dashboard.hideLoadingMsg();
@@ -120,6 +178,8 @@
 
         }).get();
 
+        user.Configuration.AccessSchedules = getSchedulesFromPage(page);
+
         ApiClient.updateUser(user).done(function () {
             onSaveComplete(page);
         });
@@ -139,12 +199,103 @@
                 saveUser(result, page);
             });
 
+            // Disable default form submission
+            return false;
+        },
+
+        onScheduleFormSubmit: function () {
+
+            var page = $(this).parents('.page');
+
+            saveSchedule(page);
+
             // Disable default form submission
             return false;
         }
     };
 
-    $(document).on('pageshow', "#userParentalControlPage", function () {
+    function populateHours(page) {
+
+        var html = '';
+
+        for (var i = 0; i < 24; i++) {
+
+            html += '<option value="' + i + '">' + getDisplayTime(i) + '</option>';
+        }
+
+        $('#selectStart', page).html(html).selectmenu('refresh');
+        $('#selectEnd', page).html(html).selectmenu('refresh');
+    }
+
+    function showSchedulePopup(page, schedule, index) {
+
+        schedule = schedule || {};
+
+        $('#popupSchedule', page).popup('open');
+
+        $('#fldScheduleIndex', page).val(index);
+
+        $('#selectDay', page).val(schedule.DayOfWeek || 'Sunday').selectmenu('refresh');
+        $('#selectStart', page).val(schedule.StartHour || 0).selectmenu('refresh');
+        $('#selectEnd', page).val(schedule.EndHour || 0).selectmenu('refresh');
+    }
+
+    function saveSchedule(page) {
+
+        var schedule = {
+            DayOfWeek: $('#selectDay', page).val(),
+            StartHour: $('#selectStart', page).val(),
+            EndHour: $('#selectEnd', page).val()
+        };
+
+        if (parseFloat(schedule.StartHour) >= parseFloat(schedule.EndHour)) {
+
+            alert(Globalize.translate('ErrorMessageStartHourGreaterThanEnd'));
+
+            return;
+        }
+
+        var schedules = getSchedulesFromPage(page);
+
+        var index = parseInt($('#fldScheduleIndex', page).val());
+
+        if (index == -1) {
+            index = schedules.length;
+        }
+
+        schedules[index] = schedule;
+
+        renderAccessSchedule(page, schedules);
+
+        $('#popupSchedule', page).popup('close');
+    }
+
+    function getSchedulesFromPage(page) {
+
+        return $('.liSchedule', page).map(function () {
+
+            return {
+                DayOfWeek: this.getAttribute('data-day'),
+                StartHour: this.getAttribute('data-start'),
+                EndHour: this.getAttribute('data-end')
+            };
+
+        }).get();
+    }
+
+    $(document).on('pageinit', "#userParentalControlPage", function () {
+
+        var page = this;
+
+
+        $('.btnAddSchedule', page).on('click', function () {
+
+            showSchedulePopup(page, {},  -1);
+        });
+
+        populateHours(page);
+
+    }).on('pageshow', "#userParentalControlPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/userprofilespage.js

@@ -36,10 +36,13 @@
         html += '<ul data-role="listview" style="min-width: 180px;">';
         html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
 
-        html += '<li><a href="#" class="btnDeleteUser" data-userid="' + userId + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
-
         html += '<li><a href="useredit.html?userid=' + userId + '">' + Globalize.translate('ButtonOpen') + '</a></li>';
 
+        html += '<li><a href="userlibraryaccess.html?userid=' + userId + '">' + Globalize.translate('ButtonLibraryAccess') + '</a></li>';
+        html += '<li><a href="userparentalcontrol.html?userid=' + userId + '">' + Globalize.translate('ButtonParentalControl') + '</a></li>';
+
+        html += '<li><a href="#" class="btnDeleteUser" data-userid="' + userId + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
+
         html += '</ul>';
 
         html += '</div>';

dashboard-ui/userparentalcontrol.html

@@ -30,7 +30,22 @@
                         </div>
                     </div>
                     <br />
-                    <br />
+
+                    <div class="accessScheduleSection" style="display:none;">
+                        <div data-role="collapsible">
+                            <h2>${HeaderAccessSchedule}</h2>
+                            <div>
+                                <p>${HeaderAccessScheduleHelp}</p>
+
+                                <button class="btnAddSchedule" type="button" data-icon="plus" data-mini="true">${ButtonAddSchedule}</button>
+
+                                <div class="accessScheduleList">
+
+                                </div>
+                            </div>
+                        </div>
+                        <br />
+                    </div>
                     <ul data-role="listview" class="ulForm">
                         <li>
                             <button type="submit" data-theme="b" data-icon="check">
@@ -38,10 +53,56 @@
                             </button>
                         </li>
                     </ul>
+
                 </form>
+
+                <div data-role="popup" id="popupSchedule" data-theme="a">
+
+                    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">${ButtonClose}</a>
+
+                    <div class="ui-bar-a" style="text-align: center; padding: 5px 20px;">
+                        <h3 style="margin: .5em;">${HeaderSchedule}</h3>
+                    </div>
+
+                    <div style="padding:10px 5px 0;">
+
+                        <form class="scheduleForm" style="min-width:210px;">
+
+                            <ul data-role="listview" class="ulForm" style="margin-bottom:10px!important;">
+                                <li>
+                                    <label for="selectDay">${LabelAccessDay}</label>
+                                    <select id="selectDay" data-mini="true">
+                                        <option value="Sunday">${OptionSunday}</option>
+                                        <option value="Monday">${OptionMonday}</option>
+                                        <option value="Tuesday">${OptionTuesday}</option>
+                                        <option value="Wednesday">${OptionWednesday}</option>
+                                        <option value="Thursday">${OptionThursday}</option>
+                                        <option value="Friday">${OptionFriday}</option>
+                                        <option value="Saturday">${OptionSaturday}</option>
+                                    </select>
+                                </li>
+                                <li>
+                                    <label for="selectStart">${LabelAccessStart}</label>
+                                    <select class="selectHour" id="selectStart" data-mini="true"></select>
+                                </li>
+                                <li>
+                                    <label for="selectEnd">${LabelAccessEnd}</label>
+                                    <select class="selectHour" id="selectEnd" data-mini="true"></select>
+                                </li>
+                                <li>
+                                    <input type="hidden" id="fldScheduleIndex" />
+                                    <button type="submit" data-icon="plus">${ButtonAdd}</button>
+                                </li>
+                            </ul>
+                        </form>
+
+                    </div>
+
+                </div>
             </div>
         </div>
         <script type="text/javascript">
+            $('.scheduleForm').off('submit', UserParentalControlPage.onScheduleFormSubmit).on('submit', UserParentalControlPage.onScheduleFormSubmit);
             $('.userParentalControlForm').off('submit', UserParentalControlPage.onSubmit).on('submit', UserParentalControlPage.onSubmit);
         </script>
     </div>

dashboard-ui/userprofiles.html

@@ -22,9 +22,8 @@
                     </h3>
                 </div>
                 <div class="itemsContainer localUsers" style="text-align:left;margin-top:.5em;"></div>
-                <br /><br />
 
-                <div class="ui-bar-a" style="padding: 0 1em;">
+                <div class="ui-bar-a" style="padding: 0 1em;margin-top:2em;">
                     <h3 style="margin:.6em 0;font-size:16px;font-weight:500;">
                         <span style="vertical-align:middle;">${HeaderGuests}</span>
                         <a class="btnInvite" data-role="button" data-icon="plus" href="#" data-rel="popup" data-position-to="window" data-inline="true" data-mini="true" data-iconpos="notext" style="margin: 0 0 0 .5em; vertical-align:middle;">
@@ -33,9 +32,8 @@
                     </h3>
                 </div>
                 <div class="itemsContainer connectUsers" style="text-align:left;margin-top:.5em;"></div>
-                <br /><br />
 
-                <div class="sectionPendingGuests" style="display:none;">
+                <div class="sectionPendingGuests" style="display:none;margin-top:2em;">
                     <div class="ui-bar-a" style="padding: 0 1em;"><h3 style="font-size:16px;font-weight:500;">${HeaderPendingInvitations}</h3></div>
                     <div class="itemsContainer pending" style="text-align:left;margin-top:.5em;"></div>
                 </div>