From d7c4b43899c2adc32aa43400d6940e611b6e034a Mon Sep 17 00:00:00 2001 From: Techywarrior Date: Sun, 14 Apr 2013 20:37:07 -0700 Subject: [PATCH] rudimentary game view support --- dashboard-ui/gamedetail.html | 48 ++++ dashboard-ui/gamegenres.html | 76 ++++++ dashboard-ui/games.html | 116 +++++++++ dashboard-ui/gamesrecommended.html | 38 +++ dashboard-ui/gamestudios.html | 75 ++++++ dashboard-ui/gamesystem.html | 45 ++++ dashboard-ui/gamesystems.html | 76 ++++++ dashboard-ui/scripts/gamedetailpage.js | 254 +++++++++++++++++++ dashboard-ui/scripts/gamegenrepage.js | 104 ++++++++ dashboard-ui/scripts/gamespage.js | 136 ++++++++++ dashboard-ui/scripts/gamesrecommendedpage.js | 51 ++++ dashboard-ui/scripts/gamestudiospage.js | 105 ++++++++ dashboard-ui/scripts/gamesystempage.js | 62 +++++ dashboard-ui/scripts/gamesystemspage.js | 111 ++++++++ dashboard-ui/scripts/indexpage.js | 2 +- dashboard-ui/scripts/librarybrowser.js | 75 +++++- 16 files changed, 1372 insertions(+), 2 deletions(-) create mode 100644 dashboard-ui/gamedetail.html create mode 100644 dashboard-ui/gamegenres.html create mode 100644 dashboard-ui/games.html create mode 100644 dashboard-ui/gamesrecommended.html create mode 100644 dashboard-ui/gamestudios.html create mode 100644 dashboard-ui/gamesystem.html create mode 100644 dashboard-ui/gamesystems.html create mode 100644 dashboard-ui/scripts/gamedetailpage.js create mode 100644 dashboard-ui/scripts/gamegenrepage.js create mode 100644 dashboard-ui/scripts/gamespage.js create mode 100644 dashboard-ui/scripts/gamesrecommendedpage.js create mode 100644 dashboard-ui/scripts/gamestudiospage.js create mode 100644 dashboard-ui/scripts/gamesystempage.js create mode 100644 dashboard-ui/scripts/gamesystemspage.js diff --git a/dashboard-ui/gamedetail.html b/dashboard-ui/gamedetail.html new file mode 100644 index 000000000..1483aec01 --- /dev/null +++ b/dashboard-ui/gamedetail.html @@ -0,0 +1,48 @@ + + + + + + +
+
+ +
+

+

+ +
+
+
+
+ +
+ +
+ +

+

+

+

+

+ +

+

+

+ +
+
+ +
+

Trailers

+
+
+
+

Gallery

+
+
+ +
+
+ + diff --git a/dashboard-ui/gamegenres.html b/dashboard-ui/gamegenres.html new file mode 100644 index 000000000..0f0d6a867 --- /dev/null +++ b/dashboard-ui/gamegenres.html @@ -0,0 +1,76 @@ + + + + Media Browser + + +
+

+ Games

+
+
+ Suggested + Games + Game Systems + Genres + Studios +
+
+ + +
+
+
+
+ +
+
+ + Sort By: + + + + +
+ +
+ + Sort Order: + + + + + + + +
+
+
+
+
+
+ + Filters: + + + + + + + + + +
+ +
+ + Game System: + + +
+
+
+ +
+ + diff --git a/dashboard-ui/games.html b/dashboard-ui/games.html new file mode 100644 index 000000000..7b6a86069 --- /dev/null +++ b/dashboard-ui/games.html @@ -0,0 +1,116 @@ + + + + Media Browser + + +
+

+ Games

+
+
+ Suggested + Games + Game Systems + Genres + Studios +
+
+ + +
+ + + + + + + + + + + + + + + + + + + +
NameGame SystemRelease YearGenreStudioRating
+ + +
+
+ +
+
+ + Sort By: + + + + + + + + + + + + + + + + + + + +
+ +
+ + Sort Order: + + + + + + + +
+
+
+
+
+
+ + Filters: + + + + + + + + + + + + + + + +
+
+ + Game System: + + +
+
+
+
+ + diff --git a/dashboard-ui/gamesrecommended.html b/dashboard-ui/gamesrecommended.html new file mode 100644 index 000000000..7893d3c96 --- /dev/null +++ b/dashboard-ui/gamesrecommended.html @@ -0,0 +1,38 @@ + + + + Media Browser + + +
+

+ Games

+
+
+ Suggested + Games + Game Systems + Genres + Studios +
+ +
+

Latest Unplayed Games

+ +
+
+ + + + +
+ +
+
+ + diff --git a/dashboard-ui/gamestudios.html b/dashboard-ui/gamestudios.html new file mode 100644 index 000000000..9b2513fe2 --- /dev/null +++ b/dashboard-ui/gamestudios.html @@ -0,0 +1,75 @@ + + + + Media Browser + + +
+

+ Games

+
+
+ Suggested + Games + Game Systems + Genres + Studios +
+
+ + +
+
+
+
+ +
+
+ + Sort By: + + + + +
+ +
+ + Sort Order: + + + + + + + +
+
+
+
+
+
+ + Filters: + + + + + + + + + +
+ +
+ + Game Systems: + + +
+
+
+
+ + diff --git a/dashboard-ui/gamesystem.html b/dashboard-ui/gamesystem.html new file mode 100644 index 000000000..ec17913fb --- /dev/null +++ b/dashboard-ui/gamesystem.html @@ -0,0 +1,45 @@ + + + + + + +
+

+ Games

+
+ +
+ Suggested + Games + Game Systems + Genres + Studios +
+ +
+

+
+
+
+
+
+ +
+ +

+

+

+

+

+ +

+

+ +
+
+ +
+
+ + diff --git a/dashboard-ui/gamesystems.html b/dashboard-ui/gamesystems.html new file mode 100644 index 000000000..b4e835f4e --- /dev/null +++ b/dashboard-ui/gamesystems.html @@ -0,0 +1,76 @@ + + + + Media Browser + + +
+

+ Games

+
+
+ Suggested + Games + Game Systems + Genres + Studios +
+
+ + +
+
+
+
+ +
+
+
+ +

Sort By:

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

Sort Order:

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

Filters:

