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

Add row / column layout options to console grid

This commit is contained in:
Kyle Johnson 2015-02-11 11:32:40 -05:00
parent cc0fecf252
commit 8f752f2b20
3 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/skins/bootstrap/css/skin.css
View File

@ -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;

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

@ -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();
}
});

60
web/skins/bootstrap/views/console.php
View File

@ -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">