#209 - initial code

Former-commit-id: 29fa2335ee0ee56c063d69feeb6a299b9f74bcf8

4 files changed, 335 insertions, 23 deletions

diff --git a/www/index.html b/www/index.html
index 6d42db93..30540e67 100644
--- a/www/index.html
+++ b/www/index.html
@@ -102,6 +102,7 @@
     <script src="js/FirstUseCtrl.js"></script>
     <script src="js/MontageHistoryCtrl.js"></script>
     <script src="js/NewsCtrl.js"></script>
+    <script src="js/TimelineModalCtrl.js"></script>
     <script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
     
  
diff --git a/www/js/TimelineCtrl.js b/www/js/TimelineCtrl.js
index 1a075da1..9c0f966e 100644
--- a/www/js/TimelineCtrl.js
+++ b/www/js/TimelineCtrl.js
@@ -136,6 +136,24 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
        
     };
 
+    
+    function eventDetails(ev)
+    {
+        $scope.event = ev;
+         $ionicModal.fromTemplateUrl('templates/timeline-modal.html', {
+                scope: $scope, // give ModalCtrl access to this scope
+                animation: 'slide-in-up'
+            })
+            .then(function (modal) {
+                $scope.modal = modal;
+                
+
+               
+
+                $scope.modal.show();
+
+            });
+    }
 
 
 
