From e89e63c5e4b18ade6ad4bc855a9abfd8a4cdbfe3 Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kjohnson@gnulnx.net>
Date: Tue, 27 Jan 2015 11:19:24 -0500
Subject: [PATCH] Add frontend support for viewing an Event's Frames

Each Event has a 'Frames' button.  Clicking this changes
$scope.stream to false, hides the eventStream div, shows the
eventFrames div, and changes the text of the button to 'Stream'.

Each Frame is laid out in a box, with its associated image file
and details (delta, score, type, time).

The 'src' for each Frame's image was the difficult part.  The 'zpad'
filter is called for each Frame, so that we know how many 0's to pad
the Frame.FrameId with.

Finally if Frame.Type == Alarm, the box for that div is colored red.
---
 web/skins/bootstrap/css/skin.css              | 29 +++++++++++++++++++
 web/skins/bootstrap/js/controllers.js         | 17 ++++++++++-
 .../bootstrap/views/event-frames-stills.html  | 17 +++++++++++
 web/skins/bootstrap/views/event.php           | 10 ++++---
 4 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 web/skins/bootstrap/views/event-frames-stills.html

diff --git a/web/skins/bootstrap/css/skin.css b/web/skins/bootstrap/css/skin.css
index 2bc1ddc78..25c50aaca 100644
--- a/web/skins/bootstrap/css/skin.css
+++ b/web/skins/bootstrap/css/skin.css
@@ -408,6 +408,7 @@ th.table-th-sort-rev span.table-th-sort-span {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
+	flex-wrap: wrap;
 }
 
 .monitor {
@@ -447,3 +448,31 @@ th.table-th-sort-rev span.table-th-sort-span {
 	background-color: #F5F5F5;
 	border-right: 1px solid #EEE;
 }
+
+#event-frames-stills {
+	justify-content: center;
+	height: 480px;
+	overflow-y: scroll;
+}
+
+.frame {
+	width: 23%;
+	margin: 5px;
+}
+
+.frame .panel-heading, .frame .panel-body {
+	padding: 5px;
+}
+
+.frame ul {
+	padding-left: 0px;
+	margin-left: -5px;
+	list-style: outside none none;
+	text-align: center;
+}
+
+.frame ul > li {
+	display: inline-block;
+	padding-right: 5px;
+	padding-left: 5px;
+}
diff --git a/web/skins/bootstrap/js/controllers.js b/web/skins/bootstrap/js/controllers.js
index 71d31c895..badc466ca 100644
--- a/web/skins/bootstrap/js/controllers.js
+++ b/web/skins/bootstrap/js/controllers.js
@@ -124,6 +124,7 @@ ZoneMinder.controller('EventsController', function($scope, Events, Console, $mod
 		var modalInstance = $modal.open({
 			templateUrl: '/?view=event&skin=bootstrap',
 			controller: 'EventController',
+			size: 'lg',
 			resolve: {
 				eventId: function () { return event.Event.Id; },
 				index: function () { return index; }
@@ -141,7 +142,9 @@ ZoneMinder.controller('EventsController', function($scope, Events, Console, $mod
 	};
 });
 
-ZoneMinder.controller('EventController', function($scope, Event, $modalInstance, eventId, index) {
+ZoneMinder.controller('EventController', function($scope, Event, $modalInstance, eventId, index, Config) {
+
+	$scope.stream = true;
 
 	Event.get(eventId).then(function(results) {
 		$scope.eventId			= eventId;
@@ -159,6 +162,13 @@ ZoneMinder.controller('EventController', function($scope, Event, $modalInstance,
 		$scope.notes			= results.data.event.Event.Notes;
 		$scope.archived			= results.data.event.Event.Archived;
 		$scope.archive_text		= $scope.archived == 0 ? 'Archive' : 'Unarchive';
+		$scope.eventView_text		= 'Frames';
+		$scope.frames			= results.data.event.Frame;
+		$scope.basePath			= results.data.event.Event.BasePath;
+
+		Config.findByName('ZM_EVENT_IMAGE_DIGITS').then(function(results) {
+			$scope.event_image_digits = results.data.config.Value;
+		});
 	});
 
 	$scope.cancel = function () {
@@ -178,6 +188,11 @@ ZoneMinder.controller('EventController', function($scope, Event, $modalInstance,
 			$scope.archive_text = $scope.archived == 0 ? 'Archive' : 'Unarchive';
 		});
 	};
+
+	$scope.eventView = function() {
+		$scope.eventView_text = 'Stream';
+		$scope.stream = $scope.stream == true ? false : true;
+	};
 });
 
 ZoneMinder.controller('MonitorController', function($scope, $http, $location, Monitor) {
diff --git a/web/skins/bootstrap/views/event-frames-stills.html b/web/skins/bootstrap/views/event-frames-stills.html
new file mode 100644
index 000000000..45af8fc6e
--- /dev/null
+++ b/web/skins/bootstrap/views/event-frames-stills.html
@@ -0,0 +1,17 @@
+<div id="event-frames-stills" ng-hide="stream" class="flexcontainer" >
+	<div ng-repeat="frame in frames" class="frame panel" ng-class="(frame.Type == 'Alarm') ? 'panel-danger' : 'panel-default'">
+		<div class="panel-heading">
+			<span class="pull-right" ng-bind="frame.FrameId"></span>
+			<span ng-bind="frame.TimeStamp"></span>
+		</div>
+		<div class="panel-body">
+			<div class="thumbnail">
+				<img ng-src="{{basePath}}{{ frame.FrameId | zpad:event_image_digits }}-capture.jpg" alt="Frame {{frame.FrameId}}" class="img-responsive" />
+			</div>
+			<ul>
+				<li>Delta: <span ng-bind="frame.Delta"></span></li>
+				<li>Score: <span ng-bind="frame.Score"></span></li>
+			</ul>
+		</div>
+	</div>
+</div>
diff --git a/web/skins/bootstrap/views/event.php b/web/skins/bootstrap/views/event.php
index f33f15c66..38d5d03c6 100644
--- a/web/skins/bootstrap/views/event.php
+++ b/web/skins/bootstrap/views/event.php
@@ -1,16 +1,15 @@
 <div class="modal-header">
-	<button type="button" class="close" data-dismiss="modal" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-	<span class="modal-title">Event {{eventId}}</span>
+	<span class="pull-right modal-title">Event {{eventId}}</span>
+	<span ng-bind="startTime"></span>
 </div>
 
 <div class="modal-body">
 
-	<div id="eventStream">
+	<div id="eventStream" ng-show="stream">
 		<img class="img-responsive" ng-src="/cgi-bin/nph-zms?source=event&mode=jpeg&event={{eventId}}&frame=1&scale=100&rate=100&maxfps=30&replay=single&connkey=736818&rand=1419877749" />
 
 		<div>
 			<span class="pull-right">{{ startTime | DateDiff:endTime:'pretty' }}</span>
-			<span class="pull-left" ng-bind="startTime"></span>
 			<div id="controls" class="text-center">
 				Start || Pause
 			</div>
@@ -18,8 +17,11 @@
 	</div>
 </div>
 
+	<?php include("event-frames-stills.html"); ?>
+
 <div class="modal-footer">
 	<span class="pull-right glyphicon glyphicon-chevron-right"><span class="sr-only">Next</span></span>
+	<button type="button" class="btn btn-default" ng-click="eventView()">{{ eventView_text }}</button>
 	<button type="button" class="btn btn-default" ng-click="archive()">{{ archive_text }}</button>
 	<button type="button" class="btn btn-danger" ng-click="delete()">Delete</button>
 	<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>