summaryrefslogtreecommitdiff
path: root/www/templates/events.html
blob: 8d34d788b852bac4f3266a9bb00c04101401a65b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<ion-view view-title="" cache-view="false">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon"
                ng-click="openMenu()">
        </button>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
        <a style="" class="button button-icon icon ion-stats-bars"
           ng-href="#events-graphs"> </a>
        <a style="" class="button button-icon icon ion-refresh" ng-href=""
           ng-click="doRefresh();"> </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="Search"
                       ng-model="search.text" autocorrect="off" autocomplete="off">
            </label>
        </ion-header-bar>
    </div>


    <ion-content on-tap="tapped();" delegate-handle="mainScroll">
        <ion-refresher
                       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>

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


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


            </ion-slide-box> -->


            <!-- </div>
            </ion-scroll>-->
          </ion-item>
            </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>
    </ion-content>
</ion-view>