add options for feedItems

css/core.css

@@ -250,6 +250,15 @@ button {
     background-color: #ff8175;
 }
 
+.feedItemOptions {
+    padding: 6px;
+    font-size: 13px;
+}
+
+.feedItemOptions i {
+    font-size: 16px;
+}
+
 .title-slider {
     display: inline-block;
     animation: bounce-text 30s linear infinite;

js/controllers.js

@@ -28,7 +28,7 @@ function FeedListCtrl($scope, feeds, pageSwitcher, $location) {
     pageSwitcher.change('feeds');
 }
 
-function FeedCtrl($scope, $routeParams, $location, feeds, pageSwitcher) {
+function FeedCtrl($scope, $routeParams, $location, feeds, pageSwitcher, feedItems) {
     $scope.nrQueueItemsOptions = [1, 2, 3, 4, 5];
     $scope.feed = {};
     // show info at top and items underneath
@@ -49,29 +49,79 @@ function FeedCtrl($scope, $routeParams, $location, feeds, pageSwitcher) {
         }
     };
 
+    $scope.showItemOptions = function(id) {
+        angular.forEach($scope.feed.items, function(value, key) {
+            if (value.id == id) {
+                $scope.feed.items[key].showOptions = !$scope.feed.items[key].showOptions;
+            } else {
+                $scope.feed.items[key].showOptions = false;
+            }
+        });
+    };
+
+    $scope.addToQueue = function(id) {
+        feedItems.addToQueue(id);
+    };
+
     pageSwitcher.setBack('feeds');
 }
 
 function QueueListCtrl($scope, $rootScope, pageSwitcher, feedItems, feeds, downloader, queueList, pageChanger) {
     $scope.queue = queueList.getQueueList();
 
+    $scope.$on('queueListRefresh', function(event) {
+        $rootScope.$apply(queueList.rebuildList());
+    });
+
     $scope.playItem = function(id) {
         feedItems.get(id, function(feedItem) {
             $rootScope.$broadcast('playItem', feedItem);
         });
     };
 
+    $scope.showItemOptions = function(id) {
+        angular.forEach($scope.queue, function(value, key) {
+            if (value.id == id) {
+                $scope.queue[key].showOptions = !$scope.queue[key].showOptions;
+            } else {
+                $scope.queue[key].showOptions = false;
+            }
+        });
+    };
+
+    $scope.downloadFile = function(id) {
+        feedItems.get(id, function(feedItem) {
+            downloader.downloadFiles([feedItem]);
+        });
+    };
+
+    $scope.removeFromQueue = function(feedItemId) {
+        feedItems.unQueue(feedItemId);
+    };
+
     $scope.downloadItems = function(updateStatus) {
         feeds.downloadAllItems(feedItems, function(feedItem, feed) {
             if (feedItem) {
                 $scope.queue.push(feedItem);
-                $scope.$apply();
             }
 
             updateStatus(feed);
+            $scope.$broadcast('queueListRefresh');
         });
     };
 
+    $scope.reDownloadFile = function(id) {
+        feedItems.get(id, function(feedItem) {
+            feedItem.audio = null;
+            downloader.downloadFiles([feedItem]);
+        });
+    };
+
+    //TODO: extract this to somewhere
+    $scope.goToFeed = function(feedId) {
+        pageChanger.goToFeed(feedId);
+    };
+
     pageSwitcher.change('queue');
 }
 

partials/feed.html

@@ -1,29 +1,32 @@
-<div id="queueList" xmlns="http://www.w3.org/1999/html">
+<div id="queueList" xmlns="http://www.w3.org/1999/html" scroll>
-    <div scroll>
+    <div>
-        <div>
+        <h1>{{ feed.title }}</h1>
-            <h1>{{ feed.title }}</h1>
+        <h2>{{ feed.author }}</h2>
-            <h2>{{ feed.author }}</h2>
+        <img blob="feed.image" class="feedImage" />
-            <img blob="feed.image" class="feedImage" />
+        <div class="feedData_tmp">
-            <div class="feedData_tmp">
+            <button ng-click="delete(feed.id)" class="warn"><i class="icon-trash"></i> Delete Feed</button><br />
-                <button ng-click="delete(feed.id)" class="warn"><i class="icon-trash"></i> Delete Feed</button><br />
 
-                <!-- Number of Items to keep in Queue
+            <!-- Number of Items to keep in Queue
-                <select ng-model="feed.nrQueueItems" ng-options="nrQueueItemsOptions"></select> -->
+            <select ng-model="feed.nrQueueItems" ng-options="nrQueueItemsOptions"></select> -->
-            </div>
+        </div>
-            <h3>Description</h3>
+        <h3>Description</h3>
-            <div>
+        <div>
-                {{ feed.summary }}
+            {{ feed.summary }}
-            </div>
+        </div>
-            <h3>Episodes</h3>
+        <h3>Episodes</h3>
-            <div ng-repeat="item in feed.items | orderBy:'date'" class="listItem">
+        <div ng-repeat="item in feed.items | orderBy:'date':reverse=true">
+            <div class="listItem">
                 <div class="playButton">
                     <span ng-click="playItem(item.id)"><i ng-class="{hasAudio: item.audio}" class="icon-play"></i></span>
                 </div>
-                <div class="feedItemContent">
+                <div class="feedItemContent" ng-click="showItemOptions(item.id)">
                     <span class="feedItemTitle">{{ item.title }}</span>
                     {{ item.date | timeAgo }}
                 </div>
             </div>
+            <div ng-show="item.showOptions" class="feedItemOptions">
+                <a ng-hide="item.queued" ng-click="addToQueue(item.id)"><i class="icon-plus"></i> Add to Queue</a>
+            </div>
         </div>
     </div>
-</div>
+</div>

partials/listFeeds.html

@@ -1,7 +1,11 @@
-<form ng-submit="addFeed()">
+<div scroll>
-    <input type="text" class="newFeedField" ng-model="newFeedUrl" placeholder="Add Feed" ng-blur="removePrefillIfNecessary()" ng-focus="preFillField()" /><input type="submit" value="Add" />
+    <div>
-</form>
+        <form ng-submit="addFeed()">
+            <input type="text" class="newFeedField" ng-model="newFeedUrl" placeholder="Add Feed" ng-blur="removePrefillIfNecessary()" ng-focus="preFillField()" /><input type="submit" value="Add" />
+        </form>
 
-<div ng-repeat="feed in feeds | orderBy:'title'" class="listItem" ng-click="goToFeed(feed.id)">
+        <div ng-repeat="feed in feeds | orderBy:'title'" class="listItem" ng-click="goToFeed(feed.id)">
-    <img blob="feed.image" class="feedImageThumbnail" /> <span class="listItemTitle">{{feed.title}}</span>
+            <img blob="feed.image" class="feedImageThumbnail" /> <span class="listItemTitle">{{feed.title}}</span>
+        </div>
+    </div>
 </div>

partials/listQueue.html

@@ -1,11 +1,19 @@
 <div id="queueList" pull-to-refresh="pull-to-refresh">
-    <div ng-repeat="feedItem in queue | orderBy:'date':reverse=true" class="listItem">
+    <div ng-repeat="feedItem in queue|orderBy:'-date'" class="listRow">
-        <div class="playButton" ng-click="playItem(feedItem.id)">
+        <div class="listItem">
-            <span><i ng-class="{hasAudio: feedItem.audio}" class="icon-play"></i></span>
+            <div class="playButton" ng-click="playItem(feedItem.id)">
+                <span><i ng-class="{hasAudio: feedItem.audio}" class="icon-play"></i></span>
+            </div>
+            <div class="feedItemContent" ng-click="showItemOptions(feedItem.id)">
+                <span class="feedItemTitle">{{ feedItem.title }}</span>
+                {{ feedItem.date | timeAgo }}<span ng-show="feedItem.duration">, {{ feedItem.duration }}</span>
+            </div>
         </div>
-        <div class="feedItemContent">
+        <div ng-show="feedItem.showOptions" class="feedItemOptions">
-            <span class="feedItemTitle">{{ feedItem.title }}</span>
+            <a ng-hide="feedItem.audio" ng-click="downloadFile(feedItem.id)"><i class="icon-download"></i> Download</a>
-            {{ feedItem.date | timeAgo }}<span ng-show="feedItem.duration">, {{ feedItem.duration }}</span>
+            | <a ng-show="feedItem.audio" ng-click="reDownloadFile(feedItem.id)"><i class="icon-download"></i> Re-Download</a>
+            | <a ng-click="goToFeed(feedItem.feedId)"><i class="icon-list-ul"></i> Show Feed</a>
+            | <a ng-click="removeFromQueue(feedItem.id)"><i class="icon-remove-circle"></i> Unqueue</a>
         </div>
     </div>
     <div ng-hide="queue.length" class="pullDownMessage">