From 882bc426ad2bdb7cd6a8fc8013c3ee22a0e8a075 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 30 Jul 2013 16:31:25 -0400
Subject: [PATCH] added favorites page to the tv section

---
 dashboard-ui/favoritetv.html        |  51 ++++++++++
 dashboard-ui/itembynamedetails.html |   3 +
 dashboard-ui/itemdetails.html       |   1 +
 dashboard-ui/scripts/favoritetv.js  | 140 ++++++++++++++++++++++++++++
 dashboard-ui/tvgenres.html          |   1 +
 dashboard-ui/tvnextup.html          |   1 +
 dashboard-ui/tvpeople.html          |   1 +
 dashboard-ui/tvrecommended.html     |   1 +
 dashboard-ui/tvshows.html           |   1 +
 dashboard-ui/tvstudios.html         |   1 +
 10 files changed, 201 insertions(+)
 create mode 100644 dashboard-ui/favoritetv.html
 create mode 100644 dashboard-ui/scripts/favoritetv.js
diff --git a/dashboard-ui/favoritetv.html b/dashboard-ui/favoritetv.html
new file mode 100644
index 000000000..410dd03d7
--- /dev/null
+++ b/dashboard-ui/favoritetv.html
@@ -0,0 +1,51 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+    <title>Media Browser</title>
+</head>
+<body>
+    <div id="favoriteTvPage" data-role="page" class="page libraryPage" data-theme="a" data-view="tvshows">
+        <div class="libraryViewNav">
+            <a href="tvrecommended.html">Suggested</a>
+            <a href="tvnextup.html">Next up</a>
+            <a href="tvshows.html">Shows</a>
+            <a href="tvgenres.html">Genres</a>
+            <a href="tvpeople.html">Actors</a>
+            <a href="tvstudios.html">Networks</a>
+            <a href="favoritetv.html" class="ui-btn-active">Favorites</a>
+        </div>
+        <div class="alphabetPicker">
+        </div>
+        <div data-role="content">
+            <div style="text-align: center;">
+                <div data-role="controlgroup" data-type="horizontal" class="favoriteTypes" data-mini="true">
+                    <a href="#" data-role="button" class="btnFavoriteType btnFavoriteSeries ui-btn-active">Series</a>
+                    <a href="#" data-role="button" class="btnFavoriteType btnFavoriteSeasons">Seasons</a>
+                    <a href="#" data-role="button" class="btnFavoriteType btnFavoriteEpisodes">Episodes</a>
+                </div>
+            </div>
+
+            <div class="viewSettings">
+                <div class="viewControls">
+                    <button data-mini="true" data-icon="filter" data-inline="true" onclick="$('#filterPanel', $.mobile.activePage).panel( 'toggle' );">Filter</button>
+                </div>
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div id="items" class="itemsContainer"></div>
+        </div>
+        <div data-role="panel" id="filterPanel" data-position="right" data-display="overlay" data-theme="b" data-position-fixed="true">
+            <form>
+                <fieldset data-role="controlgroup">
+                    <legend>
+                        <strong>Filters:</strong>
+                    </legend>
+                    <input type="checkbox" name="chkIncludeLikes" id="chkIncludeLikes" data-theme="c" data-mini="true">
+                    <label for="chkIncludeLikes">Includes likes</label>
+
+                </fieldset>
+            </form>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/dashboard-ui/itembynamedetails.html b/dashboard-ui/itembynamedetails.html
index 798b1a7b5..2b8b17a48 100644
--- a/dashboard-ui/itembynamedetails.html
+++ b/dashboard-ui/itembynamedetails.html
@@ -46,6 +46,7 @@
                 <a href="tvgenres.html" class="ui-btn-active">Genres</a>
                 <a href="tvpeople.html">Actors</a>
                 <a href="tvstudios.html">Networks</a>
+                <a href="favoritetv.html">Favorites</a>
             </div>
         </div>
         <div id="tvPeopleTabs" class="itemTabs" style="display: none;">
@@ -56,6 +57,7 @@
                 <a href="tvgenres.html">Genres</a>
                 <a href="tvpeople.html" class="ui-btn-active">Actors</a>
                 <a href="tvstudios.html">Networks</a>
