From 18b05289d8042b602054a46a8b7f78667e15a1df Mon Sep 17 00:00:00 2001
From: ARC <arjunrc@gmail.com>
Date: Sat, 25 Apr 2015 15:11:33 -0400
Subject: Comments added

---
 www/templates/events-graphs.html | 32 +++++++++++---
 www/templates/events.html        | 96 ++++++++++++++++++++--------------------
 www/templates/montage.html       | 17 ++++---
 3 files changed, 85 insertions(+), 60 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html
index 2c1ce641..1571cdf3 100644
--- a/www/templates/events-graphs.html
+++ b/www/templates/events-graphs.html
@@ -3,8 +3,11 @@
   <ion-nav-buttons side="left">
             <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
         </ion-nav-buttons>
+
+        <!-- I'm calling the same controller function but with different parameters when
+            you switch between tabs -->
         <ion-tabs class="tabs-icon-top tabs-stable">
-            <ion-tab title="All Events" icon="ion-stats-bars" on-select="generateChart('All Events')">
+            <ion-tab title="All" icon="ion-stats-bars" on-select="generateChart('All Events')">
                 <ion-nav-view>
                     <ion-content class="has-header">
 
@@ -15,7 +18,19 @@
                 </ion-nav-view>
             </ion-tab>
 
-            <ion-tab title="Events in last hour" icon="ion-stats-bars" on-select="generateChart('Events in the last hour')">
+            <ion-tab title="Last Hour" icon="ion-stats-bars" on-select="generateChart('Events in the last hour')">
+                <ion-nav-view>
+
+                    <ion-content>
+                        <span></span>
+                            <div google-chart chart="chartObject"></div>
+
+
+                    </ion-content>
+                </ion-nav-view>
+            </ion-tab>
+
+             <ion-tab title="Day" icon="ion-stats-bars" on-select="generateChart('Events in the last day')">
                 <ion-nav-view>
 
                     <ion-content>
@@ -26,13 +41,18 @@
                     </ion-content>
                 </ion-nav-view>
             </ion-tab>
+             <ion-tab title="Week" icon="ion-stats-bars" on-select="generateChart('Events in the last week')">
+                <ion-nav-view>
+
+                    <ion-content>
+                        <span></span>
+                            <div google-chart chart="chartObject"></div>
 
-            <ion-tab title="Settings" icon="ion-ios-information">
-                <ion-content>
 
-                    Tab 3
-                </ion-content>
+                    </ion-content>
+                </ion-nav-view>
             </ion-tab>
+
         </ion-tabs>
 
         <!--
diff --git a/www/templates/events.html b/www/templates/events.html
index 90d79498..bf721499 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -1,11 +1,11 @@
 <ion-view view-title="Events" cache-view="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="right">
-    <a style="" class="button button-icon icon ion-stats-bars"  ng-href="#events-graphs"> </a>
+
+    <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="right">
+        <a style="" class="button button-icon icon ion-stats-bars" ng-href="#events-graphs"> </a>
         <!--<a ui-sref="app.events-graphs" class="item" ng-click="toggleMenu()">Tabs</a>-->
     </ion-nav-buttons>
 
@@ -14,59 +14,61 @@
         <ion-refresher pulling-text="Pull to reload Events..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
         <ion-list>
             <div ng-repeat="event in events">
-                
-                    <ion-item>
 
-                        <div class="row">
-                            <div class="col col-left">
-                                <div ng-switch on="event.Event.Cause">
-                                    <div ng-switch-when="Motion">
-                                        <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
-                                        <br/>
-                                    </div>
-                                    <div ng-switch-when="Signal">
-                                        <i class="ion-wifi" style="float:left; font-size:200%;"></i>
-                                        <br/>
-                                    </div>
-                                    <div ng-switch-default>
-                                        <i class="ion-ionic" style="float:left; font-size:200%;"></i>
-                                        <br/>
-                                    </div>
-                                </div>
-                                <!-- ng switch -->
-                                <!-- {{event.Event.Cause}} -->
+                <ion-item>
 
