From ff42fe8a9e745d4cd68d46b8d62e4207c903754d Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Tue, 12 Dec 2017 12:19:58 -0800 Subject: [PATCH 1/7] got wave 1 done --- src/app.js | 71 +++++++++++++++++++++++++++++ src/models/quote.js | 2 + src/views/quote_list_view.js | 88 ++++++++++++++++++++++++++++++++++++ src/views/quote_view.js | 41 +++++++++++++++++ 4 files changed, 202 insertions(+) create mode 100644 src/views/quote_list_view.js create mode 100644 src/views/quote_view.js diff --git a/src/app.js b/src/app.js index 03ec910..c3dbf31 100644 --- a/src/app.js +++ b/src/app.js @@ -2,9 +2,13 @@ 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 QuoteView from './views/quote_view'; +import QuoteListView from './views/quote_list_view'; const quoteData = [ { @@ -25,11 +29,78 @@ const quoteData = [ }, ]; +const quoteList = new QuoteList(); +let quoteTemplate; + +const renderList = function(quoteList) { + const $quoteList = $('#quotes'); + $quoteList.empty(); + + quoteList.forEach((quote) =>{ + + const quoteView = new QuoteView({ + model: quote, + template: _.template($('#quote-template').html()), + tagName: 'li', + className: 'quote', + }); + // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. + + $quoteList.append(quoteView.render().$el); + + // const taskHtml = $(taskTemplate(task.attributes)); + // $taskList.append(taskHtml); + // + // taskHtml.find('.delete').click({task: task}, (params) => { + // const task = params.data.task; + // taskList.remove(task); + // updateStatusMessageWith(`The task "${task.get('task_name')}" has been deleted`) + // }); + // + // taskHtml.on('click', '.toggle-complete', {task: task}, function(params) { + // params.data.task.set('is_complete', !params.data.task.get('is_complete')); + // $(this).closest('.task').toggleClass('is-complete') + // }); + }); +} + $(document).ready(function() { const quotes = new QuoteList(quoteData); const simulator = new Simulator({ quotes: quotes, }); + const $quoteList = $('#quotes'); + + const quoteView = new QuoteView({ + model: quotes.at(0), + template: _.template($('#quote-template').html()), + tagName: 'li', + className: 'quote', + }); + // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. + + $quoteList.append(quoteView.render().$el); + simulator.start(); + + renderList(quotes); + + // quoteTemplate = _.template($('#quote-template').html()); + // + // const quoteListView = new QuoteListView({ + // el: '#quotes-container', + // model: quoteList, + // template: quoteTemplate, + // }); + // + // quoteListView.render(); + + // const quoteView = new QuoteView({ + // el: 'ul', + // model: quote, + // template: quoteTemplate, + // }); + // + // quoteView.render(); }); diff --git a/src/models/quote.js b/src/models/quote.js index 4fbf466..b3a48fd 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -7,10 +7,12 @@ const Quote = Backbone.Model.extend({ }, buy() { + this.set('price', this.get('price') + 1.00); // Implement this function to increase the price by $1.00 }, sell() { + this.set('price', this.get('price') - 1.00); // Implement this function to decrease the price by $1.00 }, }); diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js new file mode 100644 index 0000000..d296c28 --- /dev/null +++ b/src/views/quote_list_view.js @@ -0,0 +1,88 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; +import QuoteView from '../views/quote_view'; + +const QuoteListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + console.log(params); + + this.listenTo(this.model, 'update', this.render) + }, + // events: { + // 'click #add-new-task': 'addTask', + // }, + // updateStatusMessageFrom(messageHash) { + // const $statusMessages = this.$('#status-messages'); + // console.log($statusMessages); + // $statusMessages.empty(); + // Object.keys(messageHash).forEach((messageType) => { + // messageHash[messageType].forEach((message) => { + // $statusMessages.append(`
  • ${message}
    • `); + // console.log(`Error ${message}`); + // }); + // }); + // $statusMessages.show(); + // + // //if we were using underscore we could use: + // // _.each(messageHash, (messageType) => { + // // + // // }); + // + // }, + // updateStatusMessage(message) { + // this.updateStatusMessageFrom({ + // 'task': [message], + // }); + // }, + // + // addTask(event) { + // event.preventDefault(); + // + // const formData = this.getFormData(); + // const newTask = new Task(formData); + // + // if (newTask.isValid()) { + // this.model.add(newTask); + // this.clearFormData(); + // this.updateStatusMessage(`${newTask.get('task_name')} Created!`); + // } + // else { + // console.log('ERROR'); + // this.updateStatusMessageFrom(newTask.validationError); + // newTask.destroy(); + // } + // }, + // clearFormData() { + // ['task_name', 'assignee'].forEach((field) => { + // this.$(`#add-task-form input[name=${field}]`.val('')); + // }) + // }, + // getFormData() { + // const taskData = {}; + // ['task_name', 'assignee'].forEach((field) => { + // const val = this.$(`#add-task-form input[name=${field}]`).val(); + // if (val !== '') { + // taskData[field] = val; + // } + // }) + // return taskData; + // }, + render() { + this.$('#quotes').empty(); + console.log(this); + this.model.each((quote)=> { + const quoteView = new QuoteView({ + model: quote, + template: this.template, + tagName: 'li', + className: 'quotes', + }); + this.$('#quotes').append(quoteView.render().$el); + }) + return this; + //always return this + }, +}); + +export default QuoteListView; diff --git a/src/views/quote_view.js b/src/views/quote_view.js new file mode 100644 index 0000000..57b08ae --- /dev/null +++ b/src/views/quote_view.js @@ -0,0 +1,41 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; + +const QuoteView = Backbone.View.extend({ + initialize(params) { //where do the params come from? + this.template = params.template; //I find this strange as well + + this.listenTo(this.model, 'change', this.render) + //anytime the model changes, it will redraw it + }, + + 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(event) { + console.log(event); + this.model.buy(); + // this.remove(); + }, + sell(event) { + console.log(event); + this.model.sell(); + } + // toggleComplete() { + // console.log('Toggling'); + // this.model.toggleComplete(); + // // this.$el.toggleClass('is-complete'); MOVED THIS TO RENDER BECAUSE THIS ONLY CHANGES WITH THE CLICK OF THE BUTTON and not if something else changed the status (IE an external source through the API) + // + // }, + +}); + +export default QuoteView; From 19e143fbe7ffc43cb9e043c9f4bf4a67ba864c71 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Tue, 12 Dec 2017 15:03:35 -0800 Subject: [PATCH 2/7] small comment edits --- src/views/quote_view.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/views/quote_view.js b/src/views/quote_view.js index 57b08ae..f22f4aa 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -10,7 +10,7 @@ const QuoteView = Backbone.View.extend({ }, render() { - const compiledTemplate = this.template(this.model.toJSON()); + const compiledTemplate = this.template(this.model.toJSON()); //Don't understand exactly how this works this.$el.html(compiledTemplate); @@ -28,13 +28,8 @@ const QuoteView = Backbone.View.extend({ sell(event) { console.log(event); this.model.sell(); - } - // toggleComplete() { - // console.log('Toggling'); - // this.model.toggleComplete(); - // // this.$el.toggleClass('is-complete'); MOVED THIS TO RENDER BECAUSE THIS ONLY CHANGES WITH THE CLICK OF THE BUTTON and not if something else changed the status (IE an external source through the API) - // - // }, + }, + }); From 309165e481de598caca35da4e8cf19b8233eb6c4 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Tue, 12 Dec 2017 17:22:45 -0800 Subject: [PATCH 3/7] got trade history working --- src/app.js | 130 +++++++++++++++++++------------- src/views/quote_list_view.js | 18 ++++- src/views/quote_view.js | 12 ++- src/views/trade_history_view.js | 48 ++++++++++++ 4 files changed, 153 insertions(+), 55 deletions(-) create mode 100644 src/views/trade_history_view.js diff --git a/src/app.js b/src/app.js index c3dbf31..b8666c7 100644 --- a/src/app.js +++ b/src/app.js @@ -9,6 +9,7 @@ import QuoteList from 'collections/quote_list'; import Quote from 'models/quote'; import QuoteView from './views/quote_view'; import QuoteListView from './views/quote_list_view'; +import TradeHistoryView from './views/trade_history_view'; const quoteData = [ { @@ -29,72 +30,99 @@ const quoteData = [ }, ]; -const quoteList = new QuoteList(); +// const quoteList = new QuoteList(); let quoteTemplate; -const renderList = function(quoteList) { - const $quoteList = $('#quotes'); - $quoteList.empty(); - - quoteList.forEach((quote) =>{ - - const quoteView = new QuoteView({ - model: quote, - template: _.template($('#quote-template').html()), - tagName: 'li', - className: 'quote', - }); - // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. - - $quoteList.append(quoteView.render().$el); - - // const taskHtml = $(taskTemplate(task.attributes)); - // $taskList.append(taskHtml); - // - // taskHtml.find('.delete').click({task: task}, (params) => { - // const task = params.data.task; - // taskList.remove(task); - // updateStatusMessageWith(`The task "${task.get('task_name')}" has been deleted`) - // }); - // - // taskHtml.on('click', '.toggle-complete', {task: task}, function(params) { - // params.data.task.set('is_complete', !params.data.task.get('is_complete')); - // $(this).closest('.task').toggleClass('is-complete') - // }); - }); -} +//MOVED THIS TO QUOTELISTVIEW + +// const renderList = function(quoteList) { +// const $quoteList = $('#quotes'); +// $quoteList.empty(); +// +// quoteList.forEach((quote) =>{ +// +// const quoteView = new QuoteView({ +// model: quote, +// template: _.template($('#quote-template').html()), +// tagName: 'li', +// className: 'quote', +// }); +// // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. +// +// $quoteList.append(quoteView.render().$el); +// +// +// +// // const taskHtml = $(taskTemplate(task.attributes)); +// // $taskList.append(taskHtml); +// // +// // taskHtml.find('.delete').click({task: task}, (params) => { +// // const task = params.data.task; +// // taskList.remove(task); +// // updateStatusMessageWith(`The task "${task.get('task_name')}" has been deleted`) +// // }); +// // +// // taskHtml.on('click', '.toggle-complete', {task: task}, function(params) { +// // params.data.task.set('is_complete', !params.data.task.get('is_complete')); +// // $(this).closest('.task').toggleClass('is-complete') +// // }); +// }); +// } + +const renderTradeHistory = function() { + // const $quoteList = $('#quotes'); + // $quoteList.empty(); + // + // quoteList.forEach((quote) =>{ + // + // const quoteView = new QuoteView({ + // model: quote, + // template: _.template($('#quote-template').html()), + // tagName: 'li', + // className: 'quote', + // }); + // // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. + // + // $quoteList.append(quoteView.render().$el); +}; $(document).ready(function() { + let bus = {}; + + bus = _.extend(bus, Backbone.Events); + const quotes = new QuoteList(quoteData); const simulator = new Simulator({ quotes: quotes, }); - const $quoteList = $('#quotes'); - - const quoteView = new QuoteView({ - model: quotes.at(0), - template: _.template($('#quote-template').html()), - tagName: 'li', - className: 'quote', - }); + // const $quoteList = $('#quotes'); + // + // const quoteView = new QuoteView({ + // model: quotes.at(0), + // template: _.template($('#quote-template').html()), + // tagName: 'li', + // className: 'quote', + // }); // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. - $quoteList.append(quoteView.render().$el); + // $quoteList.append(quoteView.render().$el); simulator.start(); - renderList(quotes); + // renderList(quotes); - // quoteTemplate = _.template($('#quote-template').html()); - // - // const quoteListView = new QuoteListView({ - // el: '#quotes-container', - // model: quoteList, - // template: quoteTemplate, - // }); - // - // quoteListView.render(); + quoteTemplate = _.template($('#quote-template').html()); + + const quoteListView = new QuoteListView({ + el: '#quotes', + model: quotes, + template: quoteTemplate, + tradeTemplate: _.template($('#trade-template').html()), + bus: bus, + }); + + quoteListView.render(); // const quoteView = new QuoteView({ // el: 'ul', diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index d296c28..056f5a5 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -1,10 +1,13 @@ import Backbone from 'backbone'; import Quote from '../models/quote'; import QuoteView from '../views/quote_view'; +import TradeHistoryView from '../views/trade_history_view'; const QuoteListView = Backbone.View.extend({ initialize(params) { this.template = params.template; + this.bus = params.bus; + this.tradeTemplate = params.tradeTemplate; console.log(params); this.listenTo(this.model, 'update', this.render) @@ -69,7 +72,12 @@ const QuoteListView = Backbone.View.extend({ // return taskData; // }, render() { - this.$('#quotes').empty(); + const tradeHistoryView = new TradeHistoryView( { + bus: this.bus, + el: '#trades', + template: this.tradeTemplate, + }); + this.$el.empty(); console.log(this); this.model.each((quote)=> { const quoteView = new QuoteView({ @@ -77,9 +85,13 @@ const QuoteListView = Backbone.View.extend({ template: this.template, tagName: 'li', className: 'quotes', + bus: this.bus, }); - this.$('#quotes').append(quoteView.render().$el); - }) + + this.$el.append(quoteView.render().$el); + }); + console.log('render tradeHistoryView') + return this; //always return this }, diff --git a/src/views/quote_view.js b/src/views/quote_view.js index f22f4aa..c974537 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -5,6 +5,7 @@ const QuoteView = Backbone.View.extend({ initialize(params) { //where do the params come from? this.template = params.template; //I find this strange as well + this.bus = params.bus; this.listenTo(this.model, 'change', this.render) //anytime the model changes, it will redraw it }, @@ -23,11 +24,20 @@ const QuoteView = Backbone.View.extend({ buy(event) { console.log(event); this.model.buy(); - // this.remove(); + this.bus.trigger('trade', { + buy: true, + price: this.model.get('price'), + symbol: this.model.get('symbol'), + }) }, sell(event) { console.log(event); this.model.sell(); + this.bus.trigger('trade', { + buy: false, + price: this.model.get('price'), + symbol: this.model.get('symbol'), + }) }, diff --git a/src/views/trade_history_view.js b/src/views/trade_history_view.js new file mode 100644 index 0000000..868326b --- /dev/null +++ b/src/views/trade_history_view.js @@ -0,0 +1,48 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; + + +const TradeHistoryView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + console.log(params); + this.bus = params.bus; + this.listenTo(this.bus, 'trade', this.renderTrade); + }, + + // el: '#current-trade', //not sure about this + renderTrade(trade) { + this.trade = trade; + this.render(); + }, + render() { + // if (this.model) { //if I have a model + console.log('rendering current Trade'); + console.log(this.trade); + const compiledTemplate = this.template(this.trade); + + this.$el.append(compiledTemplate); + // this.$el.html(`

    ${this.model.get('symbol')}

    `) + // this.$el.append(`

    ${this.model.get('assignee')}

    `) + console.log(this); + // // this.model.each((quote)=> { + // const tradeHistoryView = new TradeHistoryView({ + // model: quote, + // template: this.template, + // tagName: 'span', + // className: 'trade', + // this.$('#trades').append(quoteView.render().$el); + return this; + }, + // events: { + // 'click button.btn-buy': 'trade', + // 'click button.btn-sell': 'trade', + // }, + // trade(event){ + // console.log("you traded something"); + // console.log(event); + // this.$('#trades').append(TradeHistoryView.render().$el); + // }, +}); + +export default TradeHistoryView; From 1eacab6a6f116d1e473786db067909cede1d9695 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Wed, 13 Dec 2017 09:39:51 -0800 Subject: [PATCH 4/7] fixed an issue where trade history was taking the price after the buy/sell rather than the current price when the action occured. --- src/app.js | 4 +-- src/views/quote_list_view.js | 60 +-------------------------------- src/views/quote_view.js | 8 ++--- src/views/trade_history_view.js | 5 ++- 4 files changed, 9 insertions(+), 68 deletions(-) diff --git a/src/app.js b/src/app.js index b8666c7..d2316ea 100644 --- a/src/app.js +++ b/src/app.js @@ -69,7 +69,7 @@ let quoteTemplate; // }); // } -const renderTradeHistory = function() { +// const renderTradeHistory = function() { // const $quoteList = $('#quotes'); // $quoteList.empty(); // @@ -84,7 +84,7 @@ const renderTradeHistory = function() { // // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. // // $quoteList.append(quoteView.render().$el); -}; +// }; $(document).ready(function() { let bus = {}; diff --git a/src/views/quote_list_view.js b/src/views/quote_list_view.js index 056f5a5..9427279 100644 --- a/src/views/quote_list_view.js +++ b/src/views/quote_list_view.js @@ -12,65 +12,7 @@ const QuoteListView = Backbone.View.extend({ this.listenTo(this.model, 'update', this.render) }, - // events: { - // 'click #add-new-task': 'addTask', - // }, - // updateStatusMessageFrom(messageHash) { - // const $statusMessages = this.$('#status-messages'); - // console.log($statusMessages); - // $statusMessages.empty(); - // Object.keys(messageHash).forEach((messageType) => { - // messageHash[messageType].forEach((message) => { - // $statusMessages.append(`
  • ${message}
    • `); - // console.log(`Error ${message}`); - // }); - // }); - // $statusMessages.show(); - // - // //if we were using underscore we could use: - // // _.each(messageHash, (messageType) => { - // // - // // }); - // - // }, - // updateStatusMessage(message) { - // this.updateStatusMessageFrom({ - // 'task': [message], - // }); - // }, - // - // addTask(event) { - // event.preventDefault(); - // - // const formData = this.getFormData(); - // const newTask = new Task(formData); - // - // if (newTask.isValid()) { - // this.model.add(newTask); - // this.clearFormData(); - // this.updateStatusMessage(`${newTask.get('task_name')} Created!`); - // } - // else { - // console.log('ERROR'); - // this.updateStatusMessageFrom(newTask.validationError); - // newTask.destroy(); - // } - // }, - // clearFormData() { - // ['task_name', 'assignee'].forEach((field) => { - // this.$(`#add-task-form input[name=${field}]`.val('')); - // }) - // }, - // getFormData() { - // const taskData = {}; - // ['task_name', 'assignee'].forEach((field) => { - // const val = this.$(`#add-task-form input[name=${field}]`).val(); - // if (val !== '') { - // taskData[field] = val; - // } - // }) - // return taskData; - // }, + render() { const tradeHistoryView = new TradeHistoryView( { bus: this.bus, diff --git a/src/views/quote_view.js b/src/views/quote_view.js index c974537..9e90b7d 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -23,21 +23,21 @@ const QuoteView = Backbone.View.extend({ }, buy(event) { console.log(event); - this.model.buy(); this.bus.trigger('trade', { buy: true, price: this.model.get('price'), symbol: this.model.get('symbol'), - }) + }); + this.model.buy(); }, sell(event) { console.log(event); - this.model.sell(); this.bus.trigger('trade', { buy: false, price: this.model.get('price'), symbol: this.model.get('symbol'), - }) + }); + this.model.sell(); }, diff --git a/src/views/trade_history_view.js b/src/views/trade_history_view.js index 868326b..92d8f57 100644 --- a/src/views/trade_history_view.js +++ b/src/views/trade_history_view.js @@ -21,9 +21,8 @@ const TradeHistoryView = Backbone.View.extend({ console.log(this.trade); const compiledTemplate = this.template(this.trade); - this.$el.append(compiledTemplate); - // this.$el.html(`

    ${this.model.get('symbol')}

    `) - // this.$el.append(`

    ${this.model.get('assignee')}

    `) + this.$el.prepend(compiledTemplate); + console.log(this); // // this.model.each((quote)=> { // const tradeHistoryView = new TradeHistoryView({ From 2136c80c682983f40911bfb32f9c5f2731bd20f3 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Thu, 14 Dec 2017 19:04:20 -0800 Subject: [PATCH 5/7] cleaning up code --- dist/index.html | 10 ++--- src/app.js | 83 ++++++++++++----------------------- src/collections/order_list.js | 8 ++++ src/models/order.js | 14 ++++++ src/views/order_form_view.js | 77 ++++++++++++++++++++++++++++++++ src/views/order_list_view.js | 33 ++++++++++++++ src/views/order_view.js | 55 +++++++++++++++++++++++ src/views/quote_view.js | 1 + 8 files changed, 222 insertions(+), 59 deletions(-) create mode 100644 src/collections/order_list.js create mode 100644 src/models/order.js create mode 100644 src/views/order_form_view.js create mode 100644 src/views/order_list_view.js create mode 100644 src/views/order_view.js diff --git a/dist/index.html b/dist/index.html index 8a046fa..9600aaa 100644 --- a/dist/index.html +++ b/dist/index.html @@ -55,15 +55,15 @@

    Open Orders

    -
    +

    Order Entry Form

    - + - - + + diff --git a/src/app.js b/src/app.js index d2316ea..d1c5a05 100644 --- a/src/app.js +++ b/src/app.js @@ -5,12 +5,20 @@ import $ from 'jquery'; import _ from 'underscore'; import Simulator from 'models/simulator'; + import QuoteList from 'collections/quote_list'; import Quote from 'models/quote'; import QuoteView from './views/quote_view'; import QuoteListView from './views/quote_list_view'; + import TradeHistoryView from './views/trade_history_view'; +import OrderListView from './views/order_list_view'; +import OrderFormView from './views/order_form_view'; +import OrderView from './views/order_view'; +import Order from 'models/order'; +import OrderList from 'collections/order_list'; + const quoteData = [ { symbol: 'HUMOR', @@ -33,58 +41,6 @@ const quoteData = [ // const quoteList = new QuoteList(); let quoteTemplate; -//MOVED THIS TO QUOTELISTVIEW - -// const renderList = function(quoteList) { -// const $quoteList = $('#quotes'); -// $quoteList.empty(); -// -// quoteList.forEach((quote) =>{ -// -// const quoteView = new QuoteView({ -// model: quote, -// template: _.template($('#quote-template').html()), -// tagName: 'li', -// className: 'quote', -// }); -// // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. -// -// $quoteList.append(quoteView.render().$el); -// -// -// -// // const taskHtml = $(taskTemplate(task.attributes)); -// // $taskList.append(taskHtml); -// // -// // taskHtml.find('.delete').click({task: task}, (params) => { -// // const task = params.data.task; -// // taskList.remove(task); -// // updateStatusMessageWith(`The task "${task.get('task_name')}" has been deleted`) -// // }); -// // -// // taskHtml.on('click', '.toggle-complete', {task: task}, function(params) { -// // params.data.task.set('is_complete', !params.data.task.get('is_complete')); -// // $(this).closest('.task').toggleClass('is-complete') -// // }); -// }); -// } - -// const renderTradeHistory = function() { - // const $quoteList = $('#quotes'); - // $quoteList.empty(); - // - // quoteList.forEach((quote) =>{ - // - // const quoteView = new QuoteView({ - // model: quote, - // template: _.template($('#quote-template').html()), - // tagName: 'li', - // className: 'quote', - // }); - // // THESE ARE THE THINGS THAT BACKBONE EXPECTS except for template, which is why we initialized template. - // - // $quoteList.append(quoteView.render().$el); -// }; $(document).ready(function() { let bus = {}; @@ -110,19 +66,38 @@ $(document).ready(function() { simulator.start(); - // renderList(quotes); quoteTemplate = _.template($('#quote-template').html()); const quoteListView = new QuoteListView({ + //this is what params becomes el: '#quotes', - model: quotes, + model: quotes, //need explanation template: quoteTemplate, tradeTemplate: _.template($('#trade-template').html()), bus: bus, }); + const order = new Order; + const orders = new OrderList(); + + const orderListView = new OrderListView({ + el: '#orders', + model: orders, + template: _.template($('#order-template').html()), + }); + + + + const orderFormView = new OrderFormView({ + el: '#order-entry-form', + orderList: orders, + quoteList: quotes + }); + quoteListView.render(); + orderListView.render(); + orderFormView.render(); // const quoteView = new QuoteView({ // el: 'ul', diff --git a/src/collections/order_list.js b/src/collections/order_list.js new file mode 100644 index 0000000..8d7cabd --- /dev/null +++ b/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; diff --git a/src/models/order.js b/src/models/order.js new file mode 100644 index 0000000..bbb0c4e --- /dev/null +++ b/src/models/order.js @@ -0,0 +1,14 @@ +import Backbone from 'backbone'; +import Quote from 'models/quote'; + +const Order = Backbone.Model.extend({ + defaults: { + symbol: 'UNDEF', + targetPrice: 0.00, + buy: true, + // quote: null + } + +}); + +export default Order; diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js new file mode 100644 index 0000000..1f48725 --- /dev/null +++ b/src/views/order_form_view.js @@ -0,0 +1,77 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; +// import QuoteView from '../views/quote_view'; +import Order from '../models/order'; +import OrderList from '../collections/order_list'; +import $ from 'jquery'; + + +const OrderFormView = Backbone.View.extend({ + initialize(params) { + //maybe move the stuff in orderlistview to here?? + this.orderList = params.orderList; + this.quoteList = params.quoteList; + }, + + render() { + this.quoteList.each((quote)=> { + this.$('#symbol').append($(``)); + }); + return this; + }, + + events: { + 'click button.btn-buy': 'buy', + 'click button.btn-sell': 'sell', + // 'click button.btn-buy': 'addNewOrder', + // 'click button.btn-sell': 'addNewOrder', + }, + buy(event) { + // event.preventDefault(); + console.log(event); + event.isBuy = true; + this.addNewOrder(event); + }, + sell(event) { + // event.preventDefault(); + console.log(event); + event.isBuy = false; //I added this to be able to send this info to addneworder, you can add any text you want after event. + this.addNewOrder(event); + }, + + addNewOrder(event) { + console.log(event); + event.preventDefault(); + const orderData ={}; + orderData['symbol'] = $('select[name=symbol]').val(); + orderData['targetPrice'] = parseFloat($('input[name=targetPrice]').val()); + orderData['quote'] = this.quoteList.findWhere({symbol: orderData['symbol']}); + // console.log(orderData['quote'].get('symbol')); + // if (val != '') { + // orderData[field] = val; + // } + + orderData['buy'] = event.isBuy; + + const newOrder = new Order(orderData); + //console.log(newOrder); + // console.log(orderData); + + if (newOrder.isValid()) { + this.orderList.add(newOrder); + // console.log("you added a new order") + // console.log(this.orderList.at(0)); + } + // updateStatusMessageWith(`New order added: ${newTask.get('task_name')}`); + // } else { + // updateStatusMessageFrom(newTask.validationError); + // } + + //Emptying out the form after + this.$('select[name=symbol]').val(''); + this.$('input[name=targetPrice]').val(''); + }, + +}); + +export default OrderFormView; diff --git a/src/views/order_list_view.js b/src/views/order_list_view.js new file mode 100644 index 0000000..ba8b0b8 --- /dev/null +++ b/src/views/order_list_view.js @@ -0,0 +1,33 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; +// import QuoteView from '../views/quote_view'; +import Order from '../models/order'; +import OrderView from '../views/order_view' +import QuoteList from '../collections/quote_list'; +import $ from 'jquery'; + + + +const OrderListView = Backbone.View.extend({ + initialize(params) { + this.template = params.template; + this.model = params.model; + this.listenTo(this.model, 'update', this.render); + }, + + render() { + this.$el.empty(); + this.model.each((order) => { + const orderView = new OrderView({ + model: order, + template: this.template, + tagname: 'li', + className: 'orders' + }); + this.$el.append(orderView.render().$el); + }); + return this; + }, +}); + +export default OrderListView; diff --git a/src/views/order_view.js b/src/views/order_view.js new file mode 100644 index 0000000..d4a458c --- /dev/null +++ b/src/views/order_view.js @@ -0,0 +1,55 @@ +import Backbone from 'backbone'; +import Quote from '../models/quote'; +// import QuoteView from '../views/quote_view'; +import Order from '../models/order'; +import OrderList from '../collections/order_list'; +import $ from 'jquery'; + + +const OrderView = Backbone.View.extend({ + initialize(params) { //where do the params come from? app.js + this.template = params.template; + this.model = params.model; + this.listenTo(this.model, 'change', this.render); + //anytime the model changes, it will redraw it + this.listenTo(this.model.get('quote'), 'change', this.executeOrder); + + }, + + executeOrder() { + console.log('execute order is being called'); + let quote = this.model.get('quote'); + + if (this.model.get('buy')) { + if (this.model.get('targetPrice') >= quote.get('price')) { + quote.buy(); + this.model.destroy(); + this.remove(); + } + } else { + if (this.model.get('targetPrice') <= quote.get('price')) { + quote.sell(); + this.model.destroy(); + this.remove(); + } + } + }, + + render() { + const compiledTemplate = this.template(this.model.toJSON()); //go that template, send the data from the model as JSON which is like a hash + + this.$el.html(compiledTemplate); //this replaces the html in that element with the complied string from above compiledTemplate + + return this; + }, + events: { + 'click button.btn-cancel': 'cancel', + }, + cancel(event) { + console.log(event); + this.model.destroy(); + }, + +}); + +export default OrderView; diff --git a/src/views/quote_view.js b/src/views/quote_view.js index 9e90b7d..da8ec88 100644 --- a/src/views/quote_view.js +++ b/src/views/quote_view.js @@ -24,6 +24,7 @@ const QuoteView = Backbone.View.extend({ buy(event) { console.log(event); this.bus.trigger('trade', { + //this is what trade is buy: true, price: this.model.get('price'), symbol: this.model.get('symbol'), From fa2077365264591b607f76bb3f48036e9130fb78 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Fri, 15 Dec 2017 17:00:59 -0800 Subject: [PATCH 6/7] wrote some validations on order --- src/models/order.js | 19 ++++++++++++++++++- src/models/quote.js | 1 + src/views/order_form_view.js | 3 +++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/models/order.js b/src/models/order.js index bbb0c4e..675707e 100644 --- a/src/models/order.js +++ b/src/models/order.js @@ -7,8 +7,25 @@ const Order = Backbone.Model.extend({ targetPrice: 0.00, buy: true, // quote: null - } + }, + + validate() { + const targetPrice = this.get('targetPrice'); + const symbol = this.get('symbol'); + + if (!targetPrice) { + console.log("Order cannot be created without a price") + return "Order cannot be created without a price"; + } + // if (typeof targetPrice != 'float') { + // return "Order price must be a number"; + // } + + if (!symbol) { + return "Please select a symbol"; + } + } }); export default Order; diff --git a/src/models/quote.js b/src/models/quote.js index b3a48fd..c1bb91e 100644 --- a/src/models/quote.js +++ b/src/models/quote.js @@ -6,6 +6,7 @@ const Quote = Backbone.Model.extend({ price: 0.00 }, + buy() { this.set('price', this.get('price') + 1.00); // Implement this function to increase the price by $1.00 diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js index 1f48725..85f9607 100644 --- a/src/views/order_form_view.js +++ b/src/views/order_form_view.js @@ -62,6 +62,9 @@ const OrderFormView = Backbone.View.extend({ // console.log("you added a new order") // console.log(this.orderList.at(0)); } + else { + console.log("Not a valid order: " + newOrder.validationError); + } // updateStatusMessageWith(`New order added: ${newTask.get('task_name')}`); // } else { // updateStatusMessageFrom(newTask.validationError); From 1eb4a23b7bae64cf2a66d193025d9fb177e173f4 Mon Sep 17 00:00:00 2001 From: Kimberley Zell Date: Sun, 17 Dec 2017 22:40:26 -0800 Subject: [PATCH 7/7] small update --- src/views/order_form_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/order_form_view.js b/src/views/order_form_view.js index 85f9607..eccd687 100644 --- a/src/views/order_form_view.js +++ b/src/views/order_form_view.js @@ -42,7 +42,7 @@ const OrderFormView = Backbone.View.extend({ addNewOrder(event) { console.log(event); event.preventDefault(); - const orderData ={}; + const orderData = {}; orderData['symbol'] = $('select[name=symbol]').val(); orderData['targetPrice'] = parseFloat($('input[name=targetPrice]').val()); orderData['quote'] = this.quoteList.findWhere({symbol: orderData['symbol']});