+                <a href="favoritetv.html">Favorites</a>
             </div>
         </div>
         <div id="tvStudioTabs" class="itemTabs" style="display: none;">
@@ -66,6 +68,7 @@
                 <a href="tvgenres.html">Genres</a>
                 <a href="tvpeople.html">Actors</a>
                 <a href="tvstudios.html" class="ui-btn-active">Networks</a>
+                <a href="favoritetv.html">Favorites</a>
             </div>
         </div>
         <div id="musicGenreTabs" class="itemTabs" style="display: none;">
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 9d6d66702..08a93b887 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -46,6 +46,7 @@
                 <a href="tvgenres.html">Genres</a>
                 <a href="tvpeople.html">Actors</a>
                 <a href="tvstudios.html">Networks</a>
+                <a href="favoritetv.html">Favorites</a>
             </div>
         </div>
         <div id="songTabs" class="itemTabs" style="display: none;">
diff --git a/dashboard-ui/scripts/favoritetv.js b/dashboard-ui/scripts/favoritetv.js
new file mode 100644
index 000000000..c2dc1912e
--- /dev/null
+++ b/dashboard-ui/scripts/favoritetv.js
@@ -0,0 +1,140 @@
+﻿(function ($, document) {
+
+    var shape = "poster";
+    
+    // The base query options
+    var query = {
+
+        SortBy: "SortName",
+        SortOrder: "Ascending",
+        IncludeItemTypes: "Series",
+        Recursive: true,
+        Fields: "DisplayMediaType,SeriesInfo,ItemCounts,DateCreated,UserData",
+        StartIndex: 0,
+        Filters: "IsFavorite"
+    };
+
+    function reloadItems(page) {
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
+
+            // Scroll back up so they can see the results from the beginning
+            $(document).scrollTop(0);
+
+            var html = '';
+
+            $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create');
+
+            html += LibraryBrowser.getPosterDetailViewHtml({
+                items: result.Items,
+                context: "tv",
+                shape: shape
+            });
+
+            html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
+
+            $('#items', page).html(html).trigger('create');
+
+            $('.selectPage', page).on('change', function () {
+                query.StartIndex = (parseInt(this.value) - 1) * query.Limit;
+                reloadItems(page);
+            });
+
+            $('.btnNextPage', page).on('click', function () {
+                query.StartIndex += query.Limit;
+                reloadItems(page);
+            });
+
+            $('.btnPreviousPage', page).on('click', function () {
+                query.StartIndex -= query.Limit;
+                reloadItems(page);
+            });
+
+            $('.selectPageSize', page).on('change', function () {
+                query.Limit = parseInt(this.value);
+                query.StartIndex = 0;
+                reloadItems(page);
+            });
+
+            Dashboard.hideLoadingMsg();
+        });
+    }
+
+    $(document).on('pageinit', "#favoriteTvPage", function () {
+
+        var page = this;
+
+        $('.btnFavoriteType', page).on('click', function () {
+
+            $('.favoriteTypes .ui-btn-active', page).removeClass('ui-btn-active');
+            $(this).addClass('ui-btn-active');
+
+        });
+        
+        $('.btnFavoriteSeries', page).on('click', function () {
+
+            shape = "poster";
+            query.IncludeItemTypes = "Series";
+            reloadItems(page);
+        });
+
+        $('.btnFavoriteSeasons', page).on('click', function () {
+
+            shape = "poster";
+            query.IncludeItemTypes = "Season";
+            reloadItems(page);
+        });
+
+        $('.btnFavoriteEpisodes', page).on('click', function () {
+
+            shape = "backdrop";
+            query.IncludeItemTypes = "Episode";
+            reloadItems(page);
+        });
+
+        $('.btnFavoriteSeries', page).on('click', function () {
+
+            query.IncludeItemTypes = "Series";
+            reloadItems(page);
+        });
+
+        $('#chkIncludeLikes', page).on('change', function () {
+
+            query.Filters = this.checked ? "IsFavoriteOrLikes" : "IsFavorite";
+            reloadItems(page);
+        });
+
+        $('.alphabetPicker', page).on('alphaselect', function (e, character) {
+
+            query.NameStartsWithOrGreater = character;
+            query.StartIndex = 0;
+
+            reloadItems(page);
+
+        }).on('alphaclear', function (e) {
+
+            query.NameStartsWithOrGreater = '';
+
+            reloadItems(page);
+        });
+
+    }).on('pagebeforeshow', "#favoriteTvPage", function () {
+
+        var limit = LibraryBrowser.getDefaultPageSize();
+
+        // If the default page size has changed, the start index will have to be reset
+        if (limit != query.Limit) {
+            query.Limit = limit;
+            query.StartIndex = 0;
+        }
+
+        reloadItems(this);
+
+    }).on('pageshow', "#favoriteTvPage", function () {
+
+        $('.alphabetPicker', this).alphaValue(query.NameStartsWith);
+    });
+
+})(jQuery, document);
\ No newline at end of file
diff --git a/dashboard-ui/tvgenres.html b/dashboard-ui/tvgenres.html
index 85a26a80a..6bd09334c 100644
--- a/dashboard-ui/tvgenres.html
+++ b/dashboard-ui/tvgenres.html
@@ -12,6 +12,7 @@
             <a href="tvgenres.html" class="ui-btn-active">Genres</a>
             <a href="tvpeople.html">Actors</a>
             <a href="tvstudios.html">Networks</a>
+            <a href="favoritetv.html">Favorites</a>
         </div>
         <div data-role="content">
             <div class="viewSettings">
diff --git a/dashboard-ui/tvnextup.html b/dashboard-ui/tvnextup.html
index 85a7161c9..07c422548 100644
--- a/dashboard-ui/tvnextup.html
+++ b/dashboard-ui/tvnextup.html
@@ -12,6 +12,7 @@
             <a href="tvgenres.html">Genres</a>
             <a href="tvpeople.html">Actors</a>
             <a href="tvstudios.html">Networks</a>
+            <a href="favoritetv.html">Favorites</a>
         </div>
         <div data-role="content">
             <div class="ehsContent">
diff --git a/dashboard-ui/tvpeople.html b/dashboard-ui/tvpeople.html
index b5dbb20a4..4b3278725 100644
--- a/dashboard-ui/tvpeople.html
+++ b/dashboard-ui/tvpeople.html
@@ -12,6 +12,7 @@
             <a href="tvgenres.html">Genres</a>
             <a href="tvpeople.html" class="ui-btn-active">Actors</a>
             <a href="tvstudios.html">Networks</a>
+            <a href="favoritetv.html">Favorites</a>
         </div>
 
         <div class="alphabetPicker">
diff --git a/dashboard-ui/tvrecommended.html b/dashboard-ui/tvrecommended.html
index 2471da395..4e5924b7c 100644
--- a/dashboard-ui/tvrecommended.html
+++ b/dashboard-ui/tvrecommended.html
@@ -12,6 +12,7 @@
             <a href="tvgenres.html">Genres</a>
             <a href="tvpeople.html">Actors</a>
             <a href="tvstudios.html">Networks</a>
+            <a href="favoritetv.html">Favorites</a>
         </div>
         <div data-role="content">
             <table class="ehsContent">
diff --git a/dashboard-ui/tvshows.html b/dashboard-ui/tvshows.html
index e74c43f03..5a460d4e3 100644
--- a/dashboard-ui/tvshows.html
+++ b/dashboard-ui/tvshows.html
@@ -12,6 +12,7 @@
             <a href="tvgenres.html">Genres</a>
             <a href="tvpeople.html">Actors</a>
             <a href="tvstudios.html">Networks</a>
+            <a href="favoritetv.html">Favorites</a>
         </div>
         <div class="alphabetPicker">
         </div>
diff --git a/dashboard-ui/tvstudios.html b/dashboard-ui/tvstudios.html
index b1668bb59..5812ace0a 100644
--- a/dashboard-ui/tvstudios.html
+++ b/dashboard-ui/tvstudios.html
@@ -12,6 +12,7 @@
             <a href="tvgenres.html">Genres</a>
             <a href="tvpeople.html">Actors</a>
             <a href="tvstudios.html" class="ui-btn-active">Networks</a>
+            <a href="favoritetv.html">Favorites</a>
         </div>
         <div data-role="content">
             <div class="viewSettings">
