1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

fixes #552 - Add parental control usage limits

This commit is contained in:
Luke Pulverenti 2014-10-14 20:05:09 -04:00
parent 101e365db4
commit c2ea67d056
4 changed files with 221 additions and 8 deletions

View file

@ -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;

View file

@ -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>';

View file

@ -30,7 +30,22 @@
</div>
</div>
<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>

View file

@ -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>