From e91bf1429823d0aff20096089686d3ff9b8fbd99 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Fri, 14 Oct 2016 08:19:23 +0200 Subject: [PATCH] Fix angular style issues. --- accountant-ui/js/app.js | 14 +- accountant-ui/js/operations.js | 573 +++++++++++++++++---------------- 2 files changed, 293 insertions(+), 294 deletions(-) diff --git a/accountant-ui/js/app.js b/accountant-ui/js/app.js index 7be2c90..fe4f923 100644 --- a/accountant-ui/js/app.js +++ b/accountant-ui/js/app.js @@ -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(); }); }) diff --git a/accountant-ui/js/operations.js b/accountant-ui/js/operations.js index 7a1f55a..f02025f 100644 --- a/accountant-ui/js/operations.js +++ b/accountant-ui/js/operations.js @@ -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;