From dd868fc21c0a4f22ce5553129a87a8e7dcf7ba1e Mon Sep 17 00:00:00 2001 From: Vincent Fournier Date: Tue, 2 Jun 2015 13:50:42 -0400 Subject: [PATCH] Add theme switch Change-Id: I5b2a546bfa63c31c36e17a3dfc097a36be7028a9 --- Gruntfile.js | 4 ++ app/app.js | 4 +- .../authentication/authentication.js | 8 ++- app/components/config/config.js | 68 +++++++++++++++++++ app/components/config/config.json | 3 + app/components/topbar/topbar.html | 1 + app/components/topbar/topbar.js | 8 ++- app/index.html | 2 +- 8 files changed, 93 insertions(+), 5 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 2061865..3e38fe4 100644 --- a/Gruntfile.js +++ b/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' diff --git a/app/app.js b/app/app.js index 5a88474..6870369 100644 --- a/app/app.js +++ b/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(); diff --git a/app/components/authentication/authentication.js b/app/components/authentication/authentication.js index 14d45b4..3f50114 100644 --- a/app/components/authentication/authentication.js +++ b/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; }]) diff --git a/app/components/config/config.js b/app/components/config/config.js index 4074699..3605587 100644 --- a/app/components/config/config.js +++ b/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(); diff --git a/app/components/config/config.json b/app/components/config/config.json index 4b1d9cb..61c4c4d 100644 --- a/app/components/config/config.json +++ b/app/components/config/config.json @@ -1,4 +1,7 @@ { + "banshoConfig": { + "theme": "dark" + }, "dashboardConfig": { "title": "Unhandled service problems", "refreshInterval": 0, diff --git a/app/components/topbar/topbar.html b/app/components/topbar/topbar.html index 2bce49c..a463328 100644 --- a/app/components/topbar/topbar.html +++ b/app/components/topbar/topbar.html @@ -131,6 +131,7 @@
  • Missing Plugins
  • Object History
  • Configure
    • +
  • Change theme
  • Logout
    • diff --git a/app/components/topbar/topbar.js b/app/components/topbar/topbar.js index 03f58ba..491057f 100644 --- a/app/components/topbar/topbar.js +++ b/app/components/topbar/topbar.js @@ -2,8 +2,8 @@ angular.module('bansho.topbar', ['bansho.surveil']) - .controller('TopBarCtrl', ['$rootScope', '$scope', '$interval', 'surveilStatus', 'promisesManager', 'authService', - function ($rootScope, $scope, $interval, surveilStatus, promisesManager, authService) { + .controller('TopBarCtrl', ['$rootScope', '$scope', '$interval', 'surveilStatus', 'promisesManager', 'authService', 'themeManager', + 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 () { diff --git a/app/index.html b/app/index.html index 3f2f5f9..cf74644 100644 --- a/app/index.html +++ b/app/index.html @@ -93,7 +93,7 @@ - +