event pullup and filter related fixes

7 files changed, 329 insertions, 32 deletions

diff --git a/config.xml b/config.xml
index b7c96108..7444377d 100644
--- a/config.xml
+++ b/config.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<widget id="com.pliablepixels.zmninja" version="0.76" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.pliablepixels.zmninja" version="0.77" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
   <name>zmNinja</name>
   <description>
 	High performance ZoneMinder client
diff --git a/www/external/ion-pullup.js b/www/external/ion-pullup.js
new file mode 100644
index 00000000..4b04d7ff
--- /dev/null
+++ b/www/external/ion-pullup.js
@@ -0,0 +1,228 @@
+angular.module('ionic-pullup', [])
+  .constant('ionPullUpFooterState', {
+      COLLAPSED: 'COLLAPSED',
+      MINIMIZED: 'MINIMIZED',
+      EXPANDED: 'EXPANDED'
+  })
+  .constant('ionPullUpFooterBehavior', {
+      HIDE: 'HIDE',
+      EXPAND: 'EXPAND'
+  })
+  .directive('ionPullUpFooter', ['$timeout', '$rootScope', '$window', function($timeout, $rootScope, $window) {
+      return {
+          restrict: 'AE',
+          scope: {
+              onExpand: '&',
+              onCollapse: '&',
+              onMinimize: '&'
+          },
+          controller: ['$scope', '$element', '$attrs', 'ionPullUpFooterState', 'ionPullUpFooterBehavior', function($scope, $element, $attrs, FooterState, FooterBehavior) {
+		console.log ("***********ARC ************"+$attrs.maxHeight);
+              var
+                tabs = document.querySelector('.tabs'),
+                hasBottomTabs = document.querySelector('.tabs-bottom'),
+                header = document.querySelector('.bar-header'),
+                tabsHeight = tabs ? tabs.offsetHeight : 0,
+                headerHeight = header ? header.offsetHeight : 0,
+                handleHeight = 0,
+                footer = {
+                    height: 0,
+                    posY: 0,
+                    lastPosY: 0,
+                    state: FooterState.COLLAPSED,
+                    defaultHeight : $element[0].offsetHeight,
+                    maxHeight: parseInt($attrs.maxHeight, 10) || 0,
+                    initialState: $attrs.initialState ? $attrs.initialState.toUpperCase() : FooterState.COLLAPSED,
+                    defaultBehavior: $attrs.defaultBehavior ? $attrs.defaultBehavior.toUpperCase() : FooterBehavior.EXPAND
+                };
+
+              function init() {
+                  $element.css({'-webkit-backface-visibility': 'hidden', 'backface-visibility': 'hidden', 'transition': '300ms ease-in-out', 'padding': 0});
+                  if (tabs && hasBottomTabs) {
+                      $element.css('bottom', tabs.offsetHeight + 'px');
+                  }
+              }
+
+              function computeHeights() {
+		// PP -20 added
+                  footer.height = footer.maxHeight > 0 ? footer.maxHeight : $window.innerHeight - headerHeight - handleHeight - tabsHeight -20;
+                  $element.css({'height': footer.height + 'px'});
+
+                  if (footer.initialState == FooterState.MINIMIZED) {
+                      minimize();
+                  }  else {
+                      collapse();
+                  }
+              }
+
+              function expand() {
+                  footer.lastPosY = 0;
+                  $element.css({'-webkit-transform': 'translate3d(0, 0, 0)', 'transform': 'translate3d(0, 0, 0)'});
+                  $scope.onExpand();
+                  footer.state = FooterState.EXPANDED;
+              }
+
+              function collapse() {
+                  footer.lastPosY = (tabs && hasBottomTabs) ? footer.height - tabsHeight : footer.height - footer.defaultHeight;
+                  $element.css({'-webkit-transform': 'translate3d(0, ' + footer.lastPosY  + 'px, 0)', 'transform': 'translate3d(0, ' + footer.lastPosY  + 'px, 0)'});
+                  $scope.onCollapse();
+                  footer.state = FooterState.COLLAPSED
+              }
+
+              function minimize() {
+                  footer.lastPosY = footer.height;
+                  $element.css({'-webkit-transform': 'translate3d(0, ' + footer.lastPosY  + 'px, 0)', 'transform': 'translate3d(0, ' + footer.lastPosY  + 'px, 0)'});
+                  $scope.onMinimize();
+                  footer.state = FooterState.MINIMIZED;
+              }
+
+
+              this.setHandleHeight = function(height) {
+                  handleHeight = height;
+                  computeHeights();
+              };
+
+              this.getHeight = function() {
+                  return $element[0].offsetHeight;
+              };
+
+              this.getBackground = function() {
+                return $window.getComputedStyle($element[0]).background;
+              };
+
+              this.onTap = function(e) {
+                  e.gesture.srcEvent.preventDefault();
+                  e.gesture.preventDefault();
+
+                  if (footer.state == FooterState.COLLAPSED) {
+                      if (footer.defaultBehavior == FooterBehavior.HIDE) {
+                          minimize();
+                      } else {
+                          expand();
+                      }
+                  } else {
+                      if (footer.state == FooterState.MINIMIZED) {
+                          if (footer.defaultBehavior == FooterBehavior.HIDE)
+                              collapse();
+                          else
+                              expand();
+                      } else {
+                          // footer is expanded
+                          footer.initialState == FooterState.MINIMIZED ? minimize() : collapse();
+                      }
+                  }
+
+                  $rootScope.$broadcast('ionPullUp:tap', footer.state);
+              };
+
+              this.onDrag = function(e) {
+                  e.gesture.srcEvent.preventDefault();
+                  e.gesture.preventDefault();
+
+                  switch (e.type) {
+                      case 'dragstart':
+                          $element.css('transition', 'none');
+                          break;
+                      case 'drag':
+                          footer.posY = Math.round(e.gesture.deltaY) + footer.lastPosY;
+                          if (footer.posY < 0 || footer.posY > footer.height) return;
+                          $element.css({'-webkit-transform': 'translate3d(0, ' + footer.posY + 'px, 0)', 'transform': 'translate3d(0, ' + footer.posY + 'px, 0)'});
+                          break;
+                      case 'dragend':
+                          $element.css({'transition': '300ms ease-in-out'});
+                          footer.lastPosY = footer.posY;
+                          break;
+                  }
+              };
+
+              $window.addEventListener('orientationchange', function() {
+                    $timeout(function() {
+                        computeHeights();
+                    }, 500);
+              });
+
+              init();
+          }],
+          compile: function(element, attrs) {
+              attrs.defaultHeight && element.css('height', parseInt(attrs.defaultHeight, 10) + 'px');
+              element.addClass('bar bar-footer');
+          }
+      }
+  }])
+  .directive('ionPullUpContent', [function() {
+      return {
+          restrict: 'AE',
+          require: '^ionPullUpFooter',
+          link: function (scope, element, attrs, controller) {
+              var
+                footerHeight = controller.getHeight();
+              element.css({'display': 'block', 'margin-top': footerHeight + 'px', width: '100%'});
+              // add scrolling if needed
+              if (attrs.scroll && attrs.scroll.toUpperCase() == 'TRUE') {
+                  element.css({'overflow-y': 'scroll', 'overflow-x': 'hidden'});
+              }
+          }
+      }
+  }])
+  .directive('ionPullUpBar', [function() {
+      return {
+          restrict: 'AE',
+          require: '^ionPullUpFooter',
+          link: function (scope, element, attrs, controller) {
+              var
+                footerHeight = controller.getHeight();
+              element.css({'display': 'flex', 'height': footerHeight + 'px', position: 'absolute', right: '0', left: '0'});
+
+          }
+      }
+  }])
+  .directive('ionPullUpTrigger', ['$ionicGesture', function($ionicGesture) {
+      return {
+          restrict: 'AE',
+          require: '^ionPullUpFooter',
+          link: function (scope, element, attrs, controller) {
+              // add gesture
+              $ionicGesture.on('tap', controller.onTap, element);
+              $ionicGesture.on('drag dragstart dragend', controller.onDrag, element);
+          }
+      }
+  }])
+  .directive('ionPullUpHandle', ['$ionicGesture', '$timeout', '$window',  function($ionicGesture, $timeout, $window) {
+      return {
+          restrict: 'AE',
+          require: '^ionPullUpFooter',
+          link: function (scope, element, attrs, controller) {
+              var height = parseInt(attrs.height,10) || 25, width = parseInt(attrs.width, 10) || 100,
+                background =  controller.getBackground(),
+                toggleClasses = attrs.toggle;
+
+              controller.setHandleHeight(height);
+
+              element.css({
+                  display: 'block',
+                  background: background,
+                  position: 'absolute',
+                  top: 1-height + 'px',
+                  left: (($window.innerWidth - width) / 2) + 'px',
+                  height: height + 'px',
+                  width: width + 'px',
+                  //margin: '0 auto',
+                  'text-align': 'center'
+                  });
+
+              // add gesture
+              $ionicGesture.on('tap', controller.onTap, element);
+              $ionicGesture.on('drag dragstart dragend', controller.onDrag, element);
+
+              scope.$on('ionPullUp:tap', function() {
+                  element.find('i').toggleClass(toggleClasses);
+              });
+
+              $window.addEventListener('orientationchange', function() {
+                  $timeout(function() {
+                      element.css('left', (($window.innerWidth - width) / 2) + 'px');
+                  }, 500);
+              });
+          }
+      }
+  }]);
diff --git a/www/index.html b/www/index.html
index 9b0ff3d2..928a852e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://www.google.com 'unsafe-inline' 'unsafe-eval'">
     <title></title>
-
+<meta name="format-detection" content="telephone=no">
 
     <link rel="stylesheet" href="css/animate.min.css">
     <link rel="stylesheet" href="css/angular-circular-navigation.css">
@@ -83,7 +83,7 @@
 
     <script src="lib/angular-touch/angular-touch.js"></script>
     <script src="external/angular-carousel.js"></script>
-    <script src="lib/ionic-pullup/dist/ion-pullup.js"></script>
+    <script src="external/ion-pullup.js"></script>
 
 
 
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 94a7ece7..d50addcf 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -197,6 +197,45 @@ angular.module('zmApp.controllers')
         // displayed in the template if events list is null
         
         
+        $scope.showEvents = function(val,unit,monitorId)
+        {
+            ZMDataModel.zmDebug("ShowEvents called with val:"+val+" unit:"+unit+" for Monitor:"+monitorId);
+                                
+             $ionicHistory.nextViewOptions({
+        disableBack: true
+    });
+            
+        var mToDate = moment();
+        
+        var mFromDate = moment().subtract(parseInt(val),unit);
+        
+        console.log ("Moment Dates:" + mFromDate.format() + " TO  " + mToDate.format());
+            
+        $rootScope.fromTime = mFromDate.toDate();
+        $rootScope.toTime =mToDate.toDate();
+        $rootScope.fromDate = $rootScope.fromTime;
+        $rootScope.toDate = $rootScope.toTime;
+            
+        ZMDataModel.zmDebug ("From: " + $rootScope.fromTime);
+        ZMDataModel.zmDebug ("To: " + $rootScope.toTime);
+            
+        //$rootScope.fromDate = fromDate.toDate();
+        //$rootScope.toDate = toDate.toDate();
+        $rootScope.isEventFilterOn = true;
+       $rootScope.fromString = mFromDate
+           .format("YYYY-MM-DD") + " " + mFromDate.format ("HH:mm:ss");
+
+     $rootScope.toString = mToDate
+         .format("YYYY-MM-DD") + " " + mToDate
+         .format ("HH:mm:ss");
+
+            
+            console.log ("**************From String: " + $rootScope.fromString);
+            console.log ("**************To String: " + $rootScope.toString);
+            
+            $state.go("events", {"id":monitorId});
+        };
+        
         $scope.footerExpand = function()
         {
             //https://server/zm/api/events/consoleEvents/5%20minute.json
@@ -214,7 +253,7 @@ angular.module('zmApp.controllers')
                         //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                         $scope.hours.push(
                             {monitor:ZMDataModel.getMonitorName(key),
-                             events:p[key]});
+                             events:p[key], mid:key});
                         
                     }
                 }
