summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--config.xml2
-rw-r--r--www/external/ion-pullup.js228
-rw-r--r--www/index.html4
-rw-r--r--www/js/EventCtrl.js47
-rw-r--r--www/js/EventDateTimeFilterCtrl.js14
-rw-r--r--www/lib/ionic-pullup/dist/ion-pullup.js6
-rw-r--r--www/templates/events.html60
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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 07:52:55 +0000