From 4f2ce200aa316ed3e0a4bf166bbab3b2beadc9c4 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Wed, 17 Aug 2016 01:29:05 -0400
Subject: [PATCH] update sync display

---
 .../indicators/indicators.css                 |  13 +-
 .../indicators/indicators.js                  |   2 +-
 .../components/syncjoblist/syncjoblist.js     | 286 +++++++++++++++++-
 dashboard-ui/mysync.html                      |  11 +-
 dashboard-ui/scripts/mysync.js                |  58 +++-
 dashboard-ui/scripts/plugincatalogpage.js     |   4 +-
 dashboard-ui/scripts/site.js                  |   1 +
 dashboard-ui/scripts/syncactivity.js          |   6 +-
 8 files changed, 354 insertions(+), 27 deletions(-)

diff --git a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css
index 7bdfd68d4..51f6aceff 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.css
@@ -72,14 +72,5 @@
 }
 
 .fullSyncIndicator {
-    color: #673AB7;
-    padding: 0;
-    border: 4px solid #673AB7;
-    background: #fff;
-    width: auto;
-    height: auto;
-}
-
-.fullSyncIndicatorIcon {
-    margin: -3px;
-}
+    background: rgba(82,181,75,1);
+}
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
index d5556bdbf..5f64c1790 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js
@@ -111,7 +111,7 @@ define(['css!./indicators.css', 'material-icons'], function () {
     function getSyncIndicator(item) {
 
         if (item.SyncPercent == 100) {
-            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon fullSyncIndicatorIcon">offline_pin</i></div>';
+            return '<div class="syncIndicator indicator fullSyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         } else if (item.SyncPercent != null) {
             return '<div class="syncIndicator indicator emptySyncIndicator"><i class="md-icon indicatorIcon">file_download</i></div>';
         }
diff --git a/dashboard-ui/components/syncjoblist/syncjoblist.js b/dashboard-ui/components/syncjoblist/syncjoblist.js
index 3fc451f14..5acaa0c44 100644
--- a/dashboard-ui/components/syncjoblist/syncjoblist.js
+++ b/dashboard-ui/components/syncjoblist/syncjoblist.js
@@ -1,11 +1,187 @@
-define(['serverNotifications', 'events', 'loading', 'connectionManager'], function (serverNotifications, events, loading, connectionManager) {
+define(['serverNotifications', 'events', 'loading', 'connectionManager', 'imageLoader', 'dom', 'globalize', 'listViewStyle'], function (serverNotifications, events, loading, connectionManager, imageLoader, dom, globalize) {
 
     function onSyncJobsUpdated(e, apiClient, data) {
 
+        var listInstance = this;
+        renderList(listInstance, data);
     }
 
-    function renderList(listInstance, items) {
+    function refreshList(listInstance, jobs) {
+        for (var i = 0, length = jobs.length; i < length; i++) {
 
+            var job = jobs[i];
+            refreshJob(listInstance, job);
+        }
+    }
+
+    function cancelJob(listInstance, id) {
+
+        require(['confirm'], function (confirm) {
+
+            var msg = listInstance.options.isLocalSync ?
+globalize.translate('ConfirmRemoveDownload') :
+globalize.translate('CancelSyncJobConfirmation');
+
+            confirm(msg).then(function () {
+
+                loading.show();
+                var apiClient = getApiClient(listInstance);
+
+                apiClient.ajax({
+
+                    url: apiClient.getUrl('Sync/Jobs/' + id),
+                    type: 'DELETE'
+
+                }).then(function () {
+
+                    fetchData(listInstance);
+                });
+            });
+        });
+    }
+
+    function refreshJob(listInstance, job) {
+
+        var listItem = listInstance.options.element.querySelector('.listItem[data-id=\'' + job.Id + '\']');
+
+        if (!listItem) {
+            return;
+        }
+
+        var progress = job.Progress || 0;
+        var statusIcon = listItem.querySelector('.statusIcon');
+
+        if (progress === 0) {
+            statusIcon.innerHTML = 'file_download';
+            statusIcon.classList.add('md-icon');
+            statusIcon.classList.remove('status-text-icon');
+            statusIcon.classList.add('zeroProgressStatus');
+        } else if (progress >= 100) {
+            statusIcon.innerHTML = 'file_download';
+            statusIcon.classList.add('md-icon');
+            statusIcon.classList.remove('status-text-icon');
+            statusIcon.classList.remove('zeroProgressStatus');
+        } else {
+            statusIcon.classList.remove('md-icon');
+            statusIcon.classList.remove('zeroProgressStatus');
+            statusIcon.classList.add('status-text-icon');
+            statusIcon.innerHTML = (Math.round(progress)) + '%';
+        }
+    }
+
+    function getSyncJobHtml(listInstance, job) {
+
+        var html = '';
+
+        html += '<div class="listItem" data-id="' + job.Id + '" data-status="' + job.Status + '">';
+
+        var progress = job.Progress || 0;
+
+        if (progress === 0) {
+            html += '<i class="md-icon listItemIcon statusIcon zeroProgressStatus">file_download</i>';
+        } else if (progress >= 100) {
+            html += '<i class="md-icon listItemIcon statusIcon">file_download</i>';
+        } else {
+            html += '<i class="listItemIcon statusIcon status-text-icon">' + (Math.round(progress)) + '%</i>';
+        }
+
+        var textLines = [];
+
+        if (job.ParentName) {
+            textLines.push(job.ParentName);
+        }
+
+        textLines.push(job.Name);
+
+        if (job.ItemCount == 1) {
+            textLines.push(globalize.translate('ValueItemCount', job.ItemCount));
+        } else {
+            textLines.push(globalize.translate('ValueItemCountPlural', job.ItemCount));
+        }
+
+        if (textLines >= 3) {
+            html += '<div class="listItemBody three-line">';
+        } else {
+            html += '<div class="listItemBody two-line">';
+        }
+
+        for (var i = 0, length = textLines.length; i < length; i++) {
+
+            if (i == 0) {
+                html += '<h3 class="listItemBodyText">';
+                html += textLines[i];
+                html += '</h3>';
+            } else {
+                html += '<div class="listItemBodyText secondary">';
+                html += textLines[i];
+                html += '</div>';
+            }
+        }
+
+        html += '</div>';
+
+        html += '<button type="button" is="paper-icon-button-light" class="btnJobMenu listItemButton"><i class="md-icon">more_vert</i></button>';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function renderList(listInstance, jobs) {
+
+        if ((new Date().getTime() - listInstance.lastDataLoad) < 60000) {
+            refreshList(listInstance, jobs);
+            return;
+        }
+
+        listInstance.lastDataLoad = new Date().getTime();
+
+        var html = '';
+        var lastTargetName = '';
+
+        var showTargetName = !listInstance.options.isLocalSync;
+
+        var hasOpenSection = false;
+
+        for (var i = 0, length = jobs.length; i < length; i++) {
+
+            var job = jobs[i];
+            if (showTargetName) {
+                var targetName = job.TargetName || 'Unknown';
+
+                if (targetName != lastTargetName) {
+
+                    if (lastTargetName) {
+                        html += '</div>';
+                        html += '<br/>';
+                        html += '<br/>';
+                        html += '<br/>';
+                        hasOpenSection = false;
+                    }
+
+                    lastTargetName = targetName;
+
+                    html += '<div class="detailSectionHeader">';
+
+                    html += '<div>' + targetName + '</div>';
+
+                    html += '</div>';
+                    html += '<div class="itemsContainer vertical-list">';
+                    hasOpenSection = true;
+                }
+            }
+
+            html += getSyncJobHtml(listInstance, job);
+        }
+
+        if (hasOpenSection) {
+            html += '</div>';
+        }
+
+        var elem = listInstance.options.element;
+        elem.innerHTML = html;
+
+        imageLoader.lazyChildren(elem);
     }
 
     function fetchData(listInstance) {
@@ -14,7 +190,7 @@
         loading.show();
 
         var options = {};
-        var apiClient = connectionManager.getApiClient(listInstance.options.serverId);
+        var apiClient = getApiClient(listInstance);
 
         if (listInstance.options.userId) {
             options.UserId = listInstance.options.userId;
@@ -31,6 +207,98 @@
         });
     }
 
+    function startListening(listInstance) {
+
+        var startParams = "0,1500";
+
+        var apiClient = getApiClient(listInstance);
+
+        if (listInstance.options.userId) {
+            startParams += "," + listInstance.options.userId;
+        }
+        if (listInstance.options.isLocalSync) {
+            startParams += "," + apiClient.deviceId();
+        }
+
+        if (apiClient.isWebSocketOpen()) {
+            apiClient.sendWebSocketMessage("SyncJobsStart", startParams);
+        }
+    }
+
+    function stopListening(listInstance) {
+
+        var apiClient = getApiClient(listInstance);
+        if (apiClient.isWebSocketOpen()) {
+            apiClient.sendWebSocketMessage("SyncJobsStop", "");
+        }
+    }
+
+    function getApiClient(listInstance) {
+        return connectionManager.getApiClient(listInstance.options.serverId);
+    }
+
+    function showJobMenu(listInstance, elem) {
+
+        var item = dom.parentWithClass(elem, 'listItem');
+        var jobId = item.getAttribute('data-id');
+        var status = item.getAttribute('data-status');
+
+        var menuItems = [];
+
+        if (status == 'Cancelled') {
+            menuItems.push({
+                name: globalize.translate('ButtonDelete'),
+                id: 'delete'
+            });
+        } else {
+            menuItems.push({
+                name: globalize.translate('ButtonCancelSyncJob'),
+                id: 'cancel'
+            });
+        }
+
+        require(['actionsheet'], function (actionsheet) {
+
+            actionsheet.show({
+                items: menuItems,
+                positionTo: elem,
+                callback: function (id) {
+
+                    switch (id) {
+
+                        case 'delete':
+                            cancelJob(listInstance, jobId);
+                            break;
+                        case 'cancel':
+                            cancelJob(listInstance, jobId);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+
+        });
+    }
+
+    function onElementClick(e) {
+
+        var listInstance = this;
+
+        var btnJobMenu = dom.parentWithClass(e.target, 'btnJobMenu');
+        if (btnJobMenu) {
+            showJobMenu(this, btnJobMenu);
+            return;
+        }
+
+        var listItem = dom.parentWithClass(e.target, 'listItem');
+        if (listItem) {
+            var jobId = listItem.getAttribute('data-id');
+            // edit job
+            events.trigger(listInstance, 'jobedit', [jobId, listInstance.options.serverId]);
+        }
+    }
+
     function syncJobList(options) {
         this.options = options;
 
@@ -38,15 +306,27 @@
         this.onSyncJobsUpdatedHandler = null;
         events.on(serverNotifications, 'SyncJobs', onSyncJobsUpdatedHandler);
 
+        var onClickHandler = onElementClick.bind(this);
+        options.element.addEventListener('click', onClickHandler);
+        this.onClickHandler = onClickHandler;
+
         fetchData(this);
+        startListening(this);
     }
 
     syncJobList.prototype.destroy = function () {
+
+        stopListening(this);
+
         this.options = null;
 
         var onSyncJobsUpdatedHandler = this.onSyncJobsUpdatedHandler;
         this.onSyncJobsUpdatedHandler = null;
         events.off(serverNotifications, 'SyncJobs', onSyncJobsUpdatedHandler);
+
+        var onClickHandler = this.onClickHandler;
+        this.onClickHandler = null;
+        options.element.removeEventListener('click', onClickHandler);
     };
 
     return syncJobList;
diff --git a/dashboard-ui/mysync.html b/dashboard-ui/mysync.html
index 84dce4272..bde3b84ea 100644
--- a/dashboard-ui/mysync.html
+++ b/dashboard-ui/mysync.html
@@ -1,8 +1,17 @@
 <div id="mySyncActivityPage" data-role="page" class="page libraryPage syncActivityPage mySyncPage noSecondaryNavPage" data-contextname="${TitleSync}">
 
+    <style>
+        .status-text-icon {
+            font-size: 80%;
+            background-color: #444;
+        }
+        .zeroProgressStatus {
+            background-color: #444;
+        }
+    </style>
     <div data-role="content">
 
-        <div class="supporterPromotionContainer" style="display:none;text-align: right;">
+        <div class="supporterPromotionContainer hide" style="text-align: right; position: static;">
             <div class="customSupporterPromotion supporterPromotion inlineSupporterPromotion">
                 <button is="emby-button" type="button" class="raised accent block btnSyncSupporter">
                     <div class="mainText">
diff --git a/dashboard-ui/scripts/mysync.js b/dashboard-ui/scripts/mysync.js
index 083579083..c48419c60 100644
--- a/dashboard-ui/scripts/mysync.js
+++ b/dashboard-ui/scripts/mysync.js
@@ -1,4 +1,30 @@
-define(['loading', 'apphost', 'localsync'], function (loading, appHost) {
+define(['loading', 'apphost', 'globalize', 'syncJobList', 'events', 'localsync'], function (loading, appHost, globalize, syncJobList, events) {
+
+    function initSupporterInfo(view, params) {
+
+        view.querySelector('.btnSyncSupporter').addEventListener('click', function () {
+
+            requirejs(["registrationservices"], function (registrationServices) {
+                registrationServices.validateFeature('sync');
+            });
+        });
+
+        view.querySelector('.supporterPromotion .mainText').innerHTML = globalize.translate('HeaderSyncRequiresSupporterMembership');
+
+        var apiClient = ApiClient;
+        apiClient.getPluginSecurityInfo().then(function (regInfo) {
+
+            if (regInfo.IsMBSupporter) {
+                view.querySelector('.supporterPromotionContainer').classList.add('hide');
+            } else {
+                view.querySelector('.supporterPromotionContainer').classList.remove('hide');
+            }
+
+        }, function () {
+
+            view.querySelector('.supporterPromotionContainer').classList.remove('hide');
+        });
+    }
 
     return function (view, params) {
 
@@ -51,18 +77,31 @@
             view.querySelector('.localSyncStatus').classList.add('hide');
         }
 
+        initSupporterInfo(view, params);
+        var mySyncJobList = new syncJobList({
+            isLocalSync: params.mode === 'offline',
+            serverId: ApiClient.serverId(),
+            userId: params.mode === 'offline' ? null : ApiClient.getCurrentUserId(),
+            element: view.querySelector('.syncActivity')
+        });
+
+        events.on(mySyncJobList, 'jobedit', function (e, jobId, serverId) {
+
+            Dashboard.navigate('mysyncjob.html?id=' + jobId);
+        });
+
         view.addEventListener('viewbeforeshow', function () {
-            var page = this;
 
-            refreshSyncStatus(page);
+            refreshSyncStatus(view);
 
-            interval = setInterval(function () {
-                refreshSyncStatus(page);
-            }, 5000);
+            if (appHost.supports('sync')) {
+                interval = setInterval(function () {
+                    refreshSyncStatus(view);
+                }, 5000);
+            }
         });
 
         view.addEventListener('viewbeforehide', function () {
-            var page = this;
 
             loading.hide();
 
@@ -71,5 +110,10 @@
                 interval = null;
             }
         });
+
+        view.addEventListener('viewdestroy', function () {
+
+            mySyncJobList.destroy();
+        });
     };
 });
\ No newline at end of file
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js
index 68fce8f5d..71a9c9424 100644
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@@ -125,9 +125,12 @@
                 html += getPluginHtml(topPlugins[i], options, installedPlugins);
             }
             html += '</div>';
+            html += '<br/>';
+            html += '<br/>';
         }
 
         var hasOpenTag = false;
+        currentCategory = null;
 
         if (options.showCategory === false) {
             html += '<div class="itemsContainer vertical-wrap">';
@@ -148,7 +151,6 @@
                         html += '</div>';
                         html += '<br/>';
                         html += '<br/>';
-                        html += '<br/>';
                     }
 
                     html += '<div class="detailSectionHeader">' + category + '</div>';
diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js
index 62cefdc5f..762e5e6e5 100644
--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@@ -1285,6 +1285,7 @@ var AppInfo = {};
 
         define("libjass", [bowerPath + "/libjass/libjass.min", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
 
+        define("syncJobList", ["components/syncjoblist/syncjoblist"], returnFirstDependency);
         define("appfooter", ["components/appfooter/appfooter"], returnFirstDependency);
         define("dockedtabs", ["components/dockedtabs/dockedtabs"], returnFirstDependency);
         define("directorybrowser", ["components/directorybrowser/directorybrowser"], returnFirstDependency);
diff --git a/dashboard-ui/scripts/syncactivity.js b/dashboard-ui/scripts/syncactivity.js
index d081d6cf5..a47969739 100644
--- a/dashboard-ui/scripts/syncactivity.js
+++ b/dashboard-ui/scripts/syncactivity.js
@@ -410,7 +410,7 @@
          }];
     }
 
-    $(document).on('pageinit', ".syncActivityPage", function () {
+    $(document).on('pageinit', "#syncActivityPage", function () {
 
         var page = this;
 
@@ -422,7 +422,7 @@
         });
         $('.supporterPromotion .mainText', page).html(Globalize.translate('HeaderSyncRequiresSupporterMembership'));
 
-    }).on('pageshow', ".syncActivityPage", function () {
+    }).on('pageshow', "#syncActivityPage", function () {
 
         if (this.id == 'syncActivityPage') {
             LibraryMenu.setTabs('syncadmin', 0, getTabs);
@@ -450,7 +450,7 @@
         startListening(page);
         Events.on(ApiClient, "websocketmessage", onWebSocketMessage);
 
-    }).on('pagebeforehide', ".syncActivityPage", function () {
+    }).on('pagebeforehide', "#syncActivityPage", function () {
 
         var page = this;