You can now persist hidden monitors across timeline/events/montage - https://github.com/pliablepixels/zmNinja/issues/42

6 files changed, 383 insertions, 50 deletions

diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 400cebfa..7fbe7b36 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -39,7 +39,8 @@ angular.module('zmApp.controllers').service('ZMDataModel',
         'enableDebug':false, // if enabled with log messages with "debug"
         'usePin':false,
         'pinCode':'',
-        'canSwipeMonitors':true
+        'canSwipeMonitors':true,
+        'persistMontageOrder':false,
     };
     var configParams = {
         'ZM_EVENT_IMAGE_DIGITS':'-1',
@@ -244,6 +245,11 @@ angular.module('zmApp.controllers').service('ZMDataModel',
                 loginData.canSwipeMonitors = (canSwipeValue == "1") ? true:false;
             }
             
+            if (window.localStorage.getItem("persistMontageOrder") != undefined) {
+                var persistMontageOrder = window.localStorage.getItem("persistMontageOrder");
+                loginData.persistMontageOrder = (persistMontageOrder == "1") ? true:false;
+            }
+            
             
             if (window.localStorage.getItem("usePin") != undefined) {
                  var pinValue =  window.localStorage.getItem("usePin");
@@ -272,7 +278,8 @@ angular.module('zmApp.controllers').service('ZMDataModel',
         },
 
         isLoggedIn: function () {
-            if ( (loginData.username != "" && loginData.password != "" && loginData.url != "" && loginData.apiurl != "") || (loginData.isUseAuth == '0'))
+            if ( (loginData.username != "" && loginData.password != "" && loginData.url != "" &&
+                  loginData.apiurl != "") || (loginData.isUseAuth == '0'))
             {
                 return 1;
             } else
@@ -358,6 +365,7 @@ angular.module('zmApp.controllers').service('ZMDataModel',
             window.localStorage.setItem("useSSL", loginData.useSSL?"1":"0");
             window.localStorage.setItem("usePin", loginData.usePin?"1":"0");
             window.localStorage.setItem("canSwipeMonitors", loginData.canSwipeMonitors?"1":"0");
+            window.localStorage.setItem("persistMontageOrder", loginData.persistMontageOrder?"1":"0");
             window.localStorage.setItem("pinCode", loginData.pinCode);
             
             
@@ -565,6 +573,110 @@ angular.module('zmApp.controllers').service('ZMDataModel',
                     
             
         },
+        
+        applyMontageMonitorPrefs: function (mon, doOrder)
+        {
+            var montageOrder = []; // This array will keep the ordering in montage view
+            var hiddenOrder = []; // 1 = hide, 0 = don't hide
+            var monitors = mon;
+            var orderedMonitors = [];
+
+
+            // First let's check if the user already has a saved monitor order
+            var i;
+            if (window.localStorage.getItem("montageOrder") == undefined) {
+
+                for (i = 0; i < monitors.length; i++) {
+                    montageOrder[i] = i; // order to show is order ZM returns
+                    hiddenOrder[i] = 0; // don't hide them
+                }
+                console.log("Order string is " + montageOrder.toString());
+                console.log("Hiddent string is " + hiddenOrder.toString());
+
+                zmLog("Stored montage order does not exist");
+            } else
+            // there is a saved order
+            {
+                var myorder = window.localStorage.getItem("montageOrder");
+                var myhiddenorder = window.localStorage.getItem("montageHiddenOrder");
+
+
+                zmDebug("MontageCtrl: Montage order is " + myorder);
+                zmDebug("MontageCtrl: Hidden order is " + myhiddenorder);
+                if (myorder) montageOrder = myorder.split(",");
+                if (myhiddenorder) hiddenOrder = myhiddenorder.split(",");
+
+                //  handle add/delete monitors after the array has been 
+                // saved
+
+                if (monitors.length != montageOrder.length) {
+                    zmLog("Monitors array length different from stored hidden/order array. It's possible monitors were added/removed. Resetting...");
+                    montageOrder = [];
+                    hiddenOrder = [];
+                    for (i = 0; i < monitors.length; i++) {
+                        montageOrder[i] = i; // order to show is order ZM returns
+                        hiddenOrder[i] = 0; // don't hide them
+                    }
+                    window.localStorage.setItem("montageOrder",
+                        montageOrder.toString());
+                    window.localStorage.setItem("montageHiddenOrder",
+                        hiddenOrder.toString());
+
+
+                }
+
+            } // at this stage, the monitor arrangement is not matching
+            // the montage order. Its in true order. Let us first process the hiddenOrder part
+            // now
+
+            for (i = 0; i < montageOrder.length; i++) {
+                    montageOrder[i] = parseInt(montageOrder[i]);
+                    hiddenOrder[i] = parseInt(hiddenOrder[i]);
+                    //  $scope.monitors[i].Monitor.sortOrder = montageOrder[i];
+                    // FIXME: This will briefly show and then hide
+                    // disabled monitors
+                    if (hiddenOrder[i] == 1) {
+                        // $scope.monitors[i].Monitor.listDisplay='noshow';
+
+                        if (monitors[i] !== undefined)
+                            monitors[i].Monitor.listDisplay = 'noshow';
+                        zmLog("Monitor " + i + " is marked as hidden in montage");
+                    } 
+                    else 
+                    {
+                        if (monitors[i] !== undefined)
+                            monitors[i].Monitor.listDisplay = 'show';
+                    }
+            }
+            
+            
+            if (doOrder)
+            {
+               for (i = 0; i < montageOrder.length; i++) {
+                    for (var j = 0; j < montageOrder.length; j++) {
+                        if (montageOrder[j] == i) {
+                            // if 2 is passed, hidden elements are not recorded
+                            if (doOrder == 2)
+                            {
+                                if (monitors[j].Monitor.listDisplay != 'noshow')
+                                    orderedMonitors.push(monitors[j]);
+                            }
+                            else 
+                                orderedMonitors.push(monitors[j]);
+                        }   
+                    }
+                }
+            }
+            else
+            {
+                orderedMonitors = monitors;
+            }
+            
+            
+
+            return ([orderedMonitors,montageOrder, hiddenOrder]);
+
+        },
 
         //-----------------------------------------------------------------------------
         // This function returns a list of monitors
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index e039ad22..c2c22304 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -117,7 +117,17 @@ angular.module('zmApp.controllers')
 
         console.log("***CALLING EVENTS FACTORY");
         var lData = ZMDataModel.getLogin();
-        $scope.monitors = message;
+        
+        if (lData.persistMontageOrder)
+        {
+            var tempMon = message;    
+            $scope.monitors = ZMDataModel.applyMontageMonitorPrefs (tempMon, 2)[0];
+        }
+        else    
+            $scope.monitors = message;
+        console.log ("********** GOT MONITORS " + JSON.stringify($scope.monitors));
+        
+        //$scope.monitors = message;
 
         // I am converting monitor ID to monitor Name
         // so I can display it along with Events
@@ -147,7 +157,24 @@ angular.module('zmApp.controllers')
                         ZMDataModel.zmDebug("EventCtrl: success, got " + myevents.length + " events");
                         var loginData = ZMDataModel.getLogin();
                         for (var i = 0; i < myevents.length; i++) {
-
+                            
+                            var idfound = true;
+                            if (loginData.persistMontageOrder)
+                            {
+                                idfound = false;
+                                for (var ii=0; ii < $scope.monitors.length; ii++)
+                                {
+                                     if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId)
+                                    {
+
+                                        //console.log ( $scope.monitors[ii].Monitor.Id + " MATCHES " + myevents[i].Event.MonitorId);
+                                        idfound = true;
+                                        break;
+                                    }
+                                }
+                            }
+                            
+                            
                             myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId);
                             myevents[i].Event.ShowScrub = false;
                             myevents[i].Event.height = zm.eventsListDetailsHeight;
@@ -179,16 +206,19 @@ angular.module('zmApp.controllers')
                                 hh + "/" +
                                 min + "/" +
                                 sec + "/";
-
-                            if (i == 0) // just for debug sampling to see what we are getting
+                        
+                            if (idfound)
                             {
-                                ZMDataModel.zmDebug("EventCtrl: Sample data from first event: " + JSON.stringify(myevents[i]));
+                                $scope.events.push(myevents[i]);
                             }
-
+                            else{
+                                //console.log ("Skipping Event MID = " + myevents[i].Event.MonitorId);
+                            }
+                        
                         } //for
 
-
-                        $scope.events = myevents;
+                        
+                        //$scope.events = myevents;
                         // we only need to stop the template from loading when the list is empty
                         // so this can be false once we have _some_ content
                         // FIXME: check reload
@@ -354,8 +384,26 @@ angular.module('zmApp.controllers')
                     $scope.hours = [];
                     var p = data.results;
                     for (var key in data.results) {
+                        
+                        
+                        
                         if (p.hasOwnProperty(key)) {
+                            
+                            var idfound = true;
+                            if (ld.persistMontageOrder)
+                            {
+                                idfound = false;
+                                for (var ii=0; ii<$scope.monitors.length; ii++)
+                                {
+                                    if ($scope.monitors[ii].Monitor.Id == key)
+                                    {
+                                        idfound = true;
+                                        break;
+                                    }
+                                }
+                            }
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
+                            if (idfound)
                             $scope.hours.push({
                                 monitor: ZMDataModel.getMonitorName(key),
                                 events: p[key],
@@ -375,6 +423,21 @@ angular.module('zmApp.controllers')
                     var p = data.results;
                     for (var key in data.results) {
                         if (p.hasOwnProperty(key)) {
+                            var idfound = true;
+                            if (ld.persistMontageOrder)
+                            {
+                                idfound = false;
+                                for (var ii=0; ii<$scope.monitors.length; ii++)
+                                {
+                                    if ($scope.monitors[ii].Monitor.Id == key)
+                                    {
+                                        idfound = true;
+                                        break;
+                                    }
+                                }
+                            }
+                            //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
+                            if (idfound)
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                             $scope.days.push({
                                 monitor: ZMDataModel.getMonitorName(key),
@@ -396,6 +459,22 @@ angular.module('zmApp.controllers')
                     var p = data.results;
                     for (var key in data.results) {
                         if (p.hasOwnProperty(key)) {
+                            
+                            var idfound = true;
+                            if (ld.persistMontageOrder)
+                            {
+                                idfound = false;
+                                for (var ii=0; ii<$scope.monitors.length; ii++)
+                                {
+                                    if ($scope.monitors[ii].Monitor.Id == key)
+                                    {
+                                        idfound = true;
+                                        break;
+                                    }
+                                }
+                            }
+                            //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
+                            if (idfound)
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                             $scope.weeks.push({
                                 monitor: ZMDataModel.getMonitorName(key),
@@ -416,6 +495,23 @@ angular.module('zmApp.controllers')
                     var p = data.results;
                     for (var key in data.results) {
                         if (p.hasOwnProperty(key)) {
+                            
+                            var idfound = true;
+                            var ld = ZMDataModel.getLogin();
+                            if (ld.persistMontageOrder)
+                            {
+                                idfound = false;
+                                for (var ii=0; ii<$scope.monitors.length; ii++)
+                                {
+                                    if ($scope.monitors[ii].Monitor.Id == key)
+                                    {
+                                        idfound = true;
+                                        break;
+                                    }
+                                }
+                            }
+                            //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
+                            if (idfound)
                             //console.log(ZMDataModel.getMonitorName(key) + " -> " + p[key]);
                             $scope.months.push({
                                 monitor: ZMDataModel.getMonitorName(key),
@@ -1229,7 +1325,27 @@ angular.module('zmApp.controllers')
                         var loginData = ZMDataModel.getLogin();
                         console.log("Got new page of events with Page=" + eventsPage);
                         var myevents = data;
+                
                         for (var i = 0; i < myevents.length; i++) {
+                            
+                            var idfound = true;
+                            var ld = ZMDataModel.getLogin();
+                            
+                            if (ld.persistMontageOrder)
+                            {
+                                idfound = false;
+                                for (var ii=0; ii < $scope.monitors.length; ii++)
+                                {
+                                     if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId)
+                                    {
+
+                                        //console.log ( $scope.monitors[ii].Monitor.Id + " MATCHES " + myevents[i].Event.MonitorId);
+                                        idfound = true;
+                                        break;
+                                    }
+                                }
+                            }
+                            
 
                             myevents[i].Event.MonitorName = ZMDataModel.getMonitorName(myevents[i].Event.MonitorId);
                             // now construct base path
@@ -1260,9 +1376,9 @@ angular.module('zmApp.controllers')
                                 min + "/" +
                                 sec + "/";
                             myevents[i].Event.height = zm.eventsListDetailsHeight;
-
+                        if (idfound) $scope.events = $scope.events.concat(myevents[i]);
                         }
-                        $scope.events = $scope.events.concat(myevents);
+                        
                         console.log("Got new page of events");
                         moreEvents = true;
                         $scope.$broadcast('scroll.infiniteScrollComplete');
@@ -1332,7 +1448,17 @@ angular.module('zmApp.controllers')
             ZMDataModel.zmDebug ("Reloading monitors");
             var refresh = ZMDataModel.getMonitors(1);
             refresh.then(function (data) {
-                $scope.monitors = data;
+                
+                   var ld = ZMDataModel.getLogin();
+                   if (ld.persistMontageOrder)
+                   {
+                        var tempMon = data;    
+                        $scope.monitors = ZMDataModel.applyMontageMonitorPrefs (tempMon, 2)[0];
+                   }
+                   else
+                   {
+                    $scope.monitors = data;
+                   }
 
 
                 $scope.events = [];
@@ -1350,6 +1476,25 @@ angular.module('zmApp.controllers')
                             //var events = [];
                             var myevents = data;
                             for (var i = 0; i < myevents.length; i++) {
+                                
+                                 var idfound = true;
+                                
+                                var ld = ZMDataModel.getLogin();
+                                if (ld.persistMontageOrder)
+                                {
+                                    idfound = false;
+                            
+                                    for (var ii=0; ii < $scope.monitors.length; ii++)
+                                    {
+                                         if ($scope.monitors[ii].Monitor.Id == myevents[i].Event.MonitorId)
+                                        {
+
+                                            //console.log ( $scope.monitors[ii].Monitor.Id + " MATCHES " + myevents[i].Event.MonitorId);
+                                            idfound = true;
+                                            break;
+                                        }
+                                    }
+                                }
 
                                 myevents[i].Event.MonitorName =
                                     ZMDataModel.getMonitorName(myevents[i].Event.MonitorId);
@@ -1385,8 +1530,13 @@ angular.module('zmApp.controllers')
 
                                 myevents[i].Event.ShowScrub = false;
                                 myevents[i].Event.height = zm.eventsListDetailsHeight;
+                                
+                                if (idfound)
+                                {
+                                    $scope.events.push(myevents);
+                                }
                             }
-                            $scope.events = myevents;
+                           // $scope.events = myevents;
                             loadMore();
                         });
 
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index ac47beaf..8d21ad8b 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -14,28 +14,8 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     //---------------------------------------------------------------------
 
     console.log("********  HAVE ALL MONITORS");
-    $scope.monitors = message;
-    ZMDataModel.zmLog("Inside Montage Ctrl:We found " + $scope.monitors.length + " monitors");
-
-    document.addEventListener("pause", onPause, false);
-    document.addEventListener("resume", onResume, false);
-
-    $scope.showSizeButtons = false;
-    $ionicPopover.fromTemplateUrl('templates/help/montage-help.html', {
-        scope: $scope,
-    }).then(function (popover) {
-        $scope.popover = popover;
-    });
-
-    var timestamp = new Date().getUTCMilliseconds();
-    $scope.minimal = $stateParams.minimal;
-    $scope.isRefresh = $stateParams.isRefresh;
-    var sizeInProgress = false;
-    $scope.imageStyle = true;
-
-    $ionicSideMenuDelegate.canDragContent(false);
-
-    var isLongPressActive = false;
+    
+      var isLongPressActive = false;
     $scope.isReorder = false;
     var intervalHandleMontage; // will hold image resize timer on long press
     var montageIndex = 0; // will hold monitor ID to scale in timer
@@ -59,8 +39,42 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
 
     var montageOrder = []; // This array will keep the ordering in montage view
     var hiddenOrder = []; // 1 = hide, 0 = don't hide
+    
+    var tempMonitors = message;
+    var tempResponse = ZMDataModel.applyMontageMonitorPrefs(message, 0);
+    $scope.monitors = tempResponse[0];
+    montageOrder = tempResponse[1];
+    hiddenOrder = tempResponse[2];
+    
+    ZMDataModel.zmLog("Inside Montage Ctrl:We found " + $scope.monitors.length + " monitors");
+
+    $scope.MontageMonitors = ZMDataModel.applyMontageMonitorPrefs (message, 1)[0];
+    
+    
 
 
+    document.addEventListener("pause", onPause, false);
+    document.addEventListener("resume", onResume, false);
+
+    $scope.showSizeButtons = false;
+    $ionicPopover.fromTemplateUrl('templates/help/montage-help.html', {
+        scope: $scope,
+    }).then(function (popover) {
+        $scope.popover = popover;
+    });
+
+    var timestamp = new Date().getUTCMilliseconds();
+    $scope.minimal = $stateParams.minimal;
+    $scope.isRefresh = $stateParams.isRefresh;
+    var sizeInProgress = false;
+    $scope.imageStyle = true;
+
+    $ionicSideMenuDelegate.canDragContent(false);
+
+  
+
+    /*
+    
     // First let's check if the user already has a saved monitor order
     var i;
     if (window.localStorage.getItem("montageOrder") == undefined) {
@@ -124,28 +138,26 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
             if ($scope.monitors[i] !== undefined)
                 $scope.monitors[i].Monitor.listDisplay = 'show';
         }
-    }
+    } */
+    
+    
+    
     // now arrange monitors according to montage order
     // FIXME: Incredibly horrible logic
     // I really need to organize this properly into one structure
 
     // empty out monitors as I'll need to insert them as per montageOrder
     // remember to assign
-    $scope.MontageMonitors = [];
+    
 
-    for (i = 0; i < montageOrder.length; i++) {
-        for (j = 0; j < montageOrder.length; j++) {
-            if (montageOrder[j] == i) {
-                $scope.MontageMonitors.push($scope.monitors[j]);
-            }
-        }
-    }
+    
+    
 
 
     // Do we have a saved montage array size? No?
     if (window.localStorage.getItem("montageArraySize") == undefined) {
 
-        for (i = 0; i < $scope.monitors.length; i++) {
+        for (var i = 0; i < $scope.monitors.length; i++) {
             $scope.monitorSize.push(ZMDataModel.getMontageSize());
             $scope.scaleDirection.push(1);
         }
diff --git a/www/js/TimelineCtrl.js b/www/js/TimelineCtrl.js
index da461faf..3157e516 100644
--- a/www/js/TimelineCtrl.js
+++ b/www/js/TimelineCtrl.js
@@ -316,6 +316,16 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
     $scope.$on('$ionicView.afterEnter', function () {
         console.log("***AFTER ENTER");
 
+        var tempMon = message;
+        var ld = ZMDataModel.getLogin();
+        
+        if (ld.persistMontageOrder)
+        {
+            var iMon = ZMDataModel.applyMontageMonitorPrefs (tempMon, 2);
+            $scope.monitors = iMon[0];
+        }
+        else
+            $scope.monitors = message;
         if ($rootScope.customTimelineRange) {
             console.log("***** CUSTOM RANGE");
             if (moment($rootScope.fromString).isValid() &&
@@ -330,6 +340,10 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                 console.log("FROM & TO IS CUSTOM INVALID");
             }
         }
+        else
+        {
+            drawGraph(fromDate, toDate, maxItems);
+        }
     });
 
     //-------------------------------------------------
@@ -387,6 +401,7 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
     $scope.toDate = toDate;
 
 
+    console.log ("*********************** TIMELINE MAIN ");
 
     var maxItems = zm.graphItemMax; // THAT magic # --> 300 and ZM on my m/c cries
     $scope.maxItems = maxItems;
@@ -400,7 +415,13 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
     container = angular.element(document.getElementById('visualization'));
     var timeline = "";
 
-    $scope.monitors = message;
+    
+    
+    //console.log ("RETURNING MONITORS " + JSON.stringify($scope.monitors));
+    //$scope.monitors = message;
+    
+    //console.log ("MONITOR DATA AFTER APPLYING : " + JSON.stringify($scope.monitors));
+    
     $scope.navControls = false;
     var navControls = false;
 
@@ -411,7 +432,7 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
     });
 
 
-    drawGraph(fromDate, toDate, maxItems);
+    //drawGraph(fromDate, toDate, maxItems);
     //dummyDrawGraph(fromDate, toDate,maxItems);
 
     //-------------------------------------------------
@@ -608,7 +629,29 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                                 }
 
                                 for (var i = 0; i < myevents.length; i++) {
+                                    
+                                    // make sure group id exists before adding
+                                    var idfound=true;
+                                    var ld = ZMDataModel.getLogin();
+                                    
+                                    if (ld.persistMontageOrder)
+                                    {
+                                
+                                        idfound = false;
+                                        for (var ii=0; ii< $scope.monitors.length; ii++)
+                                        {
+                                            if ($scope.monitors[ii].Monitor.Id ==  myevents[i].Event.MonitorId)
+                                            {
+                                                idfound = true;
+                                                //console.log ("****************** ID MATCH " + graphIndex);
+
+                                                break;
+                                            }
+                                        }
+                                    }
 
+                                    if (idfound)
+                                    {
                                     graphData.add({
                                         id: graphIndex,
                                         content: "<span class='my-vis-font'>" + myevents[i].Event.Notes + "</span>",
@@ -624,8 +667,14 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                                         myename: myevents[i].Event.Name,
 
                                     });
+                                        graphIndex++;
+                                    }
+                                    else
+                                    {
+                                        //console.log ("SKIPPED GRAPH ID " + graphIndex);
+                                    }
                                    
-                                    graphIndex++;
+                                    
 
                                     if (graphIndex > zm.graphItemMax) {
                                         ZMDataModel.zmLog("Exiting event graph - reached limit of " + zm.graphItemMax);
@@ -637,8 +686,11 @@ angular.module('zmApp.controllers').controller('zmApp.TimelineCtrl', ['$ionicPla
                             }
 
                             timeline = new vis.Timeline(container[0], null, options);
+                           // console.log ("GRAPH DATA");
                             timeline.setItems(graphData);
+                         //   console.log ("GROUPS");
                             timeline.setGroups(groups);
+                            
                             timeline.fit();
 
                             $ionicLoading.hide();
diff --git a/www/templates/devoptions.html b/www/templates/devoptions.html
index 60d0b3ba..5b1d2936 100644
--- a/www/templates/devoptions.html
+++ b/www/templates/devoptions.html
@@ -47,10 +47,17 @@
                         toggle-class="toggle-calm">Enable Debug Logs</ion-toggle>
             </label>
             
+            <label>
             <ion-toggle ng-model="loginData.canSwipeMonitors"
                         ng-checked="{{loginData.canSwipeMonitors}}"
                         toggle-class="toggle-calm">Swipe to change monitors</ion-toggle>
             </label>
+            
+            <label>
+            <ion-toggle ng-model="loginData.persistMontageOrder"
+                        ng-checked="{{loginData.persistMontageOrder}}"
+                        toggle-class="toggle-calm">Persist hidden monitors</ion-toggle>
+            </label>
 
             <button class="button button-block button-balanced icon ion-locked"
                     ng-click="saveDevOptions()"> Save
diff --git a/www/templates/state.html b/www/templates/state.html
index 440d931e..7d26d8e5 100644
--- a/www/templates/state.html
+++ b/www/templates/state.html
@@ -1,4 +1,4 @@
-<ion-view view-title="System Status" cache="false">
+<ion-view view-title="System Status" cache-view="false">
 
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>