Pipes - Sairagul - AdaTrader

dist/index.html

@@ -57,13 +57,13 @@ <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="orderForm">
              <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" />
+             <input id="target-price"type="number" name="price-target" 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>
@@ -85,7 +85,7 @@ <h3>Order Entry Form</h3>
     <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 -->
-      <!-- <li class="quote"> -->
+      <li class="quote">
       <div class="row small-12 columns">
         <h3 class="symbol"><%- symbol %></h3>
         <h3 class="price">$<%- price.toFixed(2) %></h3>
@@ -94,7 +94,7 @@ <h3 class="price">$<%- price.toFixed(2) %></h3>
           <button class="btn-sell success button">Sell</button>
         </div>
       </div>
-      <!-- </li> -->
+      </li>
     </script>
 
     <script type="text/template" id="trade-template">

src/app.js

@@ -2,9 +2,21 @@ import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
 import $ from 'jquery';
+import _ from 'underscore';
 
+import Backbone from 'backbone';
 import Simulator from 'models/simulator';
+import Quote from 'models/quote';
 import QuoteList from 'collections/quote_list';
+import QuoteView from './views/quote_view';
+import QuoteListView from './views/quote_list_view';
+import TradeView from './views/trade_view';
+import OrderList from 'collections/order_list';
+import Order from 'models/order';
+import OrderListView from './views/order_list_view';
+import OrderFormView from './views/order_form_view';
+
+
 
 const quoteData = [
   {
@@ -25,11 +37,55 @@ const quoteData = [
   },
 ];
 
+const bus = _.extend({}, Backbone.Events);
+
 $(document).ready(function() {
   const quotes = new QuoteList(quoteData);
+
   const simulator = new Simulator({
     quotes: quotes,
   });
-
   simulator.start();
+
+
+  const quoteListview = new QuoteListView({
+    model: quotes,
+    template: _.template($('#quote-template').html()),
+    el: '.quotes-list-container'
+  });
+  quoteListview.render();
+
+
+  const tradeView = new TradeView({
+    model: quotes,
+    template: _.template($('#trade-template').html()),
+    el: '.trades-list-container'
+  });
+  tradeView.helper();
+
+  const orders = new OrderList();
+
+  $('#orderForm').on('submit', function(event) {
+    event.preventDefault();
+  });
+
+  quotes.each((quote) => {
+    $('#orderForm select').append($('<option>', {
+      value: quote.get('symbol'),
+      text: quote.get('symbol')
+    }));
+  });
+
+  const orderFormView = new OrderFormView({
+    el: '.order-entry-form',
+    bus: bus,
+    quotesList: quotes
+  });
+
+  const orderListView = new OrderListView({
+    model: orders,
+    template: _.template($('#order-template').html()),
+    el: '.orders-list-container',
+    bus: bus,
+  });
 });

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/models/order.js

@@ -0,0 +1,30 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+
+const Order = Backbone.Model.extend({
+
+  buyIt(){
+    const quote = this.get('quote');
+
+    if (this.get('targetPrice') >= quote.get('price') ||
+        this.get('targetPrice') === ''){
+          quote.buy();
+          return true;
+        }
+        return false;
+  },
+
+  sellIt(){
+    const quote = this.get('quote');
+
+    if (this.get('targetPrice') <= quote.get('price') ||
+        this.get('targetPrice') === '') {
+
+      quote.sell();
+      return true;
+    }
+    return false;
+  }
+});
+
+export default Order;

src/models/quote.js

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

src/views/order_form_view.js

@@ -0,0 +1,67 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import Order from '../models/order';
+import OrderView from '../views/order_view';
+import Quote from '../models/quote';
+import QuoteView from '../views/quote_view';
+
+const OrderFormView = Backbone.View.extend({
+  initialize(params){
+    this.template = params.template;
+    this.bus = params.bus;
+    this.quotesList = params.quotesList;
+  },
+
+  events: {
+    'click button.btn-buy': 'buy',
+    'click button.btn-sell': 'sell'
+  },
+  buy(event) {
+    event.preventDefault();
+    let orderData = {
+      buy: true
+    };
+
+    orderData.symbol = this.$('#orderForm select').val();
+    orderData.targetPrice = parseFloat(this.$('#target-price').val());
+    orderData.quote = this.quotesList.findWhere({symbol: orderData.symbol});
+
+    let order = new Order(orderData);
+      if (!order.isValid()) {
+        order.destroy();
+        this.updateStatusMessage(order.validationError);
+      return;
+      }
+
+      // validate(attributes) {
+      //   let warning;
+      //   if (!attributes.targetPrice) {
+      //     warning = 'Target price can not be blank.';
+      //   }
+      //   if (this.getthis.get('targetPrice') <= quote.get('price')
+      //     console.log('target price should be higher than current price');
+    // Do validation on the order
+    //orders.append(order);
+    this.bus.trigger('newOrder', order);
+
+  },
+
+  sell(event) {
+    event.preventDefault();
+    let orderData = {
+      buy: false
+    };
+
+    orderData.symbol = this.$('#orderForm select').val();
+    orderData.targetPrice = parseFloat(this.$('#target-price').val());
+    orderData.quote = this.quotesList.findWhere({symbol: orderData.symbol});
+
+    let order = new Order(orderData);
+    // Do validation on the order
+    //orders.append(order);
+    this.bus.trigger('newOrder', order);
+    },
+
+
+});
+export default OrderFormView;

src/views/order_list_view.js

@@ -0,0 +1,40 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import OrderView from '../views/order_view';
+import Order from '../models/order';
+// import OrderList from '../collections/order_list';
+
+
+const OrderListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.bus = params.bus;
+
+    this.listenTo(this.model, 'update', this.render);
+    this.listenTo(this.bus, 'newOrder', this.addOrder);
+
+    // do something with params.anotherOption
+
+    // log that we're listenTo
+  },
+  render() {
+    // update event happened
+    this.$('#orders').empty();
+    this.model.each((order) => {
+      const orderView = new OrderView({
+        model: order,
+        template: this.template,
+        tagName: 'li',
+        className: 'order',
+      });
+
+      this.$('#orders').append(orderView.render().$el);
+    });
+    return this;
+  },
+  addOrder(order) {
+    this.model.add(order);
+  }
+});
+
+export default OrderListView;

