From 96551c98cf514ccb53899591b58a429abbc0c798 Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kjohnson@gnulnx.net>
Date: Mon, 29 Dec 2014 12:19:30 -0500
Subject: [PATCH] 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
---
 web/skins/bootstrap/js/app.js         |  4 ++--
 web/skins/bootstrap/js/controllers.js | 14 +++++++++++---
 web/skins/bootstrap/views/events.php  | 16 ++++++++--------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/skins/bootstrap/js/app.js b/web/skins/bootstrap/js/app.js
index 26fd2a037..f01f943e7 100644
--- a/web/skins/bootstrap/js/app.js
+++ b/web/skins/bootstrap/js/app.js
@@ -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);
 		}
 	};
 });
diff --git a/web/skins/bootstrap/js/controllers.js b/web/skins/bootstrap/js/controllers.js
index 5ce073277..a629e0618 100644
--- a/web/skins/bootstrap/js/controllers.js
+++ b/web/skins/bootstrap/js/controllers.js
@@ -24,11 +24,19 @@ ZoneMinder.controller('LogController', function($scope, Log) {
 });
 
 ZoneMinder.controller('EventsController', function($scope, Events) {
+	getEventsPage(1);
 
-	Events.getEvents().then(function(results) {
-		$scope.events = results.data.events;
-	});
+	$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) {
diff --git a/web/skins/bootstrap/views/events.php b/web/skins/bootstrap/views/events.php
index 784a99355..1baca327f 100644
--- a/web/skins/bootstrap/views/events.php
+++ b/web/skins/bootstrap/views/events.php
@@ -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"/>
@@ -17,21 +16,22 @@
 					<input class="btn btn-default" type="button" name="deleteBtn" value="<?= $SLANG['Delete'] ?>" onclick="deleteEvents( this, 'markEids' );" disabled="disabled"/>
 				</div>
 				<?php } ?>
-				</div> <!-- End sidebar .col-md-2 -->
+			</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>