Add searching events by StartTime and MonitorId

web/skins/bootstrap/js/controllers.js

@@ -51,27 +51,70 @@ ZoneMinder.controller('LogController', function($scope, Log) {
 	}
 });
 
-ZoneMinder.controller('EventsController', function($scope, Events, $modal) {
+ZoneMinder.controller('EventsController', function($scope, Events, Console, $modal) {
 	// First thing, get page 1 of the events.
-	getEventsPage(1);
+	$scope.page = 1;
+	getEvents(null, $scope.page);
+
+	// Get the monitors which popular the sidebar select
+	Console.getMonitors().then(function(results) {
+		$scope.monitors = results.data.monitors;
+	});
+
+	$scope.filter_url = '';
+
+	var now = new Date();
+	var startdate = new Date(now);
+	startdate.setMonth(now.getMonth() - 1);
+	$scope.filter = {
+		'StartTime' : startdate,
+		'EndTime' : new Date()
+	};
 
 	// If the page is changed, get the new page of events
 	$scope.pageChanged = function(newPage) {
-		getEventsPage(newPage);
+		$scope.page = newPage;
+		getEvents($scope.filter_url, newPage);
 	};
 
 	// Call Events.get and pass it the page number
 	// Set the appropriate scope values with the results.
 	// The events.php file takes over and iterates over events
 	// and the painator uses totalEvents and eventPerPage
-	function getEventsPage(pageNumber) {
+	function getEvents(filter, pageNumber) {
-		Events.get(pageNumber).then(function(results) {
+		Events.get(filter, pageNumber).then(function(results) {
 			$scope.events = results.data.events;
 			$scope.totalEvents = results.data.pagination.count;
 			$scope.eventsPerPage = results.data.pagination.limit;
 		});
 	}
 
+	$scope.filterEvents = function() {
+		var filters = new Array();
+		var url = '';
+
+		// Push all of the MonitorId's into the filters array
+		angular.forEach($scope.filter.MonitorId, function(value, key) {
+			filters.push('MonitorId:'+value);
+		});
+
+		var StartTime = $scope.filter.StartTime.toISOString().slice(0, 19).replace('T', ' ');
+		filters.push('StartTime >=:'+StartTime);
+		var EndTime = $scope.filter.EndTime.toISOString().slice(0, 19).replace('T', ' ');
+		filters.push('EndTime <=:'+EndTime);
+
+		console.log(filters);
+
+		angular.forEach(filters, function(value, key) {
+			url = url + value + '/';
+		});
+
+		length = url.length;
+		$scope.filter_url = url.substring(0, length - 1);
+		$scope.page = 1;
+		getEvents($scope.filter_url, 1);
+	}
+
 	// This is called when a user clicks on an event.
 	// It fires up a modal and passes it the EventId of the clicked event
 	// EventController takes over from there.

web/skins/bootstrap/views/events.php

@@ -6,21 +6,16 @@
 
 	<div class="container-fluid" ng-controller="EventsController">
 		<div class="row">
-			<div class="col-md-2">
-				<?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"/>
-					<input class="btn btn-default" type="button" name="unarchiveBtn" value="<?= $SLANG['Unarchive'] ?>" onclick="unarchiveEvents( this, 'markEids' );" disabled="disabled"/>
-					<input class="btn btn-default" type="button" name="editBtn" value="<?= $SLANG['Edit'] ?>" onclick="editEvents( this, 'markEids' )" disabled="disabled"/>
-					<input class="btn btn-default" type="button" name="exportBtn" value="<?= $SLANG['Export'] ?>" onclick="exportEvents( this, 'markEids' )" disabled="disabled"/>
-					<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 class="col-md-10">
+			<div class="col-md-2 sidebar">
+				<div class="container-fluid">
+					<?php include("events_search.html"); ?>
+				</div>
+			</div>
+
+			<div class="col-md-10 col-md-offset-2">
 				<div class="clearfix events">
-					<div class="event" dir-paginate="event in events | itemsPerPage: eventsPerPage" total-items="totalEvents" ng-click="displayEvent($index)">
+					<div class="event" dir-paginate="event in events | itemsPerPage: eventsPerPage" total-items="totalEvents" current-page="page" ng-click="displayEvent($index)">
 						<img ng-src="/events/{{ event.thumbData.Path }}" class="img-thumbnail" alt="..."/>
 						<div class="over">
 							<div class="info">
@@ -35,6 +30,5 @@
 			</div> <!-- End main .col-md-10 -->
 		</div> <!-- End .row -->
 	</div> <!-- End .container-fluid -->
-	<?php include("footer.php"); ?>
 </body>
 </html>

web/skins/bootstrap/views/events_search.html

@@ -0,0 +1,54 @@
+<form ng-submit="filterEvents()" name="formEvents" novalidate>
+
+	<div class="row">
+		<h3>Monitors</h3>
+		<select multiple class="form-control" ng-model="filter.MonitorId">
+			<option ng-repeat="monitor in monitors" ng-value="monitor.Monitor.Id">{{monitor.Monitor.Name}}</option>
+		 </select>
+	</div>
+
+	<div class="row">
+	<h3>Date</h3>
+	<div class="container-fluid">
+
+		<div class="row">
+			<div class="form-group">
+				<label for="StartTime">From</label>
+				<div class="dropdown">
+					<a class="dropdown-toggle" id="StartTime" role="button" data-toggle="dropdown" data-target="#" href="#">
+						<div class="input-group"><input type="text" class="form-control" data-ng-model="filter.StartTime"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
+						</div>
+					</a>
+					<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+						<datetimepicker data-ng-model="filter.StartTime" data-datetimepicker-config="{ dropdownSelector: '#StartTime' }"/>
+					</ul>
+				</div>
+			</div> <!-- End .form-horizontal -->
+		</div> <!-- End .row (from) -->
+
+		<div class="row">
+			<div class="form-group">
+				<label for="EndTime">To</label>
+				<div class="dropdown">
+					<a class="dropdown-toggle" id="EndTime" role="button" data-toggle="dropdown" data-target="#" href="#">
+						<div class="input-group"><input type="text" class="form-control" data-ng-model="filter.EndTime"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
+						</div>
+					</a>
+					<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+						<datetimepicker data-ng-model="filter.EndTime" data-datetimepicker-config="{ dropdownSelector: '#EndTime' }"/>
+					</ul>
+				</div>
+			</div> <!-- End .form-group -->
+		</div> <!-- End .row (to)  -->
+	</div>
+	</div>
+	<div class="row">
+		<input class="btn btn-default btn-block" type="button" name="archiveBtn" value="<?= $SLANG['Archive'] ?>" onclick="archiveEvents( this, 'markEids' )" disabled="disabled"/>
+		<input class="btn btn-default btn-block" type="button" name="unarchiveBtn" value="<?= $SLANG['Unarchive'] ?>" onclick="unarchiveEvents( this, 'markEids' );" disabled="disabled"/>
+		<input class="btn btn-default btn-block" type="button" name="exportBtn" value="<?= $SLANG['Export'] ?>" onclick="exportEvents( this, 'markEids' )" disabled="disabled"/>
+		<input class="btn btn-default btn-block" type="button" name="deleteBtn" value="<?= $SLANG['Delete'] ?>" onclick="deleteEvents( this, 'markEids' );" disabled="disabled"/>
+		<button type="submit" class="btn btn-success btn-block">Find</button>
+	</div>
+
+
+</form>