Commits

Dan Connolly  committed 475bf94

update to AngularJS 1.x; get file chooser directive working

  • Participants
  • Parent commits 4ddad13

Comments (0)

Files changed (2)

File finquick/static/accounts.html

 <!doctype html>
-<html xmlns:ng="http://angularjs.org">
+<html ng-app="FinModule">
   <head>
     <title>Accounts - FinQuick</title>
     <meta charset="utf-8" />
       }
     </style>
   </head>
-  <body ng:controller="AccountsCtrl">
+  <body ng-controller="AccountsCtrl">
     <div><a href="transactions">Transactions</a></div>
 
     <h1>Accounts</h1>
       <tbody>
 	<!--todo: start with children(root(), summary)
             and expand. -->
-      <tr ng:repeat="account in summary"
-          ng:show="visibility(account)">
-	<td ng:click="toggle(account)">
+      <tr ng-repeat="account in summary"
+          ng-show="visibility(account)">
+	<td ng-click="toggle(account)">
 	  {{ account.level - 1 | indent:'&#160;&#160;' }}
-	  <ng:switch on="visibility(account)">
-	    <span ng:switch-when="3">
+	  <ng-switch on="visibility(account)">
+	    <span ng-switch-when="3">
 	      &#x25BE; <!-- BLACK DOWN-POINTING SMALL TRIANGLE -->
 	    </span>
-	    <span ng:switch-when='2'>
+	    <span ng-switch-when='2'>
 	      &#x25B8; <!-- BLACK RIGHT-POINTING SMALL TRIANGLE -->
 	    </span>
-	    <span ng:switch-default>
+	    <span ng-switch-default>
 	      &#160;
 	    </span>
-	  </ng:switch>
+	  </ng-switch>
 	  {{account.name}}
 	</td>
 	<td>{{account.account_type | lowercase}}</td>
-	<!-- angular docs suggestion ng:checked,
+	<!-- angular docs suggestion ng-checked,
 	     but that doesn't seem to work. -->
 	<td>
 	  <!-- TODO: make this editable -->
     </select>
     <p><label>OFX file:
 
-    <ng:chooser choice="ofx_file" update="note_ofx_file(ofx_file)" />
-    <input type="file" name="ofx_file" />
+<!-- @@@
+    <ng-chooser choice="ofx_file" update="note_ofx_file(ofx_file)" />
+-->
+    <input type="file" fin-file="ofx_file" />
+
     </label></p>
-    <button ng:click='prepare()' ng-disabled='{{! ofx_file}}'
-	    >Prepare</button>
-    <button ng:click='execute()' ng-disabled='{{true}}'
+    <button ng-click='prepare()' ng-disabled='ofx_file == null'
+	    >Prepare</button> {{ofx_file.name}}
+    <button ng-click='execute()' ng-disabled='true'
 	    >Execute</button>
     </div>
 
 			    >Dan Connolly</a>, some rights reserved
     </address>
 
-    <script src="http://code.angularjs.org/angular-0.9.12.js" ng:autobind></script>
+    <script src="http://code.angularjs.org/angular-1.0.0rc8.js" ng-autobind></script>
+    <script src="http://code.angularjs.org/angular-resource-1.0.0rc8.js" ng-autobind></script>
     <script src="static/fin.js" type="text/javascript"></script>
   </body>
 </html>

File finquick/static/fin.js

 // cribbed from http://docs.angularjs.org/#!/tutorial/step_05
 
-angular.service('Account', function($resource) {
-    return $resource('../account/:guid', {}, {
-	query: {method: 'GET', params: {guid: '-'}, isArray: true}
-    });
-});
-
-
-angular.service('AccountSummary', function($resource) {
+var FinModule = angular.module('FinModule', ['ngResource']);
+FinModule.factory('AccountSummary', function($resource) {
     return $resource('../accountSummary');
 });
 
-
 // todo: consider whether global controllers are fine.
-function AccountsCtrl(Account, AccountSummary, $log) {
-    var self = this;
+function AccountsCtrl(AccountSummary, $scope, $log) {
     var account_index = {}; // by guid
     var root;
     var children = {}; // guid -> [account]
 	recur(acct, []);
     };
 
-    self.summary = AccountSummary.query({}, function(accts) {
-	$log.info('summary query results in. self.summary:' + self.summary.length);
+    $scope.summary = AccountSummary.query({}, function(accts) {
+	$log.info('summary query results in. self.summary:' + $scope.summary.length);
 
 	root = null;
 	account_index = {};
 	    a.children = children[a.guid];
 	    a.parent = account_index[a.parent_guid];
 	});
-	self.summary = inorder;
+	$scope.summary = inorder;
 
-	self.toggle(root, 1);
+	$scope.toggle(root, 1);
     });
 
-    self.toggle = function(parent, expanded) {
+    $scope.toggle = function(parent, expanded) {
 	if (expanded === undefined) {
 	    expanded = !parent.expanded ? true : false;
 	}
 	parent.expanded = expanded;
 	$log.info('toggle: ' + parent.name + ' to: ' + expanded);
-	self.selected_account = parent;  // for file upload. kludge?
+	$scope.selected_account = parent;  // for file upload. kludge?
     };
 
-    self.visibility = function(acct) {
+    $scope.visibility = function(acct) {
 	// todo: option to show hidden accounts
 	var v = (!acct.hidden) &&
 	    acct.parent_guid &&
 	    acct.parent.expanded &&
-	    (acct.level <= 1 || self.visibility(acct.parent) > 0);
+	    (acct.level <= 1 || $scope.visibility(acct.parent) > 0);
 	return v ? (
 	    acct.children ? (
 		acct.expanded ? 3 : 2 )
 	    : 1) : 0;
     };
 
-    angular.filter('indent', function(n, chr) {
+    $scope.selected_account = null;
+    $scope.ofx_file = null;
+    $scope.ofx_summary = null;
+    $scope.note_ofx_file = function(elt) {
+	alert(elt.value);
+    }
+
+    $scope.prepare = function() {
+	console.log('in prepare() scope.ofx_file:' + $scope.ofx_file);
+	// http://www.w3.org/TR/FileAPI/
+	var reader = new FileReader();
+	reader.readAsText($scope.ofx_file, 'utf-8'); // blob? win 1252?
+	reader.onerror = function() {
+	    console.log('reader LOSE! @@');
+	};
+	reader.onload = function(evt) {
+	    var content = evt.target.result;
+	    console.log('WIN!: ' + content.substr(1, 20));
+	    // @@... call prepare...
+	};
+    }
+}
+AccountsCtrl.$inject = ['AccountSummary', '$scope', '$log'];
+
+FinModule.filter('indent', function () {
+    return function(n, chr) {
 	var i, s = '';
 	for (i = 0; i < n; i++) {
 	    s = s + chr;
 	}
 	return s;
-    });
+    };
+});
 
-    self.selected_account = null;
-    self.ofx_file = null;
-    self.ofx_summary = null;
-    self.note_ofx_file = function(elt) {
-	alert(elt.value);
-    }
-    self.prepare = function() {
-	// http://www.w3.org/TR/FileAPI/
-	var reader = new FileReader();
-	reader.readAsText(self.ofx_file, 'utf-8'); // blob? win 1252?
-	reader.onerror = function() {
-	    alert('LOSE! @@');
-	};
-	reader.onload = function(evt) {
-	    var content = evt.target.result;
-	    alert('WIN!: ' + content.substr(1, 20));
-	    // @@... call prepare...
-	};
-    }
-}
-AccountsCtrl.$inject = ['Account', 'AccountSummary', '$log'];
 
 /* based on
 File upload - how to / examples?
 Oct 2011
 https://groups.google.com/group/angular/browse_thread/thread/334a155cbc886c92/bcb5b998f0fac10f?lnk=gst&q=file+upload#bcb5b998f0fac10f
 http://jsfiddle.net/vojtajina/epCyK/a
+hmm... and http://docs.angularjs.org/guide/directive
 */
-angular.widget('ng:chooser', function(elm) {
-    var choice = elm.attr('choice'), update=elm.attr('update');
 
-    console.log(choice);
-    return function() {
-	var scope = this;
-	this.$watch(choice, function(newV) {
-	    console.log(newV);
-	    if (newV != Math.NaN) {
-		scope.$eval(update);
-	    }
-	});
+FinModule.directive('finFile', function() {
+    console.log('registering fin_file directive.');
+    return {
+	compile: function(telm, tattrs) {
+	    var choice = tattrs.finFile;
+
+	    return function(scope, elm, attrs) {
+		elm.bind('change', function() {
+		    var f;
+		    if (this.files) {
+			f = this.files[0];
+			console.log('files[0]: ' + f);
+			scope.$apply(function(scope) {
+			    scope[choice] = f;
+			});
+		    }
+		});
+	    };
+	}
     };
 });
 
-angular.service('Transaction', function($resource) {
+FinModule.factory('Transaction', function($resource) {
     return $resource('../transaction/:guid', {}, {
 	// override the query method to make sure the trailing / is kept
 	query: {method: 'GET', params: {guid: '-'},
 });
 
 
-function TransactionsCtrl(Transaction, $log) {
-    var self = this;
+function TransactionsCtrl(Transaction, $scope, $log) {
+    var $scope = this;
 
-    self.matches = [{post_date: '2012-01-01',
+    $scope.matches = [{post_date: '2012-01-01',
 		     description: 'fun fun',
 		     splits: [{
 			 memo: 'memo',
 			 account_name: 'Friendly Bank',
 			 value_num: 200,
 			 value_denom: 100}]}];
-    self.search = function(qtxt, account, amount) {
-	self.matches = Transaction.query({q: qtxt, account: account,
+    $scope.search = function(qtxt, account, amount) {
+	$scope.matches = Transaction.query({q: qtxt, account: account,
 					  amount: amount});
     }
 
 	return tx.simple = true;
     };
 
-    self.primaryAccount = function(tx) {
+    $scope.primaryAccount = function(tx) {
 	return simpleTx(tx) ? tx.payment.account_name : null;
     };
-    self.primaryTransfer = function(tx) {
+    $scope.primaryTransfer = function(tx) {
 	return simpleTx(tx) ? tx.transfer.account_name : null;
     };
     var splitAmount = function(s, sign) {
 	var amount = sign * (s.value_num / s.value_denom);
 	return amount > 0 ? amount : NaN;
     };
-    self.splitAmount = splitAmount;
+    $scope.splitAmount = splitAmount;
 
-    self.primaryAmount = function(tx, sign) {
+    $scope.primaryAmount = function(tx, sign) {
 	return simpleTx(tx) ? splitAmount(tx.payment, sign) : NaN;
     };
-    self.details = function(tx) {
+    $scope.details = function(tx) {
 	return simpleTx(tx) ? [] : tx.splits;
     };
 }