aadd sync services tab

dashboard-ui/scripts/plugincatalogpage.js

@@ -15,20 +15,39 @@
         var promise2 = ApiClient.getInstalledPlugins();
 
         $.when(promise1, promise2).done(function (response1, response2) {
-            populateList(page, response1[0], response2[0]);
+            populateList({
+
+                catalogElement: $('#pluginTiles', page),
+                noItemsElement: $("#noPlugins", page),
+                availablePlugins: response1[0],
+                installedPlugins: response2[0]
+
+            });
         });
     }
 
-    function populateList(page, availablePlugins, installedPlugins) {
+    function populateList(options) {
 
-        Dashboard.showLoadingMsg();
+        var availablePlugins = options.availablePlugins;
+        var installedPlugins = options.installedPlugins;
 
         availablePlugins = availablePlugins.filter(function (p) {
+
+            p.category = p.category || "General";
+            p.categoryDisplayName = Globalize.translate('PluginCategory' + p.category.replace(' ', ''));
+
+            if (options.categories) {
+                if (options.categories.indexOf(p.category) == -1) {
+                    return false;
+                }
+            }
+
             return p.type == "UserInstalled";
+
         }).sort(function (a, b) {
 
-            var aName = (a.category || "General") + " " + a.name;
-            var bame = (b.category || "General") + " " + b.name;
+            var aName = (a.category) + " " + a.name;
+            var bame = (b.category) + " " + b.name;
 
             return aName > bame ? 1 : -1;
         });
@@ -41,17 +60,19 @@
             var html = '';
             var plugin = availablePlugins[i];
 
-            var category = plugin.category || "General";
+            var category = plugin.categoryDisplayName;
 
             if (category != currentCategory) {
 
-                if (currentCategory) {
-                    html += '<br/>';
-                    html += '<br/>';
-                    html += '<br/>';
-                }
+                if (options.showCategory !== false) {
+                    if (currentCategory) {
+                        html += '<br/>';
+                        html += '<br/>';
+                        html += '<br/>';
+                    }
 
-                html += '<div class="detailSectionHeader">' + category + '</div>';
+                    html += '<div class="detailSectionHeader">' + category + '</div>';
+                }
 
                 currentCategory = category;
             }
@@ -132,11 +153,11 @@
 
         }
 
-        if (!availablePlugins.length) {
-            $("#noPlugins", page).hide();
+        if (!availablePlugins.length && options.noItemsElement) {
+            $(options.noItemsElement).hide();
         }
 
-        $('#pluginTiles', page).html(pluginhtml);
+        $(options.catalogElement).html(pluginhtml);
 
         Dashboard.hideLoadingMsg();
     }
@@ -145,8 +166,6 @@
 
         var page = this;
 
-        reloadList(page);
-
         $('.chkPremiumFilter', page).on('change', function () {
 
             if (this.checked) {
@@ -189,6 +208,12 @@
             this.checked = filters;
 
         }).checkboxradio('refresh');
+
+        reloadList(page);
     });
 
+    window.PluginCatalog = {
+        renderCatalog: populateList
+    };
+
 })(jQuery, document);

dashboard-ui/scripts/syncservices.js

@@ -0,0 +1,38 @@
+(function ($, document) {
+
+    function reloadList(page) {
+
+        Dashboard.showLoadingMsg();
+
+        var promise1 = ApiClient.getAvailablePlugins({
+            TargetSystems: 'Server'
+        });
+
+        var promise2 = ApiClient.getInstalledPlugins();
+
+        $.when(promise1, promise2).done(function (response1, response2) {
+            populateList(page, response1[0], response2[0]);
+        });
+    }
+
+    function populateList(page, availablePlugins, installedPlugins) {
+
+        PluginCatalog.renderCatalog({
+
+            catalogElement: $('.catalog', page),
+            availablePlugins: availablePlugins,
+            installedPlugins: installedPlugins,
+            categories: ['Sync'],
+            showCategory: false
+        });
+
+    }
+
+    $(document).on('pageshow', "#syncServicesPage", function () {
+
+        var page = this;
+
+        reloadList(page);
+    });
+
+})(jQuery, document);

dashboard-ui/syncactivity.html

@@ -11,6 +11,7 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="#" data-role="button" class="ui-btn-active">${TabActivity}</a>
+                    <a href="syncservices.html" data-role="button">${TabServices}</a>
                     <a href="syncsettings.html" data-role="button">${TabSettings}</a>
                 </div>
 

dashboard-ui/syncjob.html

@@ -11,6 +11,7 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="syncactivity.html" data-role="button" class="ui-btn-active">${TabActivity}</a>
+                    <a href="syncservices.html" data-role="button">${TabServices}</a>
                     <a href="syncsettings.html" data-role="button">${TabSettings}</a>
                 </div>
 

dashboard-ui/syncservices.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>${TitleSync}</title>
+</head>
+<body>
+    <div id="syncServicesPage" data-role="page" class="page type-interior syncConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Sync">
+
+        <div data-role="content">
+            <div class="content-primary">
+
+                <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+                    <a href="syncactivity.html" data-role="button">${TabActivity}</a>
+                    <a href="#" data-role="button" class="ui-btn-active">${TabServices}</a>
+                    <a href="syncsettings.html" data-role="button">${TabSettings}</a>
+                </div>
+
+                <div class="detailSectionHeader">${HeaderInstalledServices}</div>
+                <p style="display:none;" class="noServicesInstalled">${MessageNoServicesInstalled}</p>
+                <div class="installed"></div>
+                <br />
+                <br />
+                <br />
+                <div class="detailSectionHeader">${HeaderAvailableServices}</div>
+                <div class="catalog"></div>
+
+            </div>
+        </div>
+    </div>
+</body>
+</html>

dashboard-ui/syncsettings.html

@@ -11,6 +11,7 @@
 
                 <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
                     <a href="syncactivity.html" data-role="button">${TabActivity}</a>
+                    <a href="syncservices.html" data-role="button">${TabServices}</a>
                     <a href="#" data-role="button" class="ui-btn-active">${TabSettings}</a>
                 </div>