diff options
| -rw-r--r-- | www/js/MontageCtrl.js | 79 | ||||
| -rw-r--r-- | www/templates/montage.html | 15 | ||||
| -rw-r--r-- | www/templates/reorder-modal.html | 25 |
3 files changed, 91 insertions, 28 deletions
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 1e0bc5e3..957d61f3 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -153,12 +153,16 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' $scope.toggleHide = function(mon) { + + //pckry.getItemElements().forEach(function (itemElem) {itemElem.hide(); + //}); + //pckry.hide(); if (mon.Monitor.listDisplay == 'noshow') mon.Monitor.listDisplay = 'show'; else mon.Monitor.listDisplay = 'noshow'; - $timeout(function () { + /*$timeout(function () { pckry.once( 'layoutComplete', function() { var positions = pckry.getShiftPositions('data-item-id'); @@ -171,7 +175,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' }); layout(pckry); - },100); + },100);*/ }; @@ -216,11 +220,11 @@ function initPackery() var cnt=0; $scope.MontageMonitors.forEach(function(elem) { - if ((elem.Monitor.Enabled!='0') && (elem.Monitor.Function!='None')) + if ((elem.Monitor.Enabled!='0') && (elem.Monitor.Function!='None') && (elem.Monitor.listDisplay!="noshow")) cnt++; }); - ZMDataModel.zmLog ("Monitors that are active: " + cnt + " while grid has " + positions.length); + ZMDataModel.zmLog ("Monitors that are active and not DOM hidden: " + cnt + " while grid has " + positions.length); if (cnt > ZMDataModel.getLogin().maxMontage ) { @@ -260,7 +264,7 @@ function initPackery() $ionicLoading.hide(); - if (!progressCalled) + if (!progressCalled) { ZMDataModel.zmLog ("*** BUG PROGRESS WAS NOT CALLED"); pckry.reloadItems(); @@ -343,7 +347,61 @@ function initPackery() } + $scope.cancelReorder = function() + { + $scope.modal.remove(); + }; + + $scope.saveReorder = function() + { + console.log (">>>>>>>>>> SAVING"); + $scope.MontageMonitors = $scope.copyMontage; + $scope.modal.remove(); + $timeout( function() {pckry.reloadItems();},400); + $timeout( function() { + draggies = []; + pckry.getItemElements().forEach(function (itemElem) { + draggie = new Draggabilly(itemElem); + pckry.bindDraggabillyEvents(draggie); + draggies.push(draggie); + draggie.disable(); + }); + pckry.layout(); + + },800); + + + + }; + $scope.toggleDelete = function (i) + { + + if ($scope.copyMontage[i].Monitor.listDisplay == 'show') + $scope.copyMontage[i].Monitor.listDisplay = 'noshow'; + else + $scope.copyMontage[i].Monitor.listDisplay = 'show'; + + ZMDataModel.zmDebug ("index " + i + " is now " + $scope.copyMontage[i].Monitor.listDisplay); + }; + + $scope.hideUnhide = function() + { + if ($scope.isDragabillyOn) + { + dragToggle(); + } + $scope.copyMontage = angular.copy ($scope.MontageMonitors); + $ionicModal.fromTemplateUrl('templates/reorder-modal.html', { + scope: $scope, + animation: 'slide-in-up' + }) + .then(function (modal) { + $scope.modal = modal; + $scope.modal.show(); + }); + }; + $scope.swipeUp = function() { //console.log ("SWIPE UP"); @@ -499,6 +557,13 @@ function initPackery() $scope.dragToggle = function() { + dragToggle(); + + + }; + + function dragToggle() + { var i; $scope.isDragabillyOn = !$scope.isDragabillyOn; @@ -538,9 +603,7 @@ function initPackery() ZMDataModel.setLogin(ld);},300);},100); } - - - }; + } //--------------------------------------------------------------------- diff --git a/www/templates/montage.html b/www/templates/montage.html index 2b3667a1..230bca4f 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -1,7 +1,10 @@ <ion-view title="Montage" 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> + <button class="button button-icon button-clear ion-eye" ng-click="hideUnhide();"> + </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> + </ion-nav-buttons> @@ -14,6 +17,8 @@ <button class="button button-icon button-clear ion-loop" ng-click="resetSizes();"> </button> + + <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> @@ -41,16 +46,16 @@ <div class="grid-sizer grid-item-10"></div> <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.Enabled !='0' "> - <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} {{dragBorder}}" data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}" > - <figure> + <div class="grid-item grid-item-{{monitor.Monitor.gridScale}} " data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{monitor.Monitor.gridScale}}" data-item-listdisplay="{{monitor.Monitor.listDisplay}}" > + <figure class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'"> <div ng-if="!isModalActive" > <div ng-if="$root.authSession!='undefined' && !isBackground() && !areImagesLoading"> <div ng-if = "!minimal"> <div> <img class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{LoginData.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):toggleSelectItem($index);" image-spinner-loader="lines" on-swipe-up="swipeUp()" on-swipe-down="swipeDown()" /> - <!-- - <div style="position:absolute;top:40%; left:50%;opacity:0.5;"><button ng-class="monitor.Monitor.listDisplay=='show'?'button button-positive button-small icon ion-ios-eye':'button button-assertive button-small icon ion-eye-disabled'" ng-click="toggleHide(monitor)" ng-if="isDragabillyOn"></button></div>--> - </div> + + <!--<div style="position:absolute;top:40%; left:50%;opacity:0.5;"><button ng-class="monitor.Monitor.listDisplay=='show'?'button button-positive button-small icon ion-ios-eye':'button button-assertive button-small icon ion-eye-disabled'" ng-click="toggleHide(monitor)" ng-if="isDragabillyOn"></button></div> + </div>--> </div> diff --git a/www/templates/reorder-modal.html b/www/templates/reorder-modal.html index 589cca5a..4e3ce82d 100644 --- a/www/templates/reorder-modal.html +++ b/www/templates/reorder-modal.html @@ -2,18 +2,11 @@ <ion-modal-view cache-view="false" style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;" > <ion-header-bar class="bar-stable"> - <div class="buttons"> - <button class="button button-icon icon ion-ios-minus-outline" - ng-click="deleteList();"></button> - <button class="button button-icon icon ion-ios-drag" ng-click="reorderList();"> - - </button> - </div> + <h1 class="title"></h1> <div class="buttons"> - <button class="button button-icon icon ion-refresh" ng-click="reloadReorder()"></button> <button class="button button-icon icon ion-checkmark" ng-click="saveReorder()"></button> @@ -24,13 +17,15 @@ <ion-content > - <ion-list show-delete="data.showDelete" show-reorder="data.showReorder"> - <ion-item ng-repeat="item in MontageMonitors"> - {{item.Monitor.Name}}<ion-delete-button ng-class="{'ion-eye':item.Monitor.listDisplay=='show','ion-eye-disabled':item.Monitor.listDisplay!='show'}" ng-click="deleteItem($index)"></ion-delete-button> - - <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item,$fromIndex, $toIndex)"></ion-reorder-button> - </ion-item> - </ion-list> + <div class="list"> + <span ng-repeat="item in copyMontage"> + <a class="item item-icon-left" ng-click="toggleDelete($index)" href=""> + <i ng-class="{'icon ion-eye':item.Monitor.listDisplay=='show','icon ion-eye-disabled':item.Monitor.listDisplay!='show'}"> </i> + {{item.Monitor.Name}} + </a> + + </span> + </div> </ion-content> |