Canaan West -- Carets

dist/index.html

@@ -61,6 +61,11 @@ <h3>Order Entry Form</h3>
              <label for="symbol">Symbol</label>
              <select name="symbol">
                <!-- Option entries should be added here using JavaScript -->
+               <% quote.each
+               <option name='HUMOR'>HUMOR</option>
+               <option name='CLOTH'>CLOTH</option>
+               <option name='HABIT'>HABIT</option>
+               <option name='SUPER'>SUPER</option>
              </select>
              <label for="price-target">Price</label>
              <input type="number" name="price-target" step="0.10" min="0.00" placeholder="100.00" />

spec/models/order_spec.js

@@ -0,0 +1,132 @@
+import Order from 'models/order';
+import Quote from 'models/quote';
+import OrderList from 'collections/order_list'
+
+describe('Order spec', () => {
+  let quote;
+  let order;
+  beforeEach(() => {
+    quote = new Quote({
+      symbol: 'HELLO',
+      price: 100.00,
+    });
+
+    order = new Order({
+        quote: quote,
+        buy: true,
+        symbol: 'HELLO',
+        targetPrice: 100.00,
+      })
+  });
+
+  describe('Create a valid order', () => {
+    it('Creates a buy order when given a valid symbol and price', () => {
+
+      order.set('targetPrice', 99.00)
+
+      expect(order.invalid()).toEqual(false);
+    });
+
+    it('Creates a sell order when given a valid symbol and price', () => {
+
+      order.set('buy', false);
+      order.set('targetPrice', 101.00)
+
+      expect(order.invalid()).toEqual(false);
+    })
+  })
+
+  describe('Validating Orders', () => {
+    describe('Invalid Orders', () => {
+      it('Price must be a number', () => {
+        order.set('targetPrice', 'cool')
+
+        expect(order.invalid()).toEqual({price: [ 'Invalid Price!'] });
+      });
+
+      it('Price must be greater than 0', () => {
+        order.set('targetPrice', 0)
+
+        expect(order.invalid()).toEqual({price: [ 'Invalid Price!']});
+      });
+
+
+      it('Symbol must not be empty', () => {
+        order.set('symbol', '')
+        order.set('targetPrice', 99.00)
+
+        expect(order.invalid()).toEqual({symbol: [ 'Invalid Symbol']});
+      });
+    })
+
+    describe('Buy Orders', () => {
+      it('targetPrice must be lower than market price', () => {
+
+      expect(order.invalid()).toEqual({price: [ 'Target Price higher than Market Price!'] });
+
+      });
+    })
+
+    describe('Sell Orders', () => {
+      beforeEach(() => {
+        order.set('buy', false)
+      });
+
+      it('targetPrice must be higher than marketPrice', () => {
+        order.set('targetPrice', 99);
+        expect(order.invalid()).toEqual({price: [ 'Target Price at or below Market Price!'] });
+      });
+    })
+
+    describe('priceCheck', () => {
+      describe('buyOrder', () => {
+        it('executes a buy when quote price drops below targetPrice', () => {
+          order.set('buy', true);
+          order.set('targetPrice', 99.00);
+
+          quote.set('price', 98.99);
+          order.priceCheck();
+
+          expect(quote.get('price')).toBe(99.99);
+        });
+
+        it('does not execute order until price drops below target', () => {
+
+          order.set('buy', true);
+          order.set('targetPrice', 99.00);
+
+          quote.set('price', 99.01);
+          order.priceCheck();
+
+          expect(quote.get('price')).toBe(99.01);
+
+        });
+      });
+
+      describe('sellOrder', () => {
+        it('executes order when quote exceeds targetPrice', () => {
+          order.set('buy', false);
+          order.set('targetPrice', 99.00);
+
+          quote.set('price', 99.01);
+          order.priceCheck();
+
+          expect(quote.get('price')).toBe(98.01);
+
+        });
+
+        it('does not execute order until quote exceeds targetPrice', () => {
+          order.set('buy', false);
+          order.set('targetPrice', 99.00);
+
+          quote.set('price', 98.99);
+          order.priceCheck();
+
+          expect(quote.get('price')).toBe(98.99);
+
+
+        })
+      })
+    });
+  });
+});

src/app.js

@@ -2,9 +2,18 @@ import 'foundation-sites/dist/foundation.css';
 import 'css/app.css';
 
 import $ from 'jquery';
+import _ from 'underscore';
 
 import Simulator from 'models/simulator';
+import Quote from 'models/quote';
+import QuoteView from 'views/quote_view';
 import QuoteList from 'collections/quote_list';