+ + + + + + + + + +
+
+
+
+ + diff --git a/dashboard-ui/scripts/gamedetailpage.js b/dashboard-ui/scripts/gamedetailpage.js new file mode 100644 index 000000000..0736e6e86 --- /dev/null +++ b/dashboard-ui/scripts/gamedetailpage.js @@ -0,0 +1,254 @@ + +(function ($, document, LibraryBrowser, window) { + + var currentItem; + + function reload(page) { + + var id = getParameterByName('id'); + + Dashboard.showLoadingMsg(); + + ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) { + + currentItem = item; + + var name = item.Name; + + if (item.IndexNumber != null) { + name = item.IndexNumber + " - " + name; + } + if (item.ParentIndexNumber != null) { + name = item.ParentIndexNumber + "." + name; + } + + $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item)); + + Dashboard.setPageTitle(name); + + $('#itemName', page).html(name); + + setInitialCollapsibleState(page, item); + renderDetails(page, item); + + Dashboard.hideLoadingMsg(); + }); + } + + function setInitialCollapsibleState(page, item) { + + if (!item.LocalTrailerCount || item.LocalTrailerCount == 0) { + $('#trailersCollapsible', page).hide(); + } else { + $('#trailersCollapsible', page).show(); + } + } + + function renderDetails(page, item) { + + if (item.Taglines && item.Taglines.length) { + $('#itemTagline', page).html(item.Taglines[0]).show(); + } else { + $('#itemTagline', page).hide(); + } + + if (item.Overview || item.OverviewHtml) { + var overview = item.OverviewHtml || item.Overview; + + $('#itemOverview', page).html(overview).show(); + $('#itemOverview a').each(function () { + $(this).attr("target", "_blank"); + }); + } else { + $('#itemOverview', page).hide(); + } + + if (item.CommunityRating) { + $('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating); + } else { + $('#itemCommunityRating', page).hide(); + } + + LibraryBrowser.renderBudget($('#itemBudget', page), item); + + $('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item)); + + LibraryBrowser.renderGenres($('#itemGenres', page), item); + LibraryBrowser.renderStudios($('#itemStudios', page), item); + renderUserDataIcons(page, item); + LibraryBrowser.renderLinks($('#itemLinks', page), item); + } + + function renderUserDataIcons(page, item) { + $('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item)); + } + + function renderGallery(page, item) { + + var imageTags = item.ImageTags || {}; + var html = ''; + + if (imageTags.Logo) { + + html += createGalleryImage(item.Id, "Logo", item.ImageTags.Logo); + } + if (imageTags.Thumb) { + + html += createGalleryImage(item.Id, "Thumb", item.ImageTags.Thumb); + } + if (imageTags.Art) { + + html += createGalleryImage(item.Id, "Art", item.ImageTags.Art); + + } + if (imageTags.Menu) { + + html += createGalleryImage(item.Id, "Menu", item.ImageTags.Menu); + + } + if (imageTags.Disc) { + + html += createGalleryImage(item.Id, "Disc", item.ImageTags.Disc); + } + if (imageTags.Box) { + + html += createGalleryImage(item.Id, "Box", item.ImageTags.Box); + } + + if (item.BackdropImageTags) { + + for (var i = 0, length = item.BackdropImageTags.length; i < length; i++) { + html += createGalleryImage(item.Id, "Backdrop", item.BackdropImageTags[0], i); + } + + } + + $('#galleryContent', page).html(html).trigger('create'); + } + + function createGalleryImage(itemId, type, tag, index) { + + var downloadWidth = 400; + var lightboxWidth = 800; + var html = ''; + + if (typeof (index) == "undefined") index = 0; + + html += '
'; + html += ''; + html += ''; + html += '
'; + + html += '
'; + html += 'Close'; + html += ''; + html += '
'; + + return html; + } + + function renderTrailers(page, item) { + var html = ''; + + ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), item.Id).done(function (trailers) { + + for (var i = 0, length = trailers.length; i < length; i++) { + + var trailer = trailers[i]; + + html += '
'; + html += ''; + + var imageTags = trailer.ImageTags || {}; + + if (imageTags.Primary) { + + var imgUrl = ApiClient.getImageUrl(trailer.Id, { + maxwidth: 500, + tag: imageTags.Primary, + type: "primary" + }); + + html += ''; + } else { + html += ''; + } + + html += '
' + trailer.Name + '
'; + html += '
'; + + if (trailer.RunTimeTicks != "") { + html += ticks_to_human(trailer.RunTimeTicks); + } + else { + html += " "; + } + html += '
'; + + html += ''; + + html += '
'; + } + + $('#trailersContent', page).html(html); + + }); + } + + $(document).on('pageinit', "#gameDetailPage", function () { + + var page = this; + + }).on('pageshow', "#gameDetailPage", function () { + + var page = this; + + reload(page); + + $('#trailersCollapsible', page).on('expand.lazyload', function () { + renderTrailers(page, currentItem); + + $(this).off('expand.lazyload'); + }); + + $('#galleryCollapsible', page).on('expand.lazyload', function () { + + renderGallery(page, currentItem); + + $(this).off('expand.lazyload'); + }); + + }).on('pagehide', "#gameDetailPage", function () { + + currentItem = null; + var page = this; + + $('#trailersCollapsible', page).off('expand.lazyload'); + $('#galleryCollapsible', page).off('expand.lazyload'); + }); + + function gameDetailPage() { + + var self = this; + + self.playTrailer = function (index) { + ApiClient.getLocalTrailers(Dashboard.getCurrentUserId(), currentItem.Id).done(function (trailers) { + MediaPlayer.play([trailers[index]]); + }); + }; + } + + window.GameDetailPage = new gameDetailPage(); + + +})(jQuery, document, LibraryBrowser, window); \ No newline at end of file diff --git a/dashboard-ui/scripts/gamegenrepage.js b/dashboard-ui/scripts/gamegenrepage.js new file mode 100644 index 000000000..892922a18 --- /dev/null +++ b/dashboard-ui/scripts/gamegenrepage.js @@ -0,0 +1,104 @@ +(function ($, document) { + + // The base query options + var query = { + + SortBy: "SortName", + SortOrder: "Ascending", + MediaTypes: "Game", + Recursive: true, + Fields: "PrimaryImageAspectRatio,ItemCounts,DateCreated,UserData", + Limit: LibraryBrowser.getDetaultPageSize(), + StartIndex: 0 + }; + + function reloadItems(page) { + + Dashboard.showLoadingMsg(); + + ApiClient.getGenres(Dashboard.getCurrentUserId(), query).done(function (result) { + + var html = ''; + + var showPaging = result.TotalRecordCount > query.Limit; + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true); + } + + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + useAverageAspectRatio: true, + countNameSingular: "Game", + countNamePlural: "Games" + }); + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); + } + + var elem = $('#items', page).html(html).trigger('create'); + + $('select', elem).on('change', function () { + query.StartIndex = (parseInt(this.value) - 1) * query.Limit; + reloadItems(page); + }); + + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pageinit', "#gameGenresPage", function () { + + var page = this; + + $('.radioSortBy', this).on('click', function () { + query.SortBy = this.getAttribute('data-sortby'); + query.StartIndex = 0; + reloadItems(page); + }); + + $('.radioSortOrder', this).on('click', function () { + query.SortOrder = this.getAttribute('data-sortorder'); + query.StartIndex = 0; + reloadItems(page); + }); + + $('.chkStandardFilter', this).on('change', function () { + + var filterName = this.getAttribute('data-filter'); + var filters = query.Filters || ""; + + filters = (',' + filters).replace(',' + filterName, '').substring(1); + + if (this.checked) { + filters = filters ? (filters + ',' + filterName) : filterName; + } + + query.StartIndex = 0; + query.Filters = filters; + + reloadItems(page); + }); + + }).on('pagebeforeshow', "#gameGenresPage", function () { + + reloadItems(this); + + }).on('pageshow', "#gameGenresPage", function () { + + // Reset form values using the last used query + $('.radioSortBy', this).each(function () { + + this.checked = query.SortBy == this.getAttribute('data-sortby'); + + }).checkboxradio('refresh'); + + $('.radioSortOrder', this).each(function () { + + this.checked = query.SortOrder == this.getAttribute('data-sortorder'); + + }).checkboxradio('refresh'); + }); + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/gamespage.js b/dashboard-ui/scripts/gamespage.js new file mode 100644 index 000000000..610b218e5 --- /dev/null +++ b/dashboard-ui/scripts/gamespage.js @@ -0,0 +1,136 @@ + +(function ($, document) { + + var view = "Tile"; + + // The base query options + var query = { + + SortBy: "SortName", + SortOrder: "Ascending", + MediaTypes: "Game", + Recursive: true, + Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType,Genres,Studios", + Limit: LibraryBrowser.getDetaultPageSize(), + StartIndex: 0 + }; + + function reloadItems(page) { + + Dashboard.showLoadingMsg(); + + ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) { + + var html = ''; + + var showPaging = result.TotalRecordCount > query.Limit; + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true); + } + + for (var i = 0, length = result.Items.length; i < length; i++) { + var item = result.Items[i]; +//console.log(item); + html += ''; + html += '' + item.Name + ''; + html += '' + item.DisplayMediaType + ''; + html += '' + item.ReleaseYear + ''; + html += '' + /*LibraryBrowser.renderGenres('', item)*/ + ''; + html += '' + /*LibraryBrowser.renderStudios('', item)*/ + ''; + html += '' + /* */ + ''; + html += ''; + + } + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); + } + + var elem = $('#items', page).html(html).trigger('create'); + + $('select', elem).on('change', function () { + query.StartIndex = (parseInt(this.value) - 1) * query.Limit; + reloadItems(page); + }); + + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pageinit', "#gamesPage", function () { + + var page = this; + + $('.radioSortBy', this).on('click', function () { + query.StartIndex = 0; + query.SortBy = this.getAttribute('data-sortby'); + reloadItems(page); + }); + + $('.radioSortOrder', this).on('click', function () { + query.StartIndex = 0; + query.SortOrder = this.getAttribute('data-sortorder'); + reloadItems(page); + }); + + $('.chkStandardFilter', this).on('change', function () { + + var filterName = this.getAttribute('data-filter'); + var filters = query.Filters || ""; + + filters = (',' + filters).replace(',' + filterName, '').substring(1); + + if (this.checked) { + filters = filters ? (filters + ',' + filterName) : filterName; + } + + query.StartIndex = 0; + query.Filters = filters; + + reloadItems(page); + }); + + $('#selectView', this).on('change', function () { + + view = this.value; + + reloadItems(page); + }); + + + }).on('pagebeforeshow', "#gamesPage", function () { + + reloadItems(this); + + }).on('pageshow', "#gamesPage", function () { + + + // Reset form values using the last used query + $('.radioSortBy', this).each(function () { + + this.checked = query.SortBy == this.getAttribute('data-sortby'); + + }).checkboxradio('refresh'); + + $('.radioSortOrder', this).each(function () { + + this.checked = query.SortOrder == this.getAttribute('data-sortorder'); + + }).checkboxradio('refresh'); + + $('.chkStandardFilter', this).each(function () { + + var filters = "," + (query.Filters || ""); + var filterName = this.getAttribute('data-filter'); + + this.checked = filters.indexOf(',' + filterName) != -1; + + }).checkboxradio('refresh'); + + + $('#selectView', this).val(view).selectmenu('refresh'); + + }); + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/gamesrecommendedpage.js b/dashboard-ui/scripts/gamesrecommendedpage.js new file mode 100644 index 000000000..3361ef868 --- /dev/null +++ b/dashboard-ui/scripts/gamesrecommendedpage.js @@ -0,0 +1,51 @@ +(function ($, document) { + + $(document).on('pagebeforeshow', "#gamesRecommendedPage", function () { + + var page = this; + + var options = { + + SortBy: "DateCreated", + SortOrder: "Descending", + MediaTypes: "Game", + Limit: 5, + Recursive: true, + Fields: "PrimaryImageAspectRatio", + Filters: "IsUnplayed" + }; + + ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + + $('#recentlyAddedItems', page).html(LibraryBrowser.getGamePosterViewHtml({ + items: result.Items, + useAverageAspectRatio: true, + showNewIndicator: false + })); + + }); + + var options = { + + SortBy: "DatePlayed", + SortOrder: "Descending", + MediaTypes: "Game", + Limit: 5, + Recursive: true, + Fields: "PrimaryImageAspectRatio", + Filters: "IsPlayed" + }; + + ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) { + + $('#resumableItems', page).html(LibraryBrowser.getGamePosterViewHtml({ + items: result.Items, + useAverageAspectRatio: true, + showNewIndicator: false + })); + + }); + + }); + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/gamestudiospage.js b/dashboard-ui/scripts/gamestudiospage.js new file mode 100644 index 000000000..0463064a2 --- /dev/null +++ b/dashboard-ui/scripts/gamestudiospage.js @@ -0,0 +1,105 @@ +(function ($, document) { + + // The base query options + var query = { + + SortBy: "SortName", + SortOrder: "Ascending", + MediaTypes: "Game", + Recursive: true, + Fields: "PrimaryImageAspectRatio,ItemCounts,DateCreated,UserData", + Limit: LibraryBrowser.getDetaultPageSize(), + StartIndex: 0 + }; + + function reloadItems(page) { + + Dashboard.showLoadingMsg(); + + ApiClient.getStudios(Dashboard.getCurrentUserId(), query).done(function (result) { + + var html = ''; + + var showPaging = result.TotalRecordCount > query.Limit; + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true); + } + + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + useAverageAspectRatio: true, + countNameSingular: "Game", + countNamePlural: "Games" + }); + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); + } + + var elem = $('#items', page).html(html).trigger('create'); + + $('select', elem).on('change', function () { + query.StartIndex = (parseInt(this.value) - 1) * query.Limit; + reloadItems(page); + }); + + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pageinit', "#gameStudiosPage", function () { + + var page = this; + + $('.radioSortBy', this).on('click', function () { + query.SortBy = this.getAttribute('data-sortby'); + query.StartIndex = 0; + reloadItems(page); + }); + + $('.radioSortOrder', this).on('click', function () { + query.SortOrder = this.getAttribute('data-sortorder'); + query.StartIndex = 0; + reloadItems(page); + }); + + $('.chkStandardFilter', this).on('change', function () { + + var filterName = this.getAttribute('data-filter'); + var filters = query.Filters || ""; + + filters = (',' + filters).replace(',' + filterName, '').substring(1); + + if (this.checked) { + filters = filters ? (filters + ',' + filterName) : filterName; + } + + query.StartIndex = 0; + query.Filters = filters; + + reloadItems(page); + }); + + }).on('pagebeforeshow', "#gameStudiosPage", function () { + + reloadItems(this); + + }).on('pageshow', "#gameStudiosPage", function () { + + // Reset form values using the last used query + $('.radioSortBy', this).each(function () { + + this.checked = query.SortBy == this.getAttribute('data-sortby'); + + }).checkboxradio('refresh'); + + $('.radioSortOrder', this).each(function () { + + this.checked = query.SortOrder == this.getAttribute('data-sortorder'); + + }).checkboxradio('refresh'); + + }); + +})(jQuery, document); \ No newline at end of file diff --git a/dashboard-ui/scripts/gamesystempage.js b/dashboard-ui/scripts/gamesystempage.js new file mode 100644 index 000000000..7c33208b1 --- /dev/null +++ b/dashboard-ui/scripts/gamesystempage.js @@ -0,0 +1,62 @@ + +(function ($, document, LibraryBrowser) { + + function reload(page) { + + var id = getParameterByName('id'); + + Dashboard.showLoadingMsg(); + + ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) { + + var name = item.Name; + + $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item)); + + Dashboard.setPageTitle(name); + + $('#itemName', page).html(name); + + renderDetails(page, item); + + Dashboard.hideLoadingMsg(); + }); + } + + function renderDetails(page, item) { + + if (item.Overview || item.OverviewHtml) { + var overview = item.OverviewHtml || item.Overview; + + $('#itemOverview', page).html(overview).show(); + $('#itemOverview a').each(function () { + $(this).attr("target", "_blank"); + }); + } else { + $('#itemOverview', page).hide(); + } + + if (item.CommunityRating) { + $('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating); + } else { + $('#itemCommunityRating', page).hide(); + } + + $('#itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item)); + + LibraryBrowser.renderGenres($('#itemGenres', page), item); + LibraryBrowser.renderStudios($('#itemStudios', page), item); + renderUserDataIcons(page, item); + LibraryBrowser.renderLinks($('#itemLinks', page), item); + } + + function renderUserDataIcons(page, item) { + $('#itemRatings', page).html(LibraryBrowser.getUserDataIconsHtml(item)); + } + + $(document).on('pageshow', "#gamesystemPage", function () { + reload(this); + }); + + +})(jQuery, document, LibraryBrowser); \ No newline at end of file diff --git a/dashboard-ui/scripts/gamesystemspage.js b/dashboard-ui/scripts/gamesystemspage.js new file mode 100644 index 000000000..3ab959d11 --- /dev/null +++ b/dashboard-ui/scripts/gamesystemspage.js @@ -0,0 +1,111 @@ + +(function ($, document) { + + // The base query options + var query = { + + SortBy: "SortName", + SortOrder: "Ascending", + IncludeItemTypes: "Platform", + Recursive: true, + Fields: "PrimaryImageAspectRatio,ItemCounts,ItemCounts,DateCreated,UserData", + Limit: LibraryBrowser.getDetaultPageSize(), + StartIndex: 0 + }; + + + function reloadItems(page) { + + Dashboard.showLoadingMsg(); + + ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) { + + var html = ''; + + var showPaging = result.TotalRecordCount > query.Limit; + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true); + } + + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + useAverageAspectRatio: true + }); + + if (showPaging) { + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); + } + + var elem = $('#items', page).html(html).trigger('create'); + + $('select', elem).on('change', function () { + query.StartIndex = (parseInt(this.value) - 1) * query.Limit; + reloadItems(page); + }); + + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pageinit', "#gamesystemsPage", function () { + + var page = this; + + $('.radioSortBy', this).on('click', function () { + query.SortBy = this.getAttribute('data-sortby'); + reloadItems(page); + }); + + $('.radioSortOrder', this).on('click', function () { + query.SortOrder = this.getAttribute('data-sortorder'); + reloadItems(page); + }); + + $('.chkStandardFilter', this).on('change', function () { + + var filterName = this.getAttribute('data-filter'); + var filters = query.Filters || ""; + + filters = (',' + filters).replace(',' + filterName, '').substring(1); + + if (this.checked) { + filters = filters ? (filters + ',' + filterName) : filterName; + } + + query.StartIndex = 0; + query.Filters = filters; + + reloadItems(page); + }); + + }).on('pagebeforeshow', "#gamesystemsPage", function () { + + reloadItems(this); + + }).on('pageshow', "#gamesystemsPage", function () { + + // Reset form values using the last used query + $('.radioSortBy', this).each(function () { + + this.checked = query.SortBy == this.getAttribute('data-sortby'); + + }).checkboxradio('refresh'); + + $('.radioSortOrder', this).each(function () { + + this.checked = query.SortOrder == this.getAttribute('data-sortorder'); + + }).checkboxradio('refresh'); + + $('.chkStandardFilter', this).each(function () { + + var filters = "," + (query.Filters || ""); + var filterName = this.getAttribute('data-filter'); + + this.checked = filters.indexOf(',' + filterName) != -1; + + }).checkboxradio('refresh'); + }); + +})(jQuery, document); diff --git a/dashboard-ui/scripts/indexpage.js b/dashboard-ui/scripts/indexpage.js index 08b560165..65eea8d59 100644 --- a/dashboard-ui/scripts/indexpage.js +++ b/dashboard-ui/scripts/indexpage.js @@ -59,7 +59,7 @@ if (result.TotalRecordCount) { - var view = { name: "Games", url: "#", img: "css/images/items/list/gamecollection.png", background: "#E12026" }; + var view = { name: "Games", url: "gamesrecommended.html", img: "css/images/items/list/gamecollection.png", background: "#E12026" }; $('#views', page).append(getViewHtml(view)); } diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 197727c87..ca850ac06 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -79,6 +79,10 @@ html += ""; } + else if (item.MediaType == "Game") { + + html += ""; + } else { html += ""; @@ -896,7 +900,76 @@ } else { elem.hide(); } - } + }, + + getGamePosterViewHtml: function (options) { + + var items = options.items; + + var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null; + + var html = ""; + + for (var i = 0, length = items.length; i < length; i++) { + var item = items[i]; + + var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary; + + var showText = options.showTitle || !hasPrimaryImage; + + var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText"; + + html += "
"; + + if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { + html += ""; + } else if (hasPrimaryImage) { + + var height = 300; + var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; + + html += ""; + + } else if (item.BackdropImageTags && item.BackdropImageTags.length) { + html += ""; + } + else { + html += ""; + } + + if (showText) { + html += "
"; + html += item.Name; + html += "
"; + } + + if (options.showNewIndicator !== false) { + html += LibraryBrowser.getNewIndicatorHtml(item); + } + + html += "
"; + } + + return html; + } };