From 317f06f6076509eadc753dccf767d5e6d28721a5 Mon Sep 17 00:00:00 2001 From: Techywarrior Date: Wed, 3 Apr 2013 20:56:02 -0700 Subject: [PATCH] plugin catalog filtering --- dashboard-ui/plugincatalog.html | 42 +++-- dashboard-ui/scripts/plugincatalogpage.js | 185 ++++++++++++++-------- 2 files changed, 144 insertions(+), 83 deletions(-) diff --git a/dashboard-ui/plugincatalog.html b/dashboard-ui/plugincatalog.html index 802b8e2d74..6801d0ce40 100644 --- a/dashboard-ui/plugincatalog.html +++ b/dashboard-ui/plugincatalog.html @@ -13,23 +13,39 @@ Plugin Catalog Automatic Updates - -
-

Server

-
+
+
-
-

MB Theatre

-
-
- -
-

MB Classic

-
-
+
+ +
+
+
+ +

Application:

+ + + + + + + + + +
+ +
+ +

+ + + +
+
+
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js index ae447a0832..c328607178 100644 --- a/dashboard-ui/scripts/plugincatalogpage.js +++ b/dashboard-ui/scripts/plugincatalogpage.js @@ -1,94 +1,139 @@ -var PluginCatalogPage = { +(function ($, document) { - onPageShow: function () { - PluginCatalogPage.reloadList(); - }, + // The base query options + var query = { + IsPremium: false, + TargetSystems: "" + }; - reloadList: function () { + function reloadList() { - Dashboard.showLoadingMsg(); + Dashboard.showLoadingMsg(); - var promise1 = ApiClient.getAvailablePlugins(); - var promise2 = ApiClient.getInstalledPlugins(); + var promise1 = ApiClient.getAvailablePlugins(query); + var promise2 = ApiClient.getInstalledPlugins(); - $.when(promise1, promise2).done(function (response1, response2) { - PluginCatalogPage.populateList(response1[0], response2[0]); - }); - }, + $.when(promise1, promise2).done(function (response1, response2) { + populateList(response1[0], response2[0]); + }); - populateList: function (availablePlugins, installedPlugins) { + Dashboard.hideLoadingMsg(); + } - var page = $($.mobile.activePage); - availablePlugins = availablePlugins.filter(function (p) { - return p.type == "UserInstalled"; - }).sort(function (a, b) { - return a.name > b.name ? 1 : -1; - }); + function populateList(availablePlugins, installedPlugins) { + + var page = $($.mobile.activePage); + availablePlugins = availablePlugins.filter(function (p) { + return p.type == "UserInstalled"; + }).sort(function (a, b) { + return a.name > b.name ? 1 : -1; + }); + + var html = ""; + + for (var i = 0, length = availablePlugins.length; i < length; i++) { + + var plugin = availablePlugins[i]; + + html += "
"; + + if (plugin.thumbImage) { + html += ""; + } else { + html += ""; + } + + if (plugin.isPremium) { + if (plugin.price > 0) { + html += "
"; + } else { + html += "
"; + } + } + + var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name); + + html += "
"; + + var installedPlugin = installedPlugins.filter(function (ip) { + return ip.Name == plugin.name; + })[0]; + + html += "
"; + if (installedPlugin) { + html += plugin.name + " (Installed)"; + } else { + html += plugin.name; + } + html += "
"; + + html += "
"; + + html += "
"; + + } + + $('#pluginTiles', page).html(html); + + Dashboard.hideLoadingMsg(); + } + + $(document).on('pageinit', "#pluginCatalogPage", function () { + + var page = this; - var serverHtml = ''; - var theatreHtml = ''; - var classicHtml = ''; - for (var i = 0, length = availablePlugins.length; i < length; i++) { - var html = ""; + $('.chkStandardFilter', this).on('change', function () { - var plugin = availablePlugins[i]; + var filterName = this.getAttribute('data-filter'); + var filters = query.TargetSystems || ""; - html += "
"; + filters = (',' + filters).replace(',' + filterName, '').substring(1); - if (plugin.thumbImage) { - html += ""; - } else { - html += ""; - } + if (this.checked) { + filters = filters ? (filters + ',' + filterName) : filterName; + } - if (plugin.isPremium) { - if (plugin.price > 0) { - html += "
"; - } else { - html += "
"; - } - } + query.TargetSystems = filters; - var color = plugin.tileColor || LibraryBrowser.getMetroColor(plugin.name); + reloadList(); + }); - html += "
"; + $('.chkPremiumFilter', this).on('change', function () { - var installedPlugin = installedPlugins.filter(function (ip) { - return ip.Name == plugin.name; - })[0]; + var filterName = this.getAttribute('data-filter'); - html += "
"; - if (installedPlugin) { - html += plugin.name + " (Installed)"; - } else { - html += plugin.name; - } - html += "
"; + if (this.checked) { + query.IsPremium = true; + }else { + query.IsPremium = false; + } - html += "
"; + reloadList(); + }); - html += "
"; + }).on('pageshow', "#pluginCatalogPage", function () { - if (plugin.targetSystem == 'Server') { - serverHtml += html; - }else if (plugin.targetSystem == 'MBTheater') { - theatreHtml += html; - }else if (plugin.targetSystem == 'MBClassic') { - classicHtml += html; - } - } + reloadList(); - $('#pluginServerTiles', page).html(serverHtml); - $('#pluginMBTheatreTiles', page).html(theatreHtml); - $('#pluginMBClassicTiles', page).html(classicHtml); + // Reset form values using the last used query - if (serverHtml) $('#pluginServer', page).show(); - if (theatreHtml) $('#pluginMBTheatre', page).show(); - if (classicHtml) $('#pluginMBClassic', page).show(); + $('.chkStandardFilter', this).each(function () { - Dashboard.hideLoadingMsg(); - } -}; + var filters = "," + (query.TargetSystems || ""); + var filterName = this.getAttribute('data-filter'); -$(document).on('pageshow', "#pluginCatalogPage", PluginCatalogPage.onPageShow); \ No newline at end of file + this.checked = filters.indexOf(',' + filterName) != -1; + + }).checkboxradio('refresh'); + + $('.chkPremiumFilter', this).each(function () { + + var filters = query.IsPremium || false; + + this.checked = filters; + + }).checkboxradio('refresh'); + }); + +})(jQuery, document); \ No newline at end of file