www/templates/events.html


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

<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();">
        <ion-refresher
                       pulling-text="Tap the <i class='ion-refresh'></i> icon above to reload ..."
                       spinner="bubbles" on-refresh="dummyDoRefresh();">
        </ion-refresher>

        <ion-item collection-repeat="event in events| filter:search.text">

            <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>
            </span>
        </ion-item>

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