+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.js';
+
 
 const quoteData = [
   {
@@ -24,12 +33,39 @@ const quoteData = [
     price: 83.10,
   },
 ];
+//
+// let bus = {}
+// bus = _.extend(bus, Backbone.Events)
+
+const quoteList = new QuoteList(quoteData)
+const orderList = new OrderList();
 
-$(document).ready(function() {
-  const quotes = new QuoteList(quoteData);
+$(document).ready(() => {
   const simulator = new Simulator({
-    quotes: quotes,
+    quotes: quoteList,
+  });
+
+  const quoteTemplate = _.template($('#quote-template').html());
+  const tradeTemplate = _.template($('#trade-template').html());
+  const orderTemplate = _.template($('#order-template').html());
+
+  const quoteListView = new QuoteListView({
+    model: quoteList,
+    quoteTemplate: quoteTemplate,
+    tradeTemplate: tradeTemplate,
+    el: 'main',
+  });
+
+  const orderListView = new OrderListView({
+    model: orderList,
+    template: _.template($('#order-template').html()),
+    el: 'main',
+    quotes: quoteList
   });
 
+  console.log(orderListView);
+
+  orderListView.render()
+  quoteListView.render()
   simulator.start();
 });

src/collections/order_list.js

@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import Order from '../models/order';
+import _ from 'underscore';
+
+const OrderList = Backbone.Collection.extend({
+  model: Order,
+});
+
+export default OrderList;

src/models/order.js

@@ -0,0 +1,59 @@
+import Backbone from 'backbone';
+
+const Order = Backbone.Model.extend({
+  default: {
+    symbol: 'UNDEF',
+    targetPrice: 0.00,
+  },
+
+  initialize(params) {
+    if (!this.invalid()) {
+      this.listenTo(this.attributes.quote, 'change', this.priceCheck);
+    }
+  },
+
+  invalid() {
+    let errors = {}
+    if (this.get('symbol') === "" || this.get('symbol') === "UNEF") {
+      errors.symbol = ['Invalid Symbol'];
+    }
+
+    if (this.get('buy') && this.get('quote').get('price') <= this.get('targetPrice')) {
+      errors.price = ['Target Price higher than Market Price!' ]
+    }
+
+    if (!this.get('buy') && this.get('quote').get('price') >= this.get('targetPrice')) {
+      errors.price = ['Target Price at or below Market Price!' ]
+    }
+
+    if (isNaN(this.get('targetPrice')) || this.get('targetPrice') <= 0) {
+      errors.price = ['Invalid Price!']
+    }
+
+    if (Object.keys(errors).length > 0) {
+      return errors
+    } else {
+      return false
+    }
+
+  },
+
+  priceCheck() {
+    let toBuy = this.get('quote')
+    if (this.get('buy') && this.get('quote').get('price') <= this.get('targetPrice')) {
+      this.set('buy', true)
+      this.trigger('appendTrade', this.get('quote'))
+      this.destroy()
+      toBuy.buy();
+    }
+
+    if (!this.get('buy') && this.get('quote').get('price') >= this.get('targetPrice')) {
+      this.set('buy', false)
+      this.trigger('appendTrade', this)
+      this.destroy()
+      toBuy.sell();
+    }
+  }
+});
+
+export default Order;

src/models/quote.js

@@ -7,12 +7,28 @@ const Quote = Backbone.Model.extend({
   },
 
   buy() {
-    // Implement this function to increase the price by $1.00
+    const data = {
+    }
+    data.buy = true;
+    data.symbol = this.get('symbol');
+    data.price = this.get('price')
+
+    this.trigger('appendTrade', data);
+    this.set('price', this.get('price') + 1.00)
+
   },
 
   sell() {
-    // Implement this function to decrease the price by $1.00
+    const data = {
+    }
+    data.buy = false;
+    data.symbol = this.get('symbol');
+    data.price = this.get('price')
+
+    this.trigger('appendTrade', data);
+    this.set('price', this.get('price') - 1.00)
   },
+
 });
 
 export default Quote;

src/views/order_list_view.js

@@ -0,0 +1,68 @@
+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.quotes = params.quotes;
+    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
+  },
+
+  events: {
+    'click button.btn-buy': 'buyOrder',
+    'click button.btn-sell': 'sellOrder',
+    'click button.btn-cancel': 'cancelOrder'
+  },
+
+  buyOrder(e){
+    e.preventDefault();
+    this.appendOrder(true);
+  },
+
+  sellOrder(e) {
+    e.preventDefault();
+    this.appendOrder(false)
+  },
+
+  appendOrder(isBuy) {
+    this.$('.form-errors').empty();
+    let orderData = {
+      buy: isBuy
+    }
+
+    orderData.symbol = this.$(`[name='symbol']`).val();
+    orderData.targetPrice = parseFloat(this.$(`[name='price-target']`).val());
+    orderData.quote = this.quotes.findWhere({symbol: orderData.symbol})
+
+    const order = new Order(orderData);
+
+    if (!order.invalid()) {
+      this.model.add(order);
+    } else {
+      for (let errors in order.invalid()) {
+        order.invalid()[errors].forEach((error) => {
+          this.$('.form-errors').append(error)
+        })
+      }
+    }
+  },
+})
+
+export default OrderListView;