Add theme switch

Change-Id: I5b2a546bfa63c31c36e17a3dfc097a36be7028a9

Gruntfile.js

@@ -47,6 +47,10 @@ module.exports = function (grunt) {
                         src: '<%= project.app %>/components/config/config.json',
                         dest: '<%= project.dist %>/components/config/config.json'
                     },
+                    {
+                        src: '<%= project.app %>/components/config/developmentConfig.json',
+                        dest: '<%= project.dist %>/components/config/developmentConfig.json'
+                    },
                     {
                         src: '<%= project.app %>/index.html',
                         dest: '<%= project.dist %>/index.html'

app/app.js

@@ -27,7 +27,9 @@ angular.module('bansho', [
     }])
 
     // Reinitialise objects on url change
-    .run(['$rootScope', 'promisesManager', 'reinitTables', function ($rootScope, promisesManager, reinitTables) {
+    .run(['$rootScope', 'promisesManager', 'reinitTables', 'themeManager',
+            function ($rootScope, promisesManager, reinitTables, themeManager) {
+        themeManager.setTheme();
         $rootScope.$on('$locationChangeStart', function () {
             reinitTables();
             promisesManager.clearAllPromises();

app/components/authentication/authentication.js

@@ -52,7 +52,8 @@ angular.module('bansho.authentication', [])
 
     }])
 
-    .factory('authService', ['$http', '$location', '$rootScope', 'session', 'configManager',  function ($http, $location, $rootScope, session, configManager) {
+    .factory('authService', [ '$http', '$location', '$rootScope', 'session', 'configManager', 'themeManager',
+             function ($http, $location, $rootScope, session, configManager, themeManager) {
         var authService = {};
 
         authService.login = function (credentials) {
@@ -60,10 +61,12 @@ angular.module('bansho.authentication', [])
                 .post('/surveil/v2/auth/tokens/', credentials)
                 .success(function (data) {
                     $rootScope.isAuthenticated = true;
+
                     session.create(data.access.token.id, data.access.token.expires);
                     $http.defaults.headers.common['X-Auth-Token'] = session.sessionId;
 
                     configManager.fetchConfig(configManager.getDevelopmentConfig().useStoredConfig).then(function () {
+                            themeManager.setTheme();
                             $location.path('/view');
                         }, function (message) {
                             throw new Error(message);
@@ -86,6 +89,9 @@ angular.module('bansho.authentication', [])
             $location.path('/login');
         };
 
+        authService.switchTheme = function () {
+            themeManager.switchTheme();
+        };
 
         return authService;
     }])

app/components/config/config.js

@@ -3,6 +3,45 @@
 'use strict';
 
 angular.module('bansho.config', [])
+    .service('themeManager', ['$rootScope', 'configManager',
+            function ($rootScope, configManager) {
+        var THEMES = {
+            DARK: "dark",
+            LIGHT: "light",
+            DEFAULT: "dark"
+        };
+
+        var setThemeClass = function (theme, saveConfig) {
+            $rootScope.themeClass = 'color-scheme--' + theme;
+            $rootScope.themeColor = theme;
+
+            if (saveConfig) {
+                configManager.setThemeAndSave(theme);
+            }
+        };
+
+        /**
+         * Set the application theme from configManager
+         *
+         * If configManager isn't loaded this will set default.
+         */
+        this.setTheme = function () {
+            var theme = configManager.getTheme();
+            if (theme) {
+                setThemeClass(theme, false);
+            } else {
+                setThemeClass(THEMES.DARK, false);
+            }
+        };
+
+        this.switchTheme = function () {
+            if ($rootScope.themeColor === THEMES.DARK) {
+                setThemeClass(THEMES.LIGHT, true);
+            } else {
+                setThemeClass(THEMES.DARK, true);
+            }
+        };
+    }])
 
     .service('configManager', ['$http', '$q', function ($http, $q) {
         var config = {},
@@ -41,6 +80,35 @@ angular.module('bansho.config', [])
             return config.data;
         };
 
+        this.setThemeAndSave = function (theme) {
+           config.data.banshoConfig.theme = theme;
+           saveConfig();
+        };
+
+        this.getTheme = function () {
+            var theme;
+
+            if (config.data) {
+                theme = config.data.banshoConfig.theme;
+            }
+
+            return theme;
+        };
+
+        var saveConfig = function () {
+            var responsePromise = $q.defer();
+
+            $http.post('surveil/v2/bansho/config', JSON.stringify(config.data))
+                .success(function () {
+                    responsePromise.resolve();
+                })
+                .error(function () {
+                    responsePromise.reject('Failed to send config to server');
+                });
+
+            return responsePromise.promise;
+        };
+
         this.fetchConfig = function (useStoredConfig) {
             var responsePromise = $q.defer();
 

app/components/config/config.json

@@ -1,4 +1,7 @@
 {
+    "banshoConfig": {
+        "theme": "dark"
+    },
     "dashboardConfig": {
         "title": "Unhandled service problems",
         "refreshInterval": 0,

app/components/topbar/topbar.html

@@ -131,6 +131,7 @@
                 <li class="topbar__settings__subitem"><a href="#">Missing Plugins</a></li>
                 <li class="topbar__settings__subitem"><a href="#">Object History</a></li>
                 <li class="topbar__settings__subitem"><a href="#">Configure</a></li>
+                <li class="topbar__settings__subitem" ng-click="switchTheme()"><a>Change theme</a></li>
                 <li class="topbar__settings__subitem" ng-click="logout()"><a>Logout</a></li>
               </ul>
             </li>

app/components/topbar/topbar.js

@@ -2,8 +2,8 @@
 
 angular.module('bansho.topbar', ['bansho.surveil'])
 
-    .controller('TopBarCtrl', ['$rootScope', '$scope', '$interval', 'surveilStatus', 'promisesManager', 'authService',
+    .controller('TopBarCtrl', ['$rootScope', '$scope', '$interval', 'surveilStatus', 'promisesManager', 'authService', 'themeManager',
-        function ($rootScope, $scope, $interval, surveilStatus, promisesManager, authService) {
+        function ($rootScope, $scope, $interval, surveilStatus, promisesManager, authService, themeManager) {
             var getData,
                 hostProblems,
                 serviceProblems;
@@ -27,6 +27,10 @@ angular.module('bansho.topbar', ['bansho.surveil'])
             $scope.logout = function () {
                 authService.logout();
             };
+
+            $scope.switchTheme = function () {
+                themeManager.switchTheme();
+            };
         }])
 
     .directive('banshoTopbar', function () {

app/index.html

@@ -93,7 +93,7 @@
     <!-- endbuild -->
   </head>
 
-  <body class="layout color-scheme--dark" ng-app="bansho">
+  <body class="layout" ng-class="themeClass" ng-app="bansho">
     <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
     <div class="layout__container">
       <aside class="layout__aside sidebar-wrapper collapse" id="sidebarWrapper">