From 25a2d421dcb780e392600de44e964eb023a83455 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Wed, 31 Dec 2014 01:24:49 -0500 Subject: [PATCH] create sync job items pages --- dashboard-ui/addplugin.html | 2 +- dashboard-ui/css/librarybrowser.css | 10 +- dashboard-ui/mysync.html | 24 +++ dashboard-ui/mysyncjob.html | 28 +++ dashboard-ui/scripts/librarymenu.js | 17 +- dashboard-ui/scripts/notifications.js | 2 +- dashboard-ui/scripts/syncactivity.js | 65 ++++-- dashboard-ui/scripts/syncjob.js | 285 ++++++++++++++++++++++++++ dashboard-ui/syncactivity.html | 2 +- dashboard-ui/syncjob.html | 30 +++ 10 files changed, 442 insertions(+), 23 deletions(-) create mode 100644 dashboard-ui/mysync.html create mode 100644 dashboard-ui/mysyncjob.html create mode 100644 dashboard-ui/scripts/syncjob.js create mode 100644 dashboard-ui/syncjob.html diff --git a/dashboard-ui/addplugin.html b/dashboard-ui/addplugin.html index 5a4c8c5e79..15af90ef35 100644 --- a/dashboard-ui/addplugin.html +++ b/dashboard-ui/addplugin.html @@ -18,7 +18,7 @@

-

