Adds "sell" component

Uses rootscope to announce when a currency + exchange is selected to allow all components to adapt to new data.
This commit is contained in:
Scott
2017-01-29 20:55:11 +11:00
parent fb6b1134f6
commit 6bad3e566a
10 changed files with 123 additions and 27 deletions

View File

@@ -9,6 +9,7 @@ angular.module('myApp', [
'myApp.settings',
'myApp.version',
'myApp.buy',
'myApp.sell',
'myApp.stringUtils'
]).
config(['$locationProvider', '$routeProvider' ,'NotificationProvider', function($locationProvider, $routeProvider, NotificationProvider) {

View File

@@ -1,13 +1,13 @@
<div class="col-md-12">
<div class="form col-md-12">
<div class="row">
<label>Exchange: {{$ctrl.exchange.exchangeName}}
<label>Exchange: {{exchange.exchangeName}}
</div>
<div class="row">
<label>Currency: </label>{{$ctrl.currency.CryptoCurrency}}
<label>Currency: </label>{{currency.CryptoCurrency}}
</div>
<div class="row">
<label>Lowest Ask: </label><label>{{$ctrl.currency.Last}}</label>
<label>Lowest Ask: </label><label>{{currency.Ask}}</label>
</div>
<div class="row">
<label>Price: </label><input pattern="\d*" class="form-control" ng-model="price" type="text" placeholder="How much?" />
@@ -15,8 +15,8 @@
<div class="row">
<label>Amount: </label><input pattern="\d*" ng-model="amount" class="form-control" type="text" placeholder="How much?" />
</div>
<div class="row" ng-show="price > 0 && amount > 0">
<label>Total: </label><label>{{price * amount}}</label>
<div class="row">
<label>Total: </label><label ng-show="price > 0 && amount > 0">{{price * amount}}</label>
</div>
<div class="row">
<button ng-click="placeOrder()" class="form-control btn btn-success">Place Order</button>

View File

@@ -2,15 +2,24 @@
angular.module('myApp.buy',[]).component('buy', {
templateUrl: '/components/buy/buy.html',
controller:'BuyController',
bindings: {
exchange: '=',
currency:'='
}, controller: function ($scope, $http, Notification) {
$scope.GetLatestDataFromExchangeCurrency = function () {
controller: function ($scope, $http, Notification, $rootScope) {
$scope.currency = {};
$scope.exchange = {};
$rootScope.$on('CurrencyChanged', function (event, args) {
$scope.currency = args.Currency;
$scope.exchange = args.Exchange;
console.log($scope.currency);
$scope.GetLatestDataFromExchangeCurrency();
$scope.price = $scope.currency.Ask;
});
$scope.GetLatestDataFromExchangeCurrency = function () {
$http.get('/GetLatestDataFromExchangeCurrency?exhange=' + $scope.exchange.exchangeName + '&currency='+ $scope.currency.CryptoCurrency).success(function (data) {
$scope.currency.Last = data.Last;
$scope.currency.Volume = data.Volume;
$scope.currency.Ask = data.Ask;
$scope.price = $scope.currency.Ask;
});
}
@@ -20,8 +29,7 @@ angular.module('myApp.buy',[]).component('buy', {
obj.Currency = $scope.currency;
obj.Price = $scope.price;
obj.Amount = $scope.amount;
obj.Amount = $scope.amount;
$http.post('/Command/', obj).success(function (response) {
$http.post('/Command/PlaceBuyOrder', obj).success(function (response) {
Notification.success("Successfully placed order");
});
};

View File

@@ -1,9 +0,0 @@
angular.module('myApp.stringUtils', [])
.filter('removeSpaces', [function () {
return function (string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[\s]/g, '');
};
}]);

View File

@@ -0,0 +1,25 @@
angular.module('myApp.stringUtils', [])
.filter('removeSpaces', [function () {
return function (string) {
if (!angular.isString(string)) {
return string;
}
return string.replace(/[\s]/g, '');
};
}]);
/*
angular.module('myApp.currenctExchangeFactory', []).factory('currentExchangeCurrency', function() {
var currentExchangeAndCurrency = {};
var exchangeService = {};
exchangeService.get = function() {
return currentExchangeAndCurrency;
};
exchangeService.update = function(exchange, currency) {
currentExchangeAndCurrency.Exchange = exchange;
currentExchangeAndCurrency.Currency = currency;
};
return exchangeService;
});
*/

View File

@@ -0,0 +1,25 @@
<div class="col-md-12">
<div class="form col-md-12">
<div class="row">
<label>Exchange: {{exchange.exchangeName}}
</div>
<div class="row">
<label>Currency: </label>{{currency.CryptoCurrency}}
</div>
<div class="row">
<label>Bid: </label><label>{{currency.Bid}}</label>
</div>
<div class="row">
<label>Price: </label><input pattern="\d*" class="form-control" ng-model="price" type="text" placeholder="How much?" />
</div>
<div class="row">
<label>Amount: </label><input pattern="\d*" ng-model="amount" class="form-control" type="text" placeholder="How much?" />
</div>
<div class="row" >
<label>Total: </label><label ng-show="price > 0 && amount > 0">{{price * amount}}</label>
</div>
<div class="row">
<button ng-click="placeOrder()" class="form-control btn btn-success">Place Order</button>
</div>
</div>
<div>

View File

@@ -0,0 +1,40 @@
angular.module('myApp.sell',[]).component('sell', {
templateUrl: '/components/sell/sell.html',
controller:'SellController',
controller: function ($scope, $http, Notification, $rootScope) {
$scope.currency = {};
$scope.exchange = {};
$rootScope.$on('CurrencyChanged', function (event, args) {
$scope.currency = args.Currency;
$scope.exchange = args.Exchange;
console.log($scope.currency);
$scope.GetLatestDataFromExchangeCurrency();
$scope.price = $scope.currency.Bid;
});
$scope.GetLatestDataFromExchangeCurrency = function () {
$http.get('/GetLatestDataFromExchangeCurrency?exhange=' + $scope.exchange.exchangeName + '&currency='+ $scope.currency.CryptoCurrency).success(function (data) {
$scope.currency.Last = data.Last;
$scope.currency.Volume = data.Volume;
$scope.currency.Bid = data.Bid;
$scope.price = $scope.currency.Bid;
});
}
$scope.placeOrder = function () {
var obj = {};
obj.ExchangeName = $scope.exchange.exchangeName;
obj.Currency = $scope.currency;
obj.Price = $scope.price;
obj.Amount = $scope.amount;
$http.post('/Command/PlaceSellOrder', obj).success(function (response) {
Notification.success("Successfully placed order");
});
};
}
});

View File

@@ -61,9 +61,10 @@
<script src="/views/home/home.js"></script>
<script src="/views/wallets/wallets.js"></script>
<script src="/components/buy/buy.js"></script>
<script src="/components/sell/sell.js"></script>
<script src="/components/version/version.js"></script>
<script src="/components/version/version-directive.js"></script>
<script src="/components/version/interpolate-filter.js"></script>
<script src="/components/filters/stringUtils.js"></script>
<script src="/components/helpers/stringUtils.js"></script>
</body>
</html>

View File

@@ -16,10 +16,11 @@
</div>
<div class="col-md-4" >
<h4>Buy</h4>
<buy ng-show="selectedCurrency.Last > 0" exchange="selectedExchange" currency="selectedCurrency"></buy>
<buy ng-show="selected.Currency.Last > 0" ></buy>
</div>
<div class="col-md-4" style=" height: 300px;">
<h4>Sell</h4>
<sell ng-show="selected.Currency.Last > 0" exchange="selected.Exchange" currency="selected.Currency"></sell>
</div>
<div class="col-md-4" style=" height: 300px;">
<h4>Wallet quick look</h4>

View File

@@ -9,7 +9,8 @@ angular.module('myApp.home', ['ngRoute'])
});
}])
.controller('HomeController', function ($scope, $http, Notification) {
.controller('HomeController', function ($scope, $http, Notification, $rootScope) {
$scope.selected = {};
$scope.getDashboardData = function() {
$http({
method: 'GET',
@@ -17,6 +18,7 @@ angular.module('myApp.home', ['ngRoute'])
}).
success(function (data, status, headers, config) {
$scope.exchanges = data.data;
$scope.reloadDashboardWithExchangeCurrency($scope.exchanges[0], $scope.exchanges[0].exchangeValues[0]);
Notification.info("Retrieved latest data");
}).
error(function (data, status, headers, config) {
@@ -25,8 +27,10 @@ angular.module('myApp.home', ['ngRoute'])
};
$scope.reloadDashboardWithExchangeCurrency = function (exchange, value) {
$scope.selectedExchange = exchange;
$scope.selectedCurrency = value;
$scope.selected.Exchange = exchange;
$scope.selected.Currency = value;
$rootScope.$emit('CurrencyChanged', $scope.selected);
};
$scope.getDashboardData();