From 62d445a61d52e55ec3d9f68c8007ca6ccb2c3c50 Mon Sep 17 00:00:00 2001 From: Kyle Johnson Date: Tue, 17 Feb 2015 14:35:08 -0500 Subject: [PATCH] Major frontend reavmp to properly use ui-router. The core of the work here involved two things: * Making the default view / home page 'monitor' instead of 'console' * Replacing monitor tab functionality with ui-router's nested views There are now a few bugs which need to be worked out: * Haven't tested saving a monitor * Loading an existing monitor's data doesn't work (edit) * active tab isn't set * who knows what else? --- web/js/app.js | 73 ++++++++++++++- web/js/controllers.js | 4 +- web/views/header.html | 3 +- ...ffers.html => monitor.detail.buffers.html} | 0 ...ntrol.html => monitor.detail.control.html} | 0 ...neral.html => monitor.detail.general.html} | 0 web/views/monitor.detail.html | 25 +++++ ...tor-misc.html => monitor.detail.misc.html} | 0 ...source.html => monitor.detail.source.html} | 0 ...mp.html => monitor.detail.timestamps.html} | 0 web/views/monitor.html | 24 +---- web/views/monitor.list.html | 93 +++++++++++++++++++ 12 files changed, 192 insertions(+), 30 deletions(-) rename web/views/{tab-monitor-buffers.html => monitor.detail.buffers.html} (100%) rename web/views/{tab-monitor-control.html => monitor.detail.control.html} (100%) rename web/views/{tab-monitor-general.html => monitor.detail.general.html} (100%) create mode 100644 web/views/monitor.detail.html rename web/views/{tab-monitor-misc.html => monitor.detail.misc.html} (100%) rename web/views/{tab-monitor-source.html => monitor.detail.source.html} (100%) rename web/views/{tab-monitor-timestamp.html => monitor.detail.timestamps.html} (100%) create mode 100644 web/views/monitor.list.html diff --git a/web/js/app.js b/web/js/app.js index d17392bfb..fda0c6346 100644 --- a/web/js/app.js +++ b/web/js/app.js @@ -12,17 +12,77 @@ ZoneMinder.config(['$locationProvider', function($locationProvider) { }]); ZoneMinder.config(function($stateProvider, $urlRouterProvider) { - $urlRouterProvider.otherwise('/'); + $urlRouterProvider + .when ('/', '/monitor') + .otherwise('/'); $stateProvider - .state('/', { - url: '/', - templateUrl: '/views/console.html' - }) + + /////////////////////////////////////////////////// + // Monitor Grid and List View (main monitor page // + /////////////////////////////////////////////////// + + // This page lets you view the monitors as either a grid, or a list. + // The grid or list is chosen by clicking on the button on the top-right of the page .state('monitor', { + // State can not be explicitly activated - only implicitly by one of its children + abstract: true, + // This abstract will prepend '/monitor' onto the urls of all its children url: '/monitor', + // As a top level state, this template will be loaded into index.html's ui-view templateUrl: '/views/monitor.html' }) + + .state('monitor.list', { + url: '', + templateUrl: '/views/monitor.list.html' + }) + + ////////////////////// + // Monitor > Detail // + ////////////////////// + + // 'detail' is a child of 'monitor' and as such will be loaded into monitor.html's ui-view + // The 'detail' state will be the first 'tab' in the 'detail' view, which is 'General' + .state('monitor.detail', { + // monitor.detail can not be loaded directly + abstract: true, + // This state is a child of 'monitor'. The URL will end up being like: + // '/monitor/{mid:[0-9]{1,4}}'. When the URL becomes something like '/monitor/7', + // this state will become active. + url: '/{mid:[0-9]{1,4}}', + templateUrl: '/views/monitor.detail.html' + }) + + //////////////////////////// + // Monitor > Detail > Tab // + //////////////////////////// + + // Each 'tab' gets its own state. As these are all children of 'detail', they are lodaed + // into detail's ui-view + + .state('monitor.detail.general', { + url: '', + templateUrl: '/views/monitor.detail.general.html' + }) + .state('monitor.detail.source', { + url: '', + templateUrl: '/views/monitor.detail.source.html' + }) + .state('monitor.detail.timestamps', { + url: '', + templateUrl: '/views/monitor.detail.timestamps.html' + }) + .state('monitor.detail.buffers', { + url: '', + templateUrl: '/views/monitor.detail.buffers.html' + }) + .state('monitor.detail.misc', { + url: '', + templateUrl: '/views/monitor.detail.misc.html' + }) + + .state('events', { url: '/events', templateUrl: '/views/events.html' @@ -39,6 +99,9 @@ ZoneMinder.config(function(paginationTemplateProvider) { ZoneMinder.factory('Monitor', function($http) { return { + getMonitors: function() { + return $http.get('/api/monitors.json'); + }, getMonitor: function(mid) { return $http.get('/api/monitors/'+mid+'.json'); }, diff --git a/web/js/controllers.js b/web/js/controllers.js index e50bda3c2..5f1483080 100644 --- a/web/js/controllers.js +++ b/web/js/controllers.js @@ -203,7 +203,7 @@ ZoneMinder.controller('EventController', function($scope, Event, $modalInstance, }; }); -ZoneMinder.controller('MonitorController', function($scope, $http, $location, Monitor) { +ZoneMinder.controller('MonitorController', function($scope, $http, $location, Monitor, Console) { // If mid is set, we're editing a monitor. Else, we're adding one. var mid = $location.search().mid; if (mid) { @@ -259,9 +259,7 @@ ZoneMinder.controller('MonitorController', function($scope, $http, $location, Mo // Redirect to the dashboard on success .success(function(data) { window.location = "/"; }); }; -}); -ZoneMinder.controller('ConsoleController', function($scope, Console, Monitor) { $scope.grid = true; $scope.gridButton = 'glyphicon-th'; $scope.consoleLayout = 4; diff --git a/web/views/header.html b/web/views/header.html index 55873e4b3..fcc3d543e 100644 --- a/web/views/header.html +++ b/web/views/header.html @@ -1,12 +1,13 @@