@@ -587,7 +605,7 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                                     if (idfound) {
 
                                         if (typeof myevents[i].Event.DefaultVideo === 'undefined')
-                                            console.log (JSON.stringify(myevents[i]));
+                                           // console.log (JSON.stringify(myevents[i]));
                                             myevents[i].Event.DefaultVideo = "";
                                         graphData.add({
                                             id: graphIndex,
@@ -634,35 +652,71 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                             $scope.graphLoaded = true;
                             ZMDataModel.zmDebug("graph loaded: " + $scope.graphLoaded);
                             $scope.navControls = false;
+                            var dblclick = false;
                     
                            
                             
-                            timeline.on('select', function (properties) {
-                                //console.log ("CLICK");
-                               // console.log ("EVENT IS " + JSON.stringify(properties.event));
-                                if (properties.items && !isNaN(properties.items[0])) {
-                                    ZMDataModel.zmDebug("TimelineCtrl/drawGraph:You clicked on item " + properties.items);
-                                    var item = graphData.get(properties.items);
-                                    ZMDataModel.zmDebug("TimelineCtrl/drawGraph: clicked item details:" + JSON.stringify(item));
-                                    showEvent(item[0].myevent);
-
-
-                                } else {
-                                    $ionicLoading.show({
-                                        template: "Zoom in more to scrub events...",
-                                        animation: 'fade-in',
-                                        showBackdrop: true,
-                                        maxWidth: 200,
-                                        showDelay: 0,
-                                        duration: 1500,
-                                    });
-                                   // console.log("Zoomed out too far to playback events");
-                                }
+                            timeline.on('click', function (prop) {
+                                $timeout (function() {
+                                    if (dblclick)
+                                    {
+                                        console.log ("IGNORING CLICK AS DBL CLICK");
+                                        $timeout (function(){dblclick =  false;},400);
+                                        return;
+                                    }
+                                    console.log ("CLICK");
+                                    //console.log ("I GOT " + JSON.stringify(prop));
+                                   // console.log ("EVENT IS " + JSON.stringify(properties.event));
+                                    //var properties =  timeline.getEventProperties(prop);
+                                   // console.log ( "I GOT " + properties);
+                                    var itm = prop.item;
+                                    //console.log ("ITEM CLICKED " + itm);
+                                    if (itm && !isNaN(itm)) {
+                                        ZMDataModel.zmDebug("TimelineCtrl/drawGraph:You clicked on item " + itm);
+                                        var item = graphData.get(itm);
+                                        ZMDataModel.zmDebug("TimelineCtrl/drawGraph: clicked item details:" + JSON.stringify(item));
+                                        showEvent(item.myevent);
+
+
+                                    } else {
+                                        $ionicLoading.show({
+                                            template: "Zoom in more to scrub events...",
+                                            animation: 'fade-in',
+                                            showBackdrop: true,
+                                            maxWidth: 200,
+                                            showDelay: 0,
+                                            duration: 1500,
+                                        });
+                                       // console.log("Zoomed out too far to playback events");
+                                    }
+                                },400);
 
                             });
                     
-                             timeline.on ('doubleClick', function (p) {
+                             timeline.on ('doubleClick', function (prop) {
                                 console.log ("DOUBLE");
+                                dblclick = true;
+                                 var itm = prop.item;
+                                    //console.log ("ITEM CLICKED " + itm);
+                                    if (itm && !isNaN(itm)) {
+                                        ZMDataModel.zmDebug("TimelineCtrl/drawGraph:You clicked on item " + itm);
+                                        var item = graphData.get(itm);
+                                        ZMDataModel.zmDebug("TimelineCtrl/drawGraph: clicked item details:" + JSON.stringify(item));
+                                        eventDetails(item.myevent);
+
+
+                                    } else {
+                                        $ionicLoading.show({
+                                            template: "Zoom in more to scrub events...",
+                                            animation: 'fade-in',
+                                            showBackdrop: true,
+                                            maxWidth: 200,
+                                            showDelay: 0,
+                                            duration: 1500,
+                                        });
+                                       // console.log("Zoomed out too far to playback events");
+                                    }
+                                
                             });
                         },
                         function (error) {
diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
new file mode 100644
index 00000000..7f41dc54
--- /dev/null
+++ b/www/js/TimelineModalCtrl.js
@@ -0,0 +1,239 @@
+// Common Controller for the montage view
+/* jshint -W041 */
+/* jslint browser: true*/
+/* global saveAs, cordova,StatusBar,angular,console,ionic, moment */
+
+
+
+
+angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '$rootScope', 'zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', function ($scope, $rootScope, zm, ZMDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup) {
+
+
+    //----------------------------------------------------------------
+        // Alarm notification handling
+        //----------------------------------------------------------------
+        $scope.handleAlarms = function () {
+            $rootScope.isAlarm = !$rootScope.isAlarm;
+            if (!$rootScope.isAlarm) {
+                $rootScope.alarmCount = "0";
+                $ionicHistory.nextViewOptions({
+                    disableBack: true
+                });
+                $state.go("events", {
+                    "id": 0
+                }, {
+                    reload: true
+                });
+            }
+        };
+   
+
+    
+    //-------------------------------------------------------
+    // we use this to reload the connkey if authkey changed
+    //------------------------------------------------------
+    
+    
+     $rootScope.$on("auth-success", function () {
+
+            ZMDataModel.zmDebug("EventModalCtrl: Re-login detected, resetting everything & re-generating connkey");
+             
+            
+    });
+    
+    
+
+    $scope.$on('modal.removed', function () {
+       
+
+        // Execute action
+    });
+
+     $scope.$on('modal.shown', function () {
+         
+         $scope.dataReady = false;
+
+         $scope.eventdetails = "loading...";
+         processEvent();
+         //$scope.eventdetails = JSON.stringify($scope.event);
+     });
+        
+    
+    function processEvent()
+    {
+        var eid = $scope.event.Event.Id;
+        var ld = ZMDataModel.getLogin();
+        var apiurl = ld.apiurl + "/events/"+eid+".json";
+        ZMDataModel.zmLog ("Getting " + apiurl);
+        $http.get (apiurl)
+        .then (function (success)
+               {
+                    $scope.eventdetails = JSON.stringify(success);
+                    drawGraph(success);
+        },
+               function (error)
+               {
+                    $scope.eventdetails = JSON.stringify(error);
+        });
+    }
+    
+    
+    function drawGraph(event)
+    {
+        // Chart.js Data
+    $scope.data = {
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'My First dataset',
+          fillColor: 'rgba(220,220,220,0.2)',
+          strokeColor: 'rgba(220,220,220,1)',
+          pointColor: 'rgba(220,220,220,1)',
+          pointStrokeColor: '#fff',
+          pointHighlightFill: '#fff',
+          pointHighlightStroke: 'rgba(220,220,220,1)',
+          data: [65, 59, 80, 81, 56, 55, 40]
+        },
+        {
+          label: 'My Second dataset',
+          fillColor: 'rgba(151,187,205,0.2)',
+          strokeColor: 'rgba(151,187,205,1)',
+          pointColor: 'rgba(151,187,205,1)',
+          pointStrokeColor: '#fff',
+          pointHighlightFill: '#fff',
+          pointHighlightStroke: 'rgba(151,187,205,1)',
+          data: [28, 48, 40, 19, 86, 27, 90]
+        }
+      ]
+    };
+
+    // Chart.js Options
+    $scope.options =  {
+
+      // Sets the chart to be responsive
+      responsive: true,
+
+      ///Boolean - Whether grid lines are shown across the chart
+      scaleShowGridLines : true,
+
+      //String - Colour of the grid lines
+      scaleGridLineColor : "rgba(0,0,0,.05)",
+
+      //Number - Width of the grid lines
+      scaleGridLineWidth : 1,
+
+      //Boolean - Whether the line is curved between points
+      bezierCurve : true,
+
+      //Number - Tension of the bezier curve between points
+      bezierCurveTension : 0.4,
+
+      //Boolean - Whether to show a dot for each point
+      pointDot : true,
+
+      //Number - Radius of each point dot in pixels
+      pointDotRadius : 4,
+
+      //Number - Pixel width of point dot stroke
+      pointDotStrokeWidth : 1,
+
+      //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
+      pointHitDetectionRadius : 20,
+
+      //Boolean - Whether to show a stroke for datasets
+      datasetStroke : true,
+
+      //Number - Pixel width of dataset stroke
+      datasetStrokeWidth : 2,
+
+      //Boolean - Whether to fill the dataset with a colour
+      datasetFill : true,
+
+      // Function - on animation progress
+      onAnimationProgress: function(){},
+
+      // Function - on animation complete
+      onAnimationComplete: function(){},
+
+      //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].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
+    };
+        $scope.json_data = JSON.stringify($scope.data);
+        $scope.dataReady = true;
+
+    }
+    
+    //--------------------------------------------------------
+    // utility function
+    //--------------------------------------------------------
+
+    function computeRelativePath(event) {
+        var relativePath = "";
+        var loginData = ZMDataModel.getLogin();
+        var str = event.Event.StartTime;
+        var yy = moment(str).format('YY');
+        var mm = moment(str).format('MM');
+        var dd = moment(str).format('DD');
+        var hh = moment(str).format('HH');
+        var min = moment(str).format('mm');
+        var sec = moment(str).format('ss');
+        relativePath = event.Event.MonitorId + "/" +
+            yy + "/" +
+            mm + "/" +
+            dd + "/" +
+            hh + "/" +
+            min + "/" +
+            sec + "/";
+        return relativePath;
+
+    }
+
+    //--------------------------------------------------------
+    // utility function
+    //--------------------------------------------------------
+
+    function computeBasePath(event) {
+        var basePath = "";
+        var loginData = ZMDataModel.getLogin();
+        var str = event.Event.StartTime;
+        var yy = moment(str).format('YY');
+        var mm = moment(str).format('MM');
+        var dd = moment(str).format('DD');
+        var hh = moment(str).format('HH');
+        var min = moment(str).format('mm');
+        var sec = moment(str).format('ss');
+
+        basePath = loginData.url + "/events/" +
+            event.Event.MonitorId + "/" +
+            yy + "/" +
+            mm + "/" +
+            dd + "/" +
+            hh + "/" +
+            min + "/" +
+            sec + "/";
+        return basePath;
+    }
+
+
+
+    function padToN(number, digits) {
+
+        var i;
+        var stringMax = "";
+        var stringLeading = "";
+        for (i = 1; i <= digits; i++) {
+            stringMax = stringMax + "9";
+            if (i != digits) stringLeading = stringLeading + "0";
+        }
+        var numMax = parseInt(stringMax);
+
+        if (number <= numMax) {
+            number = (stringLeading + number).slice(-digits);
+        }
+        //console.log ("PADTON: returning " + number);
+        return number;
+    }
+
+    
+
+}]);
diff --git a/www/templates/timeline-modal.html b/www/templates/timeline-modal.html
new file mode 100644
index 00000000..0a0d9a42
--- /dev/null
+++ b/www/templates/timeline-modal.html
@@ -0,0 +1,18 @@
+<div ng-controller="TimelineModalCtrl">
+    <!-- style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;"-->
+    <ion-modal-view cache-view="false">
+        <ion-content  ng-cloak on-double-tap="closeModal()">
+          <div ng-if="dataReady">
+              <canvas tc-chartjs-line chart-options="options" chart-data="data" auto-legend></canvas>
+                {{json_data}}
+          </div>
+          <div ng-if = "!dataReady">
+           Waiting for data...
+          </div>
+        </ion-content>
+        
+    </ion-modal-view>
+
+
+
+</div>
\ No newline at end of file