mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2025-01-26 07:58:10 +01:00
switch to angular-material and refactoring
This commit is contained in:
Gwenhael Le Moine
parent
d3ad2025a3
commit
3b5f886308
5 changed files with 58 additions and 111 deletions
|
|
@ -14,8 +14,6 @@
|
|||
<link type="text/css" rel="stylesheet" href="/bower_components/html5-boilerplate/css/normalize.css">
|
||||
<link type="text/css" rel="stylesheet" href="/bower_components/html5-boilerplate/css/main.css">
|
||||
<link type="text/css" rel="stylesheet" href="/bower_components/nvd3/nv.d3.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/bower_components/angular-loading-bar/build/loading-bar.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/bower_components/ng-table/ng-table.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/bower_components/angular-material/angular-material.min.css">
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
<link type="text/css" rel="stylesheet" href="/css/app.css"/>
|
||||
<script src="/bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body layout="vertical" layout-fill>
|
||||
|
||||
<!--[if lt IE 7]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
|
|
@ -46,8 +44,6 @@
|
|||
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
|
||||
<script src="/bower_components/angular-material/angular-material.min.js"></script>
|
||||
<script src="/bower_components/angular-moment/angular-moment.min.js"></script>
|
||||
<script src="/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
|
||||
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
|
||||
<script src="/bower_components/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.min.js"></script>
|
||||
<script src="/bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
|
||||
<script src="/bower_components/ng-table/ng-table.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ app.controller( 'BalanceCtrl',
|
|||
$scope.toolTipContentFunction = function() {
|
||||
return function( key, x, y, e, graph ) {
|
||||
var details = $scope.balance.details[ key ];
|
||||
return '<h3>' + details.key + '</h3>'
|
||||
return '<material-content><h3>' + details.key + '</h3>'
|
||||
+ '<table>'
|
||||
+ _(details.values).map( function( transaction ) {
|
||||
return '<tr><td>'
|
||||
|
|
@ -24,7 +24,7 @@ app.controller( 'BalanceCtrl',
|
|||
+ transaction.currency + '</td></tr>';
|
||||
}).join( '' )
|
||||
+ '<tr><th></th><th>Total :</th><th>' + x + ' €</th></tr>'
|
||||
+ '</table>';
|
||||
+ '</table></material-content>';
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -84,18 +84,22 @@ app.controller( 'BalanceCtrl',
|
|||
period = period + ' to ' + to.year() + '-' + ( to.month() + 1 ) + '-' + to.date();
|
||||
}
|
||||
|
||||
$scope.balance = { expenses: [],
|
||||
income: [],
|
||||
$scope.balance = { buckets: [ { name: 'Expenses',
|
||||
data: [],
|
||||
total: 0 },
|
||||
{ name: 'Income',
|
||||
data: [],
|
||||
total: 0 } ],
|
||||
details: {} };
|
||||
|
||||
$http.get( '/api/ledger/balance',
|
||||
{ params: { period: period,
|
||||
categories: 'Expenses' } } )
|
||||
.then( function( response ) {
|
||||
$scope.balance.expenses = _(response.data).sortBy( function( account ) {
|
||||
$scope.balance.buckets[ 0 ].data = _(response.data).sortBy( function( account ) {
|
||||
return 1 / account.amount;
|
||||
} );
|
||||
_($scope.balance.expenses).each(
|
||||
_($scope.balance.buckets[ 0 ].data).each(
|
||||
function( account ) {
|
||||
$http.get( '/api/ledger/register',
|
||||
{ params: { period: period,
|
||||
|
|
@ -104,23 +108,23 @@ app.controller( 'BalanceCtrl',
|
|||
$scope.balance.details[ account.account ] = response.data;
|
||||
} );
|
||||
} );
|
||||
$scope.balance.expenses_total = _(response.data).reduce( function( memo, account ){ return memo + account.amount; }, 0 );
|
||||
$scope.balance.buckets[ 0 ].total = _(response.data).reduce( function( memo, account ){ return memo + account.amount; }, 0 );
|
||||
} );
|
||||
$http.get( '/api/ledger/balance',
|
||||
{ params: { period: period,
|
||||
categories: 'Income' } } )
|
||||
|
||||
.then( function( response ) {
|
||||
$scope.balance.income = _(response.data)
|
||||
$scope.balance.buckets[ 1 ].data = _(response.data)
|
||||
.map( function( account ) {
|
||||
account.amount = account.amount * -1;
|
||||
return account;
|
||||
} );
|
||||
$scope.balance.income = _($scope.balance.income)
|
||||
$scope.balance.buckets[ 1 ].data = _($scope.balance.buckets[ 1 ].data)
|
||||
.sortBy( function( account ) {
|
||||
return account.amount;
|
||||
} );
|
||||
_($scope.balance.income)
|
||||
_($scope.balance.buckets[ 1 ].data)
|
||||
.each( function( account ) {
|
||||
$http.get( '/api/ledger/register',
|
||||
{ params: { period: period,
|
||||
|
|
@ -129,7 +133,7 @@ app.controller( 'BalanceCtrl',
|
|||
$scope.balance.details[ account.account ] = response.data;
|
||||
} );
|
||||
} );
|
||||
$scope.balance.income_total = _(response.data)
|
||||
$scope.balance.buckets[ 1 ].total = _(response.data)
|
||||
.reduce( function( memo, account ){ return memo + account.amount; }, 0 );
|
||||
} );
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,50 +1,46 @@
|
|||
<div class="row-fluid">
|
||||
<div layout="vertical">
|
||||
|
||||
<div class="col-md-12 date">
|
||||
<div class="date">
|
||||
<h2>
|
||||
From {{from_date | date:'longDate'}} <span data-ng-if="to_date">to {{to_date | date:'longDate'}}</span>
|
||||
|
||||
<div class="pull-right">
|
||||
<button class="btn btn-default" data-ng-click="reset_offset()">Aujourd'hui</button>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default"
|
||||
data-ng-click="before()"
|
||||
data-ng-class="{'disabled': period_offset == 0}"><span class="glyphicon glyphicon-chevron-left"></span></button>
|
||||
<button class="btn btn-default"
|
||||
data-ng-click="after()"
|
||||
data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}"><span class="glyphicon glyphicon-chevron-right"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<h2 class="balance" data-ng-class="{'negative': balance.income_total - balance.expenses_total < 0, 'positive': balance.income_total - balance.expenses_total > 0}">
|
||||
Balance: {{( balance.income_total - balance.expenses_total ) | number:2}} €
|
||||
|
||||
<div layout="horizontal" layout-align="end">
|
||||
<material-button class="material-button-raised material-button-colored" data-ng-click="reset_offset()">Now</material-button>
|
||||
<material-button class="material-button-fab"
|
||||
data-ng-click="before()"
|
||||
data-ng-class="{'disabled': period_offset == 0}">prev</span></material-button>
|
||||
<material-button class="material-button-fab"
|
||||
data-ng-click="after()"
|
||||
data-ng-class="{'disabled': period_offset == dates_salaries.length - 1}">next</material-button>
|
||||
</div>
|
||||
<h2 class="balance" data-ng-class="{'negative': balance.buckets[1].total - balance.buckets[0].total < 0, 'positive': balance.buckets[1].total - balance.buckets[0].total > 0}">
|
||||
Balance: {{( balance.buckets[1].total - balance.buckets[0].total ) | number:2}} €
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Expenses, total = {{balance.expenses_total | number:2}} €</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<nvd3-pie-chart
|
||||
data="balance.expenses"
|
||||
x="xFunction()"
|
||||
y="yFunction()"
|
||||
id="ExpensesPie"
|
||||
height="300"
|
||||
margin="{left:0,top:0,bottom:0,right:0}"
|
||||
color="color()"
|
||||
tooltips="true"
|
||||
tooltipcontent="toolTipContentFunction()"
|
||||
showLabels="true"
|
||||
labelType="value">
|
||||
<div layout="horizontal" layout-padding>
|
||||
<div flex data-ng-repeat="bucket in balance.buckets">
|
||||
<material-toolbar class="material-theme-light">
|
||||
<h3>{{bucket.name}}, total = {{bucket.total | number:2}} €</h3>
|
||||
</material-toolbar>
|
||||
<material-content>
|
||||
<nvd3-pie-chart data="bucket.data"
|
||||
x="xFunction()"
|
||||
y="yFunction()"
|
||||
height="300"
|
||||
margin="{left:0,top:0,bottom:0,right:0}"
|
||||
color="color()"
|
||||
tooltips="true"
|
||||
tooltipcontent="toolTipContentFunction()"
|
||||
showLabels="true"
|
||||
labelType="value">
|
||||
<svg></svg>
|
||||
</nvd3-pie-chart>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
</material-content>
|
||||
<material-content>
|
||||
<table data-ng-table="tableParams" class="table">
|
||||
<tr data-ng-repeat="account in balance.expenses"
|
||||
<tr data-ng-repeat="account in bucket.data"
|
||||
data-ng-class="{'even': $even, 'odd': $odd}"
|
||||
style="border-left:10px solid {{coloring_score( score_account( account.account ) )}};border-right:10px solid {{coloring_score( score_account( account.account ) )}}">
|
||||
<td data-title="'Account'"
|
||||
|
|
@ -57,48 +53,8 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</material-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Income, total = {{balance.income_total | number:2}} €</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<nvd3-pie-chart
|
||||
data="balance.income"
|
||||
x="xFunction()"
|
||||
y="yFunction()"
|
||||
id="incomePie"
|
||||
height="300"
|
||||
margin="{left:0,top:0,bottom:0,right:0}"
|
||||
color="color()"
|
||||
tooltips="true"
|
||||
tooltipcontent="toolTipContentFunction()"
|
||||
showLabels="true"
|
||||
labelType="value">
|
||||
<svg></svg>
|
||||
</nvd3-pie-chart>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<table data-ng-table="tableParams" class="table">
|
||||
<tr data-ng-repeat="account in balance.income"
|
||||
data-ng-class="{'even': $even, 'odd': $odd}"
|
||||
style="border-left:10px solid {{coloring_score( score_account( account.account ) )}};border-right:10px solid {{coloring_score( score_account( account.account ) )}}">
|
||||
<td data-title="'Account'"
|
||||
style="border-bottom:1px solid {{coloring_score( score_account( account.account ) )}}">
|
||||
{{account.account}}
|
||||
</td>
|
||||
<td data-title="'Amount'"
|
||||
style="text-align:right;border-bottom:1px solid {{coloring_score( score_account( account.account ) )}}">
|
||||
{{account.amount | number:2}} €
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div ui-view></div>
|
||||
</div>
|
||||
</div>
|
||||
<div ui-view></div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<ul class="nav">
|
||||
<li ng-repeat="item in items" class="navbar-item" ui-sref-active="navbar-active">
|
||||
<a ui-sref="app.{{ item | lowercase }}">{{ item }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<header>
|
||||
<ul>
|
||||
<li ng-repeat="item in items" ui-sref-active="navbar-active">
|
||||
<a ui-sref="app.{{ item | lowercase }}">{{ item }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue