path: root/www/templates/events.html

<ion-view cache-view="false">
  <ion-nav-title>{{navTitle;}}</ion-nav-title>
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
    </button>&nbsp;
    <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 class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)"
      ;>&nbsp;&nbsp;&nbsp;</a>
    <a 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 class="notch-ready" ng-cloak on-tap="tapped();" delegate-handle="mainScroll" mouse-wheel-scroll on-scroll="scrolling();" >
  
    <!-- 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 force-refresh-images="true" collection-repeat="event in events| filter:search.text |  eventListFilter" force-refresh-images=true 
          item-height="getRowHeight(event)" id="item-{{$index}}" on-swipe-left="checkSwipe($index);" force-refresh-images="true" >
         
            <!-- item headers: date/time -->
            <div class="row" style="padding-top:0px; padding-bottom:10px">
              
              <div class="col events-list-text" style="margin-top:-20px;padding:0px; ">
                <div style="float:left;background-color:#96281B;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">
                  &nbsp;&nbsp;<i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;&nbsp;&nbsp;
                </div> 
                <span  style="color:#444;font-size:11px;opacity:0.7;">
                  &nbsp;<i class="ion-arrow-right-b"></i>&nbsp;{{event.Event.humanizeTime}}
                  <span ng-if="!event.Event.EndTime">(
                    <span translate="kRecordingProgress"></span>)
                  </span>
                </span>
              </div>

              <div class="events-list-text" style="margin-top:-20px;padding:0px; ">
                <div  style="float:right;background-color:#444;color:#fff;font-size:11px;opacity:0.7;border-radius: 0px 0px 5px 5px;">
                  &nbsp;&nbsp;<i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;&nbsp;&nbsp;
                </div>
              </div>
            </div> <!--row-->
            
            <!-- body of events-->
            <div class="row" style="font-size:80%; color:rgb(110,110,110)">
              <div class="col events-list-text"> <!-- data -->
                <!-- for largeThumbs show image in this column -->
                <div ng-if="loginData.eventViewThumbs!='none' && thumbClass=='large'"  width="100%" style="padding: 5px;">
                  <img  bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}"
                  on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="{{event.Event.thumbWidth}}px"
                  height="{{event.Event.thumbHeight}}px" fallback-src="img/noimage.png" style="display: block; margin: auto;" />
                </div>
                  <!-- this ngswitch displays different icons
                    depending on the cause of the event -->
                  <span ng-switch on="event.Event.Cause" ng-class="::{'largeThumbsSpan': thumbClass=='large', 'smallThumbsSpan': thumbClass=='small'}">
                    <span ng-switch-when="Motion">
                      <i class="ion-android-walk" style="font-size:150%;"></i>&nbsp;
                      <!-- <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>-->

                    </span>
                    <span ng-switch-when="Signal">
                      <i class="ion-wifi" style="font-size:150%;"></i>&nbsp;
                    </span>
                    <span ng-switch-default>
                      <i class="ion-ionic" style="font-size:150%;"></i>&nbsp;
                    </span>
                    <b><i ng-if="event.Event.Archived=='1'" class="ion-ios-flag"
                      style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
                  </span>

                  <i class="ion-images"></i> {{event.Event.Frames}} &nbsp;
                  <i class="ion-ios-bell-outline"></i> {{event.Event.AlarmFrames}} &nbsp;
                  <span style="font-size:80%; color:rgb(110,110,110)">
                    {{humanize(event.Event.Length)}} &nbsp;
                  </span>
                  <br/><i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
                  <span ng-if="event.Event.Notes" >
                    <br/><i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}
                  </span>
              </div> <!-- col-->
              <!-- 2 col format for small, 1 col format for large -->
              <span ng-if="thumbClass=='small' && loginData.eventViewThumbs!='none'">
                  <div class="col">
                    <img  bg-color="#6C7A89" ng-src="{{constructThumbnail(event)}}"
                    on-tap="closeIfOpen(event);openModalWithSnapshot(event)" width="{{event.Event.thumbWidth}}px"
                    height="{{event.Event.thumbHeight}}px" fallback-src="img/noimage.png" />
                  </div> <!--col--->
              </span> <!-- thumbs -->

              
             </div> <!--row-->
            
             <!-- buttons -->
            <div class="row" style="float:right; margin-right: 10px; display: block;">
              <span style="float:right">
                <div ng-if="event.Event.EndTime || 1">
                  <button class="button button-stable 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-stable 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-stable button-outline button-small icon icon-left ion-ios-bell"
                    ng-click="toggleGroupAlarms(event,$index,event.Event.Frames)">
                    <span translate="kAlarms"></span>
                  </button>
                  <button id='testaut_events_footage_button-{{$index}}'
                    class="button button-stable button-outline button-small icon icon-left ion-ios-eye"
                    ng-click="closeIfOpen(event);openModal(event)">
                    <span translate="kFootage"></span>
                  </button>
                </div>
              </span>
            </div>

            <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>

            <!-- this is the event scrub/alarm frames area -->
            <div class="row" ng-if="isGroupShown(event)" style="min-height: 50px;padding-top: 5px;margin-top: 0px;">
              <div ng-if="groupType=='alarms'">
                <div>
                  <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-stable button-outline">
                      <span translate="kType"></span>:{{typeOfFrames}}
                    </button>
                    <button ng-click="toggleMotionOutline()"
                      class="button button-small button-assertive button-stable 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.recordingURL}} 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-src="{{constructAlarmFrame(event,alarm,true)}}"
                          fallback-src="{{constructAlarmFrame(event,alarm,false)}}"
                          style="width: auto; height: auto;max-width: 100%;max-height: 170px"
                          on-tap="showImage(event.Event.recordingURL, 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">
                  <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 imageonload="finishedLoadingImage($index)"
                          image-spinner-src="{{constructScrubFrame(event,slide)}}" image-spinner-loader="lines"
                          height="190px" ; />

                        <br />
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- no DefaultVideo -->
                <div ng-if="event.Event.DefaultVideo!='' && loginData.enableh264 == true">
                  <div class="videogular-container">
                    <videogular vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'"
                      vg-responsive="true" vg-can-play="eventCanPlay()" vg-player-ready="readyToPlay($API)">
                      <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 -->
              <!-- isGroupShown -->
            </div>
          </ion-item>
        
      </ion-list>
    </div>
    <!-- !eventsBeingLoaded-->


    <ion-item ng-show="!events.length">
      <span translate="kNoEvents"></span>
    </ion-item>
    <ion-item ng-show="nextEvents">
      <div style="margin-left: auto;margin-right: auto;width: min-content;">
        <button ng-click="nextEventsLoad();" class="button button-stable button-outline button-small icon icon-left ">
          <span translate="kMore"></span>
        </button>
      </div>
    </ion-item>
    <div ng-if="!eventsBeingLoaded">
      <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="400px">
      </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" state="footerState">
    <ion-pull-up-handle id="testaut_events_footer_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}} ({{hour.mid}})</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}} ({{day.mid}})</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}} ({{week.mid}})</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>