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:
parent
07e04ea9ff
commit
96551c98cf
|
@ -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);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue