initial support for deleting and pinning in montage edit mode #409

4 files changed, 98 insertions, 3 deletions

diff --git a/config.xml b/config.xml
index f3e8568b..a8f2ef3a 100644
--- a/config.xml
+++ b/config.xml
@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget android-packageName="com.pliablepixels.zmninja_pro" id="com.pliablepixels.zmninjapro" ios-CFBundleIdentifier="com.pliablepixels.zmninja-pro" version="1.2.32" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget android-packageName="com.pliablepixels.zmninja_pro" id="com.pliablepixels.zmninjapro" ios-CFBundleIdentifier="com.pliablepixels.zmninja-pro" version="1.2.33" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>zmNinja</name>
     <description>
 	High performance ZoneMinder client
diff --git a/www/css/style.css b/www/css/style.css
index 2b3fda9b..6fcc78f4 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -1169,6 +1169,8 @@ videogular div.event-time {
     top: -99999px;
 }
 
+
+
 @media (min-width:600px) {
     .montage-time {
         display: block !important;
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 5a844058..0f40c3b4 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -688,6 +688,83 @@ angular.module('zmApp.controllers')
 
         }
 
+        $scope.toggleStamp = function ()
+        {
+            if (!$scope.isDragabillyOn) return;
+            var found = false;
+            
+
+            for (var i=0; i< $scope.MontageMonitors.length; i++)
+            {
+                if ($scope.MontageMonitors[i].Monitor.selectStyle == 'dragborder-selected')
+                {
+                    
+                    findPackeryElement(i);
+                }
+            }
+
+            function findPackeryElement(i)
+            {
+                pckry.getItemElements().forEach(function(elem)
+                {
+
+                    var id = elem.getAttribute("data-item-id");
+                    if (id == $scope.MontageMonitors[i].Monitor.Id)
+                    {
+                        if ($scope.MontageMonitors[i].Monitor.isStamp)
+                             pckry.unstamp(elem);
+                        else          
+                          pckry.stamp(elem);
+
+                       $scope.MontageMonitors[i].Monitor.isStamp = !$scope.MontageMonitors[i].Monitor.isStamp;
+                       NVRDataModel.debug ("Stamp for "+$scope.MontageMonitors[i].Monitor.Name + " is:"+$scope.MontageMonitors[i].Monitor.isStamp );
+                        //break;
+
+                    }
+                });
+            }
+
+
+        };
+
+        $scope.hideMonitor = function (mid)
+        {
+             if (!$scope.isDragabillyOn) return;
+             var found = false;
+            for (var i=0; i< $scope.MontageMonitors.length; i++)
+            {
+                if ($scope.MontageMonitors[i].Monitor.selectStyle == 'dragborder-selected')
+                {
+                    $scope.MontageMonitors[i].Monitor.listDisplay = 'noshow';  
+                    $scope.MontageMonitors[i].Monitor.selectStyle = "";
+                    found = true;
+                } 
+
+            }
+            if (found)
+            {
+                pckry.once ('layoutComplete', saveUpdatedLayout);
+                $timeout (function() {pckry.shiftLayout();},300);
+            }
+           
+            function saveUpdatedLayout() 
+            {
+                $timeout(function()
+                {
+                    var positions = pckry.getShiftPositions('data-item-id');
+                    console.log("SAVING");
+                    var ld = NVRDataModel.getLogin();
+
+                    ld.packeryPositions = JSON.stringify(positions);
+                    //console.log ("Saving " + ld.packeryPositions);
+                    NVRDataModel.setLogin(ld);
+                    $ionicLoading.hide();
+                    //$scope.sliderChanging = false;
+                }, 20);
+            }
+            
+        };
+
         $scope.toggleSelectItem = function(mid)
         {
             var ndx = getIndex(mid);
@@ -718,6 +795,11 @@ angular.module('zmApp.controllers')
             var i;
             $scope.isDragabillyOn = !$scope.isDragabillyOn;
 
+             for (var i = 0; i < $scope.MontageMonitors.length; i++)
+             {
+                $scope.MontageMonitors[i].Monitor.isStamp = false;
+             }
+
             $ionicSideMenuDelegate.canDragContent($scope.isDragabillyOn ? false : true);
 
             //$timeout(function(){pckry.reloadItems();},10);
@@ -1279,6 +1361,7 @@ angular.module('zmApp.controllers')
                 $scope.MontageMonitors[i].Monitor.gridScale = "50";
                 $scope.MontageMonitors[i].Monitor.selectStyle = "";
                 $scope.MontageMonitors[i].Monitor.alarmState = 'color:rgba(0,0,0,0);';
+                $scope.MontageMonitors[i].Monitor.isStamp = false;
 
             }
 
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 6e561097..f1ca93e2 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -34,6 +34,14 @@
                     <li>
                         <a href="" ng-click="sliderChanged(-1)"> <i class="ion-minus-circled"></i></a>
                     </li>
+                    <span ng-if="isDragabillyOn">
+                        <li>
+                            <a href="" ng-click="hideMonitor(monitor.Monitor.Id)"> <i class="ion-close-circled"></i></a>
+                        </li>
+                        <li>
+                            <a href="" ng-click="toggleStamp()"> <i class="ion-pin"></i></a>
+                        </li>
+                    </span>
                 </ul>
             </div>
 
@@ -89,6 +97,8 @@
                                  
                                     
                                     <img    class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem(monitor.Monitor.Id);" image-spinner-loader="lines"  />
+                                       
+                                   
 
                                     </div> 
 
@@ -107,9 +117,9 @@
 
 
 
-                            <figcaption id="slowpulse" ng-class="monitor.Monitor.isAlarmed==true?'alarmed-figcaption animated infinite flash':'normal-figcaption'" >
+                            <figcaption id="slowpulse" ng-class="monitor.Monitor.isAlarmed==true?'alarmed-figcaption animated infinite flash':'normal-figcaption'" >&nbsp;
 
-                                    &nbsp;<i class="ion-ios-videocam"></i>
+                                    <span ng-if="monitor.Monitor.isStamp && isDragabillyOn"><i  class="animated infinite flash ion-pin"></i>&nbsp;</span><i class="ion-ios-videocam"></i>&nbsp;
                                    {{monitor.Monitor.Name}}&nbsp;<i ng-if="$root.runMode!='lowbw'" style="{{monitor.Monitor.alarmState}}" class="ion-record"></i>&nbsp;
 
                             </figcaption>