path: root/www/templates/events.html

<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)" ;>&nbsp;&nbsp;&nbsp;</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 force-refresh-images="true" 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;">&nbsp;&nbsp;&nbsp;
            <i class="ion-calendar"></i>&nbsp;&nbsp;{{prettifyTime(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;</span>&nbsp;&nbsp;
          <span style="float:left;margin-top:-18px;background-color:#fff;color:#888;font-size:11px;opacity:1;">&nbsp;&nbsp;
            <i class="ion-arrow-right-b"></i>&nbsp;{{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;">&nbsp;&nbsp;&nbsp;
            <i class="ion-clock"></i>&nbsp;&nbsp;{{prettifyDate(event.Event.StartTime)}} &nbsp;{{tzAbbr}}&nbsp;
          </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-left">
              <div class="item-text-wrap">

                <b>
                  <i ng-if="event.Event.Archived=='1'" class="ion-ios-flag" style="color:red">&nbsp;</i>{{event.Event.MonitorName}}</b>
                <span ng-if="!loginData.enableThumbs &&event.Event.MaxScoreFrameId">({{event.Event.Id}})</span> &nbsp;
                <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' && lpoginData.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}} &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-if="loginData.enableThumbs && event.Event.MaxScoreFrameId" class="col col-left" style="max-height:150px">
              <!-- thumbnail -->

              <!--  ng-image-appear transition-duration="0.5s" animation="fillIn" bg-color="#50a4e2"  {{event.Event.thumbWidth}}X{{event.Event.thumbHeight}}-->

              <img ng-image-appear transition-duration="0.3s" animation="fillIn" bg-color="#50a4e2" width="{{event.Event.thumbWidth}}px"
                height="{{event.Event.thumbHeight}}px" ng-src="{{event.Event.baseURL}}/index.php?view=image&fid={{event.Event.MaxScoreFrameId}}&width={{event.Event.thumbWidth*2}}&height={{event.Event.thumbHeight*2}}"
                on-tap="showThumbnail(event.Event.baseURL,event.Event.MaxScoreFrameId)" />
              <!--<p>{{event.Event.thumbWidth}}px*{{event.Event.thumbHeight}}px</p>-->


            </div>
          </div>
          <!--row-->
          <div class="row" style="font-size:80%; color:rgb(110,110,110)">
              <div class="col">
                <div class="item-text-wrap">
                    <i class="ion-ios-pricetags-outline"></i>&nbsp; {{event.Event.Name}}
                    <br/>
                    <i class="ion-calendar"></i>&nbsp; {{prettify(event.Event.StartTime)}}&nbsp;{{tzAbbr}}&nbsp;
                    <br/>
                    <i class="ion-clipboard"></i>&nbsp; {{event.Event.Notes}}

                <!-- <br/> Default video:{{event.Event.relativePath}}{{event.Event.DefaultVideo}}-->
                </div>
            </div>
          </div>
          <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 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>
          <!-- 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-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.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" state="footerState">
    <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>