Add unread counter to buffer nav

css/glowingbear.css

@@ -1,7 +1,10 @@
 body {
     color: white;
     background-color: #222;
-    padding: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom:70px;
+    padding-top: 70px;
 }
 .bufferlines {
     font-family: monospace;

index.html

@@ -7,7 +7,8 @@
       <title ng-bind-template="WeeChat {{ pageTitle}}"></title>
 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
-    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" rel="stylesheet" media="screen">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
     <link rel="shortcut icon" type="image/png" href="img/favicon.png" >
     <link href="css/glowingbear.css" rel="stylesheet" media="screen">
     <script type="text/javascript" src="js/angular.min.js"></script>
@@ -57,14 +58,23 @@
         </form>
       </div>
       <div ng-show="connected">
-
-        <div class="navbar navbar-inverse navbar-fixed-top">
-          <ul class="nav nav-pills">
-            <li class="label" ng-class="{'active': content.notification }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
-            <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }}</a>
+        <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+          </div>
+          <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav ">
+              <li class="label" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | orderBy:'content.number':true">
+              <a ng-click="setActiveBuffer(content.id)" title="{{ content.full_name }}">{{ content.short_name }} <span class="badge" ng-bind="content.unread"></span></a>
               </li>
             </ul>
           </div>
+        </nav>
         <div class="bufferlines">
           <div class="bufferline" ng-repeat="bufferline in activeBuffer.lines">
             <span class="date text-muted">

js/websockets.js

@@ -290,7 +290,11 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
 
 
             if (!_isActiveBuffer(buffer) && !initial) {
-                $rootScope.buffers[buffer]['notification'] = true;
+                
+                if ($rootScope.buffers[buffer]['unread'] == '') {
+                  $rootScope.buffers[buffer]['unread'] == 0;
+                }
+                $rootScope.buffers[buffer]['unread'] += 1;
             }
 
             if (text[0] != undefined) {
@@ -365,10 +369,12 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
             var pointer = bufferInfo['pointers'][0];
             bufferInfo['id'] = pointer;
             bufferInfo['lines'] = [];
+            bufferInfo['unread'] = '';
             buffers[pointer] = bufferInfo
             if (i == 0) {
                 // first buffer is active buffer by default
                 $rootScope.activeBuffer = buffers[pointer];
+                $rootScope.activeBuffer['active'] = true;
             }
         }
         $rootScope.buffers = buffers;
@@ -412,7 +418,7 @@ weechat.factory('handlers', ['$rootScope', 'colors', 'pluginManager', function($
         _buffer_closing: handleBufferClosing, 
         _buffer_line_added: handleBufferLineAdded,
         _buffer_opened: handleBufferOpened,
-        _buffer_title_changed: handleBufferTitleChanged,
+        _buffer_title_changed: handleBufferTitleChanged
     }
 
     return {
@@ -536,8 +542,9 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', 'connection
     }
 
     $scope.setActiveBuffer = function(key) {
-        $rootScope.activeBuffer['notification'] = false;
-        $rootScope.buffers[key]['notification'] = true;
+        $rootScope.activeBuffer['active'] = false;
+        $rootScope.buffers[key]['active'] = true;
+        $rootScope.buffers[key]['unread'] = '';
         $rootScope.activeBuffer = $rootScope.buffers[key];
         $rootScope.pageTitle = $rootScope.activeBuffer['short_name'] + ' | ' + $rootScope.activeBuffer['title'];
     };