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

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 2015-02-10 09:58:34 -05:00
parent d5b8cd2f78
commit b6da855d72
4 changed files with 100 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -409,11 +409,11 @@ th.table-th-sort-rev span.table-th-sort-span {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: baseline;
} }
.monitor { .monitor {
width: 240px; width: 240px;
height: 240px;
margin: 5px; margin: 5px;
} }

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

@ -254,6 +254,9 @@ ZoneMinder.controller('MonitorController', function($scope, $http, $location, Mo
}); });
ZoneMinder.controller('ConsoleController', function($scope, Console) { 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 // Ask the API for events that have happened in the last week
Console.getConsoleEvents('1 week').then(function(results) { Console.getConsoleEvents('1 week').then(function(results) {
// For each result, assign it to $scope[Counts$monitorId] // For each result, assign it to $scope[Counts$monitorId]
@ -268,13 +271,20 @@ ZoneMinder.controller('ConsoleController', function($scope, Console) {
var monitor = $scope.monitors[index]; var monitor = $scope.monitors[index];
var id = monitor.Id; var id = monitor.Id;
if (monitor.deleteText == 'Are you sure?') {
monitor.deleteText = 'Deleting...';
Console.delete(id).then(function(results) { Console.delete(id).then(function(results) {
$scope.monitors.splice(index, 1); $scope.monitors.splice(index, 1);
console.log(results);
}); });
}
monitor.deleteText = 'Are you sure?'
}; };
Console.getMonitors().then(function(results) { Console.getMonitors().then(function(results) {
if (results.data.monitors.length == 0) {
$scope.fresh = true;
} else {
var monitors = new Array(); var monitors = new Array();
var daemons = ['zmc', 'zma']; // Daemons to check for each monitor var daemons = ['zmc', 'zma']; // Daemons to check for each monitor
@ -296,11 +306,19 @@ ZoneMinder.controller('ConsoleController', function($scope, Console) {
}); });
}); });
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;
};
}); });

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

@ -2,35 +2,69 @@
<body> <body>
<?php include("header.php"); ?> <?php include("header.php"); ?>
<div class="container-fluid"> <div class="container-fluid" ng-controller="ConsoleController">
<div class="row"> <div ng-show="fresh" class="alert alert-warning">
<div class="col-md-2"><?php include("sidebar.php"); ?></div> <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 class="row" ng-hide="fresh">
<div ng-controller="ConsoleController" class="flexcontainer"> <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="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 ng-repeat="monitor in monitors" class="monitor panel" ng-class="(monitor.alerts.zmc || monitor.alerts.zma) ? 'panel-default' : 'panel-danger'">
<div class="panel-heading"> <div class="panel-heading">
<a ng-hide="(monitor.alerts.zmc || monitor.alerts.zma)" class="pull-right" href="#" tooltip="{{ monitor.alert }}"> <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> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
</a> </a>
<h2 class="text-left panel-title">{{ monitor.Name }} <small>({{monitor.Id}})</small></h2> <h2 class="text-left panel-title">{{ monitor.Name }}</h2>
</div> <!-- End .panel-heading --> </div> <!-- End .panel-heading -->
<div class="panel-body center-block"> <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" /> <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 .panel-body -->
<div class="panel-footer"> </div> <!-- End .monitor -->
<button type="button" class="btn btn-danger btn-sm" ng-click="delete($index)">Delete</button> </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>
</div> <!-- End .monitor -->
</div> <!-- End ConsoleController -->
</div> <!-- End .col-md-10 -->
</div> <!-- End .row -->
</div> <!-- .container-fluid --> </div> <!-- .container-fluid -->
<?php include("footer.php"); ?>
</body> </body>
</html> </html>

0
web/skins/bootstrap/views/watch.php → web/skins/bootstrap/views/watch.html
View File