Fix angular style issues.

This commit is contained in:
Alexis Lahouze 2016-10-14 08:19:23 +02:00
parent edac1ee6a9
commit e91bf14298
2 changed files with 293 additions and 294 deletions

View File

@ -91,14 +91,14 @@ angular.module('accountant', [
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
})
.controller('MainController', function($scope, $rootScope, $http, authService, $storage, $ngBootbox) {
.controller('MainController', function($rootScope, $http, authService, $storage, $ngBootbox) {
var vm = this;
vm.dialogShown = false;
vm.showLoginForm = function() {
// First, if there are registered credentials, use them
if ($scope.dialogShown) {
if (vm.dialogShown) {
return;
}
@ -127,13 +127,9 @@ angular.module('accountant', [
).success(function(result) {
// TODO Alexis Lahouze 2015-08-28 Handle callback.
// Call to /api/login to retrieve the token
// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
$storage.set('token_type', result.token_type);
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers
$storage.set('token', result.token);
// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
$storage.set('expiration_date', result.expiration_date);
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers
authService.loginConfirmed();
});
@ -151,10 +147,10 @@ angular.module('accountant', [
});
};
var onAuthLoginRequired = $rootScope.$on('event:auth-loginRequired', $scope.showLoginForm);
vm.onAuthLoginRequired = $rootScope.$on('event:auth-loginRequired', vm.showLoginForm);
$scope.$on('$destroy', function() {
onAuthLoginRequired = angular.noop();
vm.$on('$destroy', function() {
vm.onAuthLoginRequired = angular.noop();
});
})

View File

@ -27,64 +27,59 @@ angular.module('accountant.operations', [
'highcharts-ng'
])
.config(['$resourceProvider', function($resourceProvider) {
.config(function($resourceProvider) {
// Keep trailing slashes to avoid redirect by flask..
$resourceProvider.defaults.stripTrailingSlashes = false;
}])
})
.factory('Operation', ['$resource', function($resource) {
.factory('Operation', function($resource) {
return $resource(
'/api/operation/:id', {
id: '@id'
}
);
}])
})
.factory('OHLC', [
'$resource', '$routeParams', function($resource, $routeParams) {
return $resource(
'/api/account/:account_id/ohlc', {
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
}
);
}
])
.factory('OHLC', function($resource, $routeParams) {
return $resource(
'/api/account/:account_id/ohlc', {
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
}
);
})
.factory('Category', [
'$resource', '$routeParams', function($resource, $routeParams) {
return $resource(
'/api/account/:account_id/category', {
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
}
);
}
])
.factory('Category', function($resource, $routeParams) {
return $resource(
'/api/account/:account_id/category', {
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
}
);
})
.factory('Balance', [
'$resource', '$routeParams', function($resource, $routeParams) {
return $resource(
'/api/account/:account_id/balance', {
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
}
);
}
])
.factory('Balance', function($resource, $routeParams) {
return $resource(
'/api/account/:account_id/balance', {
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
}
);
})
/*
* Controller for category chart.
*/
.controller('CategoryChartController', [
'$rootScope', '$scope', '$http', 'Category', 'Balance',
function($rootScope, $scope, $http, Category, Balance) {
.controller('CategoryChartController',
function($rootScope, $http, Category, Balance) {
var vm = this;
var colors = Highcharts.getOptions().colors;
$scope.revenueColor = colors[2];
$scope.expenseColor = colors[3];
vm.revenueColor = colors[2];
vm.expenseColor = colors[3];
// Configure pie chart for categories.
$scope.config = {
vm.config = {
options: {
chart: {
type: 'pie',
@ -137,7 +132,7 @@ angular.module('accountant.operations', [
}]
};
$scope.brightenColor = function(color) {
vm.brightenColor = function(color) {
var brightness = 0.2;
// eslint-disable-next-line new-cap
@ -145,8 +140,8 @@ angular.module('accountant.operations', [
};
// Load categories, mainly to populate the pie chart.
$scope.load = function(begin, end) {
$scope.config.loading = true;
vm.load = function(begin, end) {
vm.config.loading = true;
Category.query({
begin: begin.format('YYYY-MM-DD'),
@ -155,8 +150,8 @@ angular.module('accountant.operations', [
var expenses = [];
var revenues = [];
var expenseColor = $scope.brightenColor($scope.expenseColor);
var revenueColor = $scope.brightenColor($scope.revenueColor);
var expenseColor = vm.brightenColor(vm.expenseColor);
var revenueColor = vm.brightenColor(vm.revenueColor);
angular.forEach(angular.fromJson(data), function(category) {
expenses.push({
@ -173,312 +168,320 @@ angular.module('accountant.operations', [
});
// Note: expenses and revenues must be in the same order than in series[0].
$scope.config.series[1].data = revenues.concat(expenses);
vm.config.series[1].data = revenues.concat(expenses);
$scope.config.loading = false;
vm.config.loading = false;
});
};
/*
* Get account balance.
*/
$scope.getBalance = function(begin, end) {
vm.getBalance = function(begin, end) {
Balance.get({
begin: begin.format('YYYY-MM-DD'),
end: end.format('YYYY-MM-DD')
}, function(balance) {
// Update pie chart subtitle with Balance.
$scope.config.subtitle = {
vm.config.subtitle = {
text: 'Balance: ' + balance.balance
};
$scope.config.series[0].data = [{
vm.config.series[0].data = [{
name: 'Revenues',
y: balance.revenues,
color: $scope.revenueColor
color: vm.revenueColor
}, {
name: 'Expenses',
y: -balance.expenses,
color: $scope.expenseColor
color: vm.expenseColor
}];
});
};
// Reload categories and account status on range selection.
$rootScope.$on('rangeSelectedEvent', function(e, args) {
$scope.load(args.begin, args.end);
$scope.getBalance(args.begin, args.end);
vm.onRangeSelected = $rootScope.$on('rangeSelectedEvent', function(e, args) {
vm.load(args.begin, args.end);
vm.getBalance(args.begin, args.end);
});
vm.$on('$destroy', function(){
vm.onRangeSelected = angular.noop();
});
}
])
)
/*
* Controller for the sold chart.
*/
.controller('SoldChartController', [
'$rootScope', '$scope', '$http', 'OHLC',
function($rootScope, $scope, $http, OHLC) {
// Configure chart for operations.
$scope.config = {
options: {
chart: {
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 0
},
navigator: {
enabled: true
},
tooltip: {
crosshairs: true,
shared: true,
valueDecimals: 2,
valueSuffix: '€'
},
scrollbar: {
liveRedraw: false
}
.controller('SoldChartController', function($rootScope, $http, OHLC) {
var vm = this;
// Configure chart for operations.
vm.config = {
options: {
chart: {
zoomType: 'x'
},
series: [{
type: 'ohlc',
name: 'Sold',
data: [],
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}],
title: {
text: 'Sold evolution'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%Y'
},
minRange: 3600 * 1000 * 24 * 14, // 2 weeks
events: {
afterSetExtremes: function(e) {
$scope.$emit('rangeSelectedEvent', {
begin: moment.utc(e.min), end: moment.utc(e.max)
});
}
},
currentMin: moment.utc().startOf('month'),
currentMax: moment.utc().endOf('month')
},
yAxis: {
plotLines: [{
color: 'orange',
width: 2,
value: 0.0
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
color: 'red',
width: 2,
value: 0.0
}]
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 0
},
useHighStocks: true
};
navigator: {
enabled: true
},
tooltip: {
crosshairs: true,
shared: true,
valueDecimals: 2,
valueSuffix: '€'
},
scrollbar: {
liveRedraw: false
}
},
series: [{
type: 'ohlc',
name: 'Sold',
data: [],
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}],
title: {
text: 'Sold evolution'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%Y'
},
minRange: 3600 * 1000 * 24 * 14, // 2 weeks
events: {
afterSetExtremes: function(e) {
vm.$emit('rangeSelectedEvent', {
begin: moment.utc(e.min), end: moment.utc(e.max)
});
}
},
currentMin: moment.utc().startOf('month'),
currentMax: moment.utc().endOf('month')
},
yAxis: {
plotLines: [{
color: 'orange',
width: 2,
value: 0.0
}, {
color: 'red',
width: 2,
value: 0.0
}]
},
useHighStocks: true
};
$scope.loadSolds = function() {
$scope.config.loading = true;
vm.loadSolds = function() {
vm.config.loading = true;
OHLC.query({}, function(data) {
$scope.config.series[0].data = [];
OHLC.query({}, function(data) {
vm.config.series[0].data = [];
angular.forEach(data, function(operation) {
$scope.config.series[0].data.push([
// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
moment.utc(operation.operation_date).valueOf(),
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers
operation.open, operation.high, operation.low, operation.close
]);
});
$scope.$emit('rangeSelectedEvent', {
begin: $scope.config.xAxis.currentMin,
end: $scope.config.xAxis.currentMax
});
$scope.config.loading = false;
angular.forEach(data, function(operation) {
vm.config.series[0].data.push([
moment.utc(operation.operation_date).valueOf(),
operation.open, operation.high, operation.low, operation.close
]);
});
};
// Reload solds when an operation is saved.
$rootScope.$on('operationSavedEvent', function() {
$scope.loadSolds();
vm.$emit('rangeSelectedEvent', {
begin: vm.config.xAxis.currentMin,
end: vm.config.xAxis.currentMax
});
vm.config.loading = false;
});
};
// Reload solds when an operation is deleted.
$rootScope.$on('operationDeletedEvent', function() {
$scope.loadSolds();
});
// Reload solds when an operation is saved.
vm.onOperationSaved = $rootScope.$on('operationSavedEvent', function() {
vm.loadSolds();
});
// Update authorized overdraft on account loading.
$rootScope.$on('accountLoadedEvent', function(e, account) {
// jscs:disable requireCamelCaseOrUpperCaseIdentifiers
$scope.config.yAxis.plotLines[1].value = account.authorized_overdraft;
// jscs:enable requireCamelCaseOrUpperCaseIdentifiers
});
// Reload solds when an operation is deleted.
vm.onOperationDeleted = $rootScope.$on('operationDeletedEvent', function() {
vm.loadSolds();
});
// Select beginning and end of month.
$scope.loadSolds();
}
])
// Update authorized overdraft on account loading.
vm.onAccountLoaded = $rootScope.$on('accountLoadedEvent', function(e, account) {
vm.config.yAxis.plotLines[1].value = account.authorized_overdraft;
});
vm.$on('$destroy', function() {
vm.onOperationSaved = angular.noop();
vm.onOperationDeleted = angular.noop();
vm.onAccountLoaded = angular.noop();
});
// Select beginning and end of month.
vm.loadSolds();
})
/*
* Controller for the operations.
*/
.controller('OperationController', [
'$scope', '$rootScope', '$routeParams', '$ngBootbox', 'Notification', 'Account', 'Operation',
function($scope, $rootScope, $routeParams, $ngBootbox, Notification, Account, Operation) {
// List of operations.
$scope.operations = [];
.controller('OperationController', function($rootScope, $routeParams, $ngBootbox, Notification, Account, Operation) {
var vm = this;
/*
* Add an empty operation.
*/
$scope.add = function() {
var operation = new Operation({
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
});
// List of operations.
vm.operations = [];
$scope.operations.splice(0, 0, operation);
};
/*
* Add an empty operation.
*/
vm.add = function() {
var operation = new Operation({
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId
});
/*
* Load operations.
*/
$scope.load = function(begin, end) {
$scope.operations = Operation.query({
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId,
begin: begin.format('YYYY-MM-DD'),
end: end.format('YYYY-MM-DD')
});
};
vm.operations.splice(0, 0, operation);
};
/*
* Cancel edition.
*/
$scope.cancelEdit = function(operation, rowform, $index) {
if (operation.id) {
rowform.$cancel();
} else {
$scope.operations.splice($index, 1);
}
};
/*
* Load operations.
*/
vm.load = function(begin, end) {
vm.operations = Operation.query({
// eslint-disable-next-line camelcase
account_id: $routeParams.accountId,
begin: begin.format('YYYY-MM-DD'),
end: end.format('YYYY-MM-DD')
});
};
/*
* Toggle pointed indicator for an operation.
*/
$scope.togglePointed = function(operation, rowform) {
operation.pointed = !operation.pointed;
/*
* Cancel edition.
*/
vm.cancelEdit = function(operation, rowform, $index) {
if (operation.id) {
rowform.$cancel();
} else {
vm.operations.splice($index, 1);
}
};
// Save operation if not editing it.
if (!rowform.$visible) {
$scope.save(operation);
}
};
/*
* Toggle pointed indicator for an operation.
*/
vm.togglePointed = function(operation, rowform) {
operation.pointed = !operation.pointed;
/*
* Toggle cancel indicator for an operation.
*/
$scope.toggleCanceled = function(operation) {
operation.canceled = !operation.canceled;
// Save operation if not editing it.
if (!rowform.$visible) {
vm.save(operation);
}
};
$scope.save(operation);
};
/*
* Toggle cancel indicator for an operation.
*/
vm.toggleCanceled = function(operation) {
operation.canceled = !operation.canceled;
/*
* Save an operation and emit operationSavedEvent.
*/
$scope.save = function($data, $index) {
// Check if $data is already a resource.
var operation;
vm.save(operation);
};
if ($data.$save) {
operation = $data;
} else {
operation = $scope.operations[$index];
operation = angular.merge(operation, $data);
}
/*
* Save an operation and emit operationSavedEvent.
*/
vm.save = function($data, $index) {
// Check if $data is already a resource.
var operation;
operation.confirmed = true;
if ($data.$save) {
operation = $data;
} else {
operation = vm.operations[$index];
operation = angular.merge(operation, $data);
}
return operation.$save().then(function(data) {
Notification.success('Operation #' + data.id + ' saved.');
operation.confirmed = true;
$scope.$emit('operationSavedEvent', data);
});
};
return operation.$save().then(function(data) {
Notification.success('Operation #' + data.id + ' saved.');
/*
* Delete an operation and emit operationDeletedEvent.
*/
$scope.delete = function(operation, $index) {
var id = operation.id;
vm.$emit('operationSavedEvent', data);
});
};
$ngBootbox.confirm(
'Voulez-vous supprimer l\'opération \\\'' + operation.label + '\\\' ?',
function(result) {
if (result) {
operation.$delete().then(function() {
Notification.success('Operation #' + id + ' deleted.');
/*
* Delete an operation and emit operationDeletedEvent.
*/
vm.delete = function(operation, $index) {
var id = operation.id;
// Remove operation from array.
$scope.operation.splice($index, 1);
$ngBootbox.confirm(
'Voulez-vous supprimer l\'opération \\\'' + operation.label + '\\\' ?',
function(result) {
if (result) {
operation.$delete().then(function() {
Notification.success('Operation #' + id + ' deleted.');
$scope.$emit('operationDeletedEvent', operation);
});
}
// Remove operation from array.
vm.operation.splice($index, 1);
vm.$emit('operationDeletedEvent', operation);
});
}
);
};
}
);
};
$scope.account = Account.get({
id: $routeParams.accountId
});
vm.account = Account.get({
id: $routeParams.accountId
});
/*
* Reload operations on rangeSelectedEvent.
*/
$rootScope.$on('rangeSelectedEvent', function(e, args) {
$scope.load(args.begin, args.end);
});
}
])
/*
* Reload operations on rangeSelectedEvent.
*/
vm.onRangeSelected = $rootScope.$on('rangeSelectedEvent', function(e, args) {
vm.load(args.begin, args.end);
});
.directive('operationFormDialog', function($ngBootbox) {
vm.$on('$destroy', function() {
vm.onRangeSelected = angular.noop;
});
})
.directive('operationFormDialog', function($log, $ngBootbox) {
return {
restrict: 'A',
scope: {
@ -509,10 +512,10 @@ angular.module('accountant.operations', [
className: 'btn-success',
callback: function() {
// Validate form
console.log(scope.form);
$log.log(scope.form);
// Save operation
console.log(scope.operation);
$log.log(scope.operation);
// TODO Alexis Lahouze 2016-05-24 Save operation, handle return.
return false;