badge notification count for events

24 files changed, 225 insertions, 44 deletions

diff --git a/www/css/style.css b/www/css/style.css
index f7e84f15..d2781e58 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -111,13 +111,38 @@ Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
     .footer  { order: 4; }
 }*/
 
-/* Not using this -eventually. Think notification badges on buttons */
+/* modified from:
+http://www.cssportal.com/tryit/index.php?file=blog/css-notification-badge */
+
+.notification-badge {
+		position:relative;
+	}
+	.notification-badge[data-badge]:after {
+		content:attr(data-badge);
+		position:absolute;
+		top:-3px;
+		left:18px;
+		font-size:9px;
+		background:crimson;
+		color:white;
+		width:22px;height:17px;
+		text-align:center;
+		line-height:17px;
+		border-radius:40%;
+        font-weight:bold;
+        
+	}
+/*
 .notification-badge{
-  position: absolute;
-  top: 3px;
-  right: 0px;
+  
+  border-radius:50%;
+  border: 1 px solid white;   
+  top: -3px;
+  left:-10px;
+  background-color: crimson;
+  color:white;
   font-size: 8px;
-}
+}*/
 
 .ptzcentered {
   position: fixed; /* or absolute */
diff --git a/www/js/DevOptionsCtrl.js b/www/js/DevOptionsCtrl.js
index 98ee9160..f64613e4 100644
--- a/www/js/DevOptionsCtrl.js
+++ b/www/js/DevOptionsCtrl.js
@@ -2,12 +2,26 @@
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
-angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope', '$rootScope', '$ionicModal', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicPopup', '$http', '$q', '$ionicLoading', function ($scope, $rootScope, $ionicModal, zm, ZMDataModel, $ionicSideMenuDelegate, $ionicPopup, $http, $q, $ionicLoading) {
+angular.module('zmApp.controllers').controller('zmApp.DevOptionsCtrl', ['$scope', '$rootScope', '$ionicModal', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicPopup', '$http', '$q', '$ionicLoading', '$ionicHistory','$state', function ($scope, $rootScope, $ionicModal, zm, ZMDataModel, $ionicSideMenuDelegate, $ionicPopup, $http, $q, $ionicLoading, $ionicHistory, $state) {
 
 
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
     };
+    
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
     //-------------------------------------------------------------------------
     // Lets make sure we set screen dim properly as we enter
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 4e09b8b8..c68f2947 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -22,19 +22,7 @@ angular.module('zmApp.controllers')
         
         //EventServer.start();
         var loginData = ZMDataModel.getLogin();
-       // console.log ("********************EVENT SERVER LOCAL");
-      //var dataStream = $websocket('wss://arjunrc.ddns.net:9000/?user='+loginData.username+'&passwd='+loginData.password,null, {reconnectIfNotNormalClose: true});
-
-      
-
-            
-            /*dataStream.onMessage = function(message) {
-                console.log("CONTROLLER GOT WEBSOCKET MESSAGE:" + message.data);
-            };*/
-
-        
-        //$scope.MyData = EventServer;
-        
+       
 
         $scope.hours = [];
         $scope.days = [];
@@ -263,6 +251,20 @@ angular.module('zmApp.controllers')
                 "id": monitorId
             }, { reload: true });
         };
+        
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
         //--------------------------------------------------------------------------
         // Takes care of deleting individual events
@@ -612,8 +614,7 @@ angular.module('zmApp.controllers')
                         $scope.FrameArray = data.event.Frame;
                         //  $scope.slider_options.scale=[];
                         $scope.slider_options.scale = [];
