From 8f752f2b2042f68383f9c0e260bb278c7267e399 Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kjohnson@gnulnx.net>
Date: Wed, 11 Feb 2015 11:32:40 -0500
Subject: [PATCH] Add row / column layout options to console grid

---
 web/skins/bootstrap/css/skin.css      |  5 ---
 web/skins/bootstrap/js/controllers.js | 12 ++++++
 web/skins/bootstrap/views/console.php | 60 +++++++++++++++++----------
 3 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/web/skins/bootstrap/css/skin.css b/web/skins/bootstrap/css/skin.css
index f44793701..3b6b7f67f 100644
--- a/web/skins/bootstrap/css/skin.css
+++ b/web/skins/bootstrap/css/skin.css
@@ -412,11 +412,6 @@ th.table-th-sort-rev span.table-th-sort-span {
 	align-items: baseline;
 }
 
-.monitor {
-	width: 240px;
-	margin: 5px;
-}
-
 .event {
 	float: left;
 	width: 184px;
diff --git a/web/skins/bootstrap/js/controllers.js b/web/skins/bootstrap/js/controllers.js
index bfeccfaef..6acf2f62d 100644
--- a/web/skins/bootstrap/js/controllers.js
+++ b/web/skins/bootstrap/js/controllers.js
@@ -256,8 +256,19 @@ ZoneMinder.controller('MonitorController', function($scope, $http, $location, Mo
 ZoneMinder.controller('ConsoleController', function($scope, Console) {
 	$scope.grid = true;
 	$scope.gridButton = 'glyphicon-th';
+	$scope.consoleLayout = 4;
 
+
+	$scope.updateLayout = function () {
+		var rows = [];
+		var monitors = $scope.monitors;
+		for (var i = 0; i < monitors.length; i++) {
+			if (i % $scope.consoleLayout == 0) rows.push([]);
+			rows[rows.length-1].push(monitors[i]);
 		}
+		$scope.columnSize = Math.floor(12 / $scope.consoleLayout);
+		return $scope.rows = rows;
+	};
 
 	$scope.delete = function (index) {
 		var monitor = $scope.monitors[index];
@@ -304,6 +315,7 @@ ZoneMinder.controller('ConsoleController', function($scope, Console) {
 			});
 
 			$scope.monitors = monitors;
+			$scope.updateLayout();
 		}
 	});
 
diff --git a/web/skins/bootstrap/views/console.php b/web/skins/bootstrap/views/console.php
index d9d335f32..51a887131 100644
--- a/web/skins/bootstrap/views/console.php
+++ b/web/skins/bootstrap/views/console.php
@@ -8,35 +8,49 @@
 		</div>
 
 		<div class="row" ng-hide="fresh">
-			<div class="col-md-12">
-				<div class="btn-toolbar pull-right">
-					<button ng-click="consoleView()" class="btn btn-default btn-lg" type="button">
-						<span class="glyphicon" ng-class="gridButton"></span>
-					</button>
-				</div>
+			<div class="col-md-1 col-md-offset-10">
+				<select ng-model="consoleLayout" ng-show="grid" ng-change="updateLayout()">
+					<option value="1">1 per row</option>
+					<option value="2">2 per row</option>
+					<option value="3">3 per row</option>
+					<option value="4">4 per row</option>
+					<option value="5">5 per row</option>
+					<option value="6">6 per row</option>
+					<option value="7">7 per row</option>
+					<option value="8">8 per row</option>
+					<option value="9">9 per row</option>
+					<option value="10">10 per row</option>
+					<option value="11">11 per row</option>
+					<option value="12">12 per row</option>
+				</select>
+			</div>
+			<div class="col-md-1 text-right">
+				<button ng-click="consoleView()" class="btn btn-default btn-lg" type="button">
+					<span class="glyphicon" ng-class="gridButton"></span>
+				</button>
 			</div>
 		</div>
 
-		<div class="row" ng-show="grid" ng-hide="fresh">
-			<div class="col-md-12">
-				<div class="flexcontainer">
-					<div ng-repeat="monitor in monitors" class="monitor panel" ng-class="(monitor.alerts.zmc || monitor.alerts.zma) ? 'panel-default' : 'panel-danger'">
+		<div ng-show="grid" ng-hide="fresh">
+			<div class="row" ng-repeat="monitors in rows">
+				<div ng-repeat="monitor in monitors" class="col-md-{{columnSize}}">
+				<div  class="monitor panel" ng-class="(monitor.alerts.zmc || monitor.alerts.zma) ? 'panel-default' : 'panel-danger'">
 
-						<div class="panel-heading">
-							<a ng-hide="(monitor.alerts.zmc || monitor.alerts.zma)" class="pull-right" href="#" tooltip="{{ monitor.alert }}">
-								<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
-							</a>
-							<h2 class="text-left panel-title">{{ monitor.Name }}</h2>
-						</div> <!-- End .panel-heading -->
-						
-						<div class="panel-body center-block">
-							<img class="img-responsive img-rounded" ng-src="/cgi-bin/nph-zms?mode=single&monitor={{monitor.Id}}&scale=50" />
-						</div> <!-- End .panel-body -->
+					<div class="panel-heading">
+						<a ng-hide="(monitor.alerts.zmc || monitor.alerts.zma)" class="pull-right" href="#" tooltip="{{ monitor.alert }}">
+							<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+						</a>
+						<h2 class="text-left panel-title">{{ monitor.Name }}</h2>
+					</div> <!-- End .panel-heading -->
+					
+					<div class="panel-body center-block">
+						<img class="img-responsive img-rounded" ng-src="/cgi-bin/nph-zms?mode=single&monitor={{monitor.Id}}" />
+					</div> <!-- End .panel-body -->
 
-					</div> <!-- End .monitor -->
-				</div> <!-- End .flexcontainer -->
+				</div> <!-- End .monitor -->
+				</div>
 			</div>
-		</div> <!-- End .row -->
+		</div>
 
 
 		<div class="row" ng-hide="grid">