ZaneYork
/
zoneminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/skins/bootstrap/js/app.js
View File

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

14
web/skins/bootstrap/js/controllers.js
View File

@ -24,11 +24,19 @@ ZoneMinder.controller('LogController', function($scope, Log) {
}); });
ZoneMinder.controller('EventsController', function($scope, Events) { ZoneMinder.controller('EventsController', function($scope, Events) {
getEventsPage(1);
Events.getEvents().then(function(results) { $scope.pageChanged = function(newPage) {
$scope.events = results.data.events; 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) { ZoneMinder.controller('EventController', function($scope, $location, Event) {

16
web/skins/bootstrap/views/events.php
View File

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