integrated event scrubbing with direct image access - need to clean up code

6 files changed, 136 insertions, 63 deletions

diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 610ef068..d3f6ab22 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -1,53 +1,57 @@
-<ion-modal-view cache="false">
-    <ion-content style="background-color:#444444">
-        <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':imageStyle==true, 'zm-image-crop':imageStyle==false}" />
-            </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"
-     toggling-method="click">
-    <button mfb-button icon="ion-close"
-            label="exit event view" ng-click="closeModal()">
-    </button>
-    <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>
-</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>
-    <a mfb-button icon="ion-pause" label="pause"
-       ng-click="controlEventStream(eventCommands.pause)"></a>
-    <a mfb-button icon="ion-play" label="play"
-       ng-click="controlEventStream(eventCommands.play)"></a>
-</nav>
-
-
-<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-ios-fastforward" label="fast forward"
-       ng-click="controlEventStream(eventCommands.fastFwd)"></a>
-    <a mfb-button icon="ion-ios-fastforward-outline" label="slow forward"
-       ng-click="controlEventStream(eventCommands.slowFwd)"></a>
-    <a mfb-button icon="ion-ios-rewind" label="fast rewind"
-       ng-click="controlEventStream(eventCommands.fastRev)"></a>
-    <a mfb-button icon="ion-ios-rewind-outline" label="slow rewind"
-       ng-click="controlEventStream(eventCommands.slowRev)"></a>
-</nav>
-
-<progress max="{{totalEventTime}}" value="{{currentEventTime}}"
-          class="eventprogress"></progress>
-
-
-
+<div ng-controller="ModalCtrl">
+    <ion-modal-view cache="false">
+        <ion-content style="background-color:#444444">
+            <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}" />
+                </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"
+         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"
+           ng-click="controlEventStream(eventCommands.previous)"></a>
+        <a mfb-button icon="ion-forward" label="next event"
+           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>
+        <a mfb-button icon="ion-pause" label="pause"
+           ng-click="controlEventStream(eventCommands.pause)"></a>
+        <a mfb-button icon="ion-play" label="play"
+           ng-click="controlEventStream(eventCommands.play)"></a>
+    </nav>
+
+
+    <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-ios-fastforward" label="fast forward"
+           ng-click="controlEventStream(eventCommands.fastFwd)"></a>
+        <a mfb-button icon="ion-ios-fastforward-outline" label="slow forward"
+           ng-click="controlEventStream(eventCommands.slowFwd)"></a>
+        <a mfb-button icon="ion-ios-rewind" label="fast rewind"
+           ng-click="controlEventStream(eventCommands.fastRev)"></a>
+        <a mfb-button icon="ion-ios-rewind-outline" label="slow rewind"
+           ng-click="controlEventStream(eventCommands.slowRev)"></a>
+    </nav>
+
+    <progress max="{{totalEventTime}}" value="{{currentEventTime}}"
+              class="eventprogress"></progress>
+
+
+</div>
diff --git a/www/templates/events.html b/www/templates/events.html
index bf1ddc5e..8d34d788 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -25,13 +25,16 @@
     </div>
 
 
-    <ion-content on-tap="tapped();">
+    <ion-content on-tap="tapped();" delegate-handle="mainScroll">
         <ion-refresher
                        pulling-text="Tap the <i class='ion-refresh'></i> icon above to reload ..."
                        spinner="bubbles" on-refresh="dummyDoRefresh();">
         </ion-refresher>
 
-        <ion-item collection-repeat="event in events| filter:search.text">
+        <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">
@@ -40,7 +43,9 @@
 
                     <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">
@@ -86,9 +91,53 @@
                 <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>
-            </span>
+                <!--
+                <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>
+
+
+           <!-- <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>
+
+
+            </ion-slide-box> -->
+
+
+            <!-- </div>
+            </ion-scroll>-->
+          </ion-item>
+            </div>
+
+        </div>
+
         <ion-item ng-show="!events.length">
         No events to display.
         </ion-item>
diff --git a/www/templates/help/montage-help.html b/www/templates/help/montage-help.html
new file mode 100644
index 00000000..f9d6955f
--- /dev/null
+++ b/www/templates/help/montage-help.html
@@ -0,0 +1,15 @@
+<ion-popover-view style="width:90%">
+    <ion-header-bar class="item item-divider">
+                Montage Help
+        </ion-header-bar>
+        <ion-content padding="true" >
+          <div class="row">
+            <div class="col col-10">
+            <i class="ion-log-in"></i>
+            </div>
+            <div class="col col-90">
+            There
+            </div>
+          </div>
+        </ion-content>
+      </ion-popover-view>
diff --git a/www/templates/login.html b/www/templates/login.html
index 764a2842..2178b491 100644
--- a/www/templates/login.html
+++ b/www/templates/login.html
@@ -10,19 +10,21 @@
                 <i class="ion-android-home" style="font-size:150%"></i>
                 ZoneMinder Settings
             </span>
-            <label class="item item-input item-floating-label">
+
+            <label class="item item-input item-floating-label" >
                 <span class="input-label">username</span>
                 <input autocapitalize="none" autocomplete="off"
                        autocorrect="off" type="text"
                        placeholder="username"
                        ng-model="loginData.username">
             </label>
-            <label class="item item-input item-floating-label">
+
+            <label class="item item-input item-floating-label" >
                 <span class="input-label">password</span>
                 <input type="password" placeholder="password"
                        ng-model="loginData.password">
             </label>
-            <label class="item item-input item-floating-label">
+            <label class="item item-input item-floating-label" >
                 <span class="input-label">ZM portal url</span>
                 <input autocapitalize="none" autocomplete="off"
                        autocorrect="off" type="text"
@@ -30,7 +32,7 @@
                        ng-model="loginData.url" ng-keyup="portalKeypress($event)">
             </label>
 
-            <label class="item item-input item-floating-label">
+            <label class="item item-input item-floating-label" >
                 <span class="input-label">base path to cgi-bin</span>
                 <input autocapitalize="none" autocomplete="off"
                        autocorrect="off" type="text"
@@ -38,7 +40,7 @@
                        ng-model="loginData.streamingurl">
             </label>
 
-            <label class="item item-input item-floating-label">
+            <label class="item item-input item-floating-label" >
                 <span class="input-label">ZM api url</span>
                 <input autocapitalize="none"
                        autocomplete="off" autocorrect="off"
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index afba98b1..7ca44f98 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -8,7 +8,7 @@
 
                     <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':imageStyle==true, 'zm-image-crop':imageStyle==false}" on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)" />
+                             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)" />
                     </div>
                 </ion-scroll>
         </ion-content>
diff --git a/www/templates/montage.html b/www/templates/montage.html
index a40c312b..ba4d0a45 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -13,6 +13,7 @@
             <button class="button button-icon button-clear ion-android-contract"
                     ng-click="switchMinimal()">
             </button>
+        <!--<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">
@@ -20,6 +21,7 @@
                        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>
@@ -30,6 +32,7 @@
                 </div>
         </span>
 
+
         <div class="wrapper">
             <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit"
                   ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow'">
@@ -43,7 +46,7 @@
                          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;"  />
                 </article>
             </span>
         </div>