@@ -233,7 +272,7 @@ angular.module('zmApp.controllers')
                         //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                         $scope.days.push(
                             {monitor:ZMDataModel.getMonitorName(key),
-                             events:p[key]});
+                             events:p[key],mid:key});
                         
                     }
                 }
@@ -253,7 +292,7 @@ angular.module('zmApp.controllers')
                         //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                         $scope.weeks.push(
                             {monitor:ZMDataModel.getMonitorName(key),
-                             events:p[key]});
+                             events:p[key],mid:key});
                         
                     }
                 }
@@ -272,7 +311,7 @@ angular.module('zmApp.controllers')
                         //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                         $scope.months.push(
                             {monitor:ZMDataModel.getMonitorName(key),
-                             events:p[key]});
+                             events:p[key],mid:key});
                         
                     }
                 }
diff --git a/www/js/EventDateTimeFilterCtrl.js b/www/js/EventDateTimeFilterCtrl.js
index 66dac51e..5169c939 100644
--- a/www/js/EventDateTimeFilterCtrl.js
+++ b/www/js/EventDateTimeFilterCtrl.js
@@ -5,7 +5,7 @@
 
 
 angular.module('zmApp.controllers')
-    .controller('zmApp.EventDateTimeFilterCtrl', ['$scope',  '$ionicSlideBoxDelegate', '$ionicSideMenuDelegate', '$rootScope', '$ionicHistory', 'ZMDataModel', function ($scope, $ionicScrollDelegate,$ionicSideMenuDelegate, $rootScope, $ionicHistory, ZMDataModel) {
+    .controller('zmApp.EventDateTimeFilterCtrl', ['$scope',  '$ionicSlideBoxDelegate', '$ionicSideMenuDelegate', '$rootScope', '$ionicHistory', 'ZMDataModel', '$state', function ($scope, $ionicScrollDelegate,$ionicSideMenuDelegate, $rootScope, $ionicHistory, ZMDataModel, $state) {
 
 $scope.removeFilters = function()
 {
@@ -16,7 +16,17 @@ $scope.removeFilters = function()
     $rootScope.toTime="";
     $rootScope.fromString="";
     $rootScope.toString="";
-    $ionicHistory.goBack();
+    
+    // if you come here via the events pullup
+    // you are looking at a specific monitor ID
+    // going back will only retain that monitor ID
+    // so lets reload with all monitors
+    $ionicHistory.nextViewOptions({
+        disableBack: true
+    });
+    $state.go("events", {"id":0});
+            
+    //$ionicHistory.goBack();
 };
 
 $scope.saveFilters  = function()
diff --git a/www/lib/ionic-pullup/dist/ion-pullup.js b/www/lib/ionic-pullup/dist/ion-pullup.js
index c558cb93..c82cdc3d 100644
--- a/www/lib/ionic-pullup/dist/ion-pullup.js
+++ b/www/lib/ionic-pullup/dist/ion-pullup.js
@@ -17,6 +17,7 @@ angular.module('ionic-pullup', [])
               onMinimize: '&'
           },
           controller: ['$scope', '$element', '$attrs', 'ionPullUpFooterState', 'ionPullUpFooterBehavior', function($scope, $element, $attrs, FooterState, FooterBehavior) {
+		console.log ("***********ARC ************"+$attrs.maxHeight);
               var
                 tabs = document.querySelector('.tabs'),
                 hasBottomTabs = document.querySelector('.tabs-bottom'),
@@ -43,7 +44,8 @@ angular.module('ionic-pullup', [])
               }
 
               function computeHeights() {
-                  footer.height = footer.maxHeight > 0 ? footer.maxHeight : $window.innerHeight - headerHeight - handleHeight - tabsHeight;
+		// PP
+                  footer.height = footer.maxHeight > 0 ? footer.maxHeight : $window.innerHeight - headerHeight - handleHeight - tabsHeight -20;
                   $element.css({'height': footer.height + 'px'});
 
                   if (footer.initialState == FooterState.MINIMIZED) {
@@ -223,4 +225,4 @@ angular.module('ionic-pullup', [])
               });
           }
       }
-  }]);
\ No newline at end of file
+  }]);
diff --git a/www/templates/events.html b/www/templates/events.html
index f45ed3d0..42b7e2ab 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -187,7 +187,7 @@
     </ion-content>
     <div  class="events-float-filter" ng-if="isEventFilterOn">Filter On</div>
     
