Bianca Fernandez | Pipes | Ada Trader

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="order-form">
              <label for="symbol">Symbol</label>
-             <select name="symbol">
+             <select name="symbol" id="select">
                <!-- 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="order-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

@@ -1,10 +1,28 @@
+// css
 import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
+// vendor modules
 import $ from 'jquery';
+import _ from 'underscore';
+import Backbone from 'backbone';
 
+//simulator
 import Simulator from 'models/simulator';
+
+// files
 import QuoteList from 'collections/quote_list';
+import Quote from 'models/quote';
+import QuoteListView from 'views/quote_list_view';
+import QuoteView from 'views/quote_view';
+
+import TradeHistoryView from 'views/trade_history_view';
+
+import Order from 'models/order';
+import OrderList from 'collections/order_list';
+import OpenOrderView from 'views/open_order_view';
+import OpenOrderListView from 'views/open_order_list_view';
+import OrderFormView from 'views/order_form_view';
 
 const quoteData = [
   {
@@ -26,10 +44,87 @@ const quoteData = [
 ];
 
 $(document).ready(function() {
+
   const quotes = new QuoteList(quoteData);
-  const simulator = new Simulator({
+  const simulator = new Simulator({ // passing in a hash with a key quotes
     quotes: quotes,
   });
 
   simulator.start();
+
+  let quoteTemplate = _.template($('#quote-template').html());
+
+  const quoteListView = new QuoteListView({
+    el: 'main',
+    model: quotes,
+    template: quoteTemplate,
+  });
+
+  quoteListView.render();
+
+  /////////trade history /////
+  let tradeHistoryTemplate = _.template($('#trade-template').html());
+
+  const tradeHistoryView = new TradeHistoryView({
+    el: 'main',
+    model: quotes,
+    template: tradeHistoryTemplate
+  });
+
+  tradeHistoryView.bind();
+
+  /////// order entry form //////
+  //
+  const order = new Order;
+  const orders = new OrderList();
+
+  // $('#order-form').on('submit', function(event) {
+  //   event.preventDefault();
+  // });
+  //
+  // $('#order-form .btn-buy').on('click', function(event) {
+  //   event.preventDefault();
+  //   let orderData = {
+  //     buy: true
+  //   };
+  //
+  //   orderData['symbol'] = $('#select-symbol').val();
+  //   orderData['targetPrice'] = parseFloat($('#order-price').val());
+  //
+  //   let order = new Order(orderData);
+  //   orders.push(order);
+  // });
+  //
+  //
+  // $('#order-form .btn-sell').on('click', function(event) {
+  //   event.preventDefault();
+  //   let orderData = {
+  //     buy: false
+  //   };
+  //
+  //   orderData['symbol'] = $('#select-symbol').val();
+  //   orderData['targetPrice'] = parseFloat($('#order-price').val());
+  //
+  //   let order = new Order(orderData);
+  //   orders.push(order);
+  // });
+
+
+  let orderTemplate = _.template($('#order-template').html());
+
+  const openOrderListView = new OpenOrderListView({
+    el: 'main',
+    model: orders,
+    template: orderTemplate,
+  });
+
+  const orderFormView = new OrderFormView({
+    el: '.order-entry-form',
+    orderList: orders,
+    quoteList: quotes,
+  });
+
+  openOrderListView.render();
+  orderFormView.render();
+
 });

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

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import Quote from 'models/quote';
+import Quote from '../models/quote';
 
 const QuoteList = Backbone.Collection.extend({
   model: Quote,

src/models/order.js

@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+
+
+const Order = Backbone.Model.extend({
+  defaults: {
+    symbol: 'UNDEF',
+    targetPrice: 0.00,
+    buy: true,
+  },
+
+});
+
+export default Order;

src/models/quote.js

@@ -6,12 +6,26 @@ const Quote = Backbone.Model.extend({
     price: 0.00
   },
 
+// increase price by 1
   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);
   },
 
+// decrease price by 1
   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/models/simulator.js

@@ -3,7 +3,7 @@ import _ from 'underscore';
 
 const Simulator = Backbone.Model.extend({
   initialize(params) {
-    this.quotes = params.quotes;
+    this.quotes = params.quotes; // it is assigning and creating quotes with this.quotes 
   },
 
   start() {

src/views/open_order_list_view.js

@@ -0,0 +1,52 @@
+import Backbone from 'backbone';
+import Order from '../models/order';
+import OpenOrderView from './open_order_view';
+import Quote from '../models/quote';
+// import QuoteView from '../views/quote_view';
+import QuoteList from '../collections/quote_list';
+import $ from 'jquery';
+
+const OpenOrderListView = Backbone.View.extend({
+  initialize(params) { // params is a hash -- only a hash because we passed it in as such
+    this.template = params.template;
+    this.model = params.model;
+
+    this.listenTo(this.model, 'update', this.render);
+    // this.listenTo(this.quotes, 'change', this.checkOrder);
+  },
+  // checkOrder(event) {
+  //   if (this.model.length > 0) {
+  //     console.log(this.quotes);
+  //     console.log(this.model.price);
+  //   }
+
+    // TODO way to check to see if current quote symbol is the same and if so, does the price logic match
+    // if yes, then call completeOrder method
+  // },
+  // completeOrder(event) {
+  //
+  // },
+  // events: {
+  //
+  // },
+  render() {
+    console.log('you are in the open order list view');
+    this.$('#orders').empty();
+    console.log('in the render in open order list view');
+    console.log(this.model);
+
+    this.model.each((order) => {
+      const openOrderView = new OpenOrderView({
+        model: order,
+        template: this.template,
+        tagName: 'li',
+        className: 'orders',
+      });
+
+      this.$('#orders').append(openOrderView.render().$el);
+    });
+    return this;
+  }
+});
+
+export default OpenOrderListView;

src/views/open_order_view.js

@@ -0,0 +1,51 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+import Order from '../models/order';
+import OrderList from '../collections/order_list';
+import $ from 'jquery';
+
+const OpenOrderView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    // this.quotes = params.quotes;
+    this.model = params.model;
+    this.listenTo(this.model, 'change', this.render);
+    this.listenTo(this.model.get('quote'), 'change', this.completeOrder);
+
+  },
+  completeOrder() {
+    console.log('the complete order method is being called');
+    let quote = this.model.get('quote');
+
+    if (this.model.get('buy')) {
+      if (this.model.get('targetPrice') >= quote.get('price')) {
+        quote.buy();
+        this.model.destroy();
+        this.remove();
+      }
+    } else {
+      if (this.model.get('targetPrice') <= quote.get('price')) {
+        quote.sell();
+        this.model.destroy();
+        this.remove();
+      }
+    }
+  },
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+
+    this.$el.html(compiledTemplate);
+
+    return this;
+  },
+  events: {
+    'click button.btn-cancel': 'cancel',
+  },
+  cancel(event) {
+    if (confirm("Are you sure?") === true){
+      this.model.destroy();
+    }
+  },
+});
+
+export default OpenOrderView;

src/views/order_form_view.js

@@ -0,0 +1,62 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+import Order from '../models/order';
+import OrderList from '../collections/order_list';
+import $ from 'jquery';
+
+const OrderFormView = Backbone.View.extend({
+  initialize(params) {
+    this.orderList = params.orderList;
+    this.quoteList = params.quoteList;
+    console.log(params);
+  },
+  render() {
+    console.log('you are in the order form view render');
+    // console.log(this.quotelist)
+
+    this.quoteList.each((quote)=> {
+      console.log(quote.get('symbol'));
+      this.$('#select').append($(`<option> ${quote.get('symbol')}</option>`));
+    });
+    return this;
+  },
+  events: {
+    'click button.btn-buy': 'buy',
+    'click button.btn-sell': 'sell',
+  },
+  buy(event) {
+    console.log(event);
+    event.isBuy = true;
+    this.addNewOrder(event);
+  },
+  sell(event) {
+    console.log(event);
+    event.isBuy = false;
+    this.addNewOrder(event);
+
+  },
+  addNewOrder(event) {
+    console.log('in the add new order');
+    event.preventDefault();
+    const orderData = {};
+    orderData['symbol'] = $('select[name=symbol]').val();
+    orderData['targetPrice'] = parseFloat($('input[name=price-target]').val());
+    orderData['quote'] = this.quoteList.findWhere({symbol: orderData['symbol']});
+
+    orderData['buy'] = event.isBuy;
+
+    console.log(orderData);
+
+    const newOrder = new Order(orderData);
+
+    // if (newOrder.isValid()) {
+      this.orderList.push(newOrder);
+      console.log(this.orderList);
+    // }
+
+    this.$('select[name=symbol]').val('');
+    this.$('input[name=price-target]').val('');
+  },
+});
+
+export default OrderFormView;