Dont issue more post request on read than necesarry, make show only new items the default database settings still need to be written though, simplified and cleaned up the feedlist code, html and css

6 files changed, 189 insertions, 75 deletions

diff --git a/ajax/usersettings.php b/ajax/usersettings.php
new file mode 100644
index 000000000..f9657f4a9
--- /dev/null
+++ b/ajax/usersettings.php
@@ -0,0 +1,18 @@
+<?php
+/**
+* ownCloud - News app
+*
+* @author Bernhard Posselt
+* Copyright (c) 2012 - Bernhard Posselt <nukeawhale@gmail.com>
+* 
+* This file is licensed under the Affero General Public License version 3 or later.
+* See the COPYING-README file
+* 
+*/
+
+// Check if we are a user
+OCP\JSON::checkLoggedIn();
+OCP\JSON::checkAppEnabled('news');
+OCP\JSON::callCheck();
+
+// TODO: receive and save user settings
\ No newline at end of file
diff --git a/css/news.css b/css/news.css
index c2018ea52..986483225 100644
--- a/css/news.css
+++ b/css/news.css
@@ -121,6 +121,8 @@ div.feed_controls {
         position: relative; 
         text-align: right; 
         padding-left: 5px !important; 
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
     }
     
         #feeds li.feed a { 
@@ -131,17 +133,25 @@ div.feed_controls {
             width: 65%; 
         }
         
-        #feeds li.feed a.nonzero { 
+        #feeds li.feed a { 
             font-weight: bold; 
         }
         
-        #feeds li.feed a.zero { 
+        #feeds li.feed a.all_read { 
             font-weight: normal; 
         }
 
         #feeds li#selected_feed { 
             background-color: #FF9933 !important; 
         }
+
+        #feeds li.feed.updating {
+            padding-right: 21px;
+            background-image: url('%webroot%/core/img/loader.gif');
+            background-size: 16px 16px;
+            background-repeat: no-repeat;
+            background-position: 20em center;
+        }
         
         #feeds li.feed:hover { 
             background-color: rgb(221, 221, 221) !important; 
@@ -203,7 +213,7 @@ div.feed_controls {
             top: 50%; 
         }
 
-        #feeds .unreaditemcounter.nonzero { 
+        #feeds .unreaditemcounter { 
             position: relative; 
             background: #5E5E5E; 
             border-radius: 5px; 
@@ -213,10 +223,9 @@ div.feed_controls {
             margin: 0 0.3em 0 0.3em;
         }
         
-        #feeds .unreaditemcounter.zero { 
-            position: relative; 
-            margin: 0 0.3em 0 0; 
-        }
+            #feeds .unreaditemcounter.all_read { 
+                display: none !important;
+            }
 
 
 
diff --git a/js/news.js b/js/news.js
index 04801aa66..1cfbb7853 100644
--- a/js/news.js
+++ b/js/news.js
@@ -182,10 +182,8 @@ News={
 					$("#feed_items .feed_item:not(.read)").each(function(){
 						$(this).addClass('read');
 					});
-
-					var $feedItemCounter = $('li.feed[data-id="'+feedId+'"]').find('.unreaditemcounter');
-					$feedItemCounter.removeClass('nonzero').addClass('zero');
-					$feedItemCounter.empty();
+					var feedHandler = new News.FeedStatusHandler(feedId);
+					feedHandler.setUnreadCount(0);
 				} else {
 					OC.dialogs.alert(t('news', 'Error while loading the feed'), t('news', 'Error'));
 				}
@@ -226,47 +224,137 @@ News={
 				}
 			});
 		},
