further simplification of controls #796

2 files changed, 150 insertions, 257 deletions

diff --git a/www/js/TimelineCtrl.js b/www/js/TimelineCtrl.js
index f111fac0..fb5ee265 100644
--- a/www/js/TimelineCtrl.js
+++ b/www/js/TimelineCtrl.js
@@ -2,7 +2,7 @@
 /* jshint -W083 */
 /*This is for the loop closure I am using in line 143 */
 /* jslint browser: true*/
-/* global timeline,cordova,StatusBar,angular,console,moment, Hammer */
+/* global vis,timeline,cordova,StatusBar,angular,console,moment */
 
 // This controller creates a timeline
 // It uses the visjs library, but due to performance reasons
@@ -115,6 +115,7 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
 
   };
 
+ 
   //-----------------------------------------
   // Move by X days 
   //-----------------------------------------
@@ -228,7 +229,7 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
       $scope.modal.remove();
     }
 
-    if ($scope.modalData.doRefresh) {
+    if ($scope.modalData && $scope.modalData.doRefresh) {
 
       $timeout(function () {
         drawGraph($scope.fromDate, $scope.toDate, maxItems);
@@ -258,6 +259,13 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
 
   }
 
+  $scope.doRefresh = function(){
+    // nothing, needs to be here
+    // as events modal close calls it
+    NVR.debug ("dummy doRefresh()");
+};
+
+
   //--------------------------------------------------------
   // This function is called by the graph ontapped function
   // which in turn calls openModal
@@ -403,27 +411,7 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
     });
   }
 
-  //-------------------------------------------
-  // Entire reason for existence:
-  // double tap doesn't reliably work
-  // when paired with tap on mobiles
-  //-------------------------------------------
-
-  $scope.toggleTap = function () {
-
-    if ($scope.onTap == $translate.instant('kTimelineEvent')) {
-      $scope.onDTap = $translate.instant('kTimelineEvent');
-      $scope.onTap = $translate.instant('kTimelineGraph');
-
-    } else {
-      $scope.onTap = $translate.instant('kTimelineEvent');
-      $scope.onDTap = $translate.instant('kTimelineGraph');
-    }
-    $scope.timelineControls = $translate.instant('kTimelineTap') + ':' + $scope.onTap + " / " + $translate.instant('kTimelineDTap') + ':' + $scope.onDTap;
-    $scope.timelineControls = $scope.timelineControls + '/ ' + ($rootScope.platformOS == 'desktop'? $translate.instant('kTimelineThumbDesktop'): $translate.instant('kTimelineThumbMobile'));
-
-  };
-
+  
 
   //-------------------------------------------------
   // FIXME: shitty hackery -- Im using a rootScope
@@ -442,12 +430,10 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
 
     $scope.onTap = $translate.instant('kTimelineEvent');
     $scope.onDTap = $translate.instant('kTimelineGraph');
-    $scope.timelineControls = $translate.instant('kTimelineTap') + ':' + $scope.onTap + " / " + $translate.instant('kTimelineDTap') + ':' + $scope.onDTap;
-
-    $scope.timelineControls = $scope.timelineControls + '/ ' + ($rootScope.platformOS == 'desktop'? $translate.instant('kTimelineThumbDesktop'): $translate.instant('kTimelineThumbMobile'));
 
-    //console.log("***AFTER ENTER");
+    $scope.timelineControls =  ($rootScope.platformOS == 'desktop')? $translate.instant('kTimelineControlsD'):$translate.instant('kTimelineControlsM');
 
+   
     $scope.follow = {
       'time': NVR.getLogin().followTimeLine
     };
@@ -1067,8 +1053,8 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
       timeline_instance.destroy();
     }
 
-    groups = new timeline.DataSet();
-    graphData = new timeline.DataSet();
+    groups = new vis.DataSet();
+    graphData = new vis.DataSet();
     //console.log ("AFTER VIS");
 
     var tzs, tze;
