From b6da855d72346f78c993151057e97c461ca63bf8 Mon Sep 17 00:00:00 2001 From: Kyle Johnson Date: Tue, 10 Feb 2015 09:58:34 -0500 Subject: [PATCH] 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 --- web/skins/bootstrap/css/skin.css | 2 +- web/skins/bootstrap/js/controllers.js | 64 +++++++++------ web/skins/bootstrap/views/console.php | 82 +++++++++++++------ .../bootstrap/views/{watch.php => watch.html} | 0 4 files changed, 100 insertions(+), 48 deletions(-) rename web/skins/bootstrap/views/{watch.php => watch.html} (100%) diff --git a/web/skins/bootstrap/css/skin.css b/web/skins/bootstrap/css/skin.css index 25c50aaca..f44793701 100644 --- a/web/skins/bootstrap/css/skin.css +++ b/web/skins/bootstrap/css/skin.css @@ -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; } diff --git a/web/skins/bootstrap/js/controllers.js b/web/skins/bootstrap/js/controllers.js index 7990bbe42..9ed82078a 100644 --- a/web/skins/bootstrap/js/controllers.js +++ b/web/skins/bootstrap/js/controllers.js @@ -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; + }; }); diff --git a/web/skins/bootstrap/views/console.php b/web/skins/bootstrap/views/console.php index e4691e2ef..2a8a966a7 100644 --- a/web/skins/bootstrap/views/console.php +++ b/web/skins/bootstrap/views/console.php @@ -2,35 +2,69 @@ -
-
-
+
+
+

Uh-oh! You have no monitors! Why not add one?

+
-
-
-
+
+
+ +
+
-
- - - -

{{ monitor.Name }} ({{monitor.Id}})

-
- -
- -
+
+
+
-
- -
- -
-
-
+
+ + + +

{{ monitor.Name }}

+
+ +
+ +
+
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
IdNameFunctionSourceEnabledZonesDelete
+ +
+
+
- diff --git a/web/skins/bootstrap/views/watch.php b/web/skins/bootstrap/views/watch.html similarity index 100% rename from web/skins/bootstrap/views/watch.php rename to web/skins/bootstrap/views/watch.html