-                        //$scope.slider_options.modelLabels={2:'X'};
-                        //$scope.slider_options.dimension="arjun";
+                    
                         var i;
                         for (i = 0; i < data.event.Frame.length; i++) {
                             if (data.event.Frame[i].Type == "Alarm") {
@@ -1057,8 +1058,7 @@ angular.module('zmApp.controllers')
                     $scope.FrameArray = data.event.Frame;
                     //  $scope.slider_options.scale=[];
                     $scope.slider_modal_options.scale = [];
-                    //$scope.slider_options.modelLabels={2:'X'};
-                    //$scope.slider_options.dimension="arjun";
+                
                     var i;
                     for (i = 0; i < data.event.Frame.length; i++) {
                         if (data.event.Frame[i].Type == "Alarm") {
diff --git a/www/js/EventDateTimeFilterCtrl.js b/www/js/EventDateTimeFilterCtrl.js
index e68abfa4..001a6f0d 100644
--- a/www/js/EventDateTimeFilterCtrl.js
+++ b/www/js/EventDateTimeFilterCtrl.js
@@ -7,6 +7,20 @@
 angular.module('zmApp.controllers')
     .controller('zmApp.EventDateTimeFilterCtrl', ['$scope', '$ionicSlideBoxDelegate', '$ionicSideMenuDelegate', '$rootScope', '$ionicHistory', 'ZMDataModel', '$state', function ($scope, $ionicScrollDelegate, $ionicSideMenuDelegate, $rootScope, $ionicHistory, ZMDataModel, $state) {
         
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
+        
     //--------------------------------------------------------------------------
     // Clears filters 
     //--------------------------------------------------------------------------
diff --git a/www/js/EventServer.js b/www/js/EventServer.js
index f0d596a6..ad728661 100644
--- a/www/js/EventServer.js
+++ b/www/js/EventServer.js
@@ -17,6 +17,9 @@ angular.module('zmApp.controllers')
 
      function init()
      {
+         $rootScope.isAlarm = 0;
+         $rootScope.alarmCount="0";
+         
          var loginData = ZMDataModel.getLogin();
          if (loginData.eventServer)
          {
@@ -68,8 +71,21 @@ angular.module('zmApp.controllers')
                      }
                      // lets stack the display so they don't overwrite
                      if (eventsToDisplay.length > 0)
+                     {
                         ZMDataModel.displayBanner('alarm', eventsToDisplay, 5000, 5000*eventsToDisplay.length);
-                     $rootScope.isAlarm = 1;
+                       
+                     }
+                      $rootScope.isAlarm = 1;
+                     
+                     if ($rootScope.alarmCount == "99")
+                     {
+                         $rootScope.alarmCount="99+";
+                     }
+                     if ($rootScope.alarmCount != "99+")
+                     {
+                        $rootScope.alarmCount = (parseInt($rootScope.alarmCount)+1).toString();
+                     }
+                     
                  }
                  
                  
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js
index fabe64a6..20782551 100644
--- a/www/js/EventsGraphsCtrl.js
+++ b/www/js/EventsGraphsCtrl.js
@@ -8,7 +8,7 @@
 // the main function is generateChart. I call generate chart with required parameters
 // from the template file
 
-angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ionicPlatform', '$scope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', function ($ionicPlatform, $scope, zm, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http) {
+angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ionicPlatform', '$scope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', '$ionicHistory', '$state', function ($ionicPlatform, $scope, zm, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http, $ionicHistory, $state) {
     console.log("Inside Graphs controller");
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
@@ -17,6 +17,21 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
     $scope.$on('$ionicView.loaded', function () {
         console.log("**VIEW ** Graph Ctrl Loaded");
     });
+    
+    
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
     //-------------------------------------------------------------------------
     // Lets make sure we set screen dim properly as we enter
diff --git a/www/js/HelpCtrl.js b/www/js/HelpCtrl.js
index 270cbf33..b7cad31a 100644
--- a/www/js/HelpCtrl.js
+++ b/www/js/HelpCtrl.js
@@ -2,12 +2,25 @@
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
-angular.module('zmApp.controllers').controller('zmApp.HelpCtrl', ['$scope', '$rootScope', '$ionicModal', 'ZMDataModel','$ionicSideMenuDelegate',function ($scope, $rootScope, $ionicModal, ZMDataModel,$ionicSideMenuDelegate) {
+angular.module('zmApp.controllers').controller('zmApp.HelpCtrl', ['$scope', '$rootScope', '$ionicModal', 'ZMDataModel','$ionicSideMenuDelegate', '$ionicHistory', '$state', function ($scope, $rootScope, $ionicModal, ZMDataModel,$ionicSideMenuDelegate, $ionicHistory, $state) {
 $scope.openMenu = function () {
     $ionicSideMenuDelegate.toggleLeft();
   };
 
 
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
 
      //-------------------------------------------------------------------------
diff --git a/www/js/LogCtrl.js b/www/js/LogCtrl.js
index 27be0cce..06e3a3d7 100644
--- a/www/js/LogCtrl.js
+++ b/www/js/LogCtrl.js
@@ -2,7 +2,7 @@
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
-angular.module('zmApp.controllers').controller('zmApp.LogCtrl', ['$scope', '$rootScope','zm', '$ionicModal', 'ZMDataModel', '$ionicSideMenuDelegate', '$fileLogger', '$cordovaEmailComposer', '$ionicPopup', '$timeout', function ($scope, $rootScope,zm, $ionicModal, ZMDataModel, $ionicSideMenuDelegate, $fileLogger, $cordovaEmailComposer, $ionicPopup, $timeout) {
+angular.module('zmApp.controllers').controller('zmApp.LogCtrl', ['$scope', '$rootScope','zm', '$ionicModal', 'ZMDataModel', '$ionicSideMenuDelegate', '$fileLogger', '$cordovaEmailComposer', '$ionicPopup', '$timeout', '$ionicHistory', '$state', function ($scope, $rootScope,zm, $ionicModal, ZMDataModel, $ionicSideMenuDelegate, $fileLogger, $cordovaEmailComposer, $ionicPopup, $timeout, $ionicHistory, $state) {
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
     };
@@ -31,6 +31,19 @@ angular.module('zmApp.controllers').controller('zmApp.LogCtrl', ['$scope', '$roo
         });
     };
 
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
     //--------------------------------------------------------------------------
     // Make sure user knows information masking is best effort
diff --git a/www/js/LoginCtrl.js b/www/js/LoginCtrl.js
index c1a5cd48..714385c0 100644
--- a/www/js/LoginCtrl.js
+++ b/www/js/LoginCtrl.js
@@ -2,10 +2,24 @@
 /* jslint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
-angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$rootScope', 'zm', '$ionicModal', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicPopup', '$http', '$q', '$ionicLoading', 'zmAutoLogin', '$cordovaPinDialog', 'EventServer', function ($scope, $rootScope, zm, $ionicModal, ZMDataModel, $ionicSideMenuDelegate, $ionicPopup, $http, $q, $ionicLoading, zmAutoLogin, $cordovaPinDialog, EventServer) {
+angular.module('zmApp.controllers').controller('zmApp.LoginCtrl', ['$scope', '$rootScope', 'zm', '$ionicModal', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicPopup', '$http', '$q', '$ionicLoading', 'zmAutoLogin', '$cordovaPinDialog', 'EventServer', '$ionicHistory', '$state', function ($scope, $rootScope, zm, $ionicModal, ZMDataModel, $ionicSideMenuDelegate, $ionicPopup, $http, $q, $ionicLoading, zmAutoLogin, $cordovaPinDialog, EventServer, $ionicHistory, $state) {
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
     };
+    
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
     $scope.loginData = ZMDataModel.getLogin();
 
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index 68ae0438..da73d52b 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -6,8 +6,8 @@
 // refer to comments in EventCtrl for the modal stuff. They are almost the same
 
 angular.module('zmApp.controllers')
-    .controller('zmApp.MonitorCtrl', ['$ionicPopup', 'zm', '$scope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', '$rootScope', 
-                               function ($ionicPopup, zm, $scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope, $timeout) {
+    .controller('zmApp.MonitorCtrl', ['$ionicPopup', 'zm', '$scope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', '$rootScope', '$timeout','$ionicHistory',
+                               function ($ionicPopup, zm, $scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope, $timeout, $ionicHistory) {
 
 
     //-----------------------------------------------------------------------
@@ -32,6 +32,21 @@ angular.module('zmApp.controllers')
     };
 
 
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});	
+            
+            
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };                               
     //-----------------------------------------------------------------------
     // This function takes care of changing monitor parameters
     // For now, I've only limited it to enable/disable and change monitor mode
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 7b296f70..dce5cd13 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -233,6 +233,19 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
     };
 
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
     //-------------------------------------------------------------
     // Called when user taps on the reorder button
diff --git a/www/js/StateCtrl.js b/www/js/StateCtrl.js
index 592ae72e..b72a175e 100644
--- a/www/js/StateCtrl.js
+++ b/www/js/StateCtrl.js
@@ -4,8 +4,8 @@
 
 // controller for State View
 
-angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup', '$scope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', '$rootScope', '$timeout', function (
-    $ionicPopup, $scope, zm, ZMDataModel, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope, $timeout) {
+angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup', '$scope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', '$rootScope', '$timeout', '$ionicHistory', function (
+    $ionicPopup, $scope, zm, ZMDataModel, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope, $timeout,$ionicHistory) {
 
     //----------------------------------------------------------------------
     // Controller main
@@ -98,7 +98,19 @@ angular.module('zmApp.controllers').controller('zmApp.StateCtrl', ['$ionicPopup'
     }
         
    
-        
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };    
 
     //---------------------------------------------------------
     // Allows the user to select a custom run state
diff --git a/www/js/TimelineCtrl.js b/www/js/TimelineCtrl.js
index b7d56ffd..da461faf 100644
--- a/www/js/TimelineCtrl.js
+++ b/www/js/TimelineCtrl.js
@@ -9,12 +9,26 @@
 // I've disabled pan and zoom and used buttons instead
 // also limits # of items to maxItems (currently 200)
 
-angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPlatform', '$scope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', '$q', 'message', '$state', '$ionicLoading', '$ionicPopover', '$ionicScrollDelegate', '$ionicModal', '$timeout', '$ionicContentBanner', function ($ionicPlatform, $scope, zm, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http, $q, message, $state, $ionicLoading, $ionicPopover, $ionicScrollDelegate, $ionicModal, $timeout, $ionicContentBanner) {
+angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPlatform', '$scope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', '$q', 'message', '$state', '$ionicLoading', '$ionicPopover', '$ionicScrollDelegate', '$ionicModal', '$timeout', '$ionicContentBanner', '$ionicHistory', function ($ionicPlatform, $scope, zm, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http, $q, message, $state, $ionicLoading, $ionicPopover, $ionicScrollDelegate, $ionicModal, $timeout, $ionicContentBanner, $ionicHistory) {
 
     console.log("Inside Timeline controller");
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
     };
+    
+    //----------------------------------------------------------------
+    // Alarm notification handling
+    //----------------------------------------------------------------
+    $scope.handleAlarms = function()
+    {
+        $rootScope.isAlarm=!$rootScope.isAlarm;
+        if (!$rootScope.isAlarm)
+        {
+            $rootScope.alarmCount="0";
+            $ionicHistory.nextViewOptions({disableBack: true});		
+            $state.go("events", {"id": 0}, { reload: true });
+        }
+    };
 
     $scope.leftButtons = [{
         type: 'button-icon icon ion-navicon',
diff --git a/www/js/app.js b/www/js/app.js
index c9918312..47f6fa87 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -469,7 +469,7 @@ angular.module('zmApp', [
         $rootScope.fromString = "";
         $rootScope.toString = "";
         $rootScope.loggedIntoZm = 0;
-        $rootScope.websocketActive = 0;
+    
        
 
         //console.log ("HERE");
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 3ab3ca1b..ba25ab24 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -2,7 +2,7 @@
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         
-        <button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+        <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
         
     </ion-nav-buttons>
 
diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html
index 8451db3d..787ce857 100644
--- a/www/templates/events-graphs.html
+++ b/www/templates/events-graphs.html
@@ -3,7 +3,7 @@
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         
-        <button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+       <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
         
     </ion-nav-buttons>
 
diff --git a/www/templates/events.html b/www/templates/events.html
index b39d10a8..03e3875e 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -8,7 +8,7 @@
         <button class="button button-icon icon ion-ios-minus-outline" 
           ng-click="eventList.showDelete = !eventList.showDelete;"></button>
         
-        <button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+      <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
         
     </ion-nav-buttons>
 
diff --git a/www/templates/help.html b/www/templates/help.html
index cce7057b..647a24cc 100644
--- a/www/templates/help.html
+++ b/www/templates/help.html
@@ -3,7 +3,7 @@
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         
-        <button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+        <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
         
     </ion-nav-buttons>
 
diff --git a/www/templates/log.html b/www/templates/log.html
index ff4ce57a..4c923fce 100644
--- a/www/templates/log.html
+++ b/www/templates/log.html
@@ -3,9 +3,9 @@
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         
-        <button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+        <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
         
-<button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+
         
     </ion-nav-buttons>
 
diff --git a/www/templates/login.html b/www/templates/login.html
index 76b99f42..a0195f01 100644
--- a/www/templates/login.html
+++ b/www/templates/login.html
@@ -2,6 +2,7 @@
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
+                <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
     </ion-nav-buttons>
 
     <ion-content padding="true" >
diff --git a/www/templates/monitors.html b/www/templates/monitors.html
index aec02784..43e9582d 100644
--- a/www/templates/monitors.html
+++ b/www/templates/monitors.html
@@ -3,7 +3,8 @@
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
         </button>
         
-        <button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+        <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
+
     </ion-nav-buttons>
 
     <ion-content>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index aed7fd60..f3a5c9ae 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -1,7 +1,7 @@
 <ion-view title="Montage" cache-view="false" hide-nav-bar="{{minimal}}">
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
-        <button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+        <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
     </ion-nav-buttons>
 
 
diff --git a/www/templates/state.html b/www/templates/state.html
index 653d9a71..440d931e 100644
--- a/www/templates/state.html
+++ b/www/templates/state.html
@@ -2,6 +2,7 @@
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
+        <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
     </ion-nav-buttons>
     <ion-content>
         <ion-refresher pulling-text="Pull to reload data..."
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index d93c48cb..b0ec1409 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -8,7 +8,7 @@
         <button class="button button-icon button-clear ion-arrow-right-c" ng-click="move(-0.2)"></button>-->
 
 
-<button class="animated infinite tada button button-icon button-clear ion-ios-bell" ng-click="$root.isAlarm=!$root.isAlarm;" ng-if="$root.isAlarm"></button>
+<button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
 
     </ion-nav-buttons>