sync updates

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,39 +69,16 @@
         });
     }
 
-    function showSyncMenu(options) {
+    function renderForm(options) {
 
-        var userId = Dashboard.getCurrentUserId();
+        var elem = options.elem;
+        var dialogOptions = options.dialogOptions;
 
-        var dialogOptionsQuery = {
+        var targets = dialogOptions.Targets;
-            UserId: userId,
-            ItemIds: (options.items || []).map(function(i) {
-                return i.Id || i;
-            }).join(','),
 
-            ParentId: options.ParentId,
+        var html = '';
-            Category: options.Category
-        };
 
-        ApiClient.getJSON(ApiClient.getUrl('Sync/Options', dialogOptionsQuery)).done(function (result) {
+        if (dialogOptions.Options.indexOf('Name') != -1) {
-
-            var targets = result.Targets;
-
-            var html = '<div data-role="panel" data-position="right" data-display="overlay" class="syncPanel" data-position-fixed="true" data-theme="a">';
-
-            html += '<div>';
-
-            html += '<div style="margin:1em 0 1.5em;">';
-            html += '<h1 style="margin: 0;display:inline-block;vertical-align:middle;">' + Globalize.translate('SyncMedia') + '</h1>';
-            html += '<a class="accentButton accentButton-g" style="display:inline-block;vertical-align:middle;margin-top:0;margin-left: 20px;" href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank">';
-            html += '<i class="fa fa-info-circle"></i>';
-            html += Globalize.translate('ButtonHelp');
-            html += '</a>';
-            html += '</div>';
-
-            html += '<form class="formSubmitSyncRequest">';
-
-            if (result.Options.indexOf('Name') != -1) {
 
             html += '<p>';
             html += '<label for="txtSyncJobName">' + Globalize.translate('LabelSyncJobName') + '</label>';
@@ -116,22 +102,31 @@
         }
         html += '</div>';
 
+        html += '<div class="fldProfile" style="display:none;">';
         html += '<br/>';
+        html += '<label for="selectProfile">' + Globalize.translate('LabelProfile') + '</label>';
+        html += '<select id="selectProfile" data-mini="true">';
+        html += '</select>';
+        html += '<div class="fieldDescription profileDescription"></div>';
+        html += '</div>';
 
-            if (result.Options.indexOf('Quality') != -1) {
+        html += '<div class="fldQuality" style="display:none;">';
-                html += '<div>';
+        html += '<br/>';
         html += '<label for="selectQuality">' + Globalize.translate('LabelQuality') + '</label>';
         html += '<select id="selectQuality" data-mini="true" required="required">';
         html += '</select>';
-                html += '<div class="fieldDescription">' + Globalize.translate('LabelSyncQualityHelp') + '</div>';
+        html += '<div class="fieldDescription qualityDescription"></div>';
         html += '</div>';
-            }
 
-            //html += '<div data-role="collapsible" style="margin:1.5em 0">';
+        html += '<div class="fldBitrate" style="display:none;">';
-            //html += '<h2>' + Globalize.translate('HeaderSettings') + '</h2>';
+        html += '<br/>';
-            //html += '<div style="margin:0 -.5em 0 -.25em;">';
+        html += '<div>';
+        html += '<label for="txtBitrate">' + Globalize.translate('LabelBitrateMbps') + '</label>';
+        html += '<input type="number" id="txtBitrate" step=".1" min=".1" />';
+        html += '</div>';
+        html += '</div>';
 
-            if (result.Options.indexOf('SyncNewContent') != -1) {
+        if (dialogOptions.Options.indexOf('SyncNewContent') != -1) {
             html += '<br/>';
             html += '<div>';
             html += '<label for="chkSyncNewContent">' + Globalize.translate('OptionAutomaticallySyncNewContent') + '</label>';
@@ -140,7 +135,7 @@
             html += '</div>';
         }
 
-            if (result.Options.indexOf('UnwatchedOnly') != -1) {
+        if (dialogOptions.Options.indexOf('UnwatchedOnly') != -1) {
             html += '<br/>';
             html += '<div>';
             html += '<label for="chkUnwatchedOnly">' + Globalize.translate('OptionSyncUnwatchedVideosOnly') + '</label>';
@@ -149,7 +144,7 @@
             html += '</div>';
         }
 
-            if (result.Options.indexOf('ItemLimit') != -1) {
+        if (dialogOptions.Options.indexOf('ItemLimit') != -1) {
             html += '<br/>';
             html += '<div>';
             html += '<label for="txtItemLimit">' + Globalize.translate('LabelItemLimit') + '</label>';
@@ -161,6 +156,62 @@
         //html += '</div>';
         //html += '</div>';
 
+        $(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) {
+                return i.Id || i;
+            }).join(','),
+
+            ParentId: options.ParentId,
+            Category: options.Category
+        };
+
+        ApiClient.getJSON(ApiClient.getUrl('Sync/Options', dialogOptionsQuery)).done(function (dialogOptions) {
+
+            currentDialogOptions = dialogOptions;
+
+            var html = '<div data-role="panel" data-position="right" data-display="overlay" class="syncPanel" data-position-fixed="true" data-theme="a">';
+
+            html += '<div>';
+
+            html += '<form class="formSubmitSyncRequest">';
+
+            html += '<div style="margin:1em 0 1.5em;">';
+            html += '<h1 style="margin: 0;display:inline-block;vertical-align:middle;">' + Globalize.translate('SyncMedia') + '</h1>';
+            html += '<a class="accentButton accentButton-g" style="display:inline-block;vertical-align:middle;margin-top:0;margin-left: 20px;" href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank">';
+            html += '<i class="fa fa-info-circle"></i>';
+            html += Globalize.translate('ButtonHelp');
+            html += '</a>';
+            html += '</div>';
+
+            html += '<div class="formFields"></div>';
+
             html += '<br/>';
             html += '<p>';
             html += '<button type="submit" data-icon="cloud" data-theme="b">' + Globalize.translate('ButtonSync') + '</button>';
@@ -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 options = currentDialogOptions || {};
+        var option = (options.ProfileOptions || []).filter(function (o) {
+            return o.Id == profileId;
+        })[0];
+
+        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 '<option value="' + o.Id + '"' + selectedAttribute + '>' + o.Name + '</option>';
 
-            }).join('')).selectmenu('refresh');
+        }).join('')).trigger('change').selectmenu('refresh');
 
-        });
+        $('#selectQuality', form).html(options.QualityOptions.map(function (o) {
 
+            var selectedAttribute = o.IsDefault ? ' selected="selected"' : '';
+            return '<option value="' + o.Id + '"' + selectedAttribute + '>' + o.Name + '</option>';
+
+        }).join('')).trigger('change').selectmenu('refresh');
     }
 
     function isAvailable(item, user) {
@@ -215,8 +344,8 @@
     window.SyncManager = {
 
         showMenu: showSyncMenu,
-
+        isAvailable: isAvailable,
-        isAvailable: isAvailable
+        renderForm: renderForm
 
     };
 

dashboard-ui/scripts/syncjob.js

@@ -1,75 +1,37 @@
 (function () {
 
-    function renderJob(page, job, editOptions) {
+    function renderJob(page, job, dialogOptions) {
 
         var html = '';
 
         html += '<div>';
         html += Globalize.translate('ValueDateCreated', parseISO8601Date(job.DateCreated, { toLocal: true }).toLocaleString());
         html += '</div>';
-
         html += '<br/>';
-        html += '<div>';
+        html += '<div class="formFields"></div>';
-        html += '<label for="txtJobName">' + Globalize.translate('LabelName') + '</label>';
-        html += '<input id="txtJobName" type="text" required="required" />';
-        html += '</div>';
-
-        html += '<br/>';
-        html += '<div>';
-        html += '<label for="txtTargetName">' + Globalize.translate('LabelSyncTo') + '</label>';
-        html += '<input id="txtTargetName" type="text" readonly="readonly" />';
-        html += '</div>';
-
-        if (editOptions.Options.indexOf('Quality') != -1) {
-            html += '<br/>';
-            html += '<div>';
-            html += '<label for="selectQuality">' + Globalize.translate('LabelQuality') + '</label>';
-            html += '<select id="selectQuality" data-mini="true">';
-
-            html += editOptions.QualityOptions.map(function (o) {
-
-                return '<option value="' + o.Id + '">' + o.Name + '</option>';
-
-            }).join('');
-
-            html += '</select>';
-            html += '<div class="fieldDescription">' + Globalize.translate('LabelSyncQualityHelp') + '</div>';
-            html += '</div>';
-        }
-
-        if (editOptions.Options.indexOf('UnwatchedOnly') != -1) {
-            html += '<br/>';
-            html += '<div>';
-            html += '<label for="chkUnwatchedOnly">' + Globalize.translate('OptionSyncUnwatchedVideosOnly') + '</label>';
-            html += '<input type="checkbox" id="chkUnwatchedOnly" />';
-            html += '<div class="fieldDescription">' + Globalize.translate('OptionSyncUnwatchedVideosOnlyHelp') + '</div>';
-            html += '</div>';
-        }
-
-        if (editOptions.Options.indexOf('SyncNewContent') != -1) {
-            html += '<br/>';
-            html += '<div>';
-            html += '<label for="chkSyncNewContent">' + Globalize.translate('OptionAutomaticallySyncNewContent') + '</label>';
-            html += '<input type="checkbox" id="chkSyncNewContent" />';
-            html += '<div class="fieldDescription">' + Globalize.translate('OptionAutomaticallySyncNewContentHelp') + '</div>';
-            html += '</div>';
-        }
-
-        if (editOptions.Options.indexOf('ItemLimit') != -1) {
-            html += '<br/>';
-            html += '<div>';
-            html += '<label for="txtItemLimit">' + Globalize.translate('LabelItemLimit') + '</label>';
-            html += '<input type="number" id="txtItemLimit" step="1" min="1" />';
-            html += '<div class="fieldDescription">' + Globalize.translate('LabelItemLimitHelp') + '</div>';
-            html += '</div>';
-        }
 
         html += '<br/>';
         html += '<br/>';
         html += '<button type="submit" data-icon="check">' + Globalize.translate('ButtonSave') + '</button>';
 
         $('.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();