summaryrefslogtreecommitdiff
path: root/www/templates
diff options
context:
space:
mode:
Diffstat (limited to 'www/templates')
-rw-r--r--www/templates/events-modal.html43
-rw-r--r--www/templates/events.html205
-rw-r--r--www/templates/monitors-modal.html3
-rw-r--r--www/templates/montage.html5
4 files changed, 148 insertions, 108 deletions
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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-07 10:46:15 +0000