diff options
Diffstat (limited to 'www/js/EventsGraphsCtrl.js')
| -rw-r--r-- | www/js/EventsGraphsCtrl.js | 426 |
1 files changed, 201 insertions, 225 deletions
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js index d57472e4..bfffb351 100644 --- a/www/js/EventsGraphsCtrl.js +++ b/www/js/EventsGraphsCtrl.js @@ -8,243 +8,219 @@ // 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', 'NVRDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', '$ionicHistory', '$state', function($ionicPlatform, $scope, zm, NVRDataModel, $ionicSideMenuDelegate, $rootScope, $http, $ionicHistory, $state) -{ - //console.log("Inside Graphs controller"); - $scope.openMenu = function() - { - $ionicSideMenuDelegate.toggleLeft(); - }; - - $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("app.events", - { - "id": 0, - "playEvent": false - }, - { - reload: true - }); - return; - } - }; - - //------------------------------------------------------------------------- - // Lets make sure we set screen dim properly as we enter - // The problem is we enter other states before we leave previous states - // from a callback perspective in ionic, so we really can't predictably - // reset power state on exit as if it is called after we enter another - // state, that effectively overwrites current view power management needs - //------------------------------------------------------------------------ - $scope.$on('$ionicView.enter', function() - { - // console.log("**VIEW ** EventsGraphs Ctrl Entered"); - NVRDataModel.setAwake(false); - }); - - $scope.$on('$ionicView.leave', function() - { - // console.log("**VIEW ** Graph Ctrl Left"); - }); - - $scope.$on('$ionicView.unloaded', function() - { - // console.log("**VIEW ** Graph Ctrl Unloaded"); - }); - - //------------------------------------------------- - // Controller main - //------------------------------------------------- - - // $scope.chart = ""; - $scope.navTitle = 'Tab Page'; - // $scope.chart=""; - $scope.leftButtons = [ - { - type: 'button-icon icon ion-navicon', - tap: function(e) - { - $scope.toggleMenu(); - } - }]; - - var container = angular.element(document.getElementById('visualization')); - //console.log(JSON.stringify(container)); - var data = [ - { - id: 1, - content: 'item 1', - start: '2013-04-20' +angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ionicPlatform', '$scope', 'zm', 'NVRDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', '$ionicHistory', '$state', function ($ionicPlatform, $scope, zm, NVRDataModel, $ionicSideMenuDelegate, $rootScope, $http, $ionicHistory, $state) { + //console.log("Inside Graphs controller"); + $scope.openMenu = function () { + $ionicSideMenuDelegate.toggleLeft(); + }; + + $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("app.events", { + "id": 0, + "playEvent": false + }, { + reload: true + }); + return; + } + }; + + //------------------------------------------------------------------------- + // Lets make sure we set screen dim properly as we enter + // The problem is we enter other states before we leave previous states + // from a callback perspective in ionic, so we really can't predictably + // reset power state on exit as if it is called after we enter another + // state, that effectively overwrites current view power management needs + //------------------------------------------------------------------------ + $scope.$on('$ionicView.enter', function () { + // console.log("**VIEW ** EventsGraphs Ctrl Entered"); + NVRDataModel.setAwake(false); + }); + + $scope.$on('$ionicView.leave', function () { + // console.log("**VIEW ** Graph Ctrl Left"); + }); + + $scope.$on('$ionicView.unloaded', function () { + // console.log("**VIEW ** Graph Ctrl Unloaded"); + }); + + //------------------------------------------------- + // Controller main + //------------------------------------------------- + + // $scope.chart = ""; + $scope.navTitle = 'Tab Page'; + // $scope.chart=""; + $scope.leftButtons = [{ + type: 'button-icon icon ion-navicon', + tap: function (e) { + $scope.toggleMenu(); + } + }]; + + var container = angular.element(document.getElementById('visualization')); + //console.log(JSON.stringify(container)); + var data = [{ + id: 1, + content: 'item 1', + start: '2013-04-20' }, { - id: 2, - content: 'item 2', - start: '2013-04-14' + id: 2, + content: 'item 2', + start: '2013-04-14' }, { - id: 3, - content: 'item 3', - start: '2013-04-18' + id: 3, + content: 'item 3', + start: '2013-04-18' }, { - id: 4, - content: 'item 4', - start: '2013-04-16', - end: '2013-04-19' + id: 4, + content: 'item 4', + start: '2013-04-16', + end: '2013-04-19' }, { - id: 5, - content: 'item 5', - start: '2013-04-25' + id: 5, + content: 'item 5', + start: '2013-04-25' }, { - id: 6, - content: 'item 6', - start: '2013-04-27' - }]; - var options = {}; - //var timeline = new vis.Timeline(container[0], data, options); - - // ------------------------------------------------- - // Called when user taps on a bar - //--------------------------------------------------- - $scope.handleChartClick = function(event) - { + id: 6, + content: 'item 6', + start: '2013-04-27' + } + ]; + var options = {}; + //var timeline = new vis.Timeline(container[0], data, options); + + // ------------------------------------------------- + // Called when user taps on a bar + //--------------------------------------------------- + $scope.handleChartClick = function (event) { + + //console.log(JSON.stringify($scope.chartwithbars.getBarsAtEvent(event))); + //console.log(angular.element[0].getContext('2d')); + //console.log (JSON.stringify( $scope.chart)); + + }; + + //------------------------------------------------- + // Generates a bar graph with data provided + //------------------------------------------------- + $scope.generateTCChart = function (id, chartTitle, hrs) { + var monitors = []; + var dateRange = ""; + var startDate = ""; + var endDate = ""; + + $scope.chart = { + barHeight: "", + data: "", + options: "" - //console.log(JSON.stringify($scope.chartwithbars.getBarsAtEvent(event))); - //console.log(angular.element[0].getContext('2d')); - //console.log (JSON.stringify( $scope.chart)); + }; + $scope.chart.barHeight = $rootScope.devHeight; + + if (hrs) { + // Apply a time based filter if I am not watching all events + var cur = moment(); + endDate = cur.format("YYYY-MM-DD " + NVRDataModel.getTimeFormat()); + startDate = cur.subtract(hrs, 'hours').format("YYYY-MM-DD " + NVRDataModel.getTimeFormat()); + //console.log("Start and End " + startDate + "==" + endDate); + NVRDataModel.log("Generating graph for " + startDate + " to " + endDate); + + } + + var loginData = NVRDataModel.getLogin(); + //$scope.chart.data = {}; + $scope.chart.data = { + labels: [], + datasets: [{ + label: '', + fillColor: zm.graphFillColor, + strokeColor: zm.graphStrokeColor, + highlightFill: zm.graphHighlightFill, + data: [] + }, ] }; - //------------------------------------------------- - // Generates a bar graph with data provided - //------------------------------------------------- - $scope.generateTCChart = function(id, chartTitle, hrs) - { - var monitors = []; - var dateRange = ""; - var startDate = ""; - var endDate = ""; - - $scope.chart = { - barHeight: "", - data: "", - options: "" - - }; - - $scope.chart.barHeight = $rootScope.devHeight; - - if (hrs) - { - // Apply a time based filter if I am not watching all events - var cur = moment(); - endDate = cur.format("YYYY-MM-DD " + NVRDataModel.getTimeFormat()); - startDate = cur.subtract(hrs, 'hours').format("YYYY-MM-DD " + NVRDataModel.getTimeFormat()); - //console.log("Start and End " + startDate + "==" + endDate); - NVRDataModel.log("Generating graph for " + startDate + " to " + endDate); - - } - - var loginData = NVRDataModel.getLogin(); - //$scope.chart.data = {}; - $scope.chart.data = { - labels: [], - datasets: [ - { - label: '', - fillColor: zm.graphFillColor, - strokeColor: zm.graphStrokeColor, - highlightFill: zm.graphHighlightFill, - data: [] - }, ] - }; - - NVRDataModel.getMonitors(0).then(function(data) - { - monitors = data; - var adjustedHeight = monitors.length * 30; - if (adjustedHeight > $rootScope.devHeight) - { - - $scope.chart.barHeight = adjustedHeight; - //console.log("********* BAR HEIGHT TO " + $scope.chart.barHeight); - } - - for (var i = 0; i < monitors.length; i++) - { - (function(j) - { // loop closure - http is async, so success returns after i goes out of scope - // so we need to bind j to i when http returns so its not out of scope. Gak. - // I much prefer the old days of passing context data from request to response - - $scope.chart.data.labels.push(monitors[j].Monitor.Name); - - //$scope.chartObject[id].data.push([monitors[j].Monitor.Name,'0','color:#76A7FA','0']); - // $scope.chartObject.data[j+1]=([monitors[j].Monitor.Name,'100','color:#76A7FA','0']); - - var dateString = ""; - if (hrs) - { - dateString = "/StartTime >=:" + startDate + "/EndTime <=:" + endDate; - } - var url = loginData.apiurl + - "/events/index/MonitorId:" + monitors[j].Monitor.Id + dateString + - ".json?page=1"; - // console.log("Monitor event URL:" + url); - NVRDataModel.log("EventGraph: composed url is " + url); - $http.get(url /*,{timeout:15000}*/ ) - .success(function(data) - { - NVRDataModel.debug("Event count for monitor" + - monitors[j].Monitor.Id + " is " + data.pagination.count); - $scope.chart.data.datasets[0].data[j] = data.pagination.count; - }) - .error(function(data) - { - // ideally I should be treating it as an error - // but what I am really doing now is treating it like no events - // works but TBD: make this into a proper error handler - $scope.chart.data.datasets[0].data[j] = 0; - NVRDataModel.log("Error retrieving events for graph " + JSON.stringify(data), "error"); - }); - })(i); // j - } //for - }); - - $scope.chart.options = { - - responsive: true, - scaleBeginAtZero: true, - scaleShowGridLines: false, - scaleGridLineColor: "rgba(0,0,0,.05)", - scaleGridLineWidth: 1, - barShowStroke: true, - barStrokeWidth: 2, - barValueSpacing: 5, - barDatasetSpacing: 1, - showTooltip: true, - - //String - A legend template - // legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' - }; - }; //generateTCChart + NVRDataModel.getMonitors(0).then(function (data) { + monitors = data; + var adjustedHeight = monitors.length * 30; + if (adjustedHeight > $rootScope.devHeight) { + + $scope.chart.barHeight = adjustedHeight; + //console.log("********* BAR HEIGHT TO " + $scope.chart.barHeight); + } + + for (var i = 0; i < monitors.length; i++) { + (function (j) { // loop closure - http is async, so success returns after i goes out of scope + // so we need to bind j to i when http returns so its not out of scope. Gak. + // I much prefer the old days of passing context data from request to response + + $scope.chart.data.labels.push(monitors[j].Monitor.Name); + + //$scope.chartObject[id].data.push([monitors[j].Monitor.Name,'0','color:#76A7FA','0']); + // $scope.chartObject.data[j+1]=([monitors[j].Monitor.Name,'100','color:#76A7FA','0']); + + var dateString = ""; + if (hrs) { + dateString = "/StartTime >=:" + startDate + "/EndTime <=:" + endDate; + } + var url = loginData.apiurl + + "/events/index/MonitorId:" + monitors[j].Monitor.Id + dateString + + ".json?page=1"; + // console.log("Monitor event URL:" + url); + NVRDataModel.log("EventGraph: composed url is " + url); + $http.get(url /*,{timeout:15000}*/ ) + .success(function (data) { + NVRDataModel.debug("Event count for monitor" + + monitors[j].Monitor.Id + " is " + data.pagination.count); + $scope.chart.data.datasets[0].data[j] = data.pagination.count; + }) + .error(function (data) { + // ideally I should be treating it as an error + // but what I am really doing now is treating it like no events + // works but TBD: make this into a proper error handler + $scope.chart.data.datasets[0].data[j] = 0; + NVRDataModel.log("Error retrieving events for graph " + JSON.stringify(data), "error"); + }); + })(i); // j + } //for + }); + + $scope.chart.options = { + + responsive: true, + scaleBeginAtZero: true, + scaleShowGridLines: false, + scaleGridLineColor: "rgba(0,0,0,.05)", + scaleGridLineWidth: 1, + barShowStroke: true, + barStrokeWidth: 2, + barValueSpacing: 5, + barDatasetSpacing: 1, + showTooltip: true, + + //String - A legend template + // legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' + }; + }; //generateTCChart }]); |