diff --git a/dashboard-ui/scripts/sync.js b/dashboard-ui/scripts/sync.js index d892684976..69d8778b78 100644 --- a/dashboard-ui/scripts/sync.js +++ b/dashboard-ui/scripts/sync.js @@ -1,5 +1,7 @@ (function (window, $) { + var currentDialogOptions; + function submitJob(userId, syncOptions, form) { if (!userId) { @@ -22,12 +24,19 @@ return; } + var quality = $('#selectQuality', form).val(); + + if (quality == 'custom') { + quality = $('#txtBitrate', form).val(); + } + var options = { userId: userId, TargetId: target, - Quality: $('#selectQuality', form).val() || null, + Profile: $('#selectProfile', form).val() || null, + Quality: quality || null, Name: $('#txtSyncJobName', form).val(), @@ -60,13 +69,122 @@ }); } + function renderForm(options) { + + var elem = options.elem; + var dialogOptions = options.dialogOptions; + + var targets = dialogOptions.Targets; + + var html = ''; + + if (dialogOptions.Options.indexOf('Name') != -1) { + + html += '

'; + html += ''; + html += ''; + html += '

'; + } + + html += '
'; + html += ''; + html += ''; + if (!targets.length) { + html += '
' + Globalize.translate('LabelSyncNoTargetsHelp') + '
'; + html += '
' + Globalize.translate('ButtonLearnMore') + '
'; + } + html += '
'; + + html += ''; + + html += ''; + + html += ''; + + if (dialogOptions.Options.indexOf('SyncNewContent') != -1) { + html += '
'; + html += '
'; + html += ''; + html += ''; + html += '
' + Globalize.translate('OptionAutomaticallySyncNewContentHelp') + '
'; + html += '
'; + } + + if (dialogOptions.Options.indexOf('UnwatchedOnly') != -1) { + html += '
'; + html += '
'; + html += ''; + html += ''; + html += '
' + Globalize.translate('OptionSyncUnwatchedVideosOnlyHelp') + '
'; + html += '
'; + } + + if (dialogOptions.Options.indexOf('ItemLimit') != -1) { + html += '
'; + html += '
'; + html += ''; + html += ''; + html += '
' + Globalize.translate('LabelItemLimitHelp') + '
'; + html += '
'; + } + + //html += ''; + //html += ''; + + $(elem).html(html).trigger('create'); + + $('#selectSyncTarget', elem).on('change', function () { + + loadQualityOptions(elem, this.value, options.dialogOptionsFn); + + }).trigger('change'); + + $('#selectProfile', elem).on('change', function () { + + onProfileChange(elem, this.value); + + }).trigger('change'); + + $('#selectQuality', elem).on('change', function () { + + onQualityChange(elem, this.value); + + }).trigger('change'); + + } + function showSyncMenu(options) { var userId = Dashboard.getCurrentUserId(); var dialogOptionsQuery = { UserId: userId, - ItemIds: (options.items || []).map(function(i) { + ItemIds: (options.items || []).map(function (i) { return i.Id || i; }).join(','), @@ -74,14 +192,16 @@ Category: options.Category }; - ApiClient.getJSON(ApiClient.getUrl('Sync/Options', dialogOptionsQuery)).done(function (result) { + ApiClient.getJSON(ApiClient.getUrl('Sync/Options', dialogOptionsQuery)).done(function (dialogOptions) { - var targets = result.Targets; + currentDialogOptions = dialogOptions; var html = '
'; html += '
'; + html += '
'; + html += '
'; html += '

' + Globalize.translate('SyncMedia') + '

'; html += ''; @@ -90,76 +210,7 @@ html += ''; html += '
'; - html += ''; - - if (result.Options.indexOf('Name') != -1) { - - html += '

'; - html += ''; - html += ''; - html += '

'; - } - - html += '
'; - html += ''; - html += ''; - if (!targets.length) { - html += '
' + Globalize.translate('LabelSyncNoTargetsHelp') + '
'; - html += ''; - } - html += '
'; - - html += '
'; - - if (result.Options.indexOf('Quality') != -1) { - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('LabelSyncQualityHelp') + '
'; - html += '
'; - } - - //html += '
'; - //html += '

' + Globalize.translate('HeaderSettings') + '

'; - //html += '
'; - - if (result.Options.indexOf('SyncNewContent') != -1) { - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('OptionAutomaticallySyncNewContentHelp') + '
'; - html += '
'; - } - - if (result.Options.indexOf('UnwatchedOnly') != -1) { - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('OptionSyncUnwatchedVideosOnlyHelp') + '
'; - html += '
'; - } - - if (result.Options.indexOf('ItemLimit') != -1) { - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('LabelItemLimitHelp') + '
'; - html += '
'; - } - - //html += '
'; - //html += '
'; + html += '
'; html += '
'; html += '

'; @@ -176,35 +227,113 @@ $(this).off("panelclose").remove(); }); - $('#selectSyncTarget', elem).on('change', function () { - - loadQualityOptions(elem, this.value, dialogOptionsQuery); - - }).trigger('change'); - $('form', elem).on('submit', function () { submitJob(userId, options, this); return false; }); + + renderForm({ + elem: $('.formFields', elem), + dialogOptions: dialogOptions, + dialogOptionsFn: getTargetDialogOptionsFn(dialogOptionsQuery) + }); }); } - function loadQualityOptions(panel, targetId, dialogOptionsQuery) { + function getTargetDialogOptionsFn(query) { - dialogOptionsQuery.TargetId = targetId; + return function (targetId) { - ApiClient.getJSON(ApiClient.getUrl('Sync/Options', dialogOptionsQuery)).done(function (options) { + query.TargetId = targetId; + return ApiClient.getJSON(ApiClient.getUrl('Sync/Options', query)); + }; + } - $('#selectQuality', panel).html(options.QualityOptions.map(function (o) { + function onProfileChange(form, profileId) { - var selectedAttribute = o.IsDefault ? ' selected="selected"' : ''; - return ''; + var options = currentDialogOptions || {}; + var option = (options.ProfileOptions || []).filter(function (o) { + return o.Id == profileId; + })[0]; - }).join('')).selectmenu('refresh'); + if (option) { + $('.profileDescription', form).html(option.Description || ''); + setQualityFieldVisible(form, options.QualityOptions.length > 0 && option.EnableQualityOptions); + } else { + $('.profileDescription', form).html(''); + setQualityFieldVisible(form, options.QualityOptions.length > 0); + } + } + function onQualityChange(form, qualityId) { + + var options = currentDialogOptions || {}; + var option = (options.QualityOptions || []).filter(function (o) { + return o.Id == qualityId; + })[0]; + + if (option) { + $('.qualityDescription', form).html(option.Description || ''); + } else { + $('.qualityDescription', form).html(''); + } + + if (qualityId == 'custom') { + $('.fldBitrate', form).show(); + $('#txtBitrate', form).attr('required', 'required'); + } else { + $('.fldBitrate', form).hide(); + $('#txtBitrate', form).removeAttr('required'); + } + } + + function loadQualityOptions(form, targetId, dialogOptionsFn) { + + dialogOptionsFn(targetId).done(function (options) { + + renderTargetDialogOptions(form, options); }); + } + function setQualityFieldVisible(form, visible) { + + if (visible) { + $('.fldQuality', form).show(); + $('#selectQuality', form).attr('required', 'required'); + } else { + $('.fldQuality', form).hide(); + $('#selectQuality', form).removeAttr('required'); + } + } + + function renderTargetDialogOptions(form, options) { + + currentDialogOptions = options; + + if (options.ProfileOptions.length) { + $('.fldProfile', form).show(); + $('#selectProfile', form).attr('required', 'required'); + } else { + $('.fldProfile', form).hide(); + $('#selectProfile', form).removeAttr('required'); + } + + setQualityFieldVisible(options.QualityOptions.length > 0); + + $('#selectProfile', form).html(options.ProfileOptions.map(function (o) { + + var selectedAttribute = o.IsDefault ? ' selected="selected"' : ''; + return ''; + + }).join('')).trigger('change').selectmenu('refresh'); + + $('#selectQuality', form).html(options.QualityOptions.map(function (o) { + + var selectedAttribute = o.IsDefault ? ' selected="selected"' : ''; + return ''; + + }).join('')).trigger('change').selectmenu('refresh'); } function isAvailable(item, user) { @@ -215,8 +344,8 @@ window.SyncManager = { showMenu: showSyncMenu, - - isAvailable: isAvailable + isAvailable: isAvailable, + renderForm: renderForm }; diff --git a/dashboard-ui/scripts/syncjob.js b/dashboard-ui/scripts/syncjob.js index c0db6ed810..66e9e1aaaf 100644 --- a/dashboard-ui/scripts/syncjob.js +++ b/dashboard-ui/scripts/syncjob.js @@ -1,75 +1,37 @@ (function () { - function renderJob(page, job, editOptions) { + function renderJob(page, job, dialogOptions) { var html = ''; html += '

'; html += Globalize.translate('ValueDateCreated', parseISO8601Date(job.DateCreated, { toLocal: true }).toLocaleString()); html += '
'; - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
'; - - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
'; - - if (editOptions.Options.indexOf('Quality') != -1) { - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('LabelSyncQualityHelp') + '
'; - html += '
'; - } - - if (editOptions.Options.indexOf('UnwatchedOnly') != -1) { - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('OptionSyncUnwatchedVideosOnlyHelp') + '
'; - html += '
'; - } - - if (editOptions.Options.indexOf('SyncNewContent') != -1) { - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('OptionAutomaticallySyncNewContentHelp') + '
'; - html += '
'; - } - - if (editOptions.Options.indexOf('ItemLimit') != -1) { - html += '
'; - html += '
'; - html += ''; - html += ''; - html += '
' + Globalize.translate('LabelItemLimitHelp') + '
'; - html += '
'; - } + html += '
'; html += '
'; html += '
'; html += ''; $('.syncJobForm', page).html(html).trigger('create'); - fillJobValues(page, job, editOptions); + SyncManager.renderForm({ + elem: $('.formFields', page), + dialogOptions: dialogOptions, + dialogOptionsFn: getTargetDialogOptionsFn(dialogOptions) + }); + fillJobValues(page, job, dialogOptions); + } + + function getTargetDialogOptionsFn(dialogOptions) { + + return function (targetId) { + + var deferred = $.Deferred(); + + deferred.resolveWith(null, [dialogOptions]); + return deferred.promise(); + }; } function getJobItemHtml(jobItem, index) { @@ -292,7 +254,8 @@ function fillJobValues(page, job, editOptions) { $('#txtJobName', page).val(job.Name); - $('#selectQuality', page).val(job.Quality).selectmenu('refresh'); + $('#selectProfile', page).val(job.Profile || '').trigger('change').selectmenu('refresh'); + $('#selectQuality', page).val(job.Quality || '').trigger('change').selectmenu('refresh'); $('#chkUnwatchedOnly', page).checked(job.UnwatchedOnly).checkboxradio('refresh'); $('#chkSyncNewContent', page).checked(job.SyncNewContent).checkboxradio('refresh'); $('#txtItemLimit', page).val(job.ItemLimit); @@ -356,8 +319,15 @@ ApiClient.getJSON(ApiClient.getUrl('Sync/Jobs/' + id)).done(function (job) { + var quality = $('#selectQuality', form).val(); + + if (quality == 'custom') { + quality = $('#txtBitrate', form).val(); + } + job.Name = $('#txtJobName', page).val(); - job.Quality = $('#selectQuality', page).val() || job.Quality; + job.Quality = quality || null; + job.Profile = $('#selectProfile', page).val() || null; job.ItemLimit = $('#txtItemLimit', page).val() || job.ItemLimit; job.SyncNewContent = $('#chkSyncNewContent', page).checked(); job.UnwatchedOnly = $('#chkUnwatchedOnly', page).checked();