-    <ion-pull-up-footer class="bar-energized" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand">
+    <ion-pull-up-footer class="bar-energized" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand" >
 
         <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0">
             <i class="icon ion-chevron-up"></i>
@@ -197,54 +197,72 @@
         </ion-pull-up-bar>
         <ion-pull-up-content scroll="true">
             
-            <div class="list card">
+            <div class="list list-inset">
                 <div class="item item-divider">1 hour summary</div>
-                <div class="item item-body" ng-repeat="hour in hours"
+                <div  ng-repeat="hour in hours"
                       id="hour-{{$index}}">
-                        
-                    <div>
+                    
+                    <span style="color:black">
+                    <a class="item item-icon-right" href="#" 
+                       ng-click="showEvents('1', 'hour',hour.mid);">
                         <b>{{hour.monitor}}</b> {{hour.events}} events
-                    </div>
+                        <i class="icon ion-android-arrow-dropright"></i>
+                    </a>
+                    </span>
                 
                 </div>
             </div>
             
-            <div class="list card">
+            <div class="list list-inset">
                 <div class="item item-divider">1 day summary</div>
-                <div class="item item-body" ng-repeat="day in days"
+                <div  ng-repeat="day in days"
                       id="day-{{$index}}">
-                        
-                    <div>
+                    
+                    <span style="color:black">
+                    <a class="item item-icon-right" href="#" 
+                       ng-click="showEvents('1', 'day',day.mid);">
                         <b>{{day.monitor}}</b> {{day.events}} events
