Implements front-end call for buy and sell orders

Copy-pastes sell-orders component for mass component creation

web/app/app.js

@@ -12,6 +12,7 @@ angular.module('myApp', [
     'myApp.sell',
     'myApp.enabledExchanges',
     'myApp.buyOrders',
+    'myApp.sellOrders',
     'myApp.stringUtils'
 ]).
 config(['$locationProvider', '$routeProvider', 'NotificationProvider', function($locationProvider, $routeProvider, NotificationProvider) {

web/app/components/buy-orders/buy-orders.js

@@ -11,11 +11,15 @@ angular.module('myApp.buyOrders',[]).component('buyorders', {
        $scope.exchange = args.Exchange;
        $scope.currencyOne = $scope.currency.FirstCurrency;
        $scope.currencyTwo  = $scope.currency.SecondCurrency;
-       $scope.doTheThing();
+       $scope.getRecentBuyOrders();
      });
 
-     $scope.doTheThing = function() {
-       $scope.buyOrders = [
+     $scope.getRecentBuyOrders = function() {
+       var exchData = {params : {exchangeName: '', currencyPair:''}};
+       $http.get('/GetBuyOrdersForCurrencyPair' , exchData).success(function(data) {
+          $scope.buyOrders = data;
+       }).error(function() {
+           $scope.buyOrders = [
           {price:12,currencyOneAmount:12,currencyTwoAmount:13,sum:1111},
           {price:13,currencyOneAmount:15,currencyTwoAmount:13,sum:11231},
           {price:14,currencyOneAmount:232,currencyTwoAmount:13,sum:4511},
@@ -38,6 +42,7 @@ angular.module('myApp.buyOrders',[]).component('buyorders', {
           {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
           {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
        ];
+       });
      }
 
   }

web/app/components/enabled-exchanges/enabled-exchanges.html

@@ -1,4 +1,3 @@
-<div class="col-md-12">
     <h4>All enabled currencies</h4>
     <div class="panel-group" id="accordion">
         <div class="panel panel-default" ng-repeat="exchange in exchanges">
@@ -26,5 +25,4 @@
                 </div>
             </div>
         </div>
-    </div>
-</div>
+    </div>

web/app/components/sell-orders/sell-orders.css

@@ -0,0 +1,12 @@
+.table-fixed-heading {
+    margin-bottom:0px;
+}
+
+.buy-order-table th,.buy-order-table td {
+    width:25%;
+}
+
+.buy-order-data {
+    max-height:200px; 
+    overflow-y:scroll;
+}

web/app/components/sell-orders/sell-orders.html

@@ -0,0 +1,25 @@
+<link rel="stylesheet" href="/components/sell-orders/sell-orders.css" />
+<div class="col-md-12 buy-order-table">
+      <table class="table table-striped table-fixed-heading">
+    <thead>
+        <tr>
+            <th >Price</th>
+            <th >{{currencyOne}}</th>
+            <th >{{currencyTwo}}</th>
+            <th >Sum({{currencyTwo}})</th>
+        </tr>
+    </thead>
+</table>
+<div class="buy-order-data">
+  <table class="table table-striped">
+    <tbody>
+        <tr ng-repeat="sellOrder in sellOrders">
+            <td >{{sellOrder.price}}</td>
+            <td >{{sellOrder.currencyOneAmount}}</td>
+            <td >{{sellOrder.currencyTwoAmount}}</td>
+            <td >{{sellOrder.sum}}</td>
+        </tr>
+    </tbody>
+  </table>
+<div>
+</div>

web/app/components/sell-orders/sell-orders.js

@@ -0,0 +1,52 @@
+
+angular.module('myApp.sellOrders',[]).component('sellorders', {
+  templateUrl: '/components/sell-orders/sell-orders.html',
+  controller:'SellOrdersController',
+  controller: function ($scope, $http, Notification, $rootScope) {
+    $scope.currency = {};
+    $scope.exchange = {};
+
+    $rootScope.$on('CurrencyChanged', function (event, args) {
+       $scope.currency = args.Currency;
+       $scope.exchange = args.Exchange;
+       $scope.currencyOne = $scope.currency.FirstCurrency;
+       $scope.currencyTwo  = $scope.currency.SecondCurrency;
+       $scope.getRecentSellOrders();
+     });
+
+     $scope.getRecentSellOrders = function() {
+       var exchData = {params : {exchangeName: '', currencyPair:''}};
+       $http.get('/GetSellOrdersForCurrencyPair' , exchData).success(function(data) {
+          $scope.sellOrders = data;
+       }).error(function() {
+           $scope.sellOrders = [
+          {price:456,currencyOneAmount:12,currencyTwoAmount:13,sum:1111},
+          {price:234,currencyOneAmount:15,currencyTwoAmount:13,sum:11231},
+          {price:12344,currencyOneAmount:232,currencyTwoAmount:13,sum:4511},
+          {price:15467,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:6717,currencyOneAmount:2452,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:34522,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+          {price:17,currencyOneAmount:22,currencyTwoAmount:13,sum:11212311},
+       ];
+       });
+     }
+
+  }
+});
+
+
+

web/app/index.html

@@ -69,6 +69,7 @@
     <script src="/components/enabled-exchanges/enabled-exchanges.js"></script>
     <script src="/components/version/version.js"></script>
     <script src="/components/buy-orders/buy-orders.js"></script>
+    <script src="/components/sell-orders/sell-orders.js"></script>
     <script src="/components/version/version-directive.js"></script>
     <script src="/components/version/interpolate-filter.js"></script>
     <script src="/components/helpers/stringUtils.js"></script>

web/app/views/home/home.html

@@ -1,6 +1,6 @@
 <div class="col-md-12">
     <div ng-show="loaded">
-        <div class="col-md-11">
+        <div class="col-md-12">
             <h2>{{exchange.exchangeName}} Exchange</h2>
             <h4>{{currency.CurrencyPair}}</h4>
         </div>
@@ -9,6 +9,9 @@
                 <!-- This is to get a sense of scale, I don't intend on any hardcoded heights!' -->
                 <div class="col-md-6" style=" height: 300px;">
                     <h3>Sell orders</h3>
+                    <!--plceholder-->
+                    <sellorders></sellorders>
+                    
                 </div>
                 <div class="col-md-6" style=" height: 300px;">
                     <h3>Buy orders</h3>
@@ -40,10 +43,7 @@
             </div>
         </div>
         <div class="col-md-4">
-            <div class="col-md-11">
                 <enabledexchanges></enabledexchanges>
-            </div>
-
         </div>
     </div>
     <div ng-show="!loaded && !loadFailed" class="col-md-12 text-center">