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

rework series timer page

Browse source
This commit is contained in:
Luke Pulverenti 2016-08-11 18:41:25 -04:00
parent cee7db2ce0
commit 1ad3cfbf43
4 changed files with 130 additions and 189 deletions
Download patch file Download diff file Expand all files Collapse all files

108
dashboard-ui/livetvseriestimer.html
View file

@ -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 data-role="content">
<div class="readOnlyContent" style="margin:auto; max-width: 720px;"> <div style="margin:auto; max-width: 900px;">
<h1 class="itemName"></h1> <div>
<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> </div>
<div style="clear:both;"></div> <form class="liveTvSeriesTimerForm" style="max-width: initial;">
</div>
<br />
<div class="settingsTab tab">
<form class="liveTvSeriesTimerForm" style="margin: 0 auto; max-width: 720px;">
<div> <div>
<h1>${HeaderDays}</h1> <h1>${HeaderDays}</h1>
</div> </div>
<div class="paperCheckboxList"> <div class="checkboxList">
<paper-checkbox id="chkSunday">${OptionSunday}</paper-checkbox> <label>
<paper-checkbox id="chkMonday">${OptionMonday}</paper-checkbox> <input type="checkbox" is="emby-checkbox" id="chkSunday" />
<paper-checkbox id="chkTuesday">${OptionTuesday}</paper-checkbox> <span>${OptionSunday}</span>
<paper-checkbox id="chkWednesday">${OptionWednesday}</paper-checkbox> </label>
<paper-checkbox id="chkThursday">${OptionThursday}</paper-checkbox> <label>
<paper-checkbox id="chkFriday">${OptionFriday}</paper-checkbox> <input type="checkbox" is="emby-checkbox" id="chkMonday" />
<paper-checkbox id="chkSaturday">${OptionSaturday}</paper-checkbox> <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>
<div> <div>
<h1>${HeaderRepeatingOptions}</h1> <h1>${HeaderRepeatingOptions}</h1>
</div> </div>
<div class="paperCheckboxList"> <div class="checkboxList">
<paper-checkbox id="chkNewOnly">${OptionRecordOnlyNewEpisodes}</paper-checkbox> <label>
<paper-checkbox id="chkAnyTime">${OptionRecordAnytime}</paper-checkbox> <input type="checkbox" is="emby-checkbox" id="chkNewOnly" />
<paper-checkbox id="chkAllChannels">${OptionRecordOnAllChannels}</paper-checkbox> <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> </div>
<br /> <h1>
<div is="emby-collapse" title="${HeaderAdvanced}"> ${HeaderAdvanced}
<div class="collapseContent"> </h1>
<br /> <div class="inputContainer">
<div> <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}" />
<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>
</div> </div>
<br /> <div class="inputContainer">
<div> <input is="emby-input" id="txtPostPaddingMinutes" type="number" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
<button is="emby-button" type="submit" class="raised submit block"><i class="md-icon">check</i><span>${ButtonSave}</span></button> </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> <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> </div>
</form> </form>
<div class="scheduleTab"></div>
</div> </div>
<div class="scheduleTab tab"></div>
</div> </div>
</div> </div>

202
dashboard-ui/scripts/livetvseriestimer.js
View file

@ -1,62 +1,4 @@
define(['datetime', 'jQuery'], function (datetime, $) { define(['datetime', 'dom', 'emby-itemscontainer'], function (datetime, dom) {
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();
}
function getDaysOfWeek() { function getDaysOfWeek() {
@ -75,7 +17,7 @@
var day = daysOfWeek[i]; 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]; var day = daysOfWeek[i];
if ($('#chk' + day, page).checked()) { if (page.querySelector('#chk' + day).checked) {
days.push(day); days.push(day);
} }
} }
@ -99,102 +41,90 @@
return days; 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; page.querySelector('#chkNewOnly').checked = item.RecordNewOnly;
item.PostPaddingSeconds = $('#txtPostPaddingMinutes', form).val() * 60; page.querySelector('#chkAllChannels').checked = item.RecordAnyChannel;
page.querySelector('#chkAnyTime').checked = item.RecordAnyTime;
item.RecordNewOnly = $('#chkNewOnly', form).checked(); selectDays(page, item.Days);
item.RecordAnyChannel = $('#chkAllChannels', form).checked();
item.RecordAnyTime = $('#chkAnyTime', form).checked();
item.Days = getDays(form); Dashboard.hideLoadingMsg();
}
ApiClient.updateLiveTvSeriesTimer(item).then(function () { function onSubmit(e) {
Dashboard.hideLoadingMsg();
require(['toast'], function (toast) { var form = this;
toast(Globalize.translate('MessageRecordingSaved'));
}); 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 e.preventDefault();
return false; // 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 scheduleTab = page.querySelector('.scheduleTab');
var elem = $('.scheduleTab', page).html(html)[0]; scheduleTab.innerHTML = html;
ImageLoader.lazyChildren(elem); ImageLoader.lazyChildren(scheduleTab);
$('.btnDeleteTimer', elem).on('click', function () {
var id = this.getAttribute('data-timerid');
deleteTimer(page, id);
}); });
}); }
}
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({ view.querySelector('.liveTvSeriesTimerForm').addEventListener('submit', onSubmit);
view.querySelector('.scheduleTab').addEventListener('timercancelled', reload);
seriesTimerId: id view.addEventListener('viewbeforeshow', reload);
};
}).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;
});
}); });

4
dashboard-ui/scripts/livetvseriestimers.js
View file

@ -40,11 +40,11 @@
html += '<div class="listItem">'; 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 += '<div class="listItemBody three-line">';
html += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">'; html += '<a class="clearLink" href="livetvseriestimer.html?id=' + timer.Id + '">';
html += '<h3>'; html += '<h3 class="listItemBodyText">';
html += timer.Name; html += timer.Name;
html += '</h3>'; html += '</h3>';

5
dashboard-ui/scripts/site.js
View file

@ -2287,8 +2287,9 @@ var AppInfo = {};
defineRoute({ defineRoute({
path: '/livetvseriestimer.html', path: '/livetvseriestimer.html',
dependencies: [], dependencies: ['emby-checkbox', 'emby-input', 'emby-button', 'emby-collapse', 'scripts/livetvcomponents', 'scripts/livetvseriestimer', 'livetvcss'],
autoFocus: false autoFocus: false,
controller: 'scripts/livetvseriestimer'
}); });
defineRoute({ defineRoute({