Carets - Maria - ada-trader

dist/index.html

@@ -57,9 +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="add-order-form">
              <label for="symbol">Symbol</label>
-             <select name="symbol">
+             <select id="symbol" name="symbol">
+               <option value="HUMOR">HUMOR</option>
+               <option value="CLOTH">CLOTH</option>
+               <option value="HABIT">HABIT</option>
+               <option value="SUPER">SUPER</option>
                <!-- Option entries should be added here using JavaScript -->
              </select>
              <label for="price-target">Price</label>

src/app.js

@@ -2,9 +2,21 @@ 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 QuoteList from './collections/quote_list';
+
+import QuoteView from './views/quote_view';
+import QuoteListView from './views/quote_list_view';
+
+import Order from './models/order';
+import OrderList from './collections/order_list';
+
+import OrderView from './views/order_view';
+import OrderListView from './views/order_list_view';
 
 const quoteData = [
   {
@@ -25,11 +37,30 @@ const quoteData = [
   },
 ];
 
+
 $(document).ready(function() {
   const quotes = new QuoteList(quoteData);
+  const orders = new OrderList();
   const simulator = new Simulator({
     quotes: quotes,
   });
 
+  const quoteListView = new QuoteListView({
+    model: quotes,
+    template: _.template($('#quote-template').html()),
+    tradesTemplate: _.template($('#trade-template').html()),
+    el: 'main'
+  });
+
+  const orderListView = new OrderListView({
+    model: orders,
+    template: _.template($('#order-template').html()),
+    el: 'main'
+  });
+
+  quoteListView.render();
+  orderListView.render();
+
   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,17 @@
+import Backbone from 'backbone';
+
+const Order = Backbone.Model.extend({
+  defaults: {
+    symbol: 'UNDEF',
+    targetPrice: 0.00
+  },
+
+  buyOrder(){
+    this.set('buy', true);
+  },
+  sellOrder() {
+      this.set('buy', false);
+  },
+});
+
+export default Order;

src/models/quote.js

@@ -7,11 +7,15 @@ const Quote = Backbone.Model.extend({
   },
 
   buy() {
+     this.set('price', this.get('price') + 1)
     // Implement this function to increase the price by $1.00
+     this.set('buy', true);
   },
 
   sell() {
+    this.set('price', this.get('price') - 1)
     // Implement this function to decrease the price by $1.00
+    this.set('buy', false);
   },
 });
 

src/views/order_list_view.js

@@ -0,0 +1,31 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import OrderView from '../views/order_view';
+import Order from '../models/order';
+
+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) => {
+      const orderView = new OrderView({
+        model: order,
+        template: this.template,
+        tagName: 'li',
+        className: 'order'
+      });
+
+      this.$('#orders').append(orderView.render().$el);
+    });
+    return this;
+  }, // end of render
+  listOrders(orderView){
+    const compiledOrdersTemplate = orderView.template(orderView.model.toJSON());
+    this.$('#orders').prepend(compiledOrdersTemplate);
+  }
+});
+
+export default OrderListView;

src/views/order_view.js

@@ -0,0 +1,35 @@
+import Backbone from 'backbone';
+import Order from '../models/order';
+
+const OrderView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.orderTemplate = params.orderTemplate;
+    this.listenTo(this.model, "update", this.render);
+  },
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+
+    return this;
+  }, //end of render
+  events: {
+    'click button.alert': 'addOrderBuy',
+    'click button.success': 'addOrderSell',
+  },
+  addOrderSell(event) {
+    event.preventDefault();
+    const orderData = {};
+    ['symbol', 'price-target'].forEach( (field) => {
+    const val = this.$(`#add-order-form input[name=${field}]`).val();
+    if (val != '') {
+      orderData[field] = val;
+    }
+  });
+  const newOrder = new Order(orderData);
+    this.model.add(newOrder);
+    this.trigger('listOrders', this);
+  },
+}); // end of OrderView
+
+export default OrderView;

src/views/quote_list_view.js

@@ -0,0 +1,35 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import QuoteView from '../views/quote_view';
+import Quote from '../models/quote';
+
+const QuoteListView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.tradesTemplate = params.tradesTemplate;
+    this.listenTo(this.model, 'update', this.render);
+  },
+  render() {
+    this.$('#quotes').empty();
+    this.model.each((quote) => {
+      const quoteView = new QuoteView({
+        model: quote,
+        template: this.template,
+        tradesTemplate: this.tradesTemplate,
+        tagName: 'li',
+        className: 'quote'
+      });
+
+      this.listenTo(quoteView, 'listTrades', this.listTrades)
+      this.$('#quotes').append(quoteView.render().$el);
+    });
+    return this;
+  }, // end of render
+  listTrades(quoteView){
+    const compiledTradesTemplate = quoteView.tradesTemplate(quoteView.model.toJSON());
+    this.$('#trades').prepend(compiledTradesTemplate);
+  }
+
+}); //end of QuoteListView
+
+export default QuoteListView

src/views/quote_view.js

@@ -0,0 +1,30 @@
+import Backbone from 'backbone';
+import Quote from '../models/quote';
+
+const QuoteView = Backbone.View.extend({
+  initialize(params) {
+    this.template = params.template;
+    this.tradesTemplate = params.tradesTemplate;
+    this.listenTo(this.model, "change", this.render);
+  },
+  render() {
+    const compiledTemplate = this.template(this.model.toJSON());
+    this.$el.html(compiledTemplate);
+
+    return this;
+  }, //end of render
+  events: {
+    'click button.alert': 'buyStock',
+    'click button.success': 'sellStock',
+  },
+  buyStock: function(e) {
+    this.model.buy();
+    this.trigger('listTrades', this);
+  },
+  sellStock: function(e) {
+    this.model.sell();
+    this.trigger('listTrades', this);
+  }
+}); // end of QuoteView
+
+export default QuoteView;