Miroirs/credger
1
0
Fork 0
mirror of https://github.com/gwenhael-le-moine/credger.git synced 2024-12-26 09:58:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

reindent + fix Swal call

Browse source
This commit is contained in:
Gwenhael Le Moine 2021-05-12 16:57:38 +02:00
parent 66c0b952c2
commit 4357ac5002
No known key found for this signature in database
GPG key ID: FDFE3669426707A7
1 changed files with 253 additions and 253 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

506
public/js/app.js
View file

@ -1,72 +1,72 @@
var app = angular.module('app', var app = angular.module('app',
['ui.router', ['ui.router',
'nvd3', 'nvd3',
'angularMoment', 'angularMoment',
'chieffancypants.loadingBar', 'chieffancypants.loadingBar',
'rzSlider', 'rzSlider',
]) ])
.config(['$stateProvider', '$urlRouterProvider', .config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) { function($stateProvider, $urlRouterProvider) {
$stateProvider $stateProvider
.state('app', { .state('app', {
url: '', url: '',
component: 'dashboard' component: 'dashboard'
}); });
} }
]); ]);
// BUCKET // BUCKET
app.component('bucket', app.component('bucket',
{ {
bindings: { bindings: {
categories: '<', categories: '<',
period: '<' period: '<'
}, },
controller: ['$filter', 'API', controller: ['$filter', 'API',
function($filter, API) { function($filter, API) {
let ctrl = this; let ctrl = this;
ctrl.depth = 99; ctrl.depth = 99;
ctrl.graph_options = { ctrl.graph_options = {
chart: { chart: {
type: 'multiBarHorizontalChart', type: 'multiBarHorizontalChart',
height: 600, height: 600,
margin: { margin: {
top: 20, top: 20,
right: 20, right: 20,
bottom: 20, bottom: 20,
left: 200 left: 200
}, },
x: (d) => { return d.account; }, x: (d) => { return d.account; },
y: (d) => { return d.amount; }, y: (d) => { return d.amount; },
valueFormat: (d) => { return `${d} €`; }, valueFormat: (d) => { return `${d} €`; },
showYAxis: false, showYAxis: false,
showValues: true, showValues: true,
showLegend: true, showLegend: true,
showControls: false, showControls: false,
showTooltipPercent: true, showTooltipPercent: true,
duration: 500, duration: 500,
labelThreshold: 0.01, labelThreshold: 0.01,
labelSunbeamLayout: true, labelSunbeamLayout: true,
labelsOutside: true, labelsOutside: true,
multibar: { multibar: {
dispatch: { dispatch: {
elementClick: (event) => { elementClick: (event) => {
API.register(ctrl.period, event.data.account) API.register(ctrl.period, event.data.account)
.then(function success(response) { .then(function success(response) {
let format_transaction = (transaction) => { let format_transaction = (transaction) => {
return ` return `
<tr> <tr>
<td>${transaction.date}</td> <td>${transaction.date}</td>
<td>${transaction.payee}</td> <td>${transaction.payee}</td>
<td style="text-align: right;">${transaction.amount} ${transaction.currency}</td> <td style="text-align: right;">${transaction.amount} ${transaction.currency}</td>
</tr>`; </tr>`;
}; };
swal({ Swal.fire({
title: response.data.key, title: response.data.key,
html: ` html: `
<table style="width: 100%;"> <table style="width: 100%;">
<thead> <thead>
<tr> <tr>
@ -78,35 +78,35 @@ app.component('bucket',
</tbody> </tbody>
<tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot> <tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot>
</table>`}); </table>`});
}, function error(response) { alert("error!"); }); }, function error(response) { alert("error!"); });
} }
} }
} }
} }
}; };
ctrl.$onChanges = (changes) => { ctrl.$onChanges = (changes) => {
if (changes.period && changes.period.currentValue != undefined) { if (changes.period && changes.period.currentValue != undefined) {
API.balance(ctrl.period, ctrl.categories, ctrl.depth) API.balance(ctrl.period, ctrl.categories, ctrl.depth)
.then((response) => { .then((response) => {
ctrl.raw_data = _(response.data) ctrl.raw_data = _(response.data)
.sortBy((account) => { return account.name; }); .sortBy((account) => { return account.name; });
ctrl.graph_options.chart.height = 60 + (25 * ctrl.raw_data.length); ctrl.graph_options.chart.height = 60 + (25 * ctrl.raw_data.length);
ctrl.data = ctrl.categories.split(' ').map((category) => { ctrl.data = ctrl.categories.split(' ').map((category) => {
return { return {
key: category, key: category,
values: _(ctrl.raw_data).select((line) => { return line.account.match(`^${category}:.*`); }) values: _(ctrl.raw_data).select((line) => { return line.account.match(`^${category}:.*`); })
} }
}) })
}); });
} }
}; };
} }
], ],
template: ` template: `
<div class="bucket"> <div class="bucket">
<div class="content"> <div class="content">
<div class="graph"> <div class="graph">
@ -117,109 +117,109 @@ app.component('bucket',
</div> </div>
</div> </div>
` `
}); });
// DASHBOARD // DASHBOARD
app.component('dashboard', app.component('dashboard',
{ {
controller: ['$filter', 'API', controller: ['$filter', 'API',
function($filter, API) { function($filter, API) {
let ctrl = this; let ctrl = this;
ctrl.granularity = "monthly"; ctrl.granularity = "monthly";
ctrl.account_selection = "depth"; ctrl.account_selection = "depth";
let is_monthly = () => { return ctrl.granularity == "monthly"; }; let is_monthly = () => { return ctrl.granularity == "monthly"; };
ctrl.compute_selected_accounts = () => { ctrl.compute_selected_accounts = () => {
ctrl.graphed_accounts = _.chain(ctrl.main_accounts_depths) ctrl.graphed_accounts = _.chain(ctrl.main_accounts_depths)
.map((account) => { .map((account) => {
if (account.depth < 1) { if (account.depth < 1) {
return null; return null;
} else { } else {
return _(ctrl.raw_accounts) return _(ctrl.raw_accounts)
.select((account2) => { .select((account2) => {
return account2[0] == account.name && account2.length == account.depth; return account2[0] == account.name && account2.length == account.depth;
}) })
.map((account3) => { return account3.join(":"); }); .map((account3) => { return account3.join(":"); });
} }
}) })
.compact() .compact()
.flatten() .flatten()
.value(); .value();
ctrl.retrieve_graph_values(ctrl.graphed_accounts); ctrl.retrieve_graph_values(ctrl.graphed_accounts);
}; };
ctrl.retrieve_graph_values = (categories) => { ctrl.retrieve_graph_values = (categories) => {
API.graph_values("", ctrl.granularity, categories.join(" ")) API.graph_values("", ctrl.granularity, categories.join(" "))
.then((response) => { .then((response) => {
ctrl.periods = []; ctrl.periods = [];
_.chain(response.data) _.chain(response.data)
.reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, []) .reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, [])
.pluck('date') .pluck('date')
.each((date) => { .each((date) => {
_(response.data).each((cat) => { _(response.data).each((cat) => {
let value = _(cat).find({ date: date }); let value = _(cat).find({ date: date });
if (_(value).isUndefined()) { if (_(value).isUndefined()) {
cat.push({ cat.push({
date: date, date: date,
amount: 0, amount: 0,
currency: _(cat).first().currency currency: _(cat).first().currency
}); });
} }
}); });
}) })
.each((cat) => { .each((cat) => {
cat = _(cat).sortBy((month) => { return month.date; }); cat = _(cat).sortBy((month) => { return month.date; });
}); });
ctrl.graphique = { ctrl.graphique = {
options: { options: {
chart: { chart: {
type: 'multiBarChart', type: 'multiBarChart',
height: 450, height: 450,
stacked: true, stacked: true,
showControls: true, showControls: true,
showLegend: true, showLegend: true,
showLabels: true, showLabels: true,
showValues: true, showValues: true,
showYAxis: true, showYAxis: true,
duration: 500, duration: 500,
reduceXTicks: false, reduceXTicks: false,
rotateLabels: -67, rotateLabels: -67,
labelSunbeamLayout: true, labelSunbeamLayout: true,
useInteractiveGuideline: true, useInteractiveGuideline: true,
interactiveLayer: { interactiveLayer: {
dispatch: { dispatch: {
elementClick: (t) => { elementClick: (t) => {
console.log(ctrl.period) console.log(ctrl.period)
ctrl.period = t.pointXValue; ctrl.period = t.pointXValue;
console.log(ctrl.period) console.log(ctrl.period)
} }
}, },
tooltip: { tooltip: {
contentGenerator: function(e) { contentGenerator: function(e) {
let format_line = (serie) => { let format_line = (serie) => {
return ` return `
<tr> <tr>
<td style="background-color: ${serie.color}"> </td> <td style="background-color: ${serie.color}"> </td>
<td>${serie.key}</td> <td>${serie.key}</td>
<td style="text-align: right; font-weight: bold;">${serie.value}</td> <td style="text-align: right; font-weight: bold;">${serie.value}</td>
</tr> </tr>
`; `;
}; };
let prepare_series = (series) => { let prepare_series = (series) => {
series.sort((s1, s2) => { return s2.value - s1.value; }); series.sort((s1, s2) => { return s2.value - s1.value; });
return series.filter((s) => { return s.value != 0; }); return series.filter((s) => { return s.value != 0; });
}; };
let total = e.series.reduce((memo, serie) => { return memo + serie.value; }, 0); let total = e.series.reduce((memo, serie) => { return memo + serie.value; }, 0);
return ` return `
<h2>${e.value}</h2> <h2>${e.value}</h2>
<table> <table>
<tbody> <tbody>
@ -234,66 +234,66 @@ return `
</tfoot> </tfoot>
</table> </table>
`; `;
} }
} }
} }
} }
}, },
data: _.chain(response.data) data: _.chain(response.data)
.keys() .keys()
.reverse() .reverse()
.map((key) => { .map((key) => {
return { return {
key: key, key: key,
values: _.chain(response.data[key]) values: _.chain(response.data[key])
.map((value) => { .map((value) => {
let date = new Date(value.date); let date = new Date(value.date);
let period = is_monthly() ? date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1) : date.getFullYear(); let period = is_monthly() ? date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1) : date.getFullYear();
ctrl.periods.push(period); ctrl.periods.push(period);
return { return {
key: key, key: key,
x: period, x: period,
y: parseInt(value.amount) y: parseInt(value.amount)
}; };
}) })
.sortBy((item) => { return item.x; }) .sortBy((item) => { return item.x; })
.value() .value()
}; };
}) })
.value() .value()
}; };
ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value(); ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value();
ctrl.period = _(ctrl.periods).first(); ctrl.period = _(ctrl.periods).first();
}); });
}; };
API.accounts() API.accounts()
.then((response) => { .then((response) => {
ctrl.raw_accounts = response.data.sort((account) => { return account.length; }).reverse(); ctrl.raw_accounts = response.data.sort((account) => { return account.length; }).reverse();
ctrl.accounts = ctrl.raw_accounts.map((account_ary) => { return account_ary.join(':'); }); ctrl.accounts = ctrl.raw_accounts.map((account_ary) => { return account_ary.join(':'); });
ctrl.main_accounts_depths = _.chain(ctrl.raw_accounts) ctrl.main_accounts_depths = _.chain(ctrl.raw_accounts)
.select((account) => { return account.length == 1; }) .select((account) => { return account.length == 1; })
.map((account) => { .map((account) => {
return { return {
name: account[0], name: account[0],
depth: _(['Expenses']).contains(account[0]) ? 2 : _(['Income']).contains(account[0]) ? 1 : 0, depth: _(['Expenses']).contains(account[0]) ? 2 : _(['Income']).contains(account[0]) ? 1 : 0,
max_depth: _.chain(ctrl.raw_accounts) max_depth: _.chain(ctrl.raw_accounts)
.select((account2) => { return account2[0] == account[0] }) .select((account2) => { return account2[0] == account[0] })
.reduce((memo, account3) => { return account3.length > memo ? account3.length : memo; }, 0) .reduce((memo, account3) => { return account3.length > memo ? account3.length : memo; }, 0)
.value() .value()
}; };
}) })
.value(); .value();
ctrl.compute_selected_accounts(); ctrl.compute_selected_accounts();
}); });
} }
], ],
template: ` template: `
<div class="dashboard"> <div class="dashboard">
<div class="global-graph" style="height: 450px;"> <div class="global-graph" style="height: 450px;">
<div class="accounts" style="width: 20%; height: 100%; float: left;"> <div class="accounts" style="width: 20%; height: 100%; float: left;">
@ -337,45 +337,45 @@ return `
<bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket> <bucket categories="'Expenses Income Equity Liabilities'" period="$ctrl.period"></bucket>
</div> </div>
` `
}); });
// APIS // APIS
app.service('API', app.service('API',
['$http', ['$http',
function($http) { function($http) {
let API = this; let API = this;
API.balance = function(period, categories, depth) { API.balance = function(period, categories, depth) {
return $http.get('/api/ledger/balance', { return $http.get('/api/ledger/balance', {
params: { params: {
period: period, period: period,
categories: categories, categories: categories,
depth: depth depth: depth
} }
}); });
}; };
API.register = function(period, categories) { API.register = function(period, categories) {
return $http.get('/api/ledger/register', { return $http.get('/api/ledger/register', {
params: { params: {
period: period, period: period,
categories: categories categories: categories
} }
}); });
}; };
API.graph_values = function(period, granularity, categories) { API.graph_values = function(period, granularity, categories) {
return $http.get('/api/ledger/graph_values', { return $http.get('/api/ledger/graph_values', {
params: { params: {
period: period, period: period,
granularity: granularity, granularity: granularity,
categories: categories categories: categories
} }
}); });
}; };
API.accounts = _.memoize(function() { API.accounts = _.memoize(function() {
return $http.get('/api/ledger/accounts'); return $http.get('/api/ledger/accounts');
}); });
}]); }]);