Monitor view now calls zmdc APIs and checks if monitor is running/not running/pending

4 files changed, 54 insertions, 37 deletions

diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index fcd0f8c9..221e0dc7 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -21,6 +21,10 @@
             </ion-scroll>
 
 
+        </div>
+    </ion-content>
+</ion-modal-view>
+
     <nav mfb-menu position="br" effect="zoomin" label="collapse" active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
         <button mfb-button icon="ion-close" label="exit event view" ng-click="closeModal()"></button>
 
@@ -41,6 +45,3 @@
 
         <a mfb-button icon="ion-play" label="play" ng-click="controlEventStream(eventCommands.play)"></a>
     </nav>
-        </div>
-    </ion-content>
-</ion-modal-view>
diff --git a/www/templates/help.html b/www/templates/help.html
index 55d22d9e..decdf47e 100644
--- a/www/templates/help.html
+++ b/www/templates/help.html
@@ -43,6 +43,16 @@
         should be reloaded.
         </ion-item>
 
+        <ion-item class="item-text-wrap">
+            <h2><b> What do all the colors in the Monitor view mean?</b></h2>
+        <i class="icon ion-checkmark-circled" style="color:#1E90FF"></i> Checking <br/>
+        <i class="icon ion-checkmark-circled" style="color:green"></i> All good <br/>
+        <i class="icon ion-close-circled" style="color:red"></i> Not running <br/>
+        <i class="icon ion-close-circled" style="color:orange"></i> Not running (pending) <br/>
+        <i class="icon ion-checkmark-circled" style="color:grey"></i> Disabled <br/>
+              <i class="icon ion-help-circled" style="color:#800000"></i> Unknown <br/>
+
+        </ion-item>
 
         <ion-item class="item-text-wrap">
             <h2><b>I want to contribute!</b></h2>
diff --git a/www/templates/monitors.html b/www/templates/monitors.html
index 6ef5d954..7b6b00b3 100644
--- a/www/templates/monitors.html
+++ b/www/templates/monitors.html
@@ -1,52 +1,58 @@
 <ion-view view-title="Monitors" cache="false">
-    
-     <ion-nav-buttons side="left">
-          <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
-        </ion-nav-buttons> 
-    
-    
+
+    <ion-nav-buttons side="left">
+        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
+    </ion-nav-buttons>
+
+
     <ion-content>
-        <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
-        <div class="list card" ng-repeat="monitor in monitors">
-            <!-- <a href="#/app/events" ng-click="toggleLeft()"> -->
-            <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}">
-                <div ng-if="monitor.Monitor.Enabled == '1'">
-                    <span class='item item-icon-left item-icon-right'>
+        <div ng-controller="ModalCtrl">
+            <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
+            <div class="list card" ng-repeat="monitor in monitors">
+                <!-- <a href="#/app/events" ng-click="toggleLeft()"> -->
+                <div class="item" ng-style="{'background-color': monitor.Monitor.Enabled=='1'?'white':'white'}">
+                    <div ng-if="monitor.Monitor.Enabled == '1'">
+                        <span class='item item-icon-left item-icon-right'>
                 <i class="icon ion-ios-monitor-outline"></i>
                  <b>{{monitor.Monitor.Name}}</b>
-                <i class="icon ion-checkmark-circled" style="color:green;"></i>
+
+
+                <i class="icon {{monitor.Monitor.char}}" style="color:{{monitor.Monitor.color}};"></i>
+
                 </span>
-                </div>
+                    </div>
 
 
-                <div ng-if="monitor.Monitor.Enabled != '1'">
-                    <span class='item item-icon-left item-icon-right'>
+                    <div ng-if="monitor.Monitor.Enabled != '1'">
+                        <span class='item item-icon-left item-icon-right'>
                     <i class="icon ion-ios-monitor-outline"></i>
                      <b>{{monitor.Monitor.Name}}</b>
-                    <i class="icon ion-checkmark-circled" style="color:grey;"></i>
+                    <i class="icon {{monitor.Monitor.char}}" style="color:grey;"></i>
                 </span>
 
-                </div>
+                    </div>
 
 
-                <p>Mode :{{monitor.Monitor.Function}}</br>
-                    <!-- Current State: {{monitor.STATE}}</br> 
+                    <p>Mode :{{monitor.Monitor.Function}}</br>
+                        <!-- Current State: {{monitor.STATE}}</br>
             Events: {{monitor.NUMEVENTS}}</br> -->
-                    Resolution: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}</br>
-                    Max FPS: {{monitor.Monitor.MaxFPS}}
-                    <br/> Alarm Max FPS:{{monitor.Monitor.AlarmMaxFPS}}
-                    <br/> Alarm Frame Count: {{monitor.Monitor.AlarmFrameCount}}
-                    <br/>
-                </p>
-
-                <div style="float:right;">
-                    <a class="button button-small icon icon-left icon ion-gear-a" href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">Configuration</a>
-                    <a class="button button-small icon icon-left ion-calendar" href="#/events/{{monitor.Monitor.Id}}">Events</a>
-                    <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)"  >Live View</a>
-                </div>
+                        Resolution: {{monitor.Monitor.Width}}*{{monitor.Monitor.Height}}</br>
+                        Max FPS: {{monitor.Monitor.MaxFPS}}
+                        <br/> Alarm Max FPS:{{monitor.Monitor.AlarmMaxFPS}}
+                        <br/> Alarm Frame Count: {{monitor.Monitor.AlarmFrameCount}}
+                        <br/> Status: {{monitor.Monitor.isRunningText}}
+                        <br/><br/>
+                    </p>
 
+                    <div style="float:right;">
+                        <a class="button button-small icon icon-left icon ion-gear-a" href="" ng-click="changeConfig(monitor.Monitor.Name, monitor.Monitor.Id,monitor.Monitor.Enabled,monitor.Monitor.Function);">Configuration</a>
+                        <a class="button button-small icon icon-left ion-calendar" href="#/events/{{monitor.Monitor.Id}}">Events</a>
+                        <a class="button button-small icon icon-left ion-ios-eye" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)">Live View</a>
+                    </div>
+
+                </div>
             </div>
+            <!-- </a> -->
         </div>
-        <!-- </a> -->
     </ion-content>
 </ion-view>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 3e3f940a..822212bc 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -36,7 +36,7 @@
 
             </span>
             <article class="main">
-                <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" on-hold="onHold($index)" on-release="onRelease($index)" />
+                <img ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=single&monitor={{monitor.Monitor.Id}}&maxfps={{LoginData.maxFPS}}&scale=50&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{randomval}}" width="{{((devWidth-30)/(7-monitorSize[$index]))}}px;" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable)" on-hold="onHold($index)" on-release="onRelease($index)" />
             </article>
 
             <span ng-show="!minimal">