Ada-Trader-Mariana-Pipes

dist/index.html

@@ -57,13 +57,14 @@ <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="option">
+
                <!-- 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="targetPrice">Price</label>
+             <input type="number" name="targetPrice" 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>

src/app.js

@@ -1,10 +1,16 @@
 import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
+import QuoteView from './views/quote_view';
+import TraderListView from './views/trader_list_view';
+import QuoteListView from './views/quote_list_view';
+import OrderListView from './views/order_list_view';
 
 import $ from 'jquery';
+import _ from 'underscore';
 
 import Simulator from 'models/simulator';
 import QuoteList from 'collections/quote_list';
+import OrderList from 'collections/order_list';
 
 const quoteData = [
   {
@@ -25,11 +31,53 @@ const quoteData = [
   },
 ];
 
+
+
+
+
+
+
 $(document).ready(function() {
   const quotes = new QuoteList(quoteData);
   const simulator = new Simulator({
     quotes: quotes,
   });
 
+  const bus = _.extend({}, Backbone.Events);
+
+
+  quotes.each((quote) => {
+    _.extend(quote, Backbone.events);
+    const quoteView = new QuoteView({
+      model: quote,
+      template: _.template($('#quote-template').html()),
+      tagName: 'li',
+      className: 'quote',
+      bus: bus,
+    });
+    quoteView.render();
+    $('.quotes').append(quoteView.$el);
+    $('#option').append(`<option>${quote.get('symbol')}</option>`);
+
+  });
+
+  const orderList = new OrderList();
+
+  const traderListView = new TraderListView({
+    template: _.template($('#trade-template').html()),
+    el: "#trades-container",
+    bus: bus
+  });
+
+  const orderListView = new OrderListView({
+    model: orderList,
+    el: '#order-workspace',
+    template: _.template($('#order-template').html())
+  });
+
+  orderListView.renderOrders()
+
+
+
   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/models/order.js

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

src/models/quote.js

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

src/views/open_list_view.js

@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+const OpenLitsView = Backbone.View.extend({
+  initialize(params){
+    this.template = params.template;
+    // TODO to change click, I want to add the element to the list after they click buy or sellQuote
+  },
+});
+
+
+export default OpenListView;

src/views/order_list_view.js

@@ -0,0 +1,64 @@
+import Backbone from 'backbone';
+import Order from '../models/order';
+import OrderView from '../views/order_view';
+import OrderList from '../collections/order_list';
+import _ from 'underscore';
+
+const OrderListView = Backbone.View.extend({
+  initialize(params){
+    this.template = params.template;
+    this.listenTo(this.model, 'update', this.renderOrders)
+  },
+  events: {
+    'click .btn-buy, .btn-sell': 'addOrder',
+  },
+  renderOrders(){
+
+    this.model.each((order) => {
+
+      const orderView = new OrderView({
+        model: order,
+        template: this.template,
+        tagName: 'li',
+        className: 'order',
+        // bus: this.bus,
+      });
+      this.$('#orders').append(orderView.renderOrder().$el);
+    });
+    return this;
+
+  },
+
+  addOrder(event) {
+    event.preventDefault();
+    const formData = this.getFormData();
+    formData['buy'] = event.target.classList[0] === ('btn-buy')  ? true : false;
+    const newOrder = new Order(formData);
+    // const viewOrder =  new OrderView({
+    //   model: newOrder,
+    //   template: this.$('#order-template'),
+    //   el: 'li'
+    //   //  _.template(this.$('#order-template')),
+    // });
+
+    this.model.add(newOrder)
+    // console.log(viewOrder);
+  },
+
+  getFormData() {
+    const orderData = {};
+    // ['symbol', 'price-target'].forEach((field) => {
+      const val = Number(this.$('#order-form input[name="targetPrice"]').val());
+
+      // this.$(`#add-task-form input[name=${field}]`).val();
+      // if (val !== '') {
+      orderData['targetPrice'] = val;
+      // }
+    // });
+    orderData['symbol'] = this.$('select[name=symbol]').val();
+    return orderData;
+  },
+
+});
+
+export default OrderListView;

src/views/order_view.js

@@ -0,0 +1,16 @@
+import Backbone from 'backbone';
+
+const OrderView = Backbone.View.extend({
+  initialize(params){
+    this.template = params.template;
+    // TODO to change click, I want to add the element to the list after they click buy or sellQuote
+  },
+  renderOrder(){
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this
+  },
+});
+
+
+export default OrderView;

src/views/quote_list_view.js

@@ -0,0 +1,39 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+import QuoteList from '../collections/quote_list';
+import _ from 'underscore';
+
+const QuoteListView = Backbone.View.extend({
+  initialize(params){
+    this.template = params.template;
+    this.listenTo(this.model, 'update', this.render)
+    // TODO to change click, I want to add the element to the list after they click buy or sellQuote
+  },
+  events: {
+    'click .btn-buy': 'addTraderBuy',
+    'click .btn-sell': 'addTraderSell'
+  },
+  addTraderBuy(){
+    console.log("inside the addTraderBuy");
+  },
+  addTraderSell(){
+    console.log('inside the addTraderSell');
+  },
+  // copy
+//   addTraderBuy(event){
+//     event.preventDefault();
+// // TODO get form data
+//     const formData = this.getFormData();
+//     const newTask = new Task(formData);
+//
+//       this.model.add(newTask);
+//
+  // endcopy
+  render(){
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+    return this
+  }
+});
+
+export default QuoteListView;

src/views/quote_view.js

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

src/views/trader_list_view.js

@@ -0,0 +1,73 @@
+import Backbone from 'backbone';
+import TraderView from '../views/trader_view';
+
+import _ from 'underscore';
+
+const TraderListView = Backbone.View.extend({
+  initialize(params){
+    this.bus = params.bus;
+    this.template = params.template;
+    // Liste the but, sell event
+    this.listenTo(params.bus, 'buyQuote', this.addTraderBuy);
+    this.listenTo(params.bus, 'sellQuote', this.addTraderSell);
+    // this.listenTo(this.model, 'buy', this.addTraderBuy);
+    // this.listenTo(this.model, 'sell', this.addTraderSell);
+    // TODO to change click, I want to add the element to the list after they click buy or sellQuote
+  },
+  addTraderBuy(quote){
+    const trade = {
+      symbol:quote.get('symbol'),
+      price: quote.get('price'),
+      buy: true
+
+    }
+    const traderView = new TraderView({
+      model: trade,
+      template: this.template,
+      bus: this.bus,
+    });
+
+    this.$('.trades').prepend(traderView.render().$el);
+    console.log("inside the addTraderBuy");
+  },
+
+  addTraderSell(quote){
+
+
+    const tradesell = {
+      symbol:quote.get('symbol'),
+      price: quote.get('price'),
+      buy: false
+
+    };
+
+    const traderView = new TraderView({
+      model: tradesell,
+      template: this.template,
+      bus: this.bus,
+    });
+
+    this.$('.trades').prepend(traderView.render().$el);
+    console.log("inside the addSell");
+
+}
+
+
+
+
+
+
+
+
+
+
+  //   const traderView = new TraderView({
+  //     model: trade,
+  //     template: this.template,
+  //   });
+  //
+  //   this.$('.trades').prepend(traderView.render().$el);
+  // },
+});
+
+export default TraderListView;

src/views/trader_view.js

@@ -0,0 +1,18 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+import QuoteList from '../collections/quote_list';
+import _ from 'underscore';
+
+const TraderView = Backbone.View.extend({
+  initialize(params){
+    this.template = params.template;
+    this.bus = params.bus;
+  },
+  render(){
+    const compiledTemplate = this.template(this.model);
+    this.$el.html(compiledTemplate);
+    return this
+  }
+});
+
+export default TraderView;