Rework of the Console / Monitors view.
We now have two views - grid or list. Grid view will be montage and doesn't have any 'admin' functions. List view has admin functions: delete, edit, add, etc. If there are no monitors, such as in a new install, the view is replaced by an alert which states that there are no monitors, and provides a link for adding a monitor. * http://i.imgur.com/LinFQsN.png * http://i.imgur.com/mwkOgzR.png * http://i.imgur.com/BrEjzYL.png
This commit is contained in:
Kyle Johnson
parent
d5b8cd2f78
commit
b6da855d72
|
|
@ -409,11 +409,11 @@ th.table-th-sort-rev span.table-th-sort-span {
|
|||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.monitor {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -254,6 +254,9 @@ ZoneMinder.controller('MonitorController', function($scope, $http, $location, Mo
|
|||
});
|
||||
|
||||
ZoneMinder.controller('ConsoleController', function($scope, Console) {
|
||||
$scope.grid = true;
|
||||
$scope.gridButton = 'glyphicon-th';
|
||||
|
||||
// Ask the API for events that have happened in the last week
|
||||
Console.getConsoleEvents('1 week').then(function(results) {
|
||||
// For each result, assign it to $scope[Counts$monitorId]
|
||||
|
|
@ -268,39 +271,54 @@ ZoneMinder.controller('ConsoleController', function($scope, Console) {
|
|||
var monitor = $scope.monitors[index];
|
||||
var id = monitor.Id;
|
||||
|
||||
Console.delete(id).then(function(results) {
|
||||
$scope.monitors.splice(index, 1);
|
||||
console.log(results);
|
||||
});
|
||||
if (monitor.deleteText == 'Are you sure?') {
|
||||
monitor.deleteText = 'Deleting...';
|
||||
Console.delete(id).then(function(results) {
|
||||
$scope.monitors.splice(index, 1);
|
||||
});
|
||||
}
|
||||
|
||||
monitor.deleteText = 'Are you sure?'
|
||||
};
|
||||
|
||||
Console.getMonitors().then(function(results) {
|
||||
var monitors = new Array();
|
||||
var daemons = ['zmc', 'zma']; // Daemons to check for each monitor
|
||||
if (results.data.monitors.length == 0) {
|
||||
$scope.fresh = true;
|
||||
} else {
|
||||
var monitors = new Array();
|
||||
var daemons = ['zmc', 'zma']; // Daemons to check for each monitor
|
||||
|
||||
// For each monitor
|
||||
angular.forEach(results['data']['monitors'], function(value, key) {
|
||||
var id = value.Monitor.Id;
|
||||
var alerts = value.Monitor.alerts = new Array();
|
||||
// For each monitor
|
||||
angular.forEach(results['data']['monitors'], function(value, key) {
|
||||
var id = value.Monitor.Id;
|
||||
var alerts = value.Monitor.alerts = new Array();
|
||||
|
||||
// Check if the above daemons are running for it
|
||||
angular.forEach(daemons, function(daemon) {
|
||||
// Ask the API for the daemonStatus of the id
|
||||
Console.daemonStatus(id, daemon).then(function(results) {
|
||||
value.Monitor.alerts[daemon] = results.data.status;
|
||||
// Check if the above daemons are running for it
|
||||
angular.forEach(daemons, function(daemon) {
|
||||
// Ask the API for the daemonStatus of the id
|
||||
Console.daemonStatus(id, daemon).then(function(results) {
|
||||
value.Monitor.alerts[daemon] = results.data.status;
|
||||
|
||||
// If there is a failed daemon, set a generic error
|
||||
if (daemon) {
|
||||
value.Monitor.alert = 'zma or zmc is not running';
|
||||
}
|
||||
// If there is a failed daemon, set a generic error
|
||||
if (daemon) {
|
||||
value.Monitor.alert = 'zma or zmc is not running';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
value.Monitor.deleteText = 'Delete';
|
||||
monitors.push(value.Monitor);
|
||||
|
||||
});
|
||||
|
||||
monitors.push(value.Monitor);
|
||||
});
|
||||
|
||||
$scope.monitors = monitors;
|
||||
$scope.monitors = monitors;
|
||||
}
|
||||
});
|
||||
|
||||
$scope.consoleView = function() {
|
||||
$scope.gridButton = $scope.gridButton == 'glyphicon-th' ? 'glyphicon-th-list' : 'glyphicon-th';
|
||||
$scope.grid = $scope.grid == true ? false : true;
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,35 +2,69 @@
|
|||
<body>
|
||||
<?php include("header.php"); ?>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-2"><?php include("sidebar.php"); ?></div>
|
||||
<div class="container-fluid" ng-controller="ConsoleController">
|
||||
<div ng-show="fresh" class="alert alert-warning">
|
||||
<p><strong>Uh-oh!</strong> You have no monitors! Why not <a class="alert-link" href="/?view=monitor">add</a> one?</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-10">
|
||||
<div ng-controller="ConsoleController" class="flexcontainer">
|
||||
<div ng-repeat="monitor in monitors" class="monitor panel" ng-class="(monitor.alerts.zmc || monitor.alerts.zma) ? 'panel-default' : 'panel-danger'">
|
||||
<div class="row" ng-hide="fresh">
|
||||
<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>
|
||||
|
||||
<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 }} <small>({{monitor.Id}})</small></h2>
|
||||
</div> <!-- End .panel-heading -->
|
||||
<div class="row" ng-show="grid" ng-hide="fresh">
|
||||
<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 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-footer">
|
||||
<button type="button" class="btn btn-danger btn-sm" ng-click="delete($index)">Delete</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- End .monitor -->
|
||||
</div> <!-- End ConsoleController -->
|
||||
</div> <!-- End .col-md-10 -->
|
||||
<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> <!-- End .monitor -->
|
||||
</div> <!-- End .flexcontainer -->
|
||||
</div> <!-- End .row -->
|
||||
|
||||
|
||||
<div class="row" ng-hide="grid">
|
||||
<div class="col-md-2 sidebar"><?php include("sidebar.php"); ?></div>
|
||||
|
||||
<div class="col-md-10 col-md-offset-2">
|
||||
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Name</th>
|
||||
<th>Function</th>
|
||||
<th>Source</th>
|
||||
<th>Enabled</th>
|
||||
<th>Zones</th>
|
||||
<th>Delete</th>
|
||||
</tr>
|
||||
|
||||
<tr ng-repeat="monitor in monitors">
|
||||
<td ng-bind="monitor.Id"></td>
|
||||
<td ng-bind="monitor.Name"></td>
|
||||
<td ng-bind="monitor.Function"></td>
|
||||
<td ng-bind="monitor.Type"></td>
|
||||
<td ng-bind="monitor.Enabled"></td>
|
||||
<td ng-bind="monitor.Zones"></td>
|
||||
<td><button type="button" class="btn btn-danger btn-sm" ng-click="delete($index)">{{ monitor.deleteText }}</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- .container-fluid -->
|
||||
<?php include("footer.php"); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue