display budget progress

app.rb

@@ -61,8 +61,10 @@ class LedgerRbApp < Sinatra::Base
 
   get '/api/ledger/budget/?' do
     param :period, String, default: 'this month'
+    param :categories, String, required: true
 
-    Ledger.budget( params[ :period ] ).to_json
+    Ledger.budget( params[ :period ],
+                   params[ :categories ] ).to_json
   end
 
   get '/api/ledger/version/?' do

lib/ledger.rb

@@ -75,10 +75,10 @@ module Ledger
     end
   end
 
-  def budget( period )
+  def budget( period, categories )
     period = period.nil? ? '' : "-p '#{period}'"
 
-    run( "--flat --no-total --budget --exchange '#{CURRENCY}' #{period}", 'budget', '' )
+    run( "--flat --no-total --budget --exchange '#{CURRENCY}' #{period}", 'budget', categories )
       .lines
       .each
       .map do |line|

public/app/index.html

@@ -17,6 +17,7 @@
     <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/angular-material/angular-material.min.css">
     <link type="text/css" rel="stylesheet" href="/bower_components/angular-material/themes/light-blue-dark-theme.css">
+    <link type="text/css" rel="stylesheet" href="/bower_components/angular-material/themes/red-theme.css">
 
     <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>
@@ -56,7 +57,6 @@
     <script src="/js/state.js"></script>
     <script src="/js/services/API.js"></script>
     <script src="/js/controllers/AppCtrl.js"></script>
-    <script src="/js/controllers/NavbarCtrl.js"></script>
     <script src="/js/controllers/BalanceCtrl.js"></script>
 
   </body>

public/app/js/controllers/BalanceCtrl.js

@@ -121,9 +121,15 @@ app.controller( 'BalanceCtrl',
 			      period += ' to ' + to.year() + '-' + ( to.month() + 1 ) + '-' + to.date();
 			  }
 
+			  API.budget( { period: period,
+					categories: 'Expenses' } )
+			      .then( function( response ) {
+				  $scope.budget = response.data;
+			      } );
+
 			  API.register( { period: period,
 					  categories: '' } )
-			      .then( function ( response ) {
+			      .then( function( response ) {
 				  $scope.balance.details = _($scope.balance.details).extend( _(response.data.values).groupBy( 'account' ) );
 			      } );
 

public/app/js/services/API.js

@@ -19,6 +19,15 @@ app.service( 'API',
 		       } );
 		   };
 
+		   this.budget = function( params ) {
+		       return $http.get( '/api/ledger/budget', {
+			   params: {
+			       period: params.period,
+			       categories: params.categories
+			   }
+		       } );
+		   };
+
 		   this.dates_salaries = function(  ) {
 		       return $http.get( '/api/ledger/dates_salaries' );
 		   };

public/app/js/templates/balance.tpl.html

@@ -21,8 +21,45 @@
     </md-toolbar>
   </div>
 
+  <div layout="vertical">
+    <table class="table" style="width: 100%">
+      <thead>
+	<tr>
+	  <th style="width: 11%">Account</th>
+	  <th style="width: 3%">Spent</th>
+	  <th style="width: 3%">Budgeted</th>
+	  <th style="width: 3%">Percentage</th>
+	  <th>Progress</th>
+	</tr>
+      </thead>
+      <tbody>
+	<tr data-ng-repeat="account in budget"
+	    data-ng-class="{'even': $even, 'odd': $odd}">
+	  <td>
+	    {{account.account}}
+	  </td>
+	  <td>
+	    {{account.amount}}{{account.currency}}
+	  </td>
+	  <td>
+	    {{account.budget}}{{account.currency}}
+	  </td>
+	  <td>
+	    {{account.percentage}}%
+	  </td>
+	  <td>
+	    <md-progress-linear md-theme="red" mode="determinate" value="{{account.percentage}}"
+				data-ng-if="account.percentage > 100"></md-progress-linear>
+	    <md-progress-linear mode="determinate" value="{{account.percentage}}"
+				data-ng-if="account.percentage <= 100"></md-progress-linear>
+	  </td>
+	</tr>
+      </tbody>
+    </table>
+  </div>
+
   <div layout="vertical" layout-md="horizontal" layout-padding>
-    <div flex layout="vertical" layout-padding
+    <div flex="50" layout="vertical" layout-padding
 	 data-ng-repeat="bucket in balance.buckets">
       <md-toolbar layout="vertical" layout-padding>
 	<h3>{{bucket.categories}}, total = {{bucket.total | number:2}} €</h3>