render channels page

dashboard-ui/livetvchannels.html

@@ -11,6 +11,11 @@
             <a href="livetvrecordings.html">Recordings</a>
         </div>
         <div data-role="content">
+            <div class="viewSettings">
+                <div class="listTopPaging">
+                </div>
+            </div>
+            <div id="items" class="itemsContainer"></div>
         </div>
     </div>
 </body>

dashboard-ui/scripts/indexpage.js

@@ -190,7 +190,7 @@
                 showViewsHeader = true;
                 views.push({ id: "gamesView", name: "Games", url: "gamesrecommended.html", img: "css/images/items/list/gamecollection.png", background: "#E12026" });
             }
-            
+
             if (showViewsHeader) {
                 $('#viewsHeader', page).show();
             } else {
@@ -249,11 +249,6 @@
             }));
 
         });
-    });
-
-    $(document).on('pagebeforeshow', "#indexPage", function () {
-
-        var page = this;
 
         reloadTips(page);
 

dashboard-ui/scripts/livetvchannels.js

@@ -1 +1,65 @@
-
+(function ($, document, apiClient) {
+
+    function getChannelHtml(channel) {
+
+        var html = '';
+
+        html += '<a class="squareTileItem tileItem" href="#">';
+
+        var imgUrl = "css/images/items/list/collection.png";
+        var isDefault = true;
+        var cssClass = isDefault ? "tileImage defaultTileImage" : "tileImage";
+
+        html += '<div class="' + cssClass + '" style="background-image: url(\'' + imgUrl + '\');"></div>';
+
+
+        html += '<div class="tileContent">';
+
+        html += '<div class="tileName">' + channel.Name + '</div>';
+
+        html += '<p class="itemMiscInfo">' + channel.Number + '</p>';
+
+        html += '</div>';
+
+        html += "</a>";
+
+        return html;
+    }
+
+    function getChannelsHtml(channels) {
+
+        var html = [];
+
+        for (var i = 0, length = channels.length; i < length; i++) {
+
+            html.push(getChannelHtml(channels[i]));
+        }
+
+        return html.join('');
+    }
+
+    function renderChannels(page, channels) {
+
+        var pagingHtml = LibraryBrowser.getPagingHtml({
+
+            StartIndex: 0,
+            Limit: channels.length
+
+        }, channels.length, true);
+
+        $('.listTopPaging', page).html(pagingHtml).trigger('create');
+
+        $('#items', page).html(getChannelsHtml(channels)).trigger('create');
+    }
+
+    $(document).on('pagebeforeshow', "#liveTvChannelsPage", function () {
+
+        var page = this;
+
+        apiClient.getLiveTvChannels().done(function (result) {
+
+            renderChannels(page, result);
+        });
+    });
+
+})(jQuery, document, ApiClient);