src/views/order_view.js

@@ -0,0 +1,43 @@
+import Backbone from 'backbone';
+import Order from '../models/order';
+
+const OrderView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+
+    this.listenTo(this.model.get('quote'), "change", this.processOrder);
+  },
+  processOrder(){
+    if(this.model.get('buy')){
+      if(this.model.buyIt()){
+        this.model.destroy();
+        this.remove();
+      }
+    }
+    else{
+      if(this.model.sellIt()){
+        if(this.model.sellIt()){
+          this.model.destroy();
+          this.remove();
+        }
+      }
+    }
+  },
+
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+
+  events: {
+    'click .btn-cancel': 'cancel',
+  },
+
+  cancel(){
+    this.model.destroy();
+    this.remove();
+  },
+});
+
+export default OrderView;

src/views/quote_list_view.js

@@ -0,0 +1,29 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import QuoteView from '../views/quote_view';
+
+const QuoteListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'update', this.render);
+  },
+  render() {
+    this.$('#quotes').empty();
+    // Iterate through the list rendering each Quote
+    this.model.each((quote) => {
+      // Create a new QuoteView with the model & template
+      const quoteView = new QuoteView({
+        model: quote,
+        template: this.template,
+        tagName: 'li',
+        className: 'quote',
+      });
+      // Then render the QuoteView
+      // And append the resulting HTML to the DOM.
+      this.$('#quotes').append(quoteView.render().$el);
+    });
+    return this;
+  }
+});
+
+export default QuoteListView;

src/views/quote_view.js

@@ -0,0 +1,29 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+
+const QuoteView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, "change", this.render);
+  },
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this;
+  },
+
+  events: {
+    'click button.btn-buy': 'buy',
+    'click button.btn-sell': 'sell'
+  },
+  buy(event) {
+    this.model.buy();
+
+  },
+
+  sell(event) {
+    this.model.sell();
+  },
+});
+
+export default QuoteView;