-                    </div>
+                        <i class="icon ion-android-arrow-dropright"></i>
+                    </a>
+                    </span>
                 
                 </div>
             </div>
             
             
-            <div class="list card">
+            <div class="list list-inset">
                 <div class="item item-divider">1 week summary</div>
-                <div class="item item-body" ng-repeat="week in weeks"
+                <div  ng-repeat="week in weeks"
                       id="week-{{$index}}">
-                        
-                    <div>
+                    
+                    <span style="color:black">
+                    <a class="item item-icon-right" href="#" 
+                       ng-click="showEvents('1', 'week',week.mid);">
                         <b>{{week.monitor}}</b> {{week.events}} events
-                    </div>
+                        <i class="icon ion-android-arrow-dropright"></i>
+                    </a>
+                    </span>
                 
                 </div>
             </div>
             
-            <div class="list card">
+            <div class="list list-inset">
                 <div class="item item-divider">1 month summary</div>
-                <div class="item item-body" ng-repeat="month in months"
+                <div  ng-repeat="month in months"
                       id="month-{{$index}}">
-                        
-                    <div>
+                    
+                    <span style="color:black">
+                    <a class="item item-icon-right" href="#" 
+                       ng-click="showEvents('1', 'months',month.mid);">
                         <b>{{month.monitor}}</b> {{month.events}} events
-                    </div>
+                        <i class="icon ion-android-arrow-dropright"></i>
+                    </a>
+                    </span>
                 
                 </div>
             </div>
+  
+
             
             
         </ion-pull-up-content>