@@ -1271,42 +1257,14 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
               }
 
               //  console.log(">>>>> CREATING NEW TIMELINE with " + JSON.stringify(options));
-              timeline_instance = new timeline.Timeline(container[0], null, options);
+              timeline_instance = new vis.Timeline(container[0], null, options);
               // console.log ("GRAPH DATA");
               timeline_instance.setItems(graphData);
               //   console.log ("GROUPS");
               timeline_instance.setGroups(groups);
-             
-
-              if (NVR.getLogin().timelineScale == -1)
-
-              {
-                // console.log ("SCALE NOT FOUND");
-
-                timeline_instance.fit();
-              } else {
-                timeline_instance.fit();
-
-                
-               
-                /*var d = NVR.getLogin().timelineScale;
-                console.log ("SCALE FOUND "+d+" SECONDS");
-                var w = timeline_instance.getWindow();
-                console.log ("Original s="+w.start+" e="+w.end);
-
-
-                var s = moment.tz(w.end, NVR.getTimeZoneNow()).subtract(d,'seconds').tz(moment.tz.guess());
-
-                //var s = moment(w.start).format("YYYY-MM-DD HH:mm:ss");
-                //
-                //var e = moment(w.start).add(d,'seconds').format("YYYY-MM-DD HH:mm:ss");
-
-                var e = moment.tz(w.end, NVR.getTimeZoneNow()).tz(moment.tz.guess());
-
-                console.log ("Start="+s+" End="+e);
-                $timeout (function() {timeline_instance.setWindow(s,e);},1000);*/
+              timeline_instance.fit();
 
-              }
+              
 
               lastTimeForEvent = moment().tz(NVR.getLogin().useLocalTimeZone ? NVR.getLocalTimeZoneNow() : NVR.getTimeZoneNow());
               updateInterval = $interval(function () {
@@ -1319,24 +1277,7 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
               $scope.navControls = false;
               dblclick = false;
 
-              // we don't really need this anymore - as we have an interval timer 
-              // ticking away
-
-              // this is called for each tick the bar moves
-              // speed moves depending on zoom factor
-              // 
-              /* timeline_instance.on('currentTimeTick', function() {
-
-                   if ($scope.follow.time) {
-                    
-                   }
-
-
-               });*/
-
-               //var Press = new Hammer.Press({time:500});
-            
-              
+          
                
               timeline_instance.on('rangechanged', function (s) {
                 ///console.log ("Range Changed:"+JSON.stringify(s));
@@ -1350,44 +1291,60 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                   var ld = NVR.getLogin();
                   ld.timelineScale = d;
                   NVR.setLogin(ld);
-
-               
-
-                  //console.log ("Stored user scale of "+d+" seconds");
                 }
-
               });
 
-             
-              timeline_instance.on('click', function (prop) {
-                console.log ("CLICK");
-                if ($scope.onTap == $translate.instant('kTimelineGraph'))
-                  timelineAnalyzeFrames(prop);
-                else
-                  timelineShowEvent(prop);
+              // different handlers for mobile and desktop
+              // due to how they seem to react to touch differently
 
+              if ($rootScope.platformOS == 'desktop') {
+                NVR.debug ("setting up desktop handlers");
+                timeline_instance.on('click', function (prop) {
+                    NVR.debug ("click handler called");
+                   timelineShowEvent(prop);   
+                  });
 
-              });
-
-              timeline_instance.on('itemover', function (prop) {
-                console.log ("ITEMOVER");
-               timelineShowHover(prop);
-              });
+                timeline_instance.on('doubleClick', function (prop) {
+                    NVR.debug ("double click handler called");
+                    timelineAnalyzeFrames(prop);
+                });
+              }
+              // mobile handlers
+              else {
+                 // click doesn't seem to work on mobile (iOS at least. wuh?)
+                 // this is called for both tap and double tap
+                 NVR.debug ("setting up mobile handlers");
+                 timeline_instance.on('click', function (prop) {
+                    NVR.debug ("click handler called");
+
+                    if (dblclick) {
+                        NVR.debug ("Double click detected <= 300ms");
+                        timelineAnalyzeFrames(prop);
+                    }
+                    // differntiate between dbl click and click
+                    if (!dblclick) {
+                        dblclick = true;
+                        $timeout (function () {
+                            dblclick = false;
+                            NVR.debug ("Timeout for double click >300ms, single click assumed");
+                            timelineShowHover(prop);
+                        },300);
+                    }
 
-              timeline_instance.on('select', function (prop) {
-                console.log ("SELECT");
-               timelineShowHover(prop);
               });
+            }
+            
+       
 
+              // hover is only desktop
+              if ($rootScope.platformOS == 'desktop') {
+                timeline_instance.on('itemover', function (prop) {
+                    timelineShowHover(prop);
+                   });
 
-              timeline_instance.on('doubleClick', function (prop) {
-                console.log ("DBL CLICK");
-                if ($scope.onDTap == $translate.instant('kTimelineGraph'))
-                  timelineAnalyzeFrames(prop);
-                else
-                  timelineShowEvent(prop);
-
-              });
+                
+              }
+     
             },
             function (error) {
               NVR.displayBanner('error', 'Timeline error', 'Please try again');
@@ -1399,7 +1356,6 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
   }
 
   $scope.thumbnailClicked = function(event) {
-
    console.log ("Thumb tapped");
     if (!$scope.currentThumbEvent) {
         // will this ever be? Don't think so
@@ -1415,137 +1371,102 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
   };
 
   function timelineShowEvent(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_instance.getEventProperties(prop);
-      // console.log ( "I GOT " + properties);
+
       var itm = prop.item;
-      //console.log ("ITEM CLICKED " + itm);
-      if (itm && !isNaN(itm)) {
+      if (!itm) {
+          itm = getClosestId(prop);
+          if (!itm) {
+            NVR.log ("did not find an item to display", "error");
+            return;
+        }
+      }
+
+      if (itm) {
         NVR.debug("TimelineCtrl/drawGraph:You clicked on item " + itm);
         var item = graphData.get(itm);
         NVR.debug("TimelineCtrl/drawGraph: clicked item details:" + JSON.stringify(item));
         showEvent(item.myevent);
 
-      } else {
-        NVR.debug("exact match not found, guessing item with co-ordinates X=" + prop.x + " group=" + prop.group);
-        if (prop.group) {
-          var visible = timeline_instance.getVisibleItems();
-          NVR.debug("Show Event: Visible items=" + JSON.stringify(visible));
-          var closestItem = null;
-          var minDist = 99999;
-          var _item;
-          for (var x = 0; x < visible.length; x++) {
-            _item = timeline_instance.itemSet.items[x];
-            if (_item && _item.data && _item.data.group == prop.group) {
-              if (Math.abs(_item.left - prop.x) < minDist) {
-                closestItem = _item;
-                minDist = Math.abs(_item.left - prop.x);
-                NVR.debug("Temporary closest " + _item.left);
-                //console.log (_item);
-              }
-            }
+      } 
+   
+  }
 
-          }
+  function getClosestId(prop) {
+    prop = timeline_instance.getEventProperties(prop.event);
+    var closestId = null;
+
+    var target = new Date(prop.time).getTime();
+    NVR.debug ("item is not exact, so guessing from time " + target + " with group=" + prop.group);
+    if (prop.group) {
+      var visible = timeline_instance.getVisibleItems();
+     NVR.debug("Show hover: Visible items=" + JSON.stringify(visible));
+     var minDist = Number.MAX_VALUE;
+     //var minDist = 1.8e7; // 5 hrs in milliseconds
+      var _item;
+      //NVR.debug("ITEM SET IS : " + JSON.stringify(timeline_instance.itemSet));
+      for (var x = 0; x < visible.length; x++) {
+        _item = graphData.get(visible[x]);
+        if (_item.group != prop.group) continue;
+        console.log ("ITEM start/end is:"+_item.start+'/'+_item.end);
+        var dist = Math.min( Math.abs(_item.start - target), Math.abs(_item.end - target));
+        if (dist < minDist ) {
+            closestId = _item.id;
+            minDist = dist;
+           // NVR.debug ("ID:"+closestId+' is closest for now, with dist='+dist);
+        }
+      }
 
-          if (closestItem != null) {
-            NVR.log("Closest item " + closestItem.left + " group: " + closestItem.data.group);
-            showEvent(closestItem.data.myevent);
-          } else {
-            NVR.log("Did not find a visible item match");
-           
-          }
-        } else // no group row tapped, do nothing
-        {
+      if (closestId != null) { 
+        NVR.log("Final closest item" + closestId + " group: " + prop.group);
 
-          /*$ionicLoading.show({
-              template: "",
-              animation: 'fade-in',
-              showBackdrop: false,
-              maxWidth: 200,
-              showDelay: 0,
-              duration: 1500,
-          });*/
-        }
-        // console.log("Zoomed out too far to playback events");
+
+      } else {
+        NVR.log("Did not find a visible item match");
+        $scope.thumbData = {
+            url: '',
+            eid: $translate.instant('kMonNone'),
+            time: $translate.instant('kMonNone'),
+            monName: $translate.instant('kMonNone')
+        };
+       
       }
-    }, 400);
+    } else // no group row tapped, do nothing
+    {
+       NVR.debug ("No group id found, cannot approximate");
+
+      /*$ionicLoading.show({
+          template: "",
+          animation: 'fade-in',
+          showBackdrop: false,
+          maxWidth: 200,
+          showDelay: 0,
+          duration: 1500,
+      });*/
+    }
+    return closestId;
   }
 
   function timelineShowHover(prop) {
-    // console.log ("DOUBLE");
-    //dblclick = true;
-  //  var itm = items[0];
-   // var itm = prop.item;
+
    var itm;
    if (prop.items) {
     itm = prop.items[0];
    }
-   else if (prop.item) {
+   if (prop.item) {
      itm = prop.item;
    }
-    
-
    if (!itm) {
-       prop = timeline_instance.getEventProperties(prop.event);
-       NVR.debug("exact match not found, guessing item with co-ordinates X=" + prop.x + " group=" + prop.group);
-       if (prop.group) {
-         var visible = timeline_instance.getVisibleItems();
-        NVR.debug("Show hover: Visible items=" + JSON.stringify(visible));
-         var closestItem = null;
-         var minDist = 99999;
-         var _item;
-         for (var x = 0; x < visible.length; x++) {
-           _item = timeline_instance.itemSet.items[x];
-           if (_item && _item.data && _item.data.group == prop.group) {
-             if (Math.abs(_item.left - prop.x) < minDist) {
-               closestItem = _item;
-               minDist = Math.abs(_item.left - prop.x);
-              NVR.debug("Temporary closest " + _item.left);
-               //console.log (_item);
-             }
-           }
-
-         }
-
-         if (closestItem != null) { 
-           NVR.log("Closest item " + closestItem.left + " group: " + closestItem.data.group);
-           itm = closestItem.left;
-
-         } else {
-           NVR.log("Did not find a visible item match");
-           return;
-         }
-       } else // no group row tapped, do nothing
-       {
-          NVR.debug ("No group id found, cannot approximate");
-          return;
-         /*$ionicLoading.show({
-             template: "",
-             animation: 'fade-in',
-             showBackdrop: false,
-             maxWidth: 200,
-             showDelay: 0,
-             duration: 1500,
-         });*/
-       }
-
-       
+        itm = getClosestId(prop);
+        if (!itm) {
+            NVR.log ("did not find an item to display", "error");
+            return;
+        }
    }
 
     //console.log ("ITEM HOVERED " + JSON.stringify(itm));
 
      // NVR.debug("TimelineCtrl/drawGraph:You hovered on item " + itm);
-      NVR.debug (" Eid=: "+itm);
+      //NVR.debug (" Eid=: "+itm);
       var item = graphData.get(itm);
 
       $scope.currentThumbEvent = timeline_instance.getEventProperties(prop.event);
@@ -1555,49 +1476,21 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
 
   function timelineAnalyzeFrames(prop) {
     // console.log ("DOUBLE");
-    dblclick = true;
     var itm = prop.item;
-    console.log ("ITEM CLICKED " + itm);
-    if (itm && !isNaN(itm)) {
+   // console.log ("ITEM CLICKED " + itm);
+    if (!itm) {
+        itm = getClosestId(prop);
+        if (!itm) {
+            NVR.log ("did not find an item to display", "error");
+            return;
+        }
+    }
+
+   
       NVR.debug("TimelineCtrl/drawGraph:You clicked on item " + itm);
       var item = graphData.get(itm);
       NVR.debug("TimelineCtrl/drawGraph: clicked item details:" + JSON.stringify(item));
       eventDetails(item.myevent);
-
-    } else {
-
-      NVR.debug("exact match not found, guessing item with co-ordinates X=" + prop.x + " group=" + prop.group);
-      if (prop.group) {
-        var visible = timeline_instance.getVisibleItems();
-        //NVR.debug("Visible items=" + JSON.stringify(visible));
-        var closestItem = null;
-        var minDist = 99999;
-        var _item;
-        for (var x = 0; x < visible.length; x++) {
-          _item = timeline_instance.itemSet.items[x];
-          if (_item.data.group == prop.group) {
-            if (Math.abs(_item.left - prop.x) < minDist) {
-              closestItem = _item;
-              minDist = Math.abs(_item.left - prop.x);
-              NVR.debug("Temporary closest " + _item.left);
-              //console.log (_item);
-            }
-          }
-
-        }
-        NVR.log("Closest item " + closestItem.left + " group: " + closestItem.data.group);
-        if (closestItem != null) {
-          NVR.log("Closest item " + closestItem.left + " group: " + closestItem.data.group);
-          showEvent(closestItem.data.myevent);
-        } else {
-          NVR.log("Did not find a visible item match");
-         
-          
-        }
-      }
-
-      // console.log("Zoomed out too far to playback events");
-    }
   }
 
   function showThumbnail (event) {
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index 43bb4048..e3fa40a5 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -7,7 +7,7 @@
       <button class="button button-icon button-clear ion-arrow-left-c" ng-click="moveDays(-1);"></button>
       <button class="button button-icon button-clear ion-arrow-right-c" ng-click="moveDays(1);"></button>
       <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
-        ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
+    ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
     </ion-nav-buttons>
     <ion-nav-buttons side="right">
       <button class="button button-icon button-clear ion-android-more-vertical" ng-click="popover.show($event); ">&nbsp;&nbsp;&nbsp;</button>
@@ -39,9 +39,6 @@
       <br />
       <div style="padding-left:15px; font-size:10px; color:grey">
 
-        <button ng-click="toggleTap()" class="button button-small button-dark">
-          {{'kTimelineTap' | translate}}:{{onTap}}
-        </button>
 
         <button ng-click="toggleFollowTime()" ng-class="follow.time? 'button button-small button-balanced':'button button-small button-assertive'">
           {{'kUpdateTimeline' | translate}}:&nbsp;{{follow.time? ('kTrue' | translate) : ('kFalse' | translate)}}
@@ -52,7 +49,8 @@
         <div ng-if="follow.time">
           <p>{{newEvents}}</p>
         </div>
-            <br/>
+        <div ng-if="thumbData.url != ''">
+            <br/><br/>
             <figure style="display:inline-block">
                     <figcaption class="smallnote">
                         {{thumbData.monName}}: {{thumbData.eid}} @ {{thumbData.time}}
@@ -60,6 +58,8 @@
                     <img ng-src="{{thumbData.url}}" fallback-src="img/noimage.png" width="400px" on-tap="thumbnailClicked($event)"/>
 
             </figure>
+        </div>
+           
             
    
       </div>