-                                <br/> <span style="font-size:80%; color:rgb(110,110,110)">{{event.Event.Length}}s</span>
+                    <div class="row">
+                        <div class="col col-left">
+                            <!-- this ngswitch displays different icons
+                                depending on the cause of the event -->
+                            <div ng-switch on="event.Event.Cause">
+                                <div ng-switch-when="Motion">
+                                    <i class="ion-android-walk" style="float:left; font-size:200%;"></i>
+                                    <br/>
+                                </div>
+                                <div ng-switch-when="Signal">
+                                    <i class="ion-wifi" style="float:left; font-size:200%;"></i>
+                                    <br/>
+                                </div>
+                                <div ng-switch-default>
+                                    <i class="ion-ionic" style="float:left; font-size:200%;"></i>
+                                    <br/>
+                                </div>
                             </div>
-                            <!-- col col left-->
+                            <!-- ng switch -->
+                            <!-- {{event.Event.Cause}} -->
 
-                            <div class="col col-80">
-                                <div class="item-text-wrap"><i class="ion-monitor"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}})</div>
+                            <br/> <span style="font-size:80%; color:rgb(110,110,110)">{{event.Event.Length}}s</span>
+                        </div>
+                        <!-- col col left-->
 
-                                <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
-                                <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
-                                <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}
-                                <br/>
-                            </div>
+                        <div class="col col-80">
+                            <div class="item-text-wrap"><i class="ion-monitor"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}})</div>
+
+                            <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
+                            <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
+                            <i class="ion-arrow-graph-up-right"></i> {{event.Event.TotScore}}
+                            <br/>
+                        </div>
 
-                            <!--<div class="col">
+                        <!--<div class="col">
                                 <img ng-src="{{event.image}}" style="float:right; height:40px;" />
                             </div> -->
 
-                        </div>
+                    </div>
 
-                        <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-                            <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp;{{event.Event.StartTime}}
-                                <br/>
-                                <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
-                                <br/>
-                            </div>
+                    <div class="row" style="font-size:80%; color:rgb(110,110,110)">
+                        <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp;{{event.Event.StartTime}}
+                            <br/>
+                            <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
+                            <br/>
                         </div>
+                    </div>
+
+                </ion-item>
 
-                    </ion-item>
-                
             </div>
         </ion-list>
 
     </ion-content>
-</ion-view>
\ No newline at end of file
+</ion-view>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 6eab4f58..3ef1885b 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -1,10 +1,10 @@
 <ion-view title="Montage View" class="bar-stable" cache-view="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 padding="true">
-        
+
         <ion-refresher pulling-text="Pull to reload Monitors..." spinner="bubbles" on-refresh="doRefresh()"></ion-refresher>
         <!-- Hi:ROOT: {{montageSize}} LOCAL {{slider.monsize}} -->
         <div class=" range range-positive">
@@ -12,7 +12,7 @@
 
             <input type="range" ng-model="slider.monsize" min="1" max="6">
             <i class="icon ion-arrow-expand"></i>
-            
+
         </div>
         <!-- Hi:{{slider.monsize}} {{devWidth}} -->
         <div class="wrapper">
@@ -22,6 +22,9 @@
           
            <header class="header">&nbsp;<i class="ion-monitor"></i> {{monitor.Monitor.Name}}&nbsp;</header>
                <article class="main">
+                <!-- does not route via APIs. As of today, there is no way to do this via apis.
+                 FIXME: I should probably not pass username and password here - instead go the http interceptor
+                 and auth token mode -->
                 <img  ng-src="{{LoginData.url}}/cgi-bin/nph-zms?mode=jpeg&amp;monitor={{monitor.Monitor.Id}}&scale=100&maxfps=3&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" width="{{((devWidth-30)/(7-slider.monsize))}}px;"   />
                     <!-- <br/><i class="ion-monitor"></i> Hello -->
      
@@ -43,4 +46,4 @@
         </div>
     </ion-content>
 
-</ion-view>
\ No newline at end of file
+</ion-view>
-- 
cgit v1.2.3