Timeline feature (Experimental)

7 files changed, 119 insertions, 17 deletions

diff --git a/www/templates/events-date-time-filter.html b/www/templates/events-date-time-filter.html
new file mode 100644
index 00000000..f2e328e3
--- /dev/null
+++ b/www/templates/events-date-time-filter.html
@@ -0,0 +1,38 @@
+<ion-view view-title="Filter Events">
+
+
+
+    <ion-content>
+        <label class="item item-input">
+            <span class="input-label">From Date:</span>
+            <input type="date" ng-model="$root.fromDate">
+        </label>
+        <label class="item item-input">
+                   <span class="input-label">From Time:</span>
+                    <input type="time" ng-model="$root.fromTime">
+        </label>
+        <label class="item item-input">
+                    <span class="input-label">To Date</span>
+                    <input type="date" ng-model="$root.toDate">
+        </label>
+        <label class="item item-input">
+                    <span class="input-label">To Time</span>
+                    <input type="time" ng-model="$root.toTime">
+         </label>
+
+        <br/>
+        <center>
+              <button class="button"
+                                ng-click="saveFilters();" > Save
+                        </button>
+        <button class="button"
+                                ng-click="removeFilters();" > Reset
+                        </button>
+
+
+
+</center>
+
+    </ion-content>
+
+</ion-view>
diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html
index 2d488170..8b4806e8 100644
--- a/www/templates/events-graphs.html
+++ b/www/templates/events-graphs.html
@@ -12,12 +12,16 @@
     -->
 
     <!-- All Events view -->
-
+ <div id="visualization"></div>
     <ion-tabs class="tabs-icon-top tabs-stable">
         <ion-tab title="All" icon="ion-stats-bars" on-select="generateTCChart(0,'All Events',0)">
             <ion-nav-view>
                 <ion-content class="has-header">
+
                     <div ng-controller="zmApp.EventsGraphsCtrl">
+
+
+
                     <canvas tc-chartjs-bar chart-data="chart.data"
                             chart-options="chart.options"
                             ng-click="handleChartClick($event)" chart="chartwithbars">
diff --git a/www/templates/events-popover.html b/www/templates/events-popover.html
new file mode 100644
index 00000000..0de4f857
--- /dev/null
+++ b/www/templates/events-popover.html
@@ -0,0 +1,15 @@
+<ion-popover-view class="fit">
+        <ion-content>
+          <div class="list" ng-click="popover.hide()">
+            <a class="item" ng-href="" ng-click="popover.hide();$state.go('events-date-time-filter');">Filter by Date/Time</a>
+
+            <a class="item" ng-href="" ng-click=" popover.hide();$state.go('events-graphs');" >
+              Event Graphs
+            </a>
+            <a class="item" ng-href="" ng-click="popover.hide();doRefresh();">
+              Refresh
+            </a>
+          </div>
+        </ion-content>
+      </ion-popover-view>
+
diff --git a/www/templates/events.html b/www/templates/events.html
index efd6cfd3..424f916a 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -1,4 +1,5 @@
-<ion-view view-title="" cache-view="false">
+<ion-view  cache-view="false">
+    <ion-nav-title>{{scrollPosition();}}</ion-nav-title>
     <ion-nav-buttons side="left">
         <button class="button button-icon button-clear ion-navicon"
                 ng-click="openMenu()">
@@ -6,16 +7,22 @@
     </ion-nav-buttons>
 
     <ion-nav-buttons side="right">
+        <a style="" class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)";> </a>
+        <!--
         <a style="" class="button button-icon icon ion-stats-bars"
            ng-href="#events-graphs"> </a>
         <a style="" class="button button-icon icon ion-refresh" ng-href=""
-           ng-click="doRefresh();"> </a>
+           ng-click="doRefresh();"> </a>-->
         <a style="" class="button button-icon icon ion-search" ng-href=""
            ng-click="searchClicked();"> </a>
     </ion-nav-buttons>
 
+
+
+
     <div ng-if="showSearch">
         <ion-header-bar class="bar bar-subheader item-input-inset">
+
             <label class="item-input-wrapper">
                 <i class="icon ion-ios7-search placeholder-icon"></i>
                 <input type="search" placeholder="Search"
@@ -25,9 +32,9 @@
     </div>
 
 
-    <ion-content on-tap="tapped();" delegate-handle="mainScroll" lazy-scroll>
+    <ion-content on-tap="tapped();" delegate-handle="mainScroll" lazy-scroll has-subheader="true">
         <ion-refresher
-                pulling-text="Tap the <i class='ion-refresh'></i> icon above to reload ..."
+                       pulling-text="Tap <i class='ion-android-more-vertical'></i> and <i class='ion-refresh'></i> to refresh"
                 spinner="bubbles" on-refresh="dummyDoRefresh();">
         </ion-refresher>
 
