show unread/starred count

template/index.html

@@ -25,7 +25,7 @@
                         <div class="menu-item d-flex align-items-center w-100">
                             <img src="./static/images/circle.svg" alt="" class="nav-icon">
                             <span class="flex-fill text-left text-truncate">Unread</span>
-                            <span class="counter text-right"></span>
+                            <span class="counter text-right">{{totalStats.unread || ''}}</span>
                         </div>
                     </label>
                     <label class="nav-select">
@@ -33,7 +33,7 @@
                         <div class="menu-item d-flex align-items-center w-100">
                             <img src="./static/images/star.svg" alt="" class="nav-icon">
                             <span class="flex-fill text-left text-truncate">Starred</span>
-                            <span class="counter text-right"></span>
+                            <span class="counter text-right">{{totalStats.starred || ''}}</span>
                         </div>
                     </label>
                 </div>
@@ -54,7 +54,7 @@
                                  :class="{expanded: folder.is_expanded}"
                                  @click.prevent="toggleFolderExpanded(folder)">
                             <span class="flex-fill text-left text-truncate">{{ folder.title }}</span>
-                            <span class="counter text-right"></span>
+                            <span class="counter text-right">{{filteredFolderStats[folder.id] || ''}}</span>
                         </div>
                     </label>
                     <div v-show="!folder.id || folder.is_expanded" class="mt-1" :class="{'pl-3': folder.id}">
@@ -64,7 +64,7 @@
                             <div class="menu-item d-flex align-items-center w-100">
                                 <img src="./static/images/rss.svg" alt="" class="nav-icon">
                                 <span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
-                                <span class="counter text-right"></span>
+                                <span class="counter text-right">{{filteredFeedStats[feed.id] || ''}}</span>
                             </div>
                         </label>
                     </div>

template/static/javascripts/api.js

@@ -74,6 +74,9 @@
         return api('put', '/api/settings', data)
       },
     },
+    status: function() {
+      return api('get', '/api/status').then(json)
+    },
     upload_opml: function(form) {
       return fetch('/opml/import', {
         method: 'post',

template/static/javascripts/app.js

@@ -28,6 +28,7 @@ var vm = new Vue({
       vm.refreshItems()
     })
     this.refreshFeeds()
+    this.refreshStats()
   },
   data: function() {
     return {
@@ -47,6 +48,7 @@ var vm = new Vue({
         'newfeed': false,
         'items': false,
       },
+      'feedStats': {},
     }
   },
   computed: {
@@ -71,6 +73,34 @@ var vm = new Vue({
     itemsById: function() {
       return this.items.reduce(function(acc, item) { acc[item.id] = item; return acc }, {})
     },
+    filteredFeedStats: function() {
+      var filter = this.filterSelected
+      if (filter != 'unread' && filter != 'starred') return {}
+
+      var feedStats = this.feedStats
+      return this.feeds.reduce(function(acc, feed) {
+        if (feedStats[feed.id]) acc[feed.id] = vm.feedStats[feed.id][filter]
+        return acc
+      }, {})
+    },
+    filteredFolderStats: function() {
+      var filter = this.filterSelected
+      if (filter != 'unread' && filter != 'starred') return {}
+
+      var feedStats = this.filteredFeedStats
+      return this.feeds.reduce(function(acc, feed) {
+        if (!acc[feed.folder_id]) acc[feed.folder_id] = 0
+        if (feedStats[feed.id]) acc[feed.folder_id] += feedStats[feed.id]
+        return acc
+      }, {})
+    },
+    totalStats: function() {
+      return Object.values(this.feedStats).reduce(function(acc, stat) {
+        acc.unread += stat.unread
+        acc.starred += stat.starred
+        return acc
+      }, {unread: 0, starred: 0})
+    },
   },
   watch: {
     'filterSelected': function(newVal, oldVal) {
@@ -87,11 +117,21 @@ var vm = new Vue({
       this.itemSelectedDetails = this.itemsById[newVal]
       if (this.itemSelectedDetails.status == 'unread') {
         this.itemSelectedDetails.status = 'read'
+        this.feedStats[this.itemSelectedDetails.feed_id].unread -= 1
         api.items.update(this.itemSelectedDetails.id, {status: this.itemSelectedDetails.status})
       }
     },
   },
   methods: {
+    refreshStats: function() {
+      var vm = this
+      api.status().then(function(data) {
+        vm.feedStats = data.stats.reduce(function(acc, stat) {
+          acc[stat.feed_id] = stat
+          return acc
+        }, {})
+      })
+    },
     getItemsQuery: function() {
       var query = {}
       if (this.feedSelected) {
@@ -148,6 +188,7 @@ var vm = new Vue({
       var query = this.getItemsQuery()
       api.items.mark_read(query).then(function() {
         vm.items = []
+        vm.refreshStats()
       })
     },
     toggleFolderExpanded: function(folder) {
@@ -227,16 +268,20 @@ var vm = new Vue({
     toggleItemStarred: function(item) {
       if (item.status == 'starred') {
         item.status = 'read'
+        this.feedStats[item.feed_id].starred -= 1
       } else if (item.status != 'starred') {
         item.status = 'starred'
+        this.feedStats[item.feed_id].starred += 1
       }
       api.items.update(item.id, {status: item.status})
     },
     toggleItemRead: function(item) {
       if (item.status == 'unread') {
         item.status = 'read'
+        this.feedStats[item.feed_id].unread -= 1
       } else if (item.status == 'read') {
         item.status = 'unread'
+        this.feedStats[item.feed_id].unread += 1
       }
       api.items.update(item.id, {status: item.status})
     },