#570 tweaked collapse logic to only collapse future frames

2 files changed, 30 insertions, 19 deletions

diff --git a/www/js/MomentCtrl.js b/www/js/MomentCtrl.js
index 2c5f867e..39d4f0e1 100644
--- a/www/js/MomentCtrl.js
+++ b/www/js/MomentCtrl.js
@@ -221,33 +221,44 @@ angular.module('zmApp.controllers').controller('zmApp.MomentCtrl', ['$scope', '$
 
   };
 
-  $scope.toggleCollapse = function (mid, eid) {
-    NVRDataModel.debug("toggling collapse for:" + mid);
-    var collapseCount = 0;
-    collapseId = 0;
-    for (var i = 0; i < $scope.moments.length; i++) {
-      if ($scope.moments[i].Event.Id == eid) {
-
-        $scope.moments[i].Event.hide = false;
-        collapseId = i;
-
-        $scope.moments[i].Event.icon = $scope.moments[i].Event.icon == "ion-code-working" ? "ion-images" : "ion-code-working";
 
+// When a user taps on collapse on an eid,
+// all events after that for the same monitor should be collapsed
+// events before that should remain
 
+// when a user expands back on an eid, all eids after that for the
+// same monitor should expand, even if they were grouped earlier
 
+  $scope.toggleCollapse = function (mid, eid, ndx) {
+    NVRDataModel.debug("toggling collapse for:" + mid);
+    var collapseCount = 0;
+    var hide = false;
+  
 
-      } else if ($scope.moments[i].Event.MonitorId == mid) {
-        // same monitor, but different ID
+    $scope.moments[ndx].Event.hide = false;
+    if ($scope.moments[ndx].Event.icon == 'ion-code-working') {
+      // we want to hide 
+      hide = true;
+      $scope.moments[ndx].Event.icon = 'ion-images';
+    }
+    else { // we want to show
+      hide = false;
+      $scope.moments[ndx].Event.icon = 'ion-code-working';
+    }
 
-        $scope.moments[i].Event.hide = !$scope.moments[i].Event.hide;
-        if ($scope.moments[i].Event.hide) collapseCount++;
+    for (var i = ndx+1; i < $scope.moments.length; i++ ) {
+     if ($scope.moments[i].Event.MonitorId == mid) {
+        $scope.moments[i].Event.hide = hide;
+        $scope.moments[i].Event.icon = "ion-code-working";
+        $scope.moments[i].Event.collapseCount = "";
+        if (hide) collapseCount++;
         //console.log ("Hiding " + i);
       }
     } //for
-    if (collapseCount) {
-      $scope.moments[collapseId].Event.collapseCount = collapseCount;
+    if (hide) {
+      $scope.moments[ndx].Event.collapseCount = collapseCount;
     } else {
-      $scope.moments[collapseId].Event.collapseCount = "";
+      $scope.moments[ndx].Event.collapseCount = "";
     }
 
 
diff --git a/www/templates/moment.html b/www/templates/moment.html
index b2c8bbac..2c3ecc52 100644
--- a/www/templates/moment.html
+++ b/www/templates/moment.html
@@ -47,7 +47,7 @@
            
            
             <figure class="grid-item grid-item-{{gridSize}}" ng-repeat="moment in moments | onlyEnabledMoments">
-                <figcaption class="normal-figheader">{{moment.Event.monitorName}}<span style="float:right"><button class="button button-small button-icon icon  {{moment.Event.icon}}" ng-click="toggleCollapse(moment.Event.MonitorId, moment.Event.Id)"></button>{{moment.Event.collapseCount}}&nbsp;</span></figcaption>
+                <figcaption class="normal-figheader">{{moment.Event.monitorName}}<span style="float:right"><button class="button button-small button-icon icon  {{moment.Event.icon}}" ng-click="toggleCollapse(moment.Event.MonitorId, moment.Event.Id, $index)"></button>{{moment.Event.collapseCount}}&nbsp;</span></figcaption>
                  <img   image-spinner-src="{{moment.Event.baseURL}}/index.php?view=image&fid={{moment.Event.MaxScoreFrameId}}&width={{moment.Event.thumbWidth*2}}&height={{moment.Event.thumbHeight*2}}" img-spinner-w="{{moment.Event.width}}"
                  img-spinner-h="{{moment.Event.height}}" image-spinner-loader="lines" 
             on-tap="showThumbnail(moment.Event.baseURL,moment.Event.MaxScoreFrameId)"/>