pipes | tanisha | ada trader

src/app.js

@@ -2,9 +2,16 @@ import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
 import $ from 'jquery';
+import _ from 'underscore';
+
 
 import Simulator from 'models/simulator';
 import QuoteList from 'collections/quote_list';
+import Quote from 'models/quote';
+import QuoteListView from './views/quote_list_view';
+import Order from 'models/order';
+import OrderList from 'collections/order_list';
+import OrderListView from './views/order_list_view';
 
 const quoteData = [
   {
@@ -31,5 +38,25 @@ $(document).ready(function() {
     quotes: quotes,
   });
 
+  const quoteListView = new QuoteListView({
+    model: quotes,
+    template: _.template($('#quote-template').html()),
+    tradeTemplate: _.template($('#trade-template').html()),
+    el: 'main'
+  });
+
+  quotes.each((quote) => {
+    $('select').append(`<option>${quote.get('symbol')}</option>`);
+  });
+
+  const orders = new OrderList;
+
+  const orderListView = new OrderListView({
+    model: orders,
+    template: _.template($('#order-template').html()),
+    el: 'main'
+  });
+  orderListView.render();
+  quoteListView.renderQuote();
   simulator.start();
 });

src/collections/order_list.js

@@ -0,0 +1,12 @@
+// list of all open orders
+// Orders are listed with the oldest at the top.
+// Each open order entry in the list includes the symbol being ordered, whether it is a buy or sell order, the target price, and a cancel button.
+
+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,22 @@
+import Backbone from 'backbone';
+import Quote from 'models/quote';
+// order needs quote
+// Buy and Sell button creates the order
+
+// order is listening to quote for changes in price
+// when it hears the price changes the handler will have some logic to determine if the price is at a level in which to buy or sell
+
+// before you have the quote buy or sell, you should destroy the order - to prevent duplicate buying or selling
+
+const Order = Backbone.Model.extend({
+  initialize: function(attributes) {
+  },
+  validate: function(attributes) {
+    const errors = {};
+
+    console.log(attributes);
+  },
+
+});
+
+export default Order;

src/models/quote.js

@@ -7,11 +7,11 @@ 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/views/form_view.js

@@ -0,0 +1,13 @@
+// import Backbone from 'backbone';
+// import Order from 'models/order';
+//
+// const FormView = Backbone.View.extend({
+//   initialize(params) {
+//     this.template = params.template;
+//   },
+//   createOrder: {
+//     const order = new Order({
+//
+//     })
+//   }
+// })

src/views/order_list_view.js

@@ -0,0 +1,60 @@
+import Backbone from 'backbone';
+import  Order from 'models/order';
+import _ from 'underscore';
+import OrderList from 'collections/order_list';
+import OrderView from 'views/order_view';
+
+
+const OrderListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.listenTo(this.model, 'update', this.render);
+  },
+  render() {
+    this.$('#orders').empty();
+
+    this.model.each((order) => {
+      console.log(`rendering ${order}`);
+      const orderView = new OrderView({
+        model: order,
+        template: this.template,
+        tagName: 'li',
+        className: 'order',
+      });
+      this.$('#orders').append(orderView.render().$el);
+    });
+    return this;
+  },
+  events: {
+    'click button.btn-buy': 'newBuy',
+    'click button.btn-sell': 'newSell'
+  },
+  getFormData: function() {
+    const formData = {
+      // buy: false,
+      symbol: this.$('select option:selected').text(),
+      targetPrice: parseFloat(this.$('input').val()),
+    };
+    console.log(formData);
+    return formData;
+  },
+  newBuy: function(e) {
+    e.preventDefault();
+    this.createOrder(true);
+  },
+  newSell: function(e) {
+    e.preventDefault();
+    this.createOrder(false);
+  },
+  createOrder: function(buy) {
+
+    let formData = this.getFormData();
+    formData.buy = buy;
+    const newOrder = new Order(formData);
+    this.model.add(newOrder);
+
+  },
+
+});
+
+export default OrderListView;

src/views/order_view.js

@@ -0,0 +1,19 @@
+import Backbone from 'backbone';
+import Order from 'models/order';
+
+const OrderView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+  },
+  render() {
+    console.log(this.model.attributes);
+    const compiledTemplate = this.template(this.model.attributes);
+    console.log('rendered 1');
+
+    this.$el.html(compiledTemplate);
+
+    return this;
+  },
+});
+
+export default OrderView;

src/views/quote_list_view.js

@@ -0,0 +1,34 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import Quote from 'models/quote';
+import QuoteList from 'collections/quote_list';
+import QuoteView from 'views/quote_view';
+
+const QuoteListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.tradeTemplate = params.tradeTemplate;
+    this.listenTo(this.model, 'update', this.renderQuote);
+  },
+  renderQuote() {
+    this.$('#quotes').empty();
+
+    this.model.each((quote) => {
+      const quoteView = new QuoteView({
+        model: quote,
+        template: this.template,
+        className: 'quote',
+      });
+      this.listenTo(quoteView, 'tradeUpdate', this.trade);
+      this.$('#quotes').append(quoteView.render().$el);
+    });
+    return this;
+  },
+  trade: function(quoteView) {
+    const compiledTradeTemplate = this.tradeTemplate(quoteView.model.toJSON());
+    this.$('#trades').prepend(compiledTradeTemplate);
+  },
+
+});
+
+export default QuoteListView;

src/views/quote_view.js

@@ -0,0 +1,34 @@
+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() {
+    this.model.set('buy', true);
+    this.trigger('tradeUpdate', this);
+    this.model.buy();
+  },
+  sell() {
+    this.model.set('buy', false);
+    this.trigger('tradeUpdate', this);
+    this.model.sell();
+  },
+});
+
+export default QuoteView;