Emily's Ada Stock Trader

build/css/app.css

@@ -30,7 +30,7 @@ header h1 {
 
 .quote .symbol {
   text-transform: uppercase;
-  font-size: 2.8em;
+  font-size: 2.0em;
   font-family: 'Rubik Mono One', sans-serif;
   color: #158745;
 }
@@ -47,3 +47,7 @@ header h1 {
   margin-bottom: 0.25em;
   border-radius: 3px;
 }
+
+.all-buttons {
+  text-align: center;
+}

build/index.html

@@ -17,17 +17,24 @@ <h1>Ada Trader</h1>
       <div class="row column large-8 large-offset-2 small-12">
         <ul class="quotes row"></ul>
       </div>
+      <!--This had to be inside the "#application" div for a click to be visible to our ApplicationView instance, because its el is set to this div and only events within the el are detected.-->
+      <!--See http://patrickperey.com/when-your-backbone-js-view-events-not-firing/-->
+      <div class="row column all-buttons large-8 large-offset-2 small-12">
+        <button id="btn-sell-all" class="large alert button">Sell All</button>
+        <button id="btn-buy-all" class="large success button">Buy All</button>
+      </div>
     </div>
 
+
     <script type="text/template" id="tmpl-quote-view">
       <li class="large-4 small-12 columns">
         <div class="quote">
           <div class="row">
             <h3 class="symbol large-6 small-6 columns"><%- symbol %></h3>
             <div class="large-6 small-6 columns">
               <h4 class="price">$<%- price.toFixed(2) %></h4>
-              <button class="btn-sell tiny alert button">Buy</button>
-              <button class="btn-buy tiny success button">Sell</button>
+              <button class="btn-sell tiny alert button">Sell</button>
+              <button class="btn-buy tiny success button">Buy</button>
             </div>
           </div>
         </div>

src/app.js

@@ -17,14 +17,20 @@ const simulate = function(quote) {
   quote.trigger('change:price', change);
 };
 
+var stocks = [{symbol: "HUMOR", price: 88.50}, {symbol: "CLOTH", price: 81.70}, {symbol: "HABIT", price: 98.00}, {symbol: "SUPER", price: 83.10}]
+
 $(document).ready(function() {
   var appView = new ApplicationView({
-    el: '#application'
+    el: '#application',
+    stocks: stocks
   });
 
   appView.render();
 
   setInterval(function() {
     // Call simulate() on each quote in the ApplicationView
+    for(var i = 0; i < appView.quoteList.length; i++){
+      simulate(appView.quoteList[i]);
+    }
   }, 1000);
 });

src/app/views/application_view.js

@@ -1,13 +1,41 @@
 import Backbone from 'backbone';
+import QuoteView from 'app/views/quote_view';
+import $ from 'jquery';
+import _ from 'underscore';
 
-const ApplicationView = Backbone.View.extend({
-  initialize: function() {
+var ApplicationView = Backbone.View.extend({
+  initialize: function(options) {
+    this.stocks = options.stocks;
+    this.quoteTemplate = _.template($("#tmpl-quote-view").html());
+    this.quoteList = [];
+    for (var i = 0; i < this.stocks.length; i++){
+      var newQuote = new QuoteView({quote: this.stocks[i], template: this.quoteTemplate});
+      this.quoteList.push(newQuote);
+    }
+    this.containerForQuotes = $('.quotes');
   },
 
   render: function() {
-    this.$el.html('<p>Hello World</p>');
+    this.containerForQuotes.empty();
+    for (var i = 0; i < this.quoteList.length; i++){
+      this.containerForQuotes.append(this.quoteList[i].render().$el);
+    }
 
     return this;
+  },
+  events: {
+    'click #btn-buy-all': 'buyAllStock',
+    'click #btn-sell-all': 'sellAllStock'
+  },
+  buyAllStock: function(event) {
+    for (var i = 0; i < this.quoteList.length; i++){
+      this.quoteList[i].buyStock();
+    }
+  },
+  sellAllStock: function(event) {
+    for (var i = 0; i < this.quoteList.length; i++){
+      this.quoteList[i].sellStock();
+    }
   }
 });
 

src/app/views/quote_view.js

@@ -0,0 +1,44 @@
+import Backbone from 'backbone';
+import _ from 'underscore';
+import $ from 'jquery';
+
+// We pass in an object to the function that contains multiple functions (initialize
+// and render)
+
+var QuoteView = Backbone.View.extend({
+  initialize: function(options){
+    this.quote = options.quote;
+    this.template = options.template;
+    this.on('change:price', this.updatePrice);
+  },
+  updatePrice: function(change){
+    this.quote.price += change;
+    if (this.quote.price < 0.00){
+      this.quote.price = 0.00;
+    }
+    this.render();
+  },
+  render: function(){
+    this.$el.html(this.template({symbol: this.quote.symbol, price: this.quote.price}));
+    return this;
+  },
+  events: {
+    'click .btn-buy': 'buyStock',
+    'click .btn-sell': 'sellStock'
+  },
+  buyStock: function(event){
+    this.quote.price += 1.00;
+    // console.log('BOUGHT, ' + this.quote.price);
+    this.render();
+  },
+  sellStock: function(event){
+    this.quote.price -= 1.00;
+    if (this.quote.price < 0.00){
+      this.quote.price = 0.00;
+    }
+    // console.log('SOLD, ' + this.quote.price);
+    this.render();
+  }
+});
+
+export default QuoteView;