From fbc612ce9fb5b23a5358d103adce79ac1575143c Mon Sep 17 00:00:00 2001 From: Arjun Roychowdhury Date: Sat, 19 Sep 2015 18:10:39 -0400 Subject: event pullup and filter related fixes --- www/external/ion-pullup.js | 228 ++++++++++++++++++++++++++++++++ www/index.html | 4 +- www/js/EventCtrl.js | 47 ++++++- www/js/EventDateTimeFilterCtrl.js | 14 +- www/lib/ionic-pullup/dist/ion-pullup.js | 6 +- www/templates/events.html | 60 ++++++--- 6 files changed, 328 insertions(+), 31 deletions(-) create mode 100644 www/external/ion-pullup.js (limited to 'www') 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 @@ - + @@ -83,7 +83,7 @@ - + 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 @@
Filter On
- + @@ -197,54 +197,72 @@ -
+
1 hour summary
-
- - + + +
-
+
1 day summary
-
- - + + +
-
+
1 week summary
-
- - + + +
-
+
1 month summary
-
- - + + +
+ + -- cgit v1.2.3