diff options
Diffstat (limited to 'www/templates/events.html')
| -rw-r--r-- | www/templates/events.html | 305 |
1 files changed, 93 insertions, 212 deletions
diff --git a/www/templates/events.html b/www/templates/events.html index af2a7f89..48163d2e 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -1,82 +1,49 @@ - <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()"> </button> - <button class="button button-icon icon ion-ios-minus-outline" ng-click="eventList.showDelete = !eventList.showDelete;"></button> - <button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge" ng-click="handleAlarms();" ng-if="$root.isAlarm"></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> <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="{{'kSearch'|translate}}" ng-model="search.text" autocorrect="off" autocomplete="off"> </label> </ion-header-bar> </div> - - - <!-- collection repeat forces js scrolling, thing to remember --> - - <ion-content scroll-sista ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll> + <ion-content scroll-sista ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll> <!-- needed for header-shrink so first item doesn't go below header--> - <!-- <div style="height: 64px;"></div>--> + <!-- <div style="height: 64px;"></div>--> <!-- lets make sure the events list is not empty as collection repeat needs height --> - <div ng-if="!eventsBeingLoaded"> - <ion-list show-delete="eventList.showDelete"> - <ion-item collection-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}" > - - + <ion-item collection-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}"> <span style="float:left;margin-top:-18px;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;"> <i class="ion-calendar"></i> {{prettifyTime(event.Event.StartTime)}} {{tzAbbr}} </span> - - <span style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;"> <i class="ion-arrow-right-b"></i> {{event.Event.humanizeTime}} <span ng-if="!event.Event.EndTime">(<span translate="kRecordingProgress"></span>)</span> </span> - - - - <span style="float:right;margin-top:-18px;background-color:#444444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;"> <i class="ion-clock"></i> {{prettifyDate(event.Event.StartTime)}} {{tzAbbr}} </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> - - <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i> - + <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i> <br/> </div> <div ng-switch-when="Signal"> <i class="ion-wifi" style="float:left; font-size:200%;"></i> - <i ng-class="(event.Event.DefaultVideo !== undefined && event.Event.DefaultVideo!='')? 'ion-ios-videocam':'ion-images'" style="float:left; padding-left:5px; font-size:100%;"></i> - <br/> </div> <div ng-switch-default> @@ -87,7 +54,6 @@ </div> <!-- ng switch --> <!-- {{event.Event.Cause}} --> - <br/> <span style="font-size:80%; color:rgb(110,110,110)"> {{event.Event.Length}}s @@ -99,14 +65,12 @@ <i class="ion-ios-videocam-outline"></i> <b>{{event.Event.MonitorName}}</b> ({{event.Event.Name}}) </div> - <i class="ion-images"></i> {{event.Event.Frames}} <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} <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> {{prettify(event.Event.StartTime)}} {{tzAbbr}} <br/> @@ -114,178 +78,113 @@ <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}--> </div> </div> - <span style="float:right"> <div ng-if="event.Event.EndTime || 1"> <button class="button button-small button-outline icon icon-left ion-stats-bars" ng-click="closeIfOpen(event);analyzeEvent(event)" > <span translate="kAnalyze"></span> - </button> - - <button class="button button-outline button-small icon icon-left ion-ios-eye" - ng-click="toggleGroupScrub(event,$index,event.Event.Frames)" > <span translate="kScrub"></span> - </button> - - <button ng-if="event.Event.AlarmFrames > 0" class="button button-outline button-small icon icon-left ion-ios-bell" - ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)" > <span translate="kAlarms"></span> - </button> - - - <button class="button button-outline button-small icon icon-left ion-ios-eye" - ng-click="closeIfOpen(event);openModal(event)" > <span translate="kFootage"></span> - </button> - </div> - - - </span> - - - <!-- this is the event scrub/alarm frames area --> - <div ng-if="isGroupShown(event)"> - - - - <div ng-if="groupType=='alarms'"> - <br/><br/> - - <div style="height:190px;"> - <p> - <!--scroll <i class="icon ion-arrow-left-c"></i> + </button> + <button class="button button-outline button-small icon icon-left ion-ios-eye" ng-click="toggleGroupScrub(event,$index,event.Event.Frames)"> <span translate="kScrub"></span> + </button> + <button ng-if="event.Event.AlarmFrames > 0" class="button button-outline button-small icon icon-left ion-ios-bell" ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)"> <span translate="kAlarms"></span> + </button> + <button class="button button-outline button-small icon icon-left ion-ios-eye" ng-click="closeIfOpen(event);openModal(event)"> <span translate="kFootage"></span> + </button> + </div> + </span> + <!-- this is the event scrub/alarm frames area --> + <div ng-if="isGroupShown(event)"> + <div ng-if="groupType=='alarms'"> + <br/> + <br/> + <div style="height:190px;"> + <p> + <!--scroll <i class="icon ion-arrow-left-c"></i> <i class="icon ion-arrow-right-c"></i>--> - - <button ng-click="toggleTypeOfAlarms()" class="button button-small button-assertive button-outline"> - <span translate="kType"></span>:{{typeOfFrames}} - </button> - </p> - - - <ion-scroll direction="x" overflow-scroll="false"> - - <span ng-repeat="alarm in alarm_images | selectFrames: typeOfFrames"> + <button ng-click="toggleTypeOfAlarms()" class="button button-small button-assertive button-outline"> + <span translate="kType"></span>:{{typeOfFrames}} + </button> + </p> + <ion-scroll direction="x" overflow-scroll="false"> + <span ng-repeat="alarm in alarm_images | selectFrames: typeOfFrames"> <figure class = "animated slideInLeft" style="display:inline-block"> <!--{{event.Event.baseURL}} p:{{event.Event.imageMode}}--> - <figcaption class="smallnote"><span translate="kFrame"></span>:{{alarm.frameid}},<span translate="kScore"></span>:{{alarm.score}}, <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption> - <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> - - <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> - - - - - </figure> - - </span> - - </ion-scroll> - </div> - </div> - <div ng-if="groupType=='scrub'"> - <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false"> - - - <br/> - <br/> - <br/> - <div style="width:90%"> - <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" /> - </div> - - <br/> - - - - <p>{{mycarousel.index+1}}/{{event.Event.Frames}} <span translate="kType"></span>: {{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="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}"> - <li ng-repeat="slide in slides"> - - - <img ng-if="event.Event.imageMode=='path'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> - - <img ng-if="event.Event.imageMode=='fid'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{slide.id}}" image-spinner-loader="lines" height="190px" ;/> - - - - <br/> - - - </li> - </ul> - </div> - </div> - <!-- no DefaultVideo --> - - - <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true"> - - <br/> - <br/> + <figcaption class="smallnote"><span translate="kFrame"></span>:{{alarm.frameid}},<span translate="kScore"></span>:{{alarm.score}}, <span translate="kTime"></span>: {{prettifyTimeSec(alarm.time)}}</figcaption> + <img ng-if="event.Event.imageMode=='path'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{alarm.fname}}&height=380" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> + <img ng-if="event.Event.imageMode=='fid'" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}" style="width: auto; height: auto;max-width: 100%;max-height: 170px" on-tap="showImage(event.Event.baseURL,event.Event.relativePath,alarm.fname, alarm.frameid, event.Event.Id, event.Event.imageMode, alarm.id, alarm_images, $index)" /> + </figure> + </span> + </ion-scroll> + </div> + </div> + <div ng-if="groupType=='scrub'"> + <div ng-if="event.Event.DefaultVideo=='' || loginData.enableh264==false"> + <br/> + <br/> + <br/> + <div style="width:90%"> + <input ng-model="ionRange.index" type="text" id="mySlider1" slider options="slider_options" /> + </div> + <br/> + <p>{{mycarousel.index+1}}/{{event.Event.Frames}} <span translate="kType"></span>: {{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="{{event.Event.Length/event.Event.Frames}}" rn-carousel-pause-on-hover rn-platform="{{$root.platformOS}}"> + <li ng-repeat="slide in slides"> + <img ng-if="event.Event.imageMode=='path'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{slide.img}}&height=380" image-spinner-loader="lines" height="190px" ;/> + <img ng-if="event.Event.imageMode=='fid'" imageonload="finishedLoadingImage($index)" image-spinner-src="{{event.Event.baseURL}}/index.php?view=image&fid={{slide.id}}" image-spinner-loader="lines" height="190px" ;/> <br/> - - - <div class="videogular-container"> - <videogular vg-theme="event.Event.video.config.theme" - vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true"> - <vg-overlay-play></vg-overlay-play> - <vg-controls> - <vg-play-pause-button></vg-play-pause-button> - <vg-scrub-bar> - <vg-scrub-bar-current-time></vg-scrub-bar-current-time> - </vg-scrub-bar> - <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display> - <vg-fullscreen-button></vg-fullscreen-button> - <vg-volume> - <vg-mute-button></vg-mute-button> - </vg-volume> - </vg-controls> - - <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false"> - </vg-media> - - - </videogular> - </div> - - </div> - <!-- DefaultVideo --> - </div> <!-- type = scrub --> + </li> + </ul> + </div> + </div> + <!-- no DefaultVideo --> + <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true"> + <br/> + <br/> + <br/> + <div class="videogular-container"> + <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'" vg-responsive="true"> + <vg-overlay-play></vg-overlay-play> + <vg-controls> + <vg-play-pause-button></vg-play-pause-button> + <vg-scrub-bar> + <vg-scrub-bar-current-time></vg-scrub-bar-current-time> + </vg-scrub-bar> + <vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display> + <vg-fullscreen-button></vg-fullscreen-button> + <vg-volume> + <vg-mute-button></vg-mute-button> + </vg-volume> + </vg-controls> + <vg-media vg-src="event.Event.video.config.sources" vg-native-controls="false"> + </vg-media> + </videogular> </div> - <!-- isGroupShown --> - - <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)"> - </ion-delete-button> - - - - </ion-item> - </ion-list> + </div> + <!-- DefaultVideo --> + </div> + <!-- type = scrub --> + </div> + <!-- isGroupShown --> + <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)"> + </ion-delete-button> + </ion-item> + </ion-list> </div> - <ion-item ng-show="!events.length"> <span translate="kNoEvents"></span> </ion-item> - <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> - - - <div class="events-float-filter" ng-if="isEventFilterOn" on-tap="filterTapped();"><span translate="kFilterOn"></span></div> - - <div class="bwmode" ng-if="$root.runMode=='lowbw'"> - <span translate="kLowBWDisplay"></span> - </div> - - + <div class="bwmode" ng-if="$root.runMode=='lowbw'"> + <span translate="kLowBWDisplay"></span> + </div> <ion-pull-up-footer class="zmPullup" on-expand="footerExpand()" on-collapse="footerCollapse()" initial-state="minimized" default-behavior="expand"> - <ion-pull-up-handle width="100" height="25" toggle="ion-chevron-up ion-chevron-down" style="border-radius: 25px 25px 0 0"> <i class="icon ion-chevron-up"></i> </ion-pull-up-handle> @@ -293,74 +192,56 @@ <h1 class="title" ion-pull-up-trigger><span translate="kLatestEvents"></span></h1> </ion-pull-up-bar> <ion-pull-up-content scroll="true"> - <div class="list list-inset"> <div class="item item-divider"><span translate="k1HourSummary"></span></div> <div ng-repeat="hour in hours|filter:{ monitor: '!'+'(Unknown)'}" id="hour-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'hour',hour.mid);"> <b>{{hour.monitor}}</b> {{hour.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - <div class="list list-inset"> <div class="item item-divider"><span translate="k1DaySummary"></span></div> <div ng-repeat="day in days|filter:{ monitor: '!'+'(Unknown)'}" id="day-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'day',day.mid);"> <b>{{day.monitor}}</b> {{day.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - - <div class="list list-inset"> <div class="item item-divider"><span translate="k1WeekSummary"></span></div> <div ng-repeat="week in weeks|filter:{ monitor: '!'+'(Unknown)'}" id="week-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'week',week.mid);"> <b>{{week.monitor}}</b> {{week.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - <div class="list list-inset"> <div class="item item-divider"><span translate="k1MonthSummary"></span></div> <div ng-repeat="month in months|filter:{ monitor: '!'+'(Unknown)'}" id="month-{{$index}}"> - <span style="color:black"> <a class="item item-icon-right" href="" ng-click="showEvents('1', 'months',month.mid);"> <b>{{month.monitor}}</b> {{month.events}} <span translate="kEvents"></span> - <i class="icon ion-android-arrow-dropright"></i> + <i class="icon ion-android-arrow-dropright"></i> </a> </span> - </div> </div> - <br/> <br/> - - </ion-pull-up-content> </ion-pull-up-footer> - - </ion-view> |