mirror of
https://github.com/gwenhael-le-moine/credger.git
synced 2024-12-26 09:58:36 +01:00
reindent + fix Swal call
This commit is contained in:
Gwenhael Le Moine
parent
66c0b952c2
commit
4357ac5002
1 changed files with 253 additions and 253 deletions
506
public/js/app.js
506
public/js/app.js
|
|
@ -1,72 +1,72 @@
|
|||
var app = angular.module('app',
|
||||
['ui.router',
|
||||
'nvd3',
|
||||
'angularMoment',
|
||||
'chieffancypants.loadingBar',
|
||||
'rzSlider',
|
||||
])
|
||||
.config(['$stateProvider', '$urlRouterProvider',
|
||||
function($stateProvider, $urlRouterProvider) {
|
||||
$stateProvider
|
||||
.state('app', {
|
||||
url: '',
|
||||
component: 'dashboard'
|
||||
});
|
||||
}
|
||||
]);
|
||||
['ui.router',
|
||||
'nvd3',
|
||||
'angularMoment',
|
||||
'chieffancypants.loadingBar',
|
||||
'rzSlider',
|
||||
])
|
||||
.config(['$stateProvider', '$urlRouterProvider',
|
||||
function($stateProvider, $urlRouterProvider) {
|
||||
$stateProvider
|
||||
.state('app', {
|
||||
url: '',
|
||||
component: 'dashboard'
|
||||
});
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
// BUCKET
|
||||
app.component('bucket',
|
||||
{
|
||||
bindings: {
|
||||
categories: '<',
|
||||
period: '<'
|
||||
},
|
||||
controller: ['$filter', 'API',
|
||||
function($filter, API) {
|
||||
let ctrl = this;
|
||||
ctrl.depth = 99;
|
||||
{
|
||||
bindings: {
|
||||
categories: '<',
|
||||
period: '<'
|
||||
},
|
||||
controller: ['$filter', 'API',
|
||||
function($filter, API) {
|
||||
let ctrl = this;
|
||||
ctrl.depth = 99;
|
||||
|
||||
ctrl.graph_options = {
|
||||
chart: {
|
||||
type: 'multiBarHorizontalChart',
|
||||
height: 600,
|
||||
margin: {
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
left: 200
|
||||
},
|
||||
x: (d) => { return d.account; },
|
||||
y: (d) => { return d.amount; },
|
||||
valueFormat: (d) => { return `${d} €`; },
|
||||
showYAxis: false,
|
||||
showValues: true,
|
||||
showLegend: true,
|
||||
showControls: false,
|
||||
showTooltipPercent: true,
|
||||
duration: 500,
|
||||
labelThreshold: 0.01,
|
||||
labelSunbeamLayout: true,
|
||||
labelsOutside: true,
|
||||
multibar: {
|
||||
dispatch: {
|
||||
elementClick: (event) => {
|
||||
API.register(ctrl.period, event.data.account)
|
||||
.then(function success(response) {
|
||||
let format_transaction = (transaction) => {
|
||||
return `
|
||||
ctrl.graph_options = {
|
||||
chart: {
|
||||
type: 'multiBarHorizontalChart',
|
||||
height: 600,
|
||||
margin: {
|
||||
top: 20,
|
||||
right: 20,
|
||||
bottom: 20,
|
||||
left: 200
|
||||
},
|
||||
x: (d) => { return d.account; },
|
||||
y: (d) => { return d.amount; },
|
||||
valueFormat: (d) => { return `${d} €`; },
|
||||
showYAxis: false,
|
||||
showValues: true,
|
||||
showLegend: true,
|
||||
showControls: false,
|
||||
showTooltipPercent: true,
|
||||
duration: 500,
|
||||
labelThreshold: 0.01,
|
||||
labelSunbeamLayout: true,
|
||||
labelsOutside: true,
|
||||
multibar: {
|
||||
dispatch: {
|
||||
elementClick: (event) => {
|
||||
API.register(ctrl.period, event.data.account)
|
||||
.then(function success(response) {
|
||||
let format_transaction = (transaction) => {
|
||||
return `
|
||||
<tr>
|
||||
<td>${transaction.date}</td>
|
||||
<td>${transaction.payee}</td>
|
||||
<td style="text-align: right;">${transaction.amount} ${transaction.currency}</td>
|
||||
</tr>`;
|
||||
};
|
||||
};
|
||||
|
||||
swal({
|
||||
title: response.data.key,
|
||||
html: `
|
||||
Swal.fire({
|
||||
title: response.data.key,
|
||||
html: `
|
||||
<table style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -78,35 +78,35 @@ app.component('bucket',
|
|||
</tbody>
|
||||
<tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot>
|
||||
</table>`});
|
||||
}, function error(response) { alert("error!"); });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}, function error(response) { alert("error!"); });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ctrl.$onChanges = (changes) => {
|
||||
if (changes.period && changes.period.currentValue != undefined) {
|
||||
API.balance(ctrl.period, ctrl.categories, ctrl.depth)
|
||||
.then((response) => {
|
||||
ctrl.raw_data = _(response.data)
|
||||
.sortBy((account) => { return account.name; });
|
||||
ctrl.$onChanges = (changes) => {
|
||||
if (changes.period && changes.period.currentValue != undefined) {
|
||||
API.balance(ctrl.period, ctrl.categories, ctrl.depth)
|
||||
.then((response) => {
|
||||
ctrl.raw_data = _(response.data)
|
||||
.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) => {
|
||||
return {
|
||||
key: category,
|
||||
values: _(ctrl.raw_data).select((line) => { return line.account.match(`^${category}:.*`); })
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
],
|
||||
ctrl.data = ctrl.categories.split(' ').map((category) => {
|
||||
return {
|
||||
key: category,
|
||||
values: _(ctrl.raw_data).select((line) => { return line.account.match(`^${category}:.*`); })
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
],
|
||||
|
||||
template: `
|
||||
template: `
|
||||
<div class="bucket">
|
||||
<div class="content">
|
||||
<div class="graph">
|
||||
|
|
@ -117,109 +117,109 @@ app.component('bucket',
|
|||
</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// DASHBOARD
|
||||
app.component('dashboard',
|
||||
{
|
||||
controller: ['$filter', 'API',
|
||||
function($filter, API) {
|
||||
let ctrl = this;
|
||||
ctrl.granularity = "monthly";
|
||||
ctrl.account_selection = "depth";
|
||||
{
|
||||
controller: ['$filter', 'API',
|
||||
function($filter, API) {
|
||||
let ctrl = this;
|
||||
ctrl.granularity = "monthly";
|
||||
ctrl.account_selection = "depth";
|
||||
|
||||
let is_monthly = () => { return ctrl.granularity == "monthly"; };
|
||||
let is_monthly = () => { return ctrl.granularity == "monthly"; };
|
||||
|
||||
ctrl.compute_selected_accounts = () => {
|
||||
ctrl.graphed_accounts = _.chain(ctrl.main_accounts_depths)
|
||||
.map((account) => {
|
||||
if (account.depth < 1) {
|
||||
return null;
|
||||
} else {
|
||||
return _(ctrl.raw_accounts)
|
||||
.select((account2) => {
|
||||
return account2[0] == account.name && account2.length == account.depth;
|
||||
})
|
||||
.map((account3) => { return account3.join(":"); });
|
||||
}
|
||||
})
|
||||
.compact()
|
||||
.flatten()
|
||||
.value();
|
||||
ctrl.compute_selected_accounts = () => {
|
||||
ctrl.graphed_accounts = _.chain(ctrl.main_accounts_depths)
|
||||
.map((account) => {
|
||||
if (account.depth < 1) {
|
||||
return null;
|
||||
} else {
|
||||
return _(ctrl.raw_accounts)
|
||||
.select((account2) => {
|
||||
return account2[0] == account.name && account2.length == account.depth;
|
||||
})
|
||||
.map((account3) => { return account3.join(":"); });
|
||||
}
|
||||
})
|
||||
.compact()
|
||||
.flatten()
|
||||
.value();
|
||||
|
||||
ctrl.retrieve_graph_values(ctrl.graphed_accounts);
|
||||
};
|
||||
ctrl.retrieve_graph_values(ctrl.graphed_accounts);
|
||||
};
|
||||
|
||||
ctrl.retrieve_graph_values = (categories) => {
|
||||
API.graph_values("", ctrl.granularity, categories.join(" "))
|
||||
.then((response) => {
|
||||
ctrl.periods = [];
|
||||
ctrl.retrieve_graph_values = (categories) => {
|
||||
API.graph_values("", ctrl.granularity, categories.join(" "))
|
||||
.then((response) => {
|
||||
ctrl.periods = [];
|
||||
|
||||
_.chain(response.data)
|
||||
.reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, [])
|
||||
.pluck('date')
|
||||
.each((date) => {
|
||||
_(response.data).each((cat) => {
|
||||
let value = _(cat).find({ date: date });
|
||||
if (_(value).isUndefined()) {
|
||||
cat.push({
|
||||
date: date,
|
||||
amount: 0,
|
||||
currency: _(cat).first().currency
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.each((cat) => {
|
||||
cat = _(cat).sortBy((month) => { return month.date; });
|
||||
});
|
||||
_.chain(response.data)
|
||||
.reduce((memo, cat) => { return cat.length > memo.length ? cat : memo; }, [])
|
||||
.pluck('date')
|
||||
.each((date) => {
|
||||
_(response.data).each((cat) => {
|
||||
let value = _(cat).find({ date: date });
|
||||
if (_(value).isUndefined()) {
|
||||
cat.push({
|
||||
date: date,
|
||||
amount: 0,
|
||||
currency: _(cat).first().currency
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
.each((cat) => {
|
||||
cat = _(cat).sortBy((month) => { return month.date; });
|
||||
});
|
||||
|
||||
ctrl.graphique = {
|
||||
options: {
|
||||
chart: {
|
||||
type: 'multiBarChart',
|
||||
height: 450,
|
||||
stacked: true,
|
||||
showControls: true,
|
||||
showLegend: true,
|
||||
showLabels: true,
|
||||
showValues: true,
|
||||
showYAxis: true,
|
||||
duration: 500,
|
||||
reduceXTicks: false,
|
||||
rotateLabels: -67,
|
||||
labelSunbeamLayout: true,
|
||||
useInteractiveGuideline: true,
|
||||
interactiveLayer: {
|
||||
dispatch: {
|
||||
elementClick: (t) => {
|
||||
console.log(ctrl.period)
|
||||
ctrl.period = t.pointXValue;
|
||||
console.log(ctrl.period)
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
contentGenerator: function(e) {
|
||||
let format_line = (serie) => {
|
||||
return `
|
||||
ctrl.graphique = {
|
||||
options: {
|
||||
chart: {
|
||||
type: 'multiBarChart',
|
||||
height: 450,
|
||||
stacked: true,
|
||||
showControls: true,
|
||||
showLegend: true,
|
||||
showLabels: true,
|
||||
showValues: true,
|
||||
showYAxis: true,
|
||||
duration: 500,
|
||||
reduceXTicks: false,
|
||||
rotateLabels: -67,
|
||||
labelSunbeamLayout: true,
|
||||
useInteractiveGuideline: true,
|
||||
interactiveLayer: {
|
||||
dispatch: {
|
||||
elementClick: (t) => {
|
||||
console.log(ctrl.period)
|
||||
ctrl.period = t.pointXValue;
|
||||
console.log(ctrl.period)
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
contentGenerator: function(e) {
|
||||
let format_line = (serie) => {
|
||||
return `
|
||||
<tr>
|
||||
<td style="background-color: ${serie.color}"> </td>
|
||||
<td>${serie.key}</td>
|
||||
<td style="text-align: right; font-weight: bold;">${serie.value}</td>
|
||||
</tr>
|
||||
`;
|
||||
};
|
||||
};
|
||||
|
||||
let prepare_series = (series) => {
|
||||
series.sort((s1, s2) => { return s2.value - s1.value; });
|
||||
let prepare_series = (series) => {
|
||||
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>
|
||||
<table>
|
||||
<tbody>
|
||||
|
|
@ -234,66 +234,66 @@ return `
|
|||
</tfoot>
|
||||
</table>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: _.chain(response.data)
|
||||
.keys()
|
||||
.reverse()
|
||||
.map((key) => {
|
||||
return {
|
||||
key: key,
|
||||
values: _.chain(response.data[key])
|
||||
.map((value) => {
|
||||
let date = new Date(value.date);
|
||||
let period = is_monthly() ? date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1) : date.getFullYear();
|
||||
ctrl.periods.push(period);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: _.chain(response.data)
|
||||
.keys()
|
||||
.reverse()
|
||||
.map((key) => {
|
||||
return {
|
||||
key: key,
|
||||
values: _.chain(response.data[key])
|
||||
.map((value) => {
|
||||
let date = new Date(value.date);
|
||||
let period = is_monthly() ? date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' : '') + (date.getMonth() + 1) : date.getFullYear();
|
||||
ctrl.periods.push(period);
|
||||
|
||||
return {
|
||||
key: key,
|
||||
x: period,
|
||||
y: parseInt(value.amount)
|
||||
};
|
||||
})
|
||||
.sortBy((item) => { return item.x; })
|
||||
.value()
|
||||
};
|
||||
})
|
||||
.value()
|
||||
};
|
||||
return {
|
||||
key: key,
|
||||
x: period,
|
||||
y: parseInt(value.amount)
|
||||
};
|
||||
})
|
||||
.sortBy((item) => { return item.x; })
|
||||
.value()
|
||||
};
|
||||
})
|
||||
.value()
|
||||
};
|
||||
|
||||
ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value();
|
||||
ctrl.period = _(ctrl.periods).first();
|
||||
});
|
||||
};
|
||||
ctrl.periods = _.chain(ctrl.periods).uniq().sort().reverse().value();
|
||||
ctrl.period = _(ctrl.periods).first();
|
||||
});
|
||||
};
|
||||
|
||||
API.accounts()
|
||||
.then((response) => {
|
||||
ctrl.raw_accounts = response.data.sort((account) => { return account.length; }).reverse();
|
||||
ctrl.accounts = ctrl.raw_accounts.map((account_ary) => { return account_ary.join(':'); });
|
||||
API.accounts()
|
||||
.then((response) => {
|
||||
ctrl.raw_accounts = response.data.sort((account) => { return account.length; }).reverse();
|
||||
ctrl.accounts = ctrl.raw_accounts.map((account_ary) => { return account_ary.join(':'); });
|
||||
|
||||
ctrl.main_accounts_depths = _.chain(ctrl.raw_accounts)
|
||||
.select((account) => { return account.length == 1; })
|
||||
.map((account) => {
|
||||
return {
|
||||
name: account[0],
|
||||
depth: _(['Expenses']).contains(account[0]) ? 2 : _(['Income']).contains(account[0]) ? 1 : 0,
|
||||
max_depth: _.chain(ctrl.raw_accounts)
|
||||
.select((account2) => { return account2[0] == account[0] })
|
||||
.reduce((memo, account3) => { return account3.length > memo ? account3.length : memo; }, 0)
|
||||
.value()
|
||||
};
|
||||
})
|
||||
.value();
|
||||
ctrl.main_accounts_depths = _.chain(ctrl.raw_accounts)
|
||||
.select((account) => { return account.length == 1; })
|
||||
.map((account) => {
|
||||
return {
|
||||
name: account[0],
|
||||
depth: _(['Expenses']).contains(account[0]) ? 2 : _(['Income']).contains(account[0]) ? 1 : 0,
|
||||
max_depth: _.chain(ctrl.raw_accounts)
|
||||
.select((account2) => { return account2[0] == account[0] })
|
||||
.reduce((memo, account3) => { return account3.length > memo ? account3.length : memo; }, 0)
|
||||
.value()
|
||||
};
|
||||
})
|
||||
.value();
|
||||
|
||||
ctrl.compute_selected_accounts();
|
||||
});
|
||||
}
|
||||
],
|
||||
ctrl.compute_selected_accounts();
|
||||
});
|
||||
}
|
||||
],
|
||||
|
||||
template: `
|
||||
template: `
|
||||
<div class="dashboard">
|
||||
<div class="global-graph" style="height: 450px;">
|
||||
<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>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// APIS
|
||||
app.service('API',
|
||||
['$http',
|
||||
function($http) {
|
||||
let API = this;
|
||||
['$http',
|
||||
function($http) {
|
||||
let API = this;
|
||||
|
||||
API.balance = function(period, categories, depth) {
|
||||
return $http.get('/api/ledger/balance', {
|
||||
params: {
|
||||
period: period,
|
||||
categories: categories,
|
||||
depth: depth
|
||||
}
|
||||
});
|
||||
};
|
||||
API.balance = function(period, categories, depth) {
|
||||
return $http.get('/api/ledger/balance', {
|
||||
params: {
|
||||
period: period,
|
||||
categories: categories,
|
||||
depth: depth
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
API.register = function(period, categories) {
|
||||
return $http.get('/api/ledger/register', {
|
||||
params: {
|
||||
period: period,
|
||||
categories: categories
|
||||
}
|
||||
});
|
||||
};
|
||||
API.register = function(period, categories) {
|
||||
return $http.get('/api/ledger/register', {
|
||||
params: {
|
||||
period: period,
|
||||
categories: categories
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
API.graph_values = function(period, granularity, categories) {
|
||||
return $http.get('/api/ledger/graph_values', {
|
||||
params: {
|
||||
period: period,
|
||||
granularity: granularity,
|
||||
categories: categories
|
||||
}
|
||||
});
|
||||
};
|
||||
API.graph_values = function(period, granularity, categories) {
|
||||
return $http.get('/api/ledger/graph_values', {
|
||||
params: {
|
||||
period: period,
|
||||
granularity: granularity,
|
||||
categories: categories
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
API.accounts = _.memoize(function() {
|
||||
return $http.get('/api/ledger/accounts');
|
||||
});
|
||||
}]);
|
||||
API.accounts = _.memoize(function() {
|
||||
return $http.get('/api/ledger/accounts');
|
||||
});
|
||||
}]);
|
||||
|
|
|
|||
Loading…
Reference in a new issue