x/bansho
Code Issues Proposed changes

Add theme switch

Browse Source 
Change-Id: I5b2a546bfa63c31c36e17a3dfc097a36be7028a9
This commit is contained in:
Vincent Fournier 2015-06-02 13:50:42 -04:00 committed by aviau
parent 45aae4bf8a
commit dd868fc21c
8 changed files with 93 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Gruntfile.js
View File

@ -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'

4
app/app.js
View File

@ -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();

8
app/components/authentication/authentication.js
View File

@ -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;
}])

68
app/components/config/config.js
View File

@ -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();

3
app/components/config/config.json
View File

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

1
app/components/topbar/topbar.html
View File

@ -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>

8
app/components/topbar/topbar.js
View File

@ -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 () {

2
app/index.html
View File

@ -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">