+

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 99b2fed477..1c690ce30e 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -1260,7 +1260,7 @@ a.itemTag:hover { .listItem a:first-child { margin-right: 0 !important; background-color: transparent !important; - border-color: #282828 !important; + border-color: #d8d8d8 !important; } .listItem a + a { @@ -1269,9 +1269,17 @@ a.itemTag:hover { } .listItem:hover a { + background-color: #eee !important; +} + +.page[data-theme='b'] .listItem:hover a { background-color: #333 !important; } +.page[data-theme='b'] .listItem a:first-child { + border-color: #282828 !important; +} + @media all and (max-width: 600px) { .itemsListview .ui-li-aside { diff --git a/dashboard-ui/mysync.html b/dashboard-ui/mysync.html new file mode 100644 index 0000000000..8db871d80c --- /dev/null +++ b/dashboard-ui/mysync.html @@ -0,0 +1,24 @@ + + + + ${TitleSync} + + +
+ +
+ ${TabSyncJobs} +
+ +
+ +
+
+
+ +
+
+
+
+ + diff --git a/dashboard-ui/mysyncjob.html b/dashboard-ui/mysyncjob.html new file mode 100644 index 0000000000..ff78fb21e5 --- /dev/null +++ b/dashboard-ui/mysyncjob.html @@ -0,0 +1,28 @@ + + + + ${TitleSync} + + +
+ +
+ ${TabSyncJobs} +
+ +
+ +
+

${HeaderSyncJobInfo}

+
+
+
+
+
+
+ +
+ + diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index 3057972375..616a796cd6 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -76,12 +76,13 @@ html += '
'; html += '
'; - html += '
'; html += '
'; + html += '
'; html += '' + Globalize.translate('ButtonMetadataManager') + ''; - html += '' + Globalize.translate('ButtonReports') + ''; + html += '' + Globalize.translate('ButtonReports') + ''; html += '
'; + html += '' + Globalize.translate('ButtonSync') + ''; return html; } @@ -120,6 +121,7 @@ if (!apiClient) { $('.adminMenuOptions').hide(); + $('.syncViewMenu').hide(); return; } @@ -196,6 +198,11 @@ } else { $('.adminMenuOptions').hide(); } + if (user.Policy.EnableSync) { + $('.syncViewMenu').show(); + } else { + $('.syncViewMenu').hide(); + } }); } @@ -305,8 +312,9 @@ var isChannelsPage = page.hasClass('channelsPage'); var isEditorPage = page.hasClass('metadataEditorPage'); var isReportsPage = page.hasClass('reportsPage'); + var isMySyncPage = page.hasClass('mySyncPage'); - var id = isLiveTvPage || isChannelsPage || isEditorPage || isReportsPage || page.hasClass('allLibraryPage') ? + var id = isLiveTvPage || isChannelsPage || isEditorPage || isReportsPage || isMySyncPage || page.hasClass('allLibraryPage') ? '' : getTopParentId() || ''; @@ -326,6 +334,9 @@ else if (isReportsPage && itemId == 'reports') { $(this).addClass('selectedMediaFolder'); } + else if (isMySyncPage && itemId == 'mysync') { + $(this).addClass('selectedMediaFolder'); + } else if (id && itemId == id) { $(this).addClass('selectedMediaFolder'); } diff --git a/dashboard-ui/scripts/notifications.js b/dashboard-ui/scripts/notifications.js index 0ece80fdfd..d8f26b68ca 100644 --- a/dashboard-ui/scripts/notifications.js +++ b/dashboard-ui/scripts/notifications.js @@ -218,7 +218,7 @@ $(document).on('headercreated', function (e) { if (ConnectionManager.currentApiClient()) { - $('
0
').insertBefore($('.headerUserButton')).on('click', Notifications.showNotificationsFlyout); + $('
0
').insertAfter($('.headerSearchButton')).on('click', Notifications.showNotificationsFlyout); Notifications.updateNotificationCount(); } diff --git a/dashboard-ui/scripts/syncactivity.js b/dashboard-ui/scripts/syncactivity.js index 3c467db0cf..ec03e293e7 100644 --- a/dashboard-ui/scripts/syncactivity.js +++ b/dashboard-ui/scripts/syncactivity.js @@ -38,18 +38,20 @@ return target ? target.Name : 'Unknown Device'; } - function getSyncJobHtml(job) { + function getSyncJobHtml(page, job, cardBoxCssClass, syncJobPage) { var html = ''; html += "
"; - html += '
'; + html += '
'; html += '
'; html += '
'; - html += '
'; + syncJobPage += '?id=' + job.Id; + + html += ''; var imgUrl; var style = ''; @@ -86,7 +88,7 @@ } // cardContent - html += "
"; + html += ""; // cardScalable html += "
"; @@ -138,18 +140,39 @@ var html = ''; var lastTargetName = ''; + var cardBoxCssClass = 'cardBox visualCardBox'; + var barCssClass = 'ui-bar-a'; + + if ($(page).hasClass('libraryPage')) { + cardBoxCssClass += ' visualCardBox-b'; + barCssClass = 'detailSectionHeader'; + } + + var syncJobPage = 'syncjob.html'; + + if ($(page).hasClass('mySyncPage')) { + syncJobPage = 'mysyncjob.html'; + } + for (var i = 0, length = jobs.length; i < length; i++) { var job = jobs[i]; var targetName = getSyncTargetName(targets, job.TargetId); if (targetName != lastTargetName) { - html += '

' + targetName + '

'; + + if (lastTargetName) { + html += '
'; + html += '
'; + html += '
'; + } lastTargetName = targetName; + + html += '

' + targetName + '

'; } - html += getSyncJobHtml(job); + html += getSyncJobHtml(page, job, cardBoxCssClass, syncJobPage); } var elem = $('.syncActivity', page).html(html).trigger('create'); @@ -157,6 +180,11 @@ $('.btnJobMenu', elem).on('click', function () { showJobMenu(this); }); + + if (!jobs.length) { + + elem.html('
' + Globalize.translate('MessageNoSyncJobsFound') + '
'); + } } function showJobMenu(elem) { @@ -195,29 +223,34 @@ Dashboard.showLoadingMsg(); - var promise1 = ApiClient.getJSON(ApiClient.getUrl('Sync/Jobs')); + var options = {}; - var promise2 = ApiClient.getJSON(ApiClient.getUrl('Sync/Targets')); + Dashboard.getCurrentUser().done(function (user) { - $.when(promise1, promise2).done(function (response1, response2) { + if ($(page).hasClass('mySyncPage')) { + options.UserId = Dashboard.getCurrentUserId(); + } - loadData(page, response1[0].Items, response2[0]); + var promise1 = ApiClient.getJSON(ApiClient.getUrl('Sync/Jobs', options)); - Dashboard.hideLoadingMsg(); + var promise2 = ApiClient.getJSON(ApiClient.getUrl('Sync/Targets', options)); + $.when(promise1, promise2).done(function (response1, response2) { + + loadData(page, response1[0].Items, response2[0]); + + Dashboard.hideLoadingMsg(); + + }); }); } - $(document).on('pageshow', "#syncActivityPage", function () { + $(document).on('pageshow', ".syncActivityPage", function () { var page = this; reloadData(page); - }).on('pageinit', "#syncActivityPage", function () { - - var page = this; - }); })(); \ No newline at end of file diff --git a/dashboard-ui/scripts/syncjob.js b/dashboard-ui/scripts/syncjob.js new file mode 100644 index 0000000000..8d19e548a5 --- /dev/null +++ b/dashboard-ui/scripts/syncjob.js @@ -0,0 +1,285 @@ +(function () { + + function renderJob(page, job, editOptions) { + + var html = ''; + + html += '

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

'; + + html += '

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

'; + + html += '

'; + html += ''; + html += ''; + 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 += ''; + + $('.syncJobForm', page).html(html).trigger('create'); + fillJobValues(page, job, editOptions); + } + + function getJobItemHtml(jobItem, index) { + + var html = ''; + + var cssClass = 'ui-li-has-thumb listItem'; + + html += '
  • '; + + var hasActions = jobItem.Status != 'RemovedFromDevice'; + hasActions = false; + + html += ''; + + var imgUrl; + + if (jobItem.PrimaryImageItemId) { + + imgUrl = ApiClient.getImageUrl(jobItem.PrimaryImageItemId, { + type: "Primary", + width: 80, + tag: jobItem.PrimaryImageTag, + minScale: 1.5 + }); + } + + if (imgUrl) { + + if (index < 10) { + html += '
    '; + } else { + html += '
    '; + } + } + + html += '

    '; + html += jobItem.ItemName; + html += '

    '; + + html += '

    '; + var stasusLabel = Globalize.translate('SyncJobItemStatus' + jobItem.Status); + html += stasusLabel; + html += '

    '; + + html += '    '; + + if (hasActions) { + + html += ''; + } else { + html += ''; + + html += '
    • '; + return html; + } + + function renderJobItems(page, items) { + + var html = ''; + + html += '
      '; + + html += '
    • '; + html += Globalize.translate('HeaderItems'); + html += '
      • '; + + var index = 0; + html += items.map(function (i) { + + return getJobItemHtml(i, index++); + + }).join(''); + + html += '
    '; + + var elem = $('.jobItems', page).html(html).trigger('create'); + + $('.btnJobItemMenu', elem).on('click', function () { + showJobItemMenu(this); + }); + + } + + function showJobItemMenu(elem) { + + var page = $(elem).parents('.page'); + var listItem = $(elem).parents('li'); + var id = listItem.attr('data-itemid'); + var status = listItem.attr('data-status'); + + $('.jobMenu', page).popup("close").remove(); + + var html = '
    '; + + html += '
      '; + html += '
    • ' + Globalize.translate('HeaderMenu') + '
      • '; + + if (status != 'Cancelled' && status != 'RemovedFromDevice' && status != 'Failed') { + html += '
    • ' + Globalize.translate('ButtonCancel') + '
      • '; + } + + html += '
    '; + + html += '
    '; + + page.append(html); + + var flyout = $('.jobMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () { + + $(this).off("popupafterclose").remove(); + + }); + + $('.btnCancelJob', flyout).on('click', function () { + //cancelJob(page, this.getAttribute('data-id')); + }); + } + + function fillJobValues(page, job, editOptions) { + + $('#txtJobName', page).val(job.Name); + $('#selectQuality', page).val(job.Quality).selectmenu('refresh'); + $('#chkUnwatchedOnly', page).checked(job.UnwatchedOnly).checkboxradio('refresh'); + $('#chkSyncNewContent', page).checked(job.SyncNewContent).checkboxradio('refresh'); + $('#txtItemLimit', page).val(job.ItemLimit); + + var target = editOptions.Targets.filter(function (t) { + return t.Id == job.TargetId; + })[0]; + var targetName = target ? target.Name : ''; + + $('#txtTargetName', page).val(targetName); + } + + function loadJob(page) { + + Dashboard.showLoadingMsg(); + var id = getParameterByName('id'); + + ApiClient.getJSON(ApiClient.getUrl('Sync/Jobs/' + id)).done(function (job) { + + ApiClient.getJSON(ApiClient.getUrl('Sync/Options', { + + UserId: job.UserId, + ItemIds: (job.RequestedItemIds && job.RequestedItemIds.length ? job.RequestedItemIds.join('') : null), + + ParentId: job.ParentId, + Category: job.Category + + })).done(function (options) { + + renderJob(page, job, options); + Dashboard.hideLoadingMsg(); + }); + }); + + ApiClient.getJSON(ApiClient.getUrl('Sync/JobItems', { + + JobId: id, + AddMetadata: true + + })).done(function (result) { + + renderJobItems(page, result.Items); + Dashboard.hideLoadingMsg(); + }); + } + + function saveJob(page) { + + Dashboard.showLoadingMsg(); + var id = getParameterByName('id'); + + ApiClient.getJSON(ApiClient.getUrl('Sync/Jobs/' + id)).done(function (job) { + + job.Name = $('#txtJobName', page).val(); + job.Quality = $('#selectQuality', page).val(); + job.ItemLimit = $('#txtItemLimit', page).val(); + job.SyncNewContent = $('#chkSyncNewContent', page).checked(); + job.UnwatchedOnly = $('#chkUnwatchedOnly', page).checked(); + + ApiClient.ajax({ + + url: ApiClient.getUrl('Sync/Jobs/' + id), + type: 'POST', + data: JSON.stringify(job), + contentType: "application/json" + + }).done(function () { + + Dashboard.hideLoadingMsg(); + Dashboard.alert(Globalize.translate('SettingsSaved')); + }); + }); + + } + + $(document).on('pageshow', ".syncJobPage", function () { + + var page = this; + loadJob(page); + + }).on('pageinit', ".syncJobPage", function () { + + var page = this; + + + }); + + window.SyncJobPage = { + + onSubmit: function () { + + var form = this; + + var page = $(form).parents('.page'); + + saveJob(page); + + return false; + } + }; + +})(); \ No newline at end of file diff --git a/dashboard-ui/syncactivity.html b/dashboard-ui/syncactivity.html index c66ab920ad..89e5d3f50f 100644 --- a/dashboard-ui/syncactivity.html +++ b/dashboard-ui/syncactivity.html @@ -4,7 +4,7 @@ ${TitleSync} -
    +
    diff --git a/dashboard-ui/syncjob.html b/dashboard-ui/syncjob.html new file mode 100644 index 0000000000..7a5b7bf755 --- /dev/null +++ b/dashboard-ui/syncjob.html @@ -0,0 +1,30 @@ + + + + ${TitleSync} + + +
    + +
    +
    + +
    + ${TabActivity} + ${TabSettings} +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +