From cee8c7c15a4d67af6658fdf98fa444fddf32c121 Mon Sep 17 00:00:00 2001
From: PliablePixels <pliablepixels@gmail.com>
Date: Sun, 26 Jul 2015 16:54:12 -0400
Subject: Added slider with alarm frame tick marks and scrubbing

---
 www/templates/events-modal.html   |  43 ++++++--
 www/templates/events.html         | 205 ++++++++++++++++++++------------------
 www/templates/monitors-modal.html |   3 +-
 www/templates/montage.html        |   5 +-
 4 files changed, 148 insertions(+), 108 deletions(-)

(limited to 'www/templates')

diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index d3f6ab22..baead40a 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,32 +1,50 @@
 <div ng-controller="ModalCtrl">
     <ion-modal-view cache="false">
-        <ion-content style="background-color:#444444">
+        <ion-content style="background-color:#444444"  ng-cloak>
             <ion-scroll has-bouncing=false min-zoom=1 zooming="true"
                         direction="xy" style="width: 100%; ">
                 <div style="height: 100vh;">
-                    <img imageonload="finishedLoadingImage()"
-                         ng-src="{{loginData.streamingurl}}/cgi-bin/zms?source=event&mode=jpeg&event={{eventId}}&frame=1&maxfps={{loginData.maxFPS}}&replay=single&user={{loginData.username}}&pass={{loginData.password}}&connkey={{connKey}}&rand={{rand}}"
-                         ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" />
+
+                     <ul rn-carousel  rn-carousel-buffered
+                    rn-carousel-transition="none" rn-swipe-disabled="true"
+                    rn-carousel-index="mycarousel.index"
+                    rn-carousel-auto-slide="0.3" rn-carousel-pause-on-hover >
+
+                    <li ng-repeat="slide in slides">
+
+                            <img imageonload="finishedLoadingImage($index)"
+                                image-spinner-src="{{eventBasePath}}{{slide.img}}?rand={{rand}}"
+                                image-spinner-loader="lines"
+                                ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}";/>
+
+                    </li>
+                </ul>
+
                 </div>
             </ion-scroll>
+
+
+
         </ion-content>
     </ion-modal-view>
 
-    <nav mfb-menu position="br" effect="zoomin" label="collapse"
-         active-icon="ion-chevron-down" resting-icon="ion-chevron-up"
+    <nav mfb-menu position="tr" effect="zoomin" label="collapse"
+         active-icon="ion-chevron-up" resting-icon="ion-chevron-down"
          toggling-method="click">
 
         <a mfb-button icon="ion-arrow-resize" label="fit image"
            ng-click="scaleImage();"></a>
-        <a mfb-button icon="ion-reply" label="previous event"
+        <!--<a mfb-button icon="ion-reply" label="previous event"
            ng-click="controlEventStream(eventCommands.previous)"></a>
         <a mfb-button icon="ion-forward" label="next event"
-           ng-click="controlEventStream(eventCommands.next)"></a>
+           ng-click="controlEventStream(eventCommands.next)"></a>-->
         <a mfb-button icon="ion-close"
                 label="exit event view" ng-click="closeModal()"> </a>
 
     </nav>
 
+
+<!--
     <nav mfb-menu position="bl" effect="zoomin" label="collapse"
          active-icon="ion-chevron-down" resting-icon="ion-chevron-up" toggling-method="click">
         <a mfb-button icon="ion-refresh" label="refresh" ng-click="reloadView()"></a>
@@ -52,6 +70,15 @@
 
     <progress max="{{totalEventTime}}" value="{{currentEventTime}}"
               class="eventprogress"></progress>
+-->
+    <div class="events-range-modal">
 
+        <div style="width:90%">
+            <input ng-model="ionRange.index" type="text" id="mySlider2" slider options="slider_modal_options" />
+        </div>
 
+      <!-- <div class="range">
+        <input type="range"  ng-model="ionRange.index" min="0"  max="{{eFramesNum-1}}" >
+      </div>-->
+        </div>
 </div>
diff --git a/www/templates/events.html b/www/templates/events.html
index 8d34d788..4c2df5b1 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -25,125 +25,136 @@
     </div>
 
 
-    <ion-content on-tap="tapped();" delegate-handle="mainScroll">
+    <ion-content on-tap="tapped();" delegate-handle="mainScroll" lazy-scroll>
         <ion-refresher
-                       pulling-text="Tap the <i class='ion-refresh'></i> icon above to reload ..."
-                       spinner="bubbles" on-refresh="dummyDoRefresh();">
+                pulling-text="Tap the <i class='ion-refresh'></i> icon above to reload ..."
+                spinner="bubbles" on-refresh="dummyDoRefresh();">
         </ion-refresher>
 
-        <div ng-repeat="event in events| filter:search.text" >
-        <ion-item id="item-{{$index}}" ng-click="toggleGroup(event,$index,event.Event.Frames)"
-                    ng-class="{active: isGroupShown(event)}">
-              <i class="icon button-icon" ng-class="isGroupShown(event) ? 'ion-android-arrow-dropup-circle' : 'ion-android-arrow-dropdown-circle'"></i>
-
-            <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>
+        <!-- lets make sure the events list is not empty as collection repeat needs height -->
+        <div ng-if = "!eventsBeingLoaded">
+            <div class="list">
+                <div class="item" collection-repeat="event in events| filter:search.text"
+                     item-height="event.Event.height" id="item-{{$index}}">
+                    <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>
+                            <!-- ng switch -->
+                            <!-- {{event.Event.Cause}} -->
 
                             <br/>
+                            <span style="font-size:80%; color:rgb(110,110,110)">
+                                {{event.Event.Length}}s
+                            </span>
                         </div>
-                        <div ng-switch-when="Signal">
-                            <i class="ion-wifi" style="float:left; font-size:200%;"></i>
-                            <br/>
+                        <!-- col col left-->
+                        <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}}
                         </div>
-                        <div ng-switch-default>
-                            <i class="ion-ionic" style="float:left; font-size:200%;"></i>
+                    </div> <!--row-->
+
+                    <div class="row" style="font-size:80%; color:rgb(110,110,110)">
+                        <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp;
+                            {{prettify(event.Event.StartTime)}}
+                            <br/>
+                            <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
                             <br/>
                         </div>
                     </div>
-                    <!-- ng switch -->
-                    <!-- {{event.Event.Cause}} -->
-
-                    <br/>
-                    <span style="font-size:80%; color:rgb(110,110,110)">
-                        {{event.Event.Length}}s
-                    </span>
-                </div>
-                <!-- col col left-->
-                <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}}
-                </div>
-            </div>
-            <!--row-->
-
-            <div class="row" style="font-size:80%; color:rgb(110,110,110)">
-                <div class="item-text-wrap"><i class="ion-calendar"></i>&nbsp;
-                    {{prettify(event.Event.StartTime)}}
-                    <br/>
-                    <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
-                    <br/>
-                </div>
-            </div>
-            <span style="float:right">
-                <button class="button button-small icon icon-left ion-ios-eye"
-                        ng-click="openModal(event.Event.Id, event.Event.Name, event.Event.Length,event.Event.Frames)" > View Footage
-                </button>
-                <!--
-                <button class="button button-small icon icon-left ion-ios-eye"
-                        ng-click="openModalForScrub(event.Event.Id, event.Event.Name, event.Event.Length,event.Event.Frames,event.Event.BasePath)" > Scrub Footage
-                </button>-->
-                <!-- <br/>Path: {{event.Event.BasePath}}-->
-</span>
-        </ion-item>
-
-        <div ng-if = "isGroupShown(event)">
-        <ion-item class="item-accordion">
-
-
-                 <div class="range">
-
-                 <input type="range"  ng-model="ionRange.index" min="0"  max="{{event.Event.Frames-1}}">
-            </div>
-             <p>Frame {{mycarousel.index+1}} of {{event.Event.Frames}}</p>
-            <ul rn-carousel  rn-carousel-buffered   rn-carousel-transition="none" rn-swipe-disabled="true" rn-carousel-index="mycarousel.index" rn-carousel-auto-slide="0.3" rn-carousel-pause-on-hover >
-
-                <li ng-repeat="slide in slides">
-                        <img imageonload="finishedLoadingImage($index)"
-                         ng-src="{{event.Event.BasePath}}{{slide.img}}?rand={{rand}}" height="190px";/>
-
-                </li>
-            </ul>
+                    <span style="float:right">
 
+                        <button class="button button-small icon icon-left ion-ios-eye"
+                                ng-click="toggleGroup(event,$index,event.Event.Frames)" > Quick Scrub
+                        </button>
 
-           <!-- <ion-scroll direction="x">
-            <div style="float:left;display:block;">-->
-           <!--
-           <ion-slide-box nav-clear delegate-handle="eventSlideBox" does-continue="true" slide-interval="500" show-pager="false" auto-play="true" ng-init="disableSlide()" >
-            <ion-slide nav-clear ng-repeat="file in files" >
-           <img imageonload="finishedLoadingImage()"
-                         ng-src="{{event.Event.BasePath}}{{file}}?rand={{rand}}" height="190px";/>
-            </ion-slide>
 
+                        <button class="button button-small icon icon-left ion-ios-eye"
+                                ng-click="openModal(event.Event.Id, event.Event.Name, event.Event.Length,event.Event.Frames, event.Event.BasePath)" > View Footage
+                    </button>
+                    </span>
 
-            </ion-slide-box> -->
 
+                    <!-- this is the event scrub area -->
+                    <div ng-if = "isGroupShown(event)">
+                        <br/>
+                        <br/>
+                        <br/>
+
+                        <div style="width:90%">
+                            <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" />
+                        </div><br/>
+
+
+                        <!-- <div class="range" style="width:90%">
+                            <span class="events-alarm-line"></span>
+                            <input type="range"  ng-model="ionRange.index"
+                                   min="1"  max="{{event.Event.Frames}}"
+                                   step="1" list="steplist">
+                                <datalist id="steplist">
+                                    <option>0</option>
+                                    <option>10</option>
+                                    <option>15</option>
+                                    <option>20</option>
+                                    <option>25</option>
+                                </datalist>
+
+                        </div>-->
+                        <p>{{mycarousel.index+1}}/{{event.Event.Frames}} Type: {{FrameArray[mycarousel.index].Type}}</p>
+
+                        <div style="height:190px">
+                            <ul rn-carousel  rn-carousel-buffered
+                                rn-carousel-transition="none" rn-swipe-disabled="true"
+                                rn-carousel-index="mycarousel.index"
+                                rn-carousel-auto-slide="0.3" rn-carousel-pause-on-hover >
+                                <li ng-repeat="slide in slides">
+                                        <img imageonload="finishedLoadingImage($index)"
+                                         image-spinner-src="{{event.Event.BasePath}}{{slide.img}}?rand={{rand}}"
+                                             image-spinner-loader="lines"
+                                             height="190px";/>
+
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
 
-            <!-- </div>
-            </ion-scroll>-->
-          </ion-item>
+                </div>
             </div>
-
         </div>
 
         <ion-item ng-show="!events.length">
         No events to display.
         </ion-item>
 
-
-        <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="2%">
-        </ion-infinite-scroll>
+        <div ng-if = "!eventsBeingLoaded">
+            <ion-infinite-scroll ng-if="moreDataCanBeLoaded()"
+                                 icon="ion-loading-c"
+                                 on-infinite="loadMore()" distance="2%">
+            </ion-infinite-scroll>
+        </div>
     </ion-content>
 </ion-view>
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 7ca44f98..6e651795 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -8,7 +8,8 @@
 
                     <div style="height: 100vh;">
                         <img imageonload="finishedLoadingImage()"
-                             ng-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)" />
+                             image-spinner-loader="lines"
+                             image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/zms?mode=jpeg&amp;monitor={{monitorId}}&maxfps={{LoginData.maxFPS}}&buffer=1000&user={{LoginData.username}}&pass={{LoginData.password}}&rand={{rand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}" on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)" />
                     </div>
                 </ion-scroll>
         </ion-content>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index ba4d0a45..a8818478 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -42,11 +42,12 @@
                 </span>
                 <article class="main">
                     <!-- FIXME: Scale is 50% hardcoded -->
-                    <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;"
+                    <img image-spinner-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, monitor.Monitor.ControlId)"
                          on-hold="onHold($index)"
                          on-release="onRelease($index)"
-                         style="display:block;"  />
+                         style="display:block;"
+                         image-spinner-loader="lines"/>
                 </article>
             </span>
         </div>
-- 
cgit v1.2.3