added a full screen option for montage view too - no status bars and sliders

7 files changed, 79 insertions, 32 deletions

diff --git a/plugins/fetch.json b/plugins/fetch.json
index 6ce7fb89..52347d9f 100644
--- a/plugins/fetch.json
+++ b/plugins/fetch.json
@@ -31,7 +31,9 @@
         "source": {
             "type": "registry",
             "id": "org.apache.cordova.statusbar"
-        }
+        },
+        "is_top_level": true,
+        "variables": {}
     },
     "cordova-plugin-whitelist": {
         "source": {
@@ -56,4 +58,4 @@
         "is_top_level": true,
         "variables": {}
     }
-}
\ No newline at end of file
+}
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js
index 830528e3..b8bf7d97 100644
--- a/www/js/EventsGraphsCtrl.js
+++ b/www/js/EventsGraphsCtrl.js
@@ -34,6 +34,7 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
 
 
     $scope.navTitle = 'Tab Page';
+   // $scope.chart="";
     $scope.leftButtons = [{
         type: 'button-icon icon ion-navicon',
         tap: function (e) {
@@ -48,6 +49,16 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
         console.log('****DOCUMENT READY******');
     });
 
+    // FIXME: No idea why this is not working
+    // it seems it can't get a handle to chart
+    $scope.handleChartClick = function(event)
+    {
+
+        // console.log (JSON.stringify( $scope.chart1.getBarsAtEvent(event)));
+
+    };
+
+
     $scope.generateTCChart = function(id,chartTitle, hrs)
     {
         var monitors = [];
diff --git a/www/js/MonitorCtrl.js b/www/js/MonitorCtrl.js
index 63d27ea2..a8d8771e 100644
--- a/www/js/MonitorCtrl.js
+++ b/www/js/MonitorCtrl.js
@@ -7,6 +7,10 @@
 
 angular.module('zmApp.controllers').controller('zmApp.MonitorCtrl', ['$ionicPopup', '$scope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$ionicLoading', '$ionicModal', '$state', '$http', function ($ionicPopup, $scope, ZMDataModel, message, $ionicSideMenuDelegate, $ionicLoading, $ionicModal, $state, $http, $rootScope, $timeout) {
 
+
+    //FIXME:curl http://server/zm/api/monitors/daemonStatus/id:5/daemon:zmc.json to check if daemon is alive
+    // but reutrns true for pending
+
     $scope.monitors = [];
 
 
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 3fff9c7c..45701c9b 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -1,17 +1,28 @@
 // Controller for the montage view
 /* jshint -W041 */
 /* jslint browser: true*/
-/* global cordova,StatusBar,angular,console */
+/* global cordova,StatusBar,angular,console,ionic */
 
 
-angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http) {
+angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams','$ionicHistory',function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http,$state, $stateParams, $ionicHistory) {
 
     var timestamp = new Date().getUTCMilliseconds();
-    $scope.isMinimal = false;
+    $scope.minimal = $stateParams.minimal;
+    $scope.isRefresh = $stateParams.isRefresh;
 
     $scope.switchMinimal = function()
     {
         $scope.minimal = !$scope.minimal;
+        console.log ("Hide Statusbar");
+        ionic.Platform.fullScreen($scope.minimal,!$scope.minimal);
+         $interval.cancel(intervalHandle); //we will renew on reload
+        $ionicHistory.nextViewOptions({
+              disableAnimate: true,
+              disableBack: true
+            });
+      $state.go("montage", {minimal: $scope.minimal,
+                            isRefresh:true});
+      //$state.reload();
     };
 
       $scope.togglePTZ = function () {
@@ -316,8 +327,10 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
         //console.log ("**** NOTIFICATION with rand="+$scope.randomval+"*****");
     };
 
+
     var intervalHandle = $interval(function () {
         this.loadNotifications();
+       //  console.log ("Refreshing Image...");
     }.bind(this), 1000);
 
     this.loadNotifications();
diff --git a/www/js/app.js b/www/js/app.js
index 7832a7bf..a19f6a7d 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -6,8 +6,7 @@
 // core app start stuff
 angular.module('zmApp', [
                             'ionic',
-                            'zmApp.controllers',
-
+                            'zmApp.controllers'
                         ])
 
 
@@ -333,6 +332,7 @@ angular.module('zmApp', [
         url: "/montage",
         templateUrl: "templates/montage.html",
         controller: 'zmApp.MontageCtrl',
+        params: {minimal:false, isRefresh:false}
 
     });
 
diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html
index 268d5e9a..3f3c2305 100644
--- a/www/templates/events-graphs.html
+++ b/www/templates/events-graphs.html
@@ -7,16 +7,12 @@
     <!-- I'm calling the same controller function but with different parameters when
             you switch between tabs -->
     <ion-tabs class="tabs-icon-top tabs-stable">
-        <ion-tab title="All" icon="ion-stats-bars" on-select="generateTCChart(0,'All Events',0)">
+        <ion-tab title="All" icon="ion-stats-bars" on-select="generateTCChart(0,'All Events',0)" >
             <ion-nav-view>
                 <ion-content class="has-header">
-
-
-
-            <div style="overflow:scroll;">
-                        <canvas tc-chartjs-bar chart-data="data" chart-options="options" >
+                        <canvas tc-chartjs-bar chart-data="data" chart-options="options" ng-click="handleChartClick($event)" chart="chart1">
                         </canvas>
-                    </div>
+
 
                 </ion-content>
             </ion-nav-view>
@@ -35,7 +31,7 @@
 
 
                     <div style="overflow:scroll;">
-                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" >
+                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options"  ng-click="handleChartClick($event)" chart="chart2">
                         </canvas>
                     </div>
                         </canvas>
@@ -53,7 +49,7 @@
                 <ion-content>
                     <span></span>
                     <div style="overflow:scroll;">
-                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" >
+                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" chart="chart3" ng-click="handleChartClick($event)">
                         </canvas>
                     </div>
 
@@ -68,7 +64,7 @@
                     <!--
                     <div google-chart chart="chartObject[3]"></div>-->
                      <div style="overflow:scroll;">
-                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" >
+                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" chart="chart4" ng-click="handleChartClick($event)">
                         </canvas>
                     </div>
                 </ion-content>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 63f9b144..328b36c7 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -1,9 +1,9 @@
-<ion-view title="Montage View" class="bar-stable" cache-view="false">
+<ion-view title="Montage View" class="bar-stable" 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>
     </ion-nav-buttons>
 
-      <ion-nav-buttons side="right">
+    <ion-nav-buttons side="right">
         <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"></button>
     </ion-nav-buttons>
 
@@ -11,6 +11,8 @@
 
         <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
         <!-- Hi:ROOT: {{montageSize}} LOCAL {{slider.monsize}} -->
+
+        <span ng-if="!minimal">
         <div class=" range range-positive">
             <i class="icon ion-arrow-shrink"></i>
 
@@ -18,33 +20,35 @@
             <i class="icon ion-arrow-expand"></i>
 
         </div>
+        </span>
         <!-- Hi:{{slider.monsize}} {{devWidth}} -->
+
         <div class="wrapper">
 
+
             <span ng-repeat="monitor in monitors| limitTo: monLimit">
-           
-      <span ng-if="!minimal">
-           <header class="header">&nbsp;<i class="ion-monitor"></i> {{monitor.Monitor.Name}}&nbsp;</header>
+              <span ng-if="!minimal">
+                   <header class="header">&nbsp;<i class="ion-monitor"></i> {{monitor.Monitor.Name}}&nbsp;</header>
                 </span>
-               <article class="main">
+            <article class="main">
                 <!-- does not route via APIs. As of today, there is no way to do this via apis.
                  FIXME: I should probably not pass username and password here - instead go the http interceptor
                  and auth token mode -->
                 <div ng-if="!isSimulated()">
 
                     <!-- FIXME: Scale is hard coded to 50 for montage to save resources. Better way? -->
-                    <img  ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)"  />
+                    <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" />
 
-                   </div>
+                </div>
 
-                   <div ng-if="isSimulated()">
+                <div ng-if="isSimulated()">
 
-                       <img  ng-src="img/demo.gif?rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;" ng-click="openModal(monitor.Monitor.Id)">
+                    <img ng-src="img/demo.gif?rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;" ng-click="openModal(monitor.Monitor.Id)">
 
-                   </div>
-                </article>
+                </div>
+            </article>
 
-    <span ng-if="!minimal">
+            <span ng-if="!minimal">
                <span style="font-size:10px;">
                <footer class="footer">
                   
@@ -55,11 +59,28 @@
                        
                        :{{monitor.Monitor.Function}}
                     </span>
-            </span>
             </footer>
-                </span>
             </span>
+
+            </span>
+            </span>
+            <!-- ng repeat-->
+
+            <div ng-show="minimal">
+                <br/>
+                <button class="button button-outline button-positive" ng-click="switchMinimal()">
+  exit full screen view
+</button>
+
+
+
+            </div>
+
         </div>
+        <!--wrapper-->
+
+
+
     </ion-content>
 
 </ion-view>