Use pagination directive in Events view

Pagination is now handled via the pagination directive with
asynchronous data.  The server returns a subset of the total events.
The directive looks at the 'limit' and 'count' fields to determine
how many pages to generate
This commit is contained in:
Kyle Johnson 2014-12-29 12:19:30 -05:00
parent 07e04ea9ff
commit 96551c98cf
3 changed files with 21 additions and 13 deletions

View File

@ -68,8 +68,8 @@ ZoneMinder.factory('Footer', function($http) {
ZoneMinder.factory('Events', function($http) {
return {
getEvents: function() {
return $http.get('/api/events.json');
get: function(page) {
return $http.get('/api/events.json?page='+page);
}
};
});

View File

@ -24,11 +24,19 @@ ZoneMinder.controller('LogController', function($scope, Log) {
});
ZoneMinder.controller('EventsController', function($scope, Events) {
getEventsPage(1);
Events.getEvents().then(function(results) {
$scope.pageChanged = function(newPage) {
getEventsPage(newPage);
};
function getEventsPage(pageNumber) {
Events.get(pageNumber).then(function(results) {
$scope.events = results.data.events;
$scope.totalEvents = results.data.pagination.count;
$scope.eventsPerPage = results.data.pagination.limit;
});
}
});
ZoneMinder.controller('EventController', function($scope, $location, Event) {

View File

@ -7,7 +7,6 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h2><?= sprintf( $CLANG['EventCount'], $nEvents, zmVlang( $VLANG['Event'], $nEvents ) ) ?></h2>
<?php if ( true || canEdit( 'Events' ) ) { ?>
<div class="btn-group-vertical">
<input class="btn btn-default" type="button" name="archiveBtn" value="<?= $SLANG['Archive'] ?>" onclick="archiveEvents( this, 'markEids' )" disabled="disabled"/>
@ -20,18 +19,19 @@
</div> <!-- End sidebar .col-md-2 -->
<div class="col-md-10" ng-controller="EventsController">
<div class="event" ng-repeat="event in events">
<div>
<div class="clearfix">
<div class="event" dir-paginate="event in events | itemsPerPage: eventsPerPage" total-items="totalEvents">
<img ng-src="/events/{{ event.thumbData.Path }}" class="img-thumbnail" alt="..." />
<div class="over">
<div class="info">
<span>Monitor {{event.Event.MonitorId}}</span>
<span>{{ event.Event.StartTime | DateDiff:event.Event.EndTime:'pretty' }}</span>
<span>Event {{event.Event.Id}}</span>
</div>
</div>
</div>
</div>
</div> <!-- End .info -->
</div> <!-- End .over -->
</div> <!-- End .event -->
</div> <!-- End .clearfix -->
<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
</div> <!-- End main .col-md-10 -->
</div>
</div>