@@ -36,6 +43,14 @@
             <div class="list">
                 <div class="item" collection-repeat="event in events| filter:search.text"
                      item-height="event.Event.height" id="item-{{$index}}">
+
+                    <!--<span class="events-filter-on" ng-if="isEventFilterOn">Filter</span>-->
+
+                    <span style="float:right;margin-top:-18px;background-color:#6d0909;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}</span>
+
+                    <span style="float:left;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;width:90px;border-radius: 0px 0px 5px 5px;">&nbsp;&nbsp;&nbsp;<i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}}</span>
+
+
                     <div class="row">
                         <div class="col col-left">
                             <!-- this ngswitch displays different icons
@@ -170,4 +185,9 @@
             </ion-infinite-scroll>
         </div>
     </ion-content>
+    <div  class="events-float-filter" ng-if="isEventFilterOn">Filter On</div>
 </ion-view>
+
+
+
+
diff --git a/www/templates/montage.html b/www/templates/montage.html
index f5d50537..689329b3 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -16,18 +16,18 @@
         <!--<button class="button button-icon ion-ios-help-outline" ng-click="popover.show($event)"></button>-->
         </ion-nav-buttons>
 
-    <ion-content has-bouncing="false" style="background-color:#e5e5e5">
+    <ion-content has-bouncing="false" style="background-color:#444444">
         <ion-refresher pulling-text="Pull to reload Monitors..."
                        spinner="bubbles" on-refresh="doRefresh()">
         </ion-refresher>
 
         <!--{{stateofSlide}} Status-->
         <span ng-show="!minimal">
-                <div class=" range range-positive">
-                    <i class="icon ion-arrow-shrink"></i>
+                <div class="range range-positive">
+                    <i style="color:#bbbbbb" class="icon ion-arrow-shrink"></i>
                     <input type="range" ng-model="slider.monsize" min="1"
                            max="6" ng-change="sliderChanged(slider.monsize)">
-                    <i class="icon ion-arrow-expand"></i>
+                    <i style="color:#bbbbbb" class="icon ion-arrow-expand"></i>
 
                 </div>
         </span>
diff --git a/www/templates/timeline-popover.html b/www/templates/timeline-popover.html
new file mode 100644
index 00000000..e6f17359
--- /dev/null
+++ b/www/templates/timeline-popover.html
@@ -0,0 +1,20 @@
+<ion-popover-view class="fit">
+        <ion-content>
+          <div class="list" ng-click="popover.hide()">
+            <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(0);">Month</a>
+
+            <a class="item" ng-href="" ng-click=" popover.hide();buttonClicked(1);" >
+              Week
+            </a>
+            <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(2);">
+              Day
+            </a>
+
+              <a class="item" ng-href="" ng-click="popover.hide();buttonClicked(3);">
+              Custom Range
+            </a>
+
+          </div>
+        </ion-content>
+      </ion-popover-view>
+
diff --git a/www/templates/timeline.html b/www/templates/timeline.html
index 75d69f03..9dea9d98 100644
--- a/www/templates/timeline.html
+++ b/www/templates/timeline.html
@@ -1,17 +1,27 @@
 <meta name="format-detection" content="telephone=no" />
-<ion-view title="Timeline" cache-view="false">
+<ion-view title="" cache-view="false">
     <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-navicon" ng-click="openMenu()"></button>&nbsp;
+         <button class="button button-icon button-clear ion-arrow-left-c" ng-click="move(0.2)"></button>
+        <button class="button button-icon button-clear ion-arrow-right-c" ng-click="move(-0.2)"></button>
+
+
+
+
     </ion-nav-buttons>
 
 <ion-nav-buttons side="right">
-        <a style="" class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)";> </a>
 
+    <button class="button button-icon button-clear ion-arrow-shrink" ng-click="fit()"></button>
+ <button class="button button-icon button-clear ion-log-in" ng-click="zoom(-0.2)"></button>
+        <button class="button button-icon button-clear ion-log-out" ng-click="zoom(0.2)"></button>&nbsp;
+     <a style="" class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)";> </a>
     </ion-nav-buttons>
     <!--<ion-content data-tap-disabled="true">-->
     <ion-content>
         <div style="padding-left:15px; font-size:10px; color:grey">
 
+        Latest {{maxItems}} events between:
         {{prettify(fromDate)}} - {{prettify(toDate)}}
             </div>
        <!-- <div style="float:left">
@@ -41,11 +51,6 @@
             <div id="visualization"></div>
         </div>
         <br/>
-        <center>
-        <button class="button button-small button-dark" ng-click="fit()">
-  Fit data to screen
-</button>
-            </center>
 
     </ion-content>
 </ion-view>