Pipes - Sara Frandsen - Ada Trader

dist/index.html

@@ -13,7 +13,7 @@
         <h1 class="logo">Ada Trader</h1>
       </header>
 
-      <div class="workspace row">
+      <div id="workspace" class="workspace row">
 
         <div class="columns large-8 small-12">
 
@@ -33,6 +33,7 @@ <h2>Quotes</h2>
             <h2>Trade History</h2>
             <div class="trades-list-container">
               <ul id="trades" class="trades">
+                <!-- prepend history here -->
               </ul>
             </div>
           </div>
@@ -57,16 +58,16 @@ <h2>Open Orders</h2>
        <div class="columns large-4 small-12 trade-column">
          <div class="order-entry-form columns small-10 small-offset-1">
            <h3>Order Entry Form</h3>
-           <form>
+           <form id="order-entry-form">
              <label for="symbol">Symbol</label>
              <select name="symbol">
                <!-- Option entries should be added here using JavaScript -->
              </select>
-             <label for="price-target">Price</label>
-             <input type="number" name="price-target" step="0.10" min="0.00" placeholder="100.00" />
+             <label for="target-price">Price</label>
+             <input type="number" name="target-price" step="0.10" min="0.00" placeholder="100.00" />
              <label>Action</label>
-             <button class="btn-buy alert button">Buy</button>
-             <button class="btn-sell success button">Sell</button>
+             <button id="order-buy" class="btn-buy alert button">Buy</button>
+             <button id="order-sell" class="btn-sell success button">Sell</button>
            </form>
            <div class="form-errors">
            </div>
@@ -82,6 +83,8 @@ <h3>Order Entry Form</h3>
     </div>
     </footer>
 
+<!-- ////////////////////////////////////////// -->
+
     <script type="text/template" id="quote-template">
       <!-- The provided styles assume that you will insert this template
       within an element with the class "quote" applied -->
@@ -97,6 +100,8 @@ <h3 class="price">$<%- price.toFixed(2) %></h3>
       <!-- </li> -->
     </script>
 
+<!-- ////////////////////////////////////////// -->
+
     <script type="text/template" id="trade-template">
       <li class="trade">
         <span>
@@ -105,6 +110,8 @@ <h3 class="price">$<%- price.toFixed(2) %></h3>
       </li>
     </script>
 
+<!-- ////////////////////////////////////////// -->
+
     <script type="text/template" id="order-template">
       <h3 class="symbol"><%- symbol %></h3>
       <div class="detail">

spec/models/order_spec.js

@@ -0,0 +1,44 @@
+import Order from 'models/order';
+import Quote from 'models/quote';
+
+describe('Order spec', () => {
+  let order;
+  beforeEach(() => {
+    order = new Order({
+      symbol: 'HELLO',
+      price: 100.00,
+    });
+  });
+
+  describe('validate', () => {
+    it('validates there is a target price', () => {
+      const prices = ['', NaN, undefined, 0]
+
+      prices.forEach((price)=> {
+        const order = new Order({
+          targetPrice: price
+        });
+
+        expect(order.isValid()).toBeFalsy();
+      });
+    });
+
+
+
+    // it('buy price is not >= to the current market price', () => {
+    //   const prices = [100,1000];
+    //
+    //   prices.forEach((price)=> {
+    //     const order = new Order({
+    //       targetPrice: price,
+    //       buy: true,
+    //     });
+    //
+    //     expect(order.isValid()).toBeFalsy();
+    //   });
+    // });
+
+
+
+  });
+});

src/app.js

@@ -2,9 +2,18 @@ import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
 import $ from 'jquery';
-
+import _ from 'underscore';
+import Backbone from 'backbone';
+//models
 import Simulator from 'models/simulator';
+//collections
+import TradeList from 'collections/trade_list';
 import QuoteList from 'collections/quote_list';
+import OrderList from './collections/order_list';
+//views
+import QuoteListView from 'views/quote_list_view';
+import TradeListView from 'views/trade_list_view';
+import OrderListView from 'views/order_list_view';
 
 const quoteData = [
   {
@@ -26,10 +35,50 @@ const quoteData = [
 ];
 
 $(document).ready(function() {
+  const bus = _.extend({}, Backbone.Events);
   const quotes = new QuoteList(quoteData);
+  const tradeList = new TradeList();
+  const orderList = new OrderList();
   const simulator = new Simulator({
     quotes: quotes,
   });
 
+  ///// quote list view /////
+  const quoteListView = new QuoteListView({
+    model: quotes,
+    template: _.template($('#quote-template').html()),
+    el: 'main',
+    bus: bus,
+  });
+  quoteListView.render();
+
+  ///// trade list view /////
+  const tradeListView = new TradeListView({
+    model: tradeList,
+    template: _.template($('#trade-template').html()),
+    el: '#workspace',
+    bus: bus,
+  })
+  tradeListView.render();
+
+  quoteData.map(quote => quote.symbol).forEach((symbol) => {
+    $("select[name='symbol']").append($('<option>',
+    {
+      value: symbol,
+      text: symbol,
+    }));
+  });
+
+  ///// order list view /////
+  const orderListView = new OrderListView({
+    model: orderList,
+    quotes: quotes,
+    bus: bus,
+    template: _.template($('#order-template').html()),
+    el: '#order-workspace'
+  });
+  orderListView.render();
+
+  ///// simulator /////
   simulator.start();
 });

src/collections/order_list.js

@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Order from 'models/order';
+
+const OrderList = Backbone.Collection.extend({
+  model: Order,
+});
+
+export default OrderList;

src/collections/quote_list.js

@@ -3,6 +3,13 @@ import Quote from 'models/quote';
 
 const QuoteList = Backbone.Collection.extend({
   model: Quote,
+
+  bySymbol: function(symbol) {
+    const filtered = this.filter(function (quote) {
+      return quote.get('symbol') === symbol;
+    });
+    return filtered[0];
+  },
 });
 
 export default QuoteList;

src/collections/trade_list.js

@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Trade from 'models/trade';
+
+const TradeList = Backbone.Collection.extend({
+  model: Trade,
+});
+
+export default TradeList;

src/models/order.js

@@ -0,0 +1,29 @@
+import Backbone from 'backbone';
+
+const Order = Backbone.Model.extend({
+  initialize(params) {
+    this.buy = params.buy;
+    this.targetPrice = params.targetPrice;
+    this.symbol = params.symbol;
+    this.quotes = params.quotes;
+  },
+
+  validate(params) {
+    const errors = {};
+    if (!params.targetPrice) {
+      errors['price'] = 'Invalid target price!';
+    }
+
+    // if (params.targetPrice >= matchingQuote.attributes.price) {
+    //   errors['buy'] = 'Less than current market price'
+    // }
+
+    if (Object.keys(errors).length > 0) {
+      return errors;
+    } else {
+      return false;
+    }
+  },
+});
+
+export default Order;

src/models/quote.js

@@ -8,10 +8,12 @@ const Quote = Backbone.Model.extend({
 
   buy() {
     // Implement this function to increase the price by $1.00
+    this.set('price', this.get('price') + 1.00);
   },
 
   sell() {
     // Implement this function to decrease the price by $1.00
+    this.set('price', this.get('price') - 1.00);
   },
 });
 

src/models/trade.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+const Trade = Backbone.Model.extend({
+  initialize(params) {
+    this.symbol = params.symbol;
+    this.buy = params.buy;
+    this.price = params.price;
+  },
+});
+
+export default Trade;

src/views/order_list_view.js

@@ -0,0 +1,74 @@
+import Backbone from 'backbone';
+import $ from 'jquery';
+import Order from '../models/order';
+import OrderView from './order_view';
+
+const OrderListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.bus = params.bus;
+    this.quotes = params.quotes;
+    this.listenTo(this.model, 'update', this.render);
+  },
+
+  render() {
+    const list = this.$('#orders');
+    list.empty();
+    this.model.each((order) => {
+      const orderView = new OrderView({
+        model: order,
+        template: this.template,
+        tagName: 'li',
+        className: 'order',
+        quotes: this.quotes,
+        bus: this.bus,
+      });
+      list.prepend(orderView.render().$el);
+    });
+    return this;
+  },
+
+  events: {
+    'click .btn-buy': 'buyOrder',
+    'click .btn-sell': 'sellOrder',
+  },
+
+  createOrder(buy) {
+    event.preventDefault();
+    $('.form-errors').empty(); // clear errors when new order is placed
+    const symbol = this.$(`[name=symbol]`).val();
+    const targetPrice = parseFloat(this.$(`[name=target-price]`).val());
+    const orderData = {
+      buy, // buy: buy
+      targetPrice, // targetPrice: targetPrice
+      symbol, // symbol: symbol
+    };
+
+    const newOrder = new Order(orderData);
+
+    if (newOrder.isValid()) {
+      this.model.add(newOrder); // add to order list
+    } else {
+      newOrder.destroy();
+      this.errorMessage(newOrder.validationError);
+    }
+  },
+
+  errorMessage(errors) {
+    Object.entries(errors).forEach((error)=> {
+      $('.form-errors').prepend(`<h3>${error[1]}</h3>`);
+    })
+  },
+
+  buyOrder: function(event) {
+    event.preventDefault();
+    const order = this.createOrder(true);
+  },
+
+  sellOrder: function(event) {
+    event.preventDefault();
+    const order = this.createOrder(false);
+  },
+});
+
+export default OrderListView;

src/views/order_view.js

@@ -0,0 +1,54 @@
+import Backbone from 'backbone';
+import Trade from '../models/trade';
+
+const OrderView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.bus = params.bus;
+    this.quotes = params.quotes;
+    this.listenTo(this, 'deleteOrder', this.deleteOrder);
+    this.listenTo(params.quotes, 'change', this.placeOrder);
+  },
+
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+
+  events: {
+    'click button.btn-cancel': 'deleteOrder',
+  },
+
+  deleteOrder() {
+    this.model.destroy();
+    this.remove();
+  },
+
+  placeOrder() {
+    const trade = new Trade({
+      buy: this.model.buy,
+      price: this.model.targetPrice,
+      symbol: this.model.symbol,
+    });
+
+    // bySymbol is custom filter created in quote_list
+    const matchingQuote = this.quotes.bySymbol(this.model.symbol);
+
+    if (this.model.buy) {
+      if (this.model.targetPrice < matchingQuote.attributes.price) {
+        matchingQuote.buy();
+        this.bus.trigger('addTrade', trade); // newTrade() in trade_list_view
+        this.trigger('deleteOrder'); // deleteOrder() above ^^
+      }
+    } else if (!this.model.buy) {
+      if (this.model.targetPrice > matchingQuote.attributes.price) {
+        matchingQuote.sell();
+        this.bus.trigger('addTrade', trade); // newTrade() in trade_list_view
+        this.trigger('deleteOrder'); // deleteOrder() above ^^
+      }
+    }
+  },
+});
+
+export default OrderView;