-		update:function(feedid, feedurl, folderid) {
-			var counterplace = $('.feed[data-id="'+feedid+'"]').find('.unreaditemcounter');
-			var oldcount = counterplace.html();
-			counterplace.removeClass('zero nonzero');
-			counterplace.html('<img style="vertical-align: middle;" src="' + OC.imagePath('core','loader.gif') + '" alt="refresh" />');
-			$.post(OC.filePath('news', 'ajax', 'updatefeed.php'),{'feedid':feedid, 'feedurl':feedurl, 'folderid':folderid},function(jsondata){
+		update:function(feedId, feedurl, folderid) {
+			var feedHandler = new News.FeedStatusHandler(feedId);
+			feedHandler.setUpdating(true);
+			data = {
+				'feedid':feedId, 
+				'feedurl':feedurl, 
+				'folderid':folderid
+			};
+			$.post(OC.filePath('news', 'ajax', 'updatefeed.php'), data, function(jsondata){
 				if(jsondata.status == 'success'){
-					var newcount = jsondata.data.unreadcount;
-					if (newcount > 0) {
-						counterplace.addClass('nonzero');
-						counterplace.html(newcount);
-					}
-					else {
-						counterplace.addClass('zero');
-						counterplace.html('');
-					}
-				} else {
-				  	if (oldcount > 0) {
-						counterplace.addClass('nonzero');
-						counterplace.html(oldcount);
-					}
+					var newUnreadCount = jsondata.data.unreadcount;
+					feedHandler.setUnreadCount(newUnreadCount);
 				}
-
+				feedHandler.setUpdating(false);
 			});
 		}, 
 		filter:function(value){
 			// TODO: safe this on the server
+			var data;
 			switch(value){
 				case 'all':
 					$("#feed_items .feed_item").show();
+					data = {
+						show: 'all'
+					};
 					break;
-				case 'newest':
+				case 'unread':
 					$("#feed_items .feed_item.read").hide();
+					data = {
+						show: 'unread'
+					};
 					break;
 				default:
 					break;
 			}
-			
+			$.post(OC.filePath('news', 'ajax', 'usersettings.php'), data, function(jsondata){
+				if(jsondata.status == 'success'){
+					// TODO
+					var currentFeed = rightcontent.attr('data-id');
+					News.Feed.load(currentFeed);
+				} else {
+					//TODO 
+				}
+			});
 		}
 	},
-	// this handler handles changes in the ui when the itemstatus changes
+
+	/**
+	 * This class is responsible for setting and updating items
+	 * in the feedlist
+	 */
+	FeedStatusHandler: function(feedId){
+		var _feedId = feedId;
+		var _$feed = $('li.feed[data-id="'+feedId+'"]');
+		var _$feedUnreadCounter = _$feed.find('.unreaditemcounter');
+		var _$feedLink = _$feed.children('a');
+		
+		/**
+		 * Returns the current unread count
+		 * @return the number of unread items
+		 */
+		var _getUnreadCount = function(){
+			var unreadContent = _$feedUnreadCounter.html();
+			if(unreadContent === ''){
+				return 0;
+			} else {
+				return parseInt(unreadContent);
+			}
+		};
+
+		/**
+		 * Decreases the current unread count by 1
+		 */
+		var _decrrementUnreadCount = function(){
+			_setUnreadCount(_getUnreadCount() - 1);
+		};
+
+		/**
+		 * Increases the current unread count by 1
+		 */
+		var _incrementUnreadCount = function(){
+			_setUnreadCount(_getUnreadCount() + 1);
+		};
+
+		/**
+		 * Show an icon and hide the unread count
+		 * @param isUpdating if true show the icon and hide count, otherwise
+		 * hide the icon and show the unread count
+		 */
+		var _setUpdating = function(isUpdating){
+			if(isUpdating){
+				_$feed.addClass('updating');
+				_$feedUnreadCounter.hide();
+			} else {
+				_$feed.removeClass('updating');
+				_$feedUnreadCounter.show();
+			}
+		};
+
+		/**
+		 * Set the unread count to a number
+		 * @param count the unread count that will be set
+		 */
+		var _setUnreadCount = function(count){
+			// dont allow setting the count below 0
+			if(count < 0){
+				count = 0;
+			} 
+			if(count === 0){
+				_$feedLink.addClass('all_read');
+				_$feedUnreadCounter.addClass('all_read');
+			} else {
+				var currentCount = _getUnreadCount();
+				if(currentCount === 0){
+					_$feedLink.removeClass('all_read');
+					_$feedUnreadCounter.removeClass('all_read');
+				}
+			}
+			_$feedUnreadCounter.html(count);
+		};
+
+		// public
+		this.decrrementUnreadCount = function(){ return _decrrementUnreadCount(); };
+		this.incrementUnreadCount = function(){ return _incrementUnreadCount(); };
+		this.setUpdating = function(isUpdating){ return _setUpdating(isUpdating); };
+		this.setUnreadCount = function(count){ return _setUnreadCount(count); };
+	},
+
+	/**
+	 * This handler handles changes in the ui when the itemstatus changes
+	 */
 	ItemStatusHandler: function(itemId){
 		var _itemId = itemId;
 		var _$currentItem = $('#feed_items li[data-id="' + itemId + '"]');
@@ -343,42 +431,27 @@ News={
 
 			$.post(OC.filePath('news', 'ajax', 'setitemstatus.php'), data, function(jsonData){
 				if(jsonData.status == 'success'){
-					var counterplace = $('li.feed[data-id="'+_feedId+'"]').find('.unreaditemcounter');
-					var title = $('li.feed[data-id="'+_feedId+'"] > a');
-					var unreadCount = $('.feed_item:not(.read)').length;
-
+					var feedHandler = new News.FeedStatusHandler(_feedId);
 					if(!_$currentItem.hasClass('read') && read){
 						_$currentItem.addClass('read');
-						if (unreadCount <= 1) {
-							counterplace.removeClass('nonzero').addClass('zero');
-							title.removeClass('nonzero').addClass('zero');
-							counterplace.html('');
-						} else {
-							counterplace.html(unreadCount-1);
-						}
+						feedHandler.decrrementUnreadCount();
 					} else if(_$currentItem.hasClass('read') && !read){
 						_$currentItem.removeClass('read');
-						if (unreadCount === 0) {
-							counterplace.removeClass('zero').addClass('nonzero');
-							title.removeClass('zero').addClass('nonzero');
-							counterplace.html(1);
-						} else {
-							counterplace.html(unreadCount+1);
-						}
+						feedHandler.incrementUnreadCount();
 					}
-
 				} else {
 					OC.dialogs.alert(jsonData.data.message, t('news', 'Error'));
 				}
+				_$currentItem.data('processing', 'false');
 			})
 			
 		};
 
 		// set public methods
-		this.setRead = function(read){ _setRead(read); }
-		this.isRead = function(){ return _read; }
-		this.toggleImportant = function(){ _toggleImportant(); }
-		this.toggleKeepUnread = function(){ _toggleKeepUnread(); }
+		this.setRead = function(read){ _setRead(read); };
+		this.isRead = function(){ return _read; };
+		this.toggleImportant = function(){ _toggleImportant(); };
+		this.toggleKeepUnread = function(){ _toggleKeepUnread(); };
 	},
 
 }
@@ -533,8 +606,12 @@ $(document).ready(function(){
 			var itemOffset = $(this).position().top;
 			if(itemOffset <= 0 || scrolled >= scrollHeight){
 				var itemId = $(this).data('id');
-				var handler = new News.ItemStatusHandler(itemId);
-				handler.setRead(true);
+				if($(this).data('processing') != true){
+					// mark item as processing to prevent unecessary post requests	
+					$(this).data('processing', 'true');
+					var handler = new News.ItemStatusHandler(itemId);
+					handler.setRead(true);	
+				}
 			}
 		})
 
diff --git a/templates/part.items.header.php b/templates/part.items.header.php
index 5fdec1d46..68e0d9234 100644
--- a/templates/part.items.header.php
+++ b/templates/part.items.header.php
@@ -8,6 +8,9 @@ if(isset($_['feedid'])){
     $feedTitle = '';
 }
 
+// FIXME: get this setting from the database
+$showOnlyUnread = true;
+
 ?>
 
 <div class="feed_controls">
@@ -18,8 +21,8 @@ if(isset($_['feedid'])){
     <div class="controls">
         <input type="button" value="<?php echo $l->t('Mark all as read'); ?>" id="mark_all_as_read" />
         <select id="feed_filter">
-            <option value="all"><?php echo $l->t('Show read/unread articles'); ?></option>
-            <option value="newest"><?php echo $l->t('Show only unread articles'); ?></option>
+            <option value="unread" <?php if($showOnlyUnread){ echo 'selected="selected"'; }; ?>><?php echo $l->t('Show only unread articles'); ?></option>
+            <option value="all" <?php if(!$showOnlyUnread){ echo 'selected="selected"'; }; ?>><?php echo $l->t('Show read/unread articles'); ?></option>
         </select>
     </div>
 </div>
\ No newline at end of file
diff --git a/templates/part.items.php b/templates/part.items.php
index 49423236c..486741f19 100644
--- a/templates/part.items.php
+++ b/templates/part.items.php
@@ -1,9 +1,15 @@
 <?php
 
-$feedid = isset($_['feedid']) ? $_['feedid'] : '';
+$feedId = isset($_['feedid']) ? $_['feedid'] : '';
 
-$itemmapper = new OCA\News\ItemMapper();
-$items = $itemmapper->findAll($feedid);
+$itemMapper = new OCA\News\ItemMapper();
+
+$showOnlyUnread = true; // FIXME: get this from the settings db
+if($showOnlyUnread){
+	$items = $itemMapper->findAllStatus($feedId, OCA\News\StatusFlag::Unread);
+} else {
+	$items = $itemMapper->findAll($feedId);
+}
 
 echo '<ul>';
 foreach($items as $item) {
@@ -22,7 +28,7 @@ foreach($items as $item) {
 		$startTitle = $l->t('Mark as important');
 	}
 
-	echo '<li class="feed_item ' . $newsItemClass .'" data-id="' . $item->getId() . '" data-feedid="' . $feedid . '">';
+	echo '<li class="feed_item ' . $newsItemClass .'" data-id="' . $item->getId() . '" data-feedid="' . $feedId . '" data-processing="false">';
 
 		echo '<div class="utils">';
 			echo '<ul class="primary_item_utils">';
diff --git a/templates/part.listfeed.php b/templates/part.listfeed.php
index 0fba399ec..7d5c91afd 100644
--- a/templates/part.listfeed.php
+++ b/templates/part.listfeed.php
@@ -4,20 +4,21 @@ $l = new OC_l10n('news');
 
 $feed = isset($_['feed']) ? $_['feed'] : null;
 $unreadItems = isset($_['unreadItems']) ? $_['unreadItems'] : null;
+
 $favicon = $feed->getFavicon();
 if ($favicon == null) {
-        $favicon = OCP\Util::imagePath('news', 'rss.svg');
+    $favicon = OCP\Util::imagePath('news', 'rss.svg');
 }
 
-echo '<li class="feed" data-id="' . $feed->getId() . '">';
-echo '<a href="#" style="background: url(' . $favicon . ') left center no-repeat; background-size:16px 16px;" class="' . 
-      (($unreadItems > 0) ? 'nonzero' : 'zero') . '">' . $feed->getTitle() .'</a>';
-if ($unreadItems > 0) {
-	echo '<span class="unreaditemcounter nonzero">' . $unreadItems . '</span>';
-}
-else {
-	echo '<span class="unreaditemcounter zero"></span>';
+if($unreadItems == 0){
+    $allReadClass = 'all_read';
+} else {
+    $allReadClass = '';
 }
+
+echo '<li class="feed" data-id="' . $feed->getId() . '">';
+echo '<a href="#" style="background: url(' . $favicon . ') left center no-repeat; background-size:16px 16px;" class="' . $allReadClass . '">' . $feed->getTitle() .'</a>';
+	echo '<span class="unreaditemcounter ' . $allReadClass . '">' . $unreadItems . '</span>';
 echo '<button class="svg action feeds_edit" title="' . $l->t('Edit feed') . '"></button>';
 echo '<button class="svg action feeds_delete" onClick="(News.Feed.delete(' . $feed->getId(). '))" title="' . $l->t('Delete feed') . '"></button>';
 echo '</li>';