Feature: add growl for notification

This commit is contained in:
2015-10-01 12:03:47 +00:00
parent d7847bc6b5
commit 2d3d18ba9b
7 changed files with 32 additions and 17 deletions

View File

@@ -8,7 +8,9 @@
"animate.css": "~3.3.0",
"bootstrap": "~3.3.5",
"font-awesome": "~4.4.0",
"angular-xeditable": "~0.1.9"
"angular-xeditable": "~0.1.9",
"angular-growl-v2": "~0.7.5",
"angular-animate": "~1.4.7"
},
"devDependencies": {
"angular-mocks": "~1.4.4"

View File

@@ -19,6 +19,8 @@ module.exports = function(config) {
'public/libs/angular-route/angular-route.js',
'public/libs/angular-cookies/angular-cookies.js',
'public/libs/angular-xeditable/dist/js/xeditable.min.js',
'public/libs/angular-growl-v2/build/angular-growl.min.js',
'public/libs/angular-animate/angular-animate.min.js',
'public/libs/angular-mocks/angular-mocks.js',
'public/js/**/*.js',
'public/**/*.controller.js',

View File

@@ -8,6 +8,7 @@
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="/libs/angular-xeditable/dist/css/xeditable.css" type="text/css" />
<link rel="stylesheet" href="/libs/angular-growl-v2/build/angular-growl.min.css" type="text/css" />
</head>
<body>
<div class="container">
@@ -21,8 +22,7 @@
</ul>
</nav>
</div>
<div ng-class="{ 'alert': flash, 'alert-success' : flash.type === 'success', 'alert-danger': flash.type === 'error'}" ng-if="flash" ng-bind="flash.message"></div>
<div growl></div>
<div ng-view></div>
<div class="credits text-center">
@@ -38,9 +38,12 @@
<script type="text/javascript" src="/libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="/libs/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="/libs/angular-xeditable/dist/js/xeditable.min.js"></script>
<script type="text/javascript" src="/libs/angular-growl-v2/build/angular-growl.min.js"></script>
<script type="text/javascript" src="/libs/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/routes.js"></script>
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/services/authentication.service.js"></script>
<script type="text/javascript" src="/js/services/flash.service.js"></script>
<script type="text/javascript" src="/js/services/user.service.js"></script>

View File

@@ -4,7 +4,7 @@
var HOST = 'http://cloudbudget-febbweiss.c9.io/api';
angular
.module('cloudbudget', ['ngRoute', 'routes', 'ngCookies', 'xeditable'])
.module('cloudbudget', ['ngRoute', 'ngAnimate', 'routes', 'angular-growl', 'config', 'ngCookies', 'xeditable'])
.constant('apiRoutes', {
'host' : HOST,
'port' : "80",

15
public/js/config.js Normal file
View File

@@ -0,0 +1,15 @@
(function() {
'use strict';
angular
.module('config', [])
.config(config);
config.$inject = ['growlProvider'];
function config(growlProvider) {
growlProvider.globalReversedOrder(true);
growlProvider.globalTimeToLive(5000);
growlProvider.globalDisableCountDown(true);
};
})();

View File

@@ -8,6 +8,7 @@
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',

View File

@@ -5,9 +5,9 @@
.module('cloudbudget')
.factory('FlashService', FlashService);
FlashService.$inject = ['$rootScope'];
FlashService.$inject = ['$rootScope', 'growl'];
function FlashService($rootScope) {
function FlashService($rootScope, growl) {
var service = {};
service.success = success;
@@ -35,19 +35,11 @@
}
function success(message, keepAfterLocationChange) {
$rootScope.flash = {
message: message,
type: 'success',
keepAfterLocationChange: keepAfterLocationChange
};
growl.success(message,{title: 'Success!'});
}
function error(message, keepAfterLocationChange) {
$rootScope.flash = {
message: message,
type: 'error',
keepAfterLocationChange: keepAfterLocationChange
};
growl.error(message, {title: 'Error!'});
}
}
})();