clik on line to display register

credger.cr

@@ -10,31 +10,22 @@ ledger = Ledger.new
 # Matches GET "http://host:port/"
 get "/" do |env|
   env.response.content_type = "text/html"
-  send_file env, "./public/index.html"
+
+  send_file( env, "./public/index.html" )
+end
+
+get "/api/ledger/version" do |env|
+  env.response.content_type = "text"
+
+  ledger.version
 end
 
 get "/api/ledger/accounts" do |env|
   env.response.content_type = "application/json"
+
   ledger.accounts.to_json
 end
 
-# get "/api/ledger/accounts/depth/:depth/?" do |env|
-#   env.response.content_type = "application/json"
-#   ledger.accounts(  ).to_json
-# end
-
-# get "/api/ledger/dates_salaries/?" do |env|
-#   env.response.content_type = "application/json"
-#   ledger.dates_salaries( "salaire" ).to_json
-# end
-
-# get "/api/ledger/register/?" do |env|
-#   env.response.content_type = "application/json"
-#   { key: params[ :categories ],
-#     values: ledger.register( params[ :period ], params[ :categories ] ) }
-#     .to_json
-# end
-
 get "/api/ledger/balance" do |env|
   env.response.content_type = "application/json"
 
@@ -47,27 +38,19 @@ get "/api/ledger/balance" do |env|
     .to_json
 end
 
-# get "/api/ledger/cleared/?" do |env|
-#   env.response.content_type = "application/json"
-#   ledger.cleared().to_json
-# end
-
-# get "/api/ledger/budget/?" do |env|
-#   env.response.content_type = "application/json"
-#   ledger.budget( params[ :period ],
-#                  params[ :categories ] ).to_json
-# end
-
 get "/api/ledger/graph_values" do |env|
   env.response.content_type = "application/json"
 
   ledger.graph_values( env.params.query["period"], env.params.query["categories"].split(" ") ).to_json
-  #ledger.graph_values.to_json
 end
 
-get "/api/ledger/version" do |env|
-  env.response.content_type = "text"
-  ledger.version
+get "/api/ledger/register" do |env|
+  env.response.content_type = "application/json"
+
+  { key: env.params.query[ "categories" ],
+    values: ledger.register( env.params.query[ "period" ],
+                             env.params.query[ "categories" ].split(" ") ) }
+    .to_json
 end
 
-Kemal.run 9292
+Kemal.run

ledger.cr

@@ -1,6 +1,7 @@
 # encoding: utf-8
 
 require "csv"
+require "xml"
 
 # Crystal wrapper module for calling ledger
 class Ledger
@@ -70,4 +71,18 @@ class Ledger
 
     result
   end
+
+  def register( period : String = "", categories : Array(String) = ["Expenses"] ) : Array( NamedTuple( date: String, payee: String, account: String, amount: String, currency: String ) )
+    period = period == "" ? "" : "-p '#{period}'"
+
+    CSV
+      .parse( run( "--exchange '#{CURRENCY}' #{period}", "csv --no-revalued", categories.join(" ") ) )
+      .map do |row|
+      { date: row[ 0 ],
+        payee: row[ 2 ],
+        account: row[ 3 ],
+        amount: row[ 5 ],
+        currency: row[ 4 ] }
+    end
+  end
 end

public/index.html

@@ -26,6 +26,7 @@
         <script src="/vendor/node_modules/hammerjs/hammer.min.js"></script>
         <script src="/vendor/node_modules/d3/d3.min.js"></script>
         <script src="/vendor/node_modules/nvd3/build/nv.d3.min.js"></script>
+        <script src="/vendor/node_modules/sweetalert2/dist/sweetalert2.all.min.js"></script>
 
         <script src="/vendor/node_modules/angular/angular.min.js"></script>
         <script src="/vendor/node_modules/angular-i18n/angular-locale_en-us.js"></script>

public/ts/components/bucket.ts

@@ -30,17 +30,44 @@ app.component('bucket',
             duration: 500,
             labelThreshold: 0.01,
             labelSunbeamLayout: true,
-            labelsOutside: 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: `<table style="width: 100%;">
+<thead>
+<tr>
+<td>Date</td><td>Payee</td><td>Amount</td>
+</tr>
+</thead>
+<tbody>
+${response.data.values.map(function(transaction) { return format_transaction(transaction); }).join("")}
+</tbody>
+<tfoot><td></td><td>Total</td><td style="text-align: right;">${event.data.amount} €</td></tfoot>
+</table>`});
+                    }, function error(response) { alert("error!"); });
+                }
+              }
+            }
           }
         };
 
         ctrl.$onChanges = (changes) => {
           if (changes.period && changes.period.currentValue != undefined) {
-            API.balance({
-              period: ctrl.period,
-              categories: ctrl.categories,
-              depth: ctrl.depth
-            })
+            API.balance(ctrl.period, ctrl.categories, ctrl.depth)
               .then((response) => {
                 ctrl.raw_data = _(response.data)
                   .sortBy((account) => { return account.amount; })
@@ -81,7 +108,7 @@ app.component('bucket',
       }
     ],
 
-  template: `
+    template: `
   <div class="bucket">
     <div class="tollbar">
       <span ng:repeat="account in $ctrl.total_detailed">{{account.account}} = {{account.amount | number:2}} €</span>

public/ts/components/dashboard.ts

@@ -5,8 +5,8 @@ app.component('dashboard',
         let ctrl = this;
         ctrl.graphed_accounts = ['Expenses', 'Income'];
 
-        let retrieve_graph_values = (params) => {
-          API.graph_values(params)
+        let retrieve_graph_values = (period, categories) => {
+          API.graph_values(period, categories)
             .then((response) => {
               ctrl.periods = [];
 
@@ -111,10 +111,7 @@ app.component('dashboard',
             ctrl.accounts = ctrl.raw_accounts.map((account_ary) => { return account_ary.join(':'); });
           });
 
-        retrieve_graph_values({
-          period: '',
-          categories: ctrl.graphed_accounts.join(' ')
-        });
+        retrieve_graph_values('', ctrl.graphed_accounts.join(' '));
       }
     ],
 

public/ts/services/API.ts

@@ -3,52 +3,35 @@ app.service('API',
     function($http) {
       let API = this;
 
-      API.balance = function(params) {
+      API.balance = _.memoize(function(period, categories, depth) {
         return $http.get('/api/ledger/balance', {
           params: {
-            period: params.period,
-            categories: params.categories,
-            depth: params.depth
+            period: period,
+            categories: categories,
+            depth: depth
           }
         });
-      };
+      });
 
-      API.register = function(params) {
+      API.register = _.memoize(function(period, categories) {
         return $http.get('/api/ledger/register', {
           params: {
-            period: params.period,
-            categories: params.categories
+            period: period,
+            categories: categories
           }
         });
-      };
+      });
 
-      API.graph_values = function(params) {
+      API.graph_values = _.memoize(function(period, categories) {
         return $http.get('/api/ledger/graph_values', {
           params: {
-            period: params.period,
-            categories: params.categories
+            period: period,
+            categories: categories
           }
         });
-      };
+      });
 
-      API.budget = function(params) {
-        return $http.get('/api/ledger/budget', {
-          params: {
-            period: params.period,
-            categories: params.categories
-          }
-        });
-      };
-
-      API.dates_salaries = function() {
-        return $http.get('/ai/ledger/dates_salaries');
-      };
-
-      API.accounts = function() {
+      API.accounts = _.memoize(function() {
         return $http.get('/api/ledger/accounts');
-      };
-
-      API.cleared = function() {
-        return $http.get('/api/ledger/cleared');
-      };
+      });
     }]);

public/vendor/package.json

@@ -35,6 +35,7 @@
     "hammerjs": "^2.0.8",
     "moment": "^2.19.2",
     "nvd3": "^1.8.4",
+    "sweetalert2": "^7.0.3",
     "typescript": "^2.6.1",
     "underscore": "^1.8.3"
   }