diff options
Diffstat (limited to 'www/templates/events.html')
| -rw-r--r-- | www/templates/events.html | 299 |
1 files changed, 299 insertions, 0 deletions
diff --git a/www/templates/events.html b/www/templates/events.html new file mode 100644 index 00000000..01aef4a8 --- /dev/null +++ b/www/templates/events.html @@ -0,0 +1,299 @@ +<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> + <!-- needed for header-shrink so first item doesn't go below header--> + <!-- <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 | eventListFilter + " item-height="event.Event.height" id="item-{{$index}}" on-swipe-left="checkSwipe($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> + <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> + <i class="ion-ionic" 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 --> + <!-- {{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"> + + <b><i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red"> </i>{{event.Event.MonitorName}}</b> ({{event.Event.Id}}) + <button ng-if="gifshotSupported && loginData.enableGIFMP4 " class="button button-small button-clear icon gif-icon" ng-click="permissionsDownload(event)"> + </button> + + + + <a ng-if="(event.Event.DefaultVideo!='' && event.Event.DefaultVideo!==undefined) && $root.platformOS=='desktop' && loginData.enableGIFMP4 " class="button button-clear button-small icon mp4-icon" href="{{event.Event.videoPath}}" download="{{event.Event.Id}}-video.mp4" ng-click="mp4warning()"></a> + + <button ng-if="event.Event.DefaultVideo!='' && event.Event.DefaultVideo!=undefined && $root.platformOS!='desktop' && loginData.enableGIFMP4 " class="button button-small button-clear icon mp4-icon" ng-click="downloadFileToDevice(event.Event.videoPath, event.Event.Id)"> + </button> + + + </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-ios-pricetags-outline"></i> {{event.Event.Name}}<br/> + <i class="ion-calendar"></i> {{prettify(event.Event.StartTime)}} {{tzAbbr}} + <br/> + <i class="ion-clipboard"></i> {{event.Event.Notes}} + + <!-- <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> + <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> + <button + ng-click="toggleMotionOutline()" class="button button-small button-assertive button-outline"> + <span translate="kOutlineMotion"></span>:{{outlineMotion}} + </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'" ng-src="{{event.Event.baseURL}}/index.php?view=image&path={{event.Event.relativePath}}{{outlineMotion? alarm.aname:alarm.fname}}&height=380" fallback-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'" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{alarm.id}}{{outlineMotionParam}}" fallback-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/> + <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 --> + </div> + <!-- isGroupShown --> + <ion-delete-button class="ion-minus-circled" ng-click="deleteEvent(event.Event.Id, $index)"> + </ion-delete-button> + + + <ion-option-button ng-if="event.Event.Archived == 1" class="button-balanced" ng-click= "archiveUnarchiveEvent($index,event.Event.Id)">{{'kUnflag' | translate}}</ion-option-button> + + <ion-option-button ng-if="event.Event.Archived == 0" class="button-assertive" ng-click="archiveUnarchiveEvent($index, event.Event.Id)" >{{'kFlag' | translate}}</ion-option-button> + + + <!-- hack to make sure swipe left displays well + if there is no content and our list height is set + to a larger height, the swipe display acts weird --> + + <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> + + </ion-item> + </ion-list> + </div> + <!-- !eventsBeingLoaded--> + + + <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> + <canvas id="canvas" class="hiddengifcanvas"></canvas> + + + + </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> + <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> + <ion-pull-up-bar> + <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> + </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> + </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> + </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> + </a> + </span> + </div> + + </div> + <br/> + <br/> + </ion-pull-up-content> + </ion-pull-up-footer> +</ion-view> |