mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework series timer page
This commit is contained in:
Luke Pulverenti
parent
cee7db2ce0
commit
1ad3cfbf43
4 changed files with 130 additions and 189 deletions
|
|
@ -1,70 +1,80 @@
|
|||
<div id="liveTvSeriesTimerPage" data-role="page" class="page libraryPage liveTvPage noSecondaryNavPage" data-contextname="${HeaderLiveTv}" data-require="jqmcheckbox,jqmcontrolgroup,emby-button,emby-collapse,scripts/livetvcomponents,scripts/livetvseriestimer,livetvcss,paper-checkbox,paper-input" data-backbutton="true" data-menubutton="false">
|
||||
<div id="liveTvSeriesTimerPage" data-role="page" class="page libraryPage liveTvPage noSecondaryNavPage" data-contextname="${HeaderLiveTv}" data-backbutton="true" data-menubutton="false">
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<div class="readOnlyContent" style="margin:auto; max-width: 720px;">
|
||||
<h1 class="itemName"></h1>
|
||||
|
||||
<p class="channel" style="margin-top: 2em;"></p>
|
||||
<p class="time"></p>
|
||||
|
||||
<br />
|
||||
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="seriesTimerTabs">
|
||||
<input type="radio" name="radioSeriesTimerTab" class="radioSeriesTimerTab" id="radioSettings" value="settings">
|
||||
<label for="radioSettings">${TabSettings}</label>
|
||||
<input type="radio" name="radioSeriesTimerTab" class="radioSeriesTimerTab" id="radioScheduled" value="schedule">
|
||||
<label for="radioScheduled">${TabRecordings}</label>
|
||||
<div style="margin:auto; max-width: 900px;">
|
||||
<div>
|
||||
<h1 class="itemName"></h1>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="settingsTab tab">
|
||||
|
||||
<form class="liveTvSeriesTimerForm" style="margin: 0 auto; max-width: 720px;">
|
||||
<form class="liveTvSeriesTimerForm" style="max-width: initial;">
|
||||
<div>
|
||||
<h1>${HeaderDays}</h1>
|
||||
</div>
|
||||
<div class="paperCheckboxList">
|
||||
<paper-checkbox id="chkSunday">${OptionSunday}</paper-checkbox>
|
||||
<paper-checkbox id="chkMonday">${OptionMonday}</paper-checkbox>
|
||||
<paper-checkbox id="chkTuesday">${OptionTuesday}</paper-checkbox>
|
||||
<paper-checkbox id="chkWednesday">${OptionWednesday}</paper-checkbox>
|
||||
<paper-checkbox id="chkThursday">${OptionThursday}</paper-checkbox>
|
||||
<paper-checkbox id="chkFriday">${OptionFriday}</paper-checkbox>
|
||||
<paper-checkbox id="chkSaturday">${OptionSaturday}</paper-checkbox>
|
||||
<div class="checkboxList">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkSunday" />
|
||||
<span>${OptionSunday}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkMonday" />
|
||||
<span>${OptionMonday}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkTuesday" />
|
||||
<span>${OptionTuesday}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkWednesday" />
|
||||
<span>${OptionWednesday}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkThursday" />
|
||||
<span>${OptionThursday}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkFriday" />
|
||||
<span>${OptionFriday}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkSaturday" />
|
||||
<span>${OptionSaturday}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<h1>${HeaderRepeatingOptions}</h1>
|
||||
</div>
|
||||
<div class="paperCheckboxList">
|
||||
<paper-checkbox id="chkNewOnly">${OptionRecordOnlyNewEpisodes}</paper-checkbox>
|
||||
<paper-checkbox id="chkAnyTime">${OptionRecordAnytime}</paper-checkbox>
|
||||
<paper-checkbox id="chkAllChannels">${OptionRecordOnAllChannels}</paper-checkbox>
|
||||
<div class="checkboxList">
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkNewOnly" />
|
||||
<span>${OptionRecordOnlyNewEpisodes}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkAnyTime" />
|
||||
<span>${OptionRecordAnytime}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkAllChannels" />
|
||||
<span>${OptionRecordOnAllChannels}</span>
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<div is="emby-collapse" title="${HeaderAdvanced}">
|
||||
<div class="collapseContent">
|
||||
<br />
|
||||
<div>
|
||||
<paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-input type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<h1>
|
||||
${HeaderAdvanced}
|
||||
</h1>
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}" />
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<button is="emby-button" type="submit" class="raised submit block"><i class="md-icon">check</i><span>${ButtonSave}</span></button>
|
||||
<div class="inputContainer">
|
||||
<input is="emby-input" id="txtPostPaddingMinutes" type="number" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
|
||||
</div>
|
||||
|
||||
<div class="hide">
|
||||
<button is="emby-button" type="submit" class="raised submit block btnSubmit"><i class="md-icon">check</i><span>${ButtonSave}</span></button>
|
||||
|
||||
<button is="emby-button" type="button" class="raised cancel block btnCancel" onclick="history.back();"><i class="md-icon">close</i><span>${ButtonCancel}</span></button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="scheduleTab"></div>
|
||||
</div>
|
||||
<div class="scheduleTab tab"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,62 +1,4 @@
|
|||
define(['datetime', 'jQuery'], function (datetime, $) {
|
||||
|
||||
var currentItem;
|
||||
|
||||
function deleteTimer(page, id) {
|
||||
|
||||
require(['confirm'], function (confirm) {
|
||||
|
||||
confirm(Globalize.translate('MessageConfirmRecordingCancellation'), Globalize.translate('HeaderConfirmRecordingCancellation')).then(function () {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.cancelLiveTvTimer(id).then(function () {
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRecordingCancelled'));
|
||||
});
|
||||
|
||||
reload(page);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderTimer(page, item) {
|
||||
|
||||
currentItem = item;
|
||||
|
||||
$('.itemName', page).html(item.Name);
|
||||
|
||||
$('#txtPrePaddingMinutes', page).val(item.PrePaddingSeconds / 60);
|
||||
$('#txtPostPaddingMinutes', page).val(item.PostPaddingSeconds / 60);
|
||||
|
||||
$('#chkNewOnly', page).checked(item.RecordNewOnly);
|
||||
$('#chkAllChannels', page).checked(item.RecordAnyChannel);
|
||||
$('#chkAnyTime', page).checked(item.RecordAnyTime);
|
||||
|
||||
var channelHtml = '';
|
||||
if (item.RecordAnyChannel) {
|
||||
channelHtml += Globalize.translate('LabelAllChannels');
|
||||
}
|
||||
else if (item.ChannelId) {
|
||||
channelHtml += '<a href="itemdetails.html?id=' + item.ChannelId + '">' + item.ChannelName + '</a>';
|
||||
}
|
||||
|
||||
$('.channel', page).html(channelHtml).trigger('create');
|
||||
|
||||
selectDays(page, item.Days);
|
||||
|
||||
if (item.RecordAnyTime) {
|
||||
$('.time', page).html(Globalize.translate('LabelAnytime')).trigger('create');
|
||||
}
|
||||
else if (item.ChannelId) {
|
||||
$('.time', page).html(datetime.getDisplayTime(item.StartDate)).trigger('create');
|
||||
}
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
define(['datetime', 'dom', 'emby-itemscontainer'], function (datetime, dom) {
|
||||
|
||||
function getDaysOfWeek() {
|
||||
|
||||
|
|
@ -75,7 +17,7 @@
|
|||
|
||||
var day = daysOfWeek[i];
|
||||
|
||||
$('#chk' + day, page).checked(days.indexOf(day) != -1);
|
||||
page.querySelector('#chk' + day).checked = days.indexOf(day) != -1;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +33,7 @@
|
|||
|
||||
var day = daysOfWeek[i];
|
||||
|
||||
if ($('#chk' + day, page).checked()) {
|
||||
if (page.querySelector('#chk' + day).checked) {
|
||||
days.push(day);
|
||||
}
|
||||
}
|
||||
|
|
@ -99,102 +41,90 @@
|
|||
return days;
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
return function (view, params) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
function renderTimer(page, item) {
|
||||
|
||||
var form = this;
|
||||
page.querySelector('.itemName').innerHTML = item.Name;
|
||||
|
||||
ApiClient.getLiveTvSeriesTimer(currentItem.Id).then(function (item) {
|
||||
page.querySelector('#txtPrePaddingMinutes').value = item.PrePaddingSeconds / 60;
|
||||
page.querySelector('#txtPostPaddingMinutes').value = item.PostPaddingSeconds / 60;
|
||||
|
||||
item.PrePaddingSeconds = $('#txtPrePaddingMinutes', form).val() * 60;
|
||||
item.PostPaddingSeconds = $('#txtPostPaddingMinutes', form).val() * 60;
|
||||
page.querySelector('#chkNewOnly').checked = item.RecordNewOnly;
|
||||
page.querySelector('#chkAllChannels').checked = item.RecordAnyChannel;
|
||||
page.querySelector('#chkAnyTime').checked = item.RecordAnyTime;
|
||||
|
||||
item.RecordNewOnly = $('#chkNewOnly', form).checked();
|
||||
item.RecordAnyChannel = $('#chkAllChannels', form).checked();
|
||||
item.RecordAnyTime = $('#chkAnyTime', form).checked();
|
||||
selectDays(page, item.Days);
|
||||
|
||||
item.Days = getDays(form);
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
ApiClient.updateLiveTvSeriesTimer(item).then(function () {
|
||||
Dashboard.hideLoadingMsg();
|
||||
require(['toast'], function (toast) {
|
||||
toast(Globalize.translate('MessageRecordingSaved'));
|
||||
});
|
||||
function onSubmit(e) {
|
||||
|
||||
var form = this;
|
||||
|
||||
var id = params.id;
|
||||
|
||||
ApiClient.getLiveTvSeriesTimer(id).then(function (item) {
|
||||
|
||||
item.PrePaddingSeconds = form.querySelector('#txtPrePaddingMinutes').value * 60;
|
||||
item.PostPaddingSeconds = form.querySelector('#txtPostPaddingMinutes').value * 60;
|
||||
|
||||
item.RecordNewOnly = form.querySelector('#chkNewOnly').checked;
|
||||
item.RecordAnyChannel = form.querySelector('#chkAllChannels').checked;
|
||||
item.RecordAnyTime = form.querySelector('#chkAnyTime').checked;
|
||||
|
||||
item.Days = getDays(form);
|
||||
|
||||
ApiClient.updateLiveTvSeriesTimer(item);
|
||||
});
|
||||
});
|
||||
|
||||
// Disable default form submission
|
||||
return false;
|
||||
e.preventDefault();
|
||||
// Disable default form submission
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
function renderSchedule(page, result) {
|
||||
|
||||
function renderSchedule(page, result) {
|
||||
var timers = result.Items;
|
||||
|
||||
var timers = result.Items;
|
||||
LiveTvHelpers.getTimersHtml(timers).then(function (html) {
|
||||
|
||||
LiveTvHelpers.getTimersHtml(timers).then(function(html) {
|
||||
var elem = $('.scheduleTab', page).html(html)[0];
|
||||
var scheduleTab = page.querySelector('.scheduleTab');
|
||||
scheduleTab.innerHTML = html;
|
||||
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
$('.btnDeleteTimer', elem).on('click', function () {
|
||||
|
||||
var id = this.getAttribute('data-timerid');
|
||||
|
||||
deleteTimer(page, id);
|
||||
ImageLoader.lazyChildren(scheduleTab);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function reload(page) {
|
||||
function reload() {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
var id = params.id;
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var id = getParameterByName('id');
|
||||
ApiClient.getLiveTvSeriesTimer(id).then(function (result) {
|
||||
|
||||
ApiClient.getLiveTvSeriesTimer(id).then(function (result) {
|
||||
renderTimer(view, result);
|
||||
|
||||
renderTimer(page, result);
|
||||
});
|
||||
|
||||
ApiClient.getLiveTvTimers({
|
||||
|
||||
seriesTimerId: id
|
||||
|
||||
}).then(function (timerResult) {
|
||||
|
||||
renderSchedule(view, timerResult);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
view.querySelector('form').addEventListener('change', function () {
|
||||
view.querySelector('.btnSubmit').click();
|
||||
});
|
||||
|
||||
ApiClient.getLiveTvTimers({
|
||||
|
||||
seriesTimerId: id
|
||||
|
||||
}).then(function (timerResult) {
|
||||
|
||||
renderSchedule(page, timerResult);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pageinit', "#liveTvSeriesTimerPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.radioSeriesTimerTab', page).on('change', function () {
|
||||
|
||||
$('.tab', page).hide();
|
||||
$('.' + this.value + 'Tab', page).show();
|
||||
|
||||
});
|
||||
|
||||
$('.liveTvSeriesTimerForm').off('submit', onSubmit).on('submit', onSubmit);
|
||||
|
||||
}).on('pagebeforeshow', "#liveTvSeriesTimerPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.radioProfileTab', page).checked(false).checkboxradio('refresh');
|
||||
$('#radioSettings', page).checked(true).checkboxradio('refresh').trigger('change');
|
||||
|
||||
reload(page);
|
||||
|
||||
}).on('pagebeforehide', "#liveTvSeriesTimerPage", function () {
|
||||
|
||||
currentItem = null;
|
||||
});
|
||||
|
||||
view.querySelector('.liveTvSeriesTimerForm').addEventListener('submit', onSubmit);
|
||||
view.querySelector('.scheduleTab').addEventListener('timercancelled', reload);
|
||||
view.addEventListener('viewbeforeshow', reload);
|
||||
};
|
||||
});
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
|
||||
html += '<div class="listItem">';
|
||||
|
||||
html += '<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">live_tv</i></button>';
|
||||
html += '<i class="md-icon listItemIcon">live_tv</i>';
|
||||
|
||||
html += '<div class="listItemBody three-line">';
|
||||
html += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">';
|
||||
html += '<h3>';
|
||||
html += '<h3 class="listItemBodyText">';
|
||||
html += timer.Name;
|
||||
html += '</h3>';
|
||||
|
||||
|
|
|
|||
|
|
@ -2287,8 +2287,9 @@ var AppInfo = {};
|
|||
|
||||
defineRoute({
|
||||
path: '/livetvseriestimer.html',
|
||||
dependencies: [],
|
||||
autoFocus: false
|
||||
dependencies: ['emby-checkbox', 'emby-input', 'emby-button', 'emby-collapse', 'scripts/livetvcomponents', 'scripts/livetvseriestimer', 'livetvcss'],
|
||||
autoFocus: false,
|
||||
controller: 'scripts/livetvseriestimer'
|
||||
});
|
||||
|
||||
defineRoute({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue