jason-s13r/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha256.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
        <script src="libs/bitnz-angular/bitnz-angular.js"></script>
        <script src="js/pretty-bitnz.js"></script>
        <style>
        </style>
    </head>
    <body ng-app="PrettyBitNZ">
        <div style="border: solid 1px #000">
            <div ng-controller="Ticker">
                <button ng-click="Start()">Start</button> <button ng-click="Stop()">Stop</button>
                {{ ticker }}
            </div>
        </div>
        <div style="border: solid 1px #000;">
            <form ng-controller="Configuration" ng-submit="Authorize()">
                <input type="text" placeholder="username" ng-model="username" />
                <input type="text" placeholder="key" ng-model="key" />
                <input type="text" placeholder="secret" ng-model="secret" />
                <input type="submit" value="Authorize" />
            </form>
        </div>
        <div style="border: solid 1px #000">
            <div ng-controller="Balance">
                <button ng-click="Start()">Start</button> <button ng-click="Stop()">Stop</button>
                {{ balance }}
            </div>
        </div>
        <div style="border: solid 1px #000">
            <div ng-controller="OrderBook">
                <div>
                    <button ng-click="Start()">Start</button> <button ng-click="Stop()">Stop</button>
                </div>
                <div style="width: 50%; float: left;">
                    <strong>Bids</strong>
                    <ol>
                        <li ng-repeat="bid in orderbook.bids | priceasc | reverse">{{ bid[1] | number : 8 }} @ ${{ bid[0] | number : 8 }}</li>
                    </ol>
                </div>
                <div style="width: 50%; float: right;">
                    <strong>Asks</strong>
                    <ol>
                        <li ng-repeat="ask in orderbook.asks | priceasc">{{ ask[1] | number : 8 }} @ ${{ ask[0] | number : 8 }}</li>
                    </ol>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
    </body>
</html>

## pretty-bitnz.js
var app = angular.module('PrettyBitNZ', ['BitNZ']);

app.filter('priceasc', function() {
  return function(items) {
    var list = items.slice();
    list.sort(function(a, b) {
      return a[0] - b[0];
    });
    return list;
  };
});

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

app.controller('Configuration', ['$scope', '$log', 'BitNZ', function($scope, $log, bitnz){
  $scope.username = '';
  $scope.key = '';
  $scope.secret = '';

  $scope.Authorize = function() {
    bitnz.authorize($scope.username, $scope.key, $scope.secret);
  };
}]);

app.controller('Ticker', ['$scope', '$interval', '$log', 'BitNZ', function($scope, $interval, $log, bitnz){
  $scope.ticker = {};

  var interval = null;

  var fn = function(){
    $log.info('run');
    bitnz.ticker().success(function(data){
      $log.log('ticker', data);
      $scope.ticker = data;
    }).error(function(data){
      $log.error('ticker', data);
      $scope.Stop();
    });
  };

  $scope.Start = function() {
    $log.info('ticker', 'start');
    fn();
    interval = $interval(fn, 60 * 1000);
  };

  $scope.Stop = function() {
    $log.info('ticker', 'stop');
    if (angular.isDefined(interval)) {
      $interval.cancel(interval);
      interval = undefined;
    }
  };

}]);

app.controller('OrderBook', ['$scope', '$interval', '$log', 'BitNZ', function($scope, $interval, $log, bitnz){
  $scope.orderbook = {
    bids: [],
    asks: []
  };

  var interval = null;

  var fn = function(){
    $log.info('run');
    bitnz.orderbook().success(function(data){
      $log.log('orderbook', data);
      $scope.orderbook = data;
    }).error(function(data){
      $log.error('orderbook', data);
      $scope.Stop();
    });
  };

  $scope.Start = function() {
    $log.info('orderbook', 'start');
    fn();
    interval = $interval(fn, 60 * 1000);
  };

  $scope.Stop = function() {
    $log.info('orderbook', 'stop');
    if (angular.isDefined(interval)) {
      $interval.cancel(interval);
      interval = undefined;
    }
  };

}]);

app.controller('Balance', ['$scope', '$interval', '$log', 'BitNZ', function($scope, $interval, $log, bitnz){
  $scope.balance = {};

  var interval = null;

  var fn = function(){
    $log.info('run');
    bitnz.balance().success(function(data){
      if (data.result === false) {
        $scope.Stop();
        return;
      }
      $log.log('balance', data);
      $scope.balance = data;
    }).error(function(data){
      $log.error('balance', data);
      $scope.Stop();
    });
  };

  $scope.Start = function() {
    $log.info('balance', 'start');
    fn();
    interval = $interval(fn, 60 * 1000);
  };

  $scope.Stop = function() {
    $log.info('balance', 'stop');
    if (angular.isDefined(interval)) {
      $interval.cancel(interval);
      interval = undefined;
    }
  };

}]);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha256.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
	<script src="libs/bitnz-angular/bitnz-angular.js"></script>
	<script src="js/pretty-bitnz.js"></script>
	<style>
	</style>
	</head>
	<body ng-app="PrettyBitNZ">
	<div style="border: solid 1px #000">
	<div ng-controller="Ticker">
	<button ng-click="Start()">Start</button> <button ng-click="Stop()">Stop</button>
	{{ ticker }}
	</div>
	</div>
	<div style="border: solid 1px #000;">
	<form ng-controller="Configuration" ng-submit="Authorize()">
	<input type="text" placeholder="username" ng-model="username" />
	<input type="text" placeholder="key" ng-model="key" />
	<input type="text" placeholder="secret" ng-model="secret" />
	<input type="submit" value="Authorize" />
	</form>
	</div>
	<div style="border: solid 1px #000">
	<div ng-controller="Balance">
	<button ng-click="Start()">Start</button> <button ng-click="Stop()">Stop</button>
	{{ balance }}
	</div>
	</div>
	<div style="border: solid 1px #000">
	<div ng-controller="OrderBook">
	<div>
	<button ng-click="Start()">Start</button> <button ng-click="Stop()">Stop</button>
	</div>
	<div style="width: 50%; float: left;">
	<strong>Bids</strong>
	<ol>
	<li ng-repeat="bid in orderbook.bids \| priceasc \| reverse">{{ bid[1] \| number : 8 }} @ ${{ bid[0] \| number : 8 }}</li>
	</ol>
	</div>
	<div style="width: 50%; float: right;">
	<strong>Asks</strong>
	<ol>
	<li ng-repeat="ask in orderbook.asks \| priceasc">{{ ask[1] \| number : 8 }} @ ${{ ask[0] \| number : 8 }}</li>
	</ol>
	</div>
	<div style="clear: both;"></div>
	</div>
	</div>
	</body>
	</html>
	var app = angular.module('PrettyBitNZ', ['BitNZ']);

	app.filter('priceasc', function() {
	return function(items) {
	var list = items.slice();
	list.sort(function(a, b) {
	return a[0] - b[0];
	});
	return list;
	};
	});

	app.filter('reverse', function() {
	return function(items) {
	return items.slice().reverse();
	};
	});

	app.controller('Configuration', ['$scope', '$log', 'BitNZ', function($scope, $log, bitnz){
	$scope.username = '';
	$scope.key = '';
	$scope.secret = '';

	$scope.Authorize = function() {
	bitnz.authorize($scope.username, $scope.key, $scope.secret);
	};
	}]);

	app.controller('Ticker', ['$scope', '$interval', '$log', 'BitNZ', function($scope, $interval, $log, bitnz){
	$scope.ticker = {};

	var interval = null;

	var fn = function(){
	$log.info('run');
	bitnz.ticker().success(function(data){
	$log.log('ticker', data);
	$scope.ticker = data;
	}).error(function(data){
	$log.error('ticker', data);
	$scope.Stop();
	});
	};

	$scope.Start = function() {
	$log.info('ticker', 'start');
	fn();
	interval = $interval(fn, 60 * 1000);
	};

	$scope.Stop = function() {
	$log.info('ticker', 'stop');
	if (angular.isDefined(interval)) {
	$interval.cancel(interval);
	interval = undefined;
	}
	};

	}]);

	app.controller('OrderBook', ['$scope', '$interval', '$log', 'BitNZ', function($scope, $interval, $log, bitnz){
	$scope.orderbook = {
	bids: [],
	asks: []
	};

	var interval = null;

	var fn = function(){
	$log.info('run');
	bitnz.orderbook().success(function(data){
	$log.log('orderbook', data);
	$scope.orderbook = data;
	}).error(function(data){
	$log.error('orderbook', data);
	$scope.Stop();
	});
	};

	$scope.Start = function() {
	$log.info('orderbook', 'start');
	fn();
	interval = $interval(fn, 60 * 1000);
	};

	$scope.Stop = function() {
	$log.info('orderbook', 'stop');
	if (angular.isDefined(interval)) {
	$interval.cancel(interval);
	interval = undefined;
	}
	};

	}]);

	app.controller('Balance', ['$scope', '$interval', '$log', 'BitNZ', function($scope, $interval, $log, bitnz){
	$scope.balance = {};

	var interval = null;

	var fn = function(){
	$log.info('run');
	bitnz.balance().success(function(data){
	if (data.result === false) {
	$scope.Stop();
	return;
	}
	$log.log('balance', data);
	$scope.balance = data;
	}).error(function(data){
	$log.error('balance', data);
	$scope.Stop();
	});
	};

	$scope.Start = function() {
	$log.info('balance', 'start');
	fn();
	interval = $interval(fn, 60 * 1000);
	};

	$scope.Stop = function() {
	$log.info('balance', 'stop');
	if (angular.isDefined(interval)) {
	$interval.cancel(interval);
	interval = undefined;
	}
	};

	}]);