Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pipes - Lindsey - Ada Trader #23

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
148 changes: 75 additions & 73 deletions dist/index.html
Original file line number Diff line number Diff line change
@@ -1,45 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ada Trader</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Rubik+Mono+One">
</head>
<body>
<main id="application" class="content">
<header class="row">
<h1 class="logo">Ada Trader</h1>
</header>

<div class="workspace row">

<div class="columns large-8 small-12">

<div id="quotes-container" class="quotes-container columns small-10 small-offset-1 end">
<h2>Quotes</h2>
<div class="quotes-list-container">
<ul id="quotes" class="quotes">
</ul>
</div>
<head>
<title>Ada Trader</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Rubik+Mono+One">
</head>
<body>
<main id="application" class="content">
<header class="row">
<h1 class="logo">Ada Trader</h1>
</header>

<div class="workspace row">

<div class="columns large-8 small-12">

<div id="quotes-container" class="quotes-container columns small-10 small-offset-1 end">
<h2>Quotes</h2>
<div class="quotes-list-container">
<ul id="quotes" class="quotes">
</ul>
</div>

</div>

<div class="columns large-4 small-12 trade-column">
</div>

<div class="columns large-4 small-12 trade-column">

<div id="trades-container" class="trades-container columns small-10 small-offset-1">
<h2>Trade History</h2>
<div class="trades-list-container">
<ul id="trades" class="trades">
</ul>
</div>
<div id="trades-container" class="trades-container columns small-10 small-offset-1">
<h2>Trade History</h2>
<div class="trades-list-container">
<ul id="trades" class="trades">
</ul>
</div>

</div>

</div>
</div>

<hr />
<hr />

<div id="order-workspace" class="order-workspace row">
Expand All @@ -53,13 +54,12 @@ <h2>Open Orders</h2>
</div>
</div>
</div>

<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>
<label for="symbol">Symbol</label>
<select name="symbol">
<select name="symbol" id='quoteDropDown'>
<!-- Option entries should be added here using JavaScript -->
</select>
<label for="price-target">Price</label>
Expand All @@ -74,47 +74,49 @@ <h3>Order Entry Form</h3>

</div>

</div>
</main>
<footer>
<div class="columns small-12 medium-11 medium-offset-1">
<p class="footer-copy">&copy; 2017, Ada Developers Academy</p>


</div>
</footer>

<script type="text/template" id="quote-template">
<!-- The provided styles assume that you will insert this template
within an element with the class "quote" applied -->
<!-- <li class="quote"> -->
<div class="row small-12 columns">
<h3 class="symbol"><%- symbol %></h3>
<h3 class="price">$<%- price.toFixed(2) %></h3>
<div class="quote-actions">
<button class="btn-buy alert button">Buy</button>
<button class="btn-sell success button">Sell</button>
</div>
</div>
<!-- </li> -->
</script>

<script type="text/template" id="trade-template">
<li class="trade">
<span>
You <%- buy ? 'bought' : 'sold' %> <%- symbol %> at $<%- price.toFixed(2) %>
</span>
</li>
</script>

<script type="text/template" id="order-template">
</main>
<footer>
<div class="columns small-12 medium-11 medium-offset-1">
<p class="footer-copy">&copy; 2017, Ada Developers Academy</p>
</div>
</footer>

<script type="text/template" id="quote-template">
<!-- The provided styles assume that you will insert this template
within an element with the class "quote" applied -->
<!-- <li class="quote"> -->
<div class="row small-12 columns">
<h3 class="symbol"><%- symbol %></h3>
<div class="detail">
<span class="action"><%- buy ? 'buy' : 'sell' %></span>
at
<span class="price">$<%- targetPrice.toFixed(2) %></span>
<h3 class="price">$<%- price.toFixed(2) %></h3>
<div class="quote-actions">
<button class="btn-buy alert button">Buy</button>
<button class="btn-sell success button">Sell</button>
</div>
<button class="btn-cancel button secondary">Cancel</button>
</script>
</div>
<!-- </li> -->
</script>

<script type="text/template" id="trade-template">
<li class="trade">
<span>
You <%- buy ? 'bought' : 'sold' %> <%- symbol %> at $<%- price.toFixed(2) %>
</span>
</li>
</script>

<script type="text/template" id="order-template">
<h3 class="symbol"><%- symbol %></h3>
<div class="detail">
<span class="action"><%- buy ? 'buy' : 'sell' %></span>
at
<span class="price">$<%- targetPrice.toFixed(2) %></span>
</div>
<button class="btn-cancel button secondary">Cancel</button>
</script>

<script src="/app.bundle.js" charset="utf-8"></script>
</body>
<script src="/app.bundle.js" charset="utf-8"></script>
</body>
</html>
125 changes: 125 additions & 0 deletions spec/models/order_spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import Backbone from 'backbone';
import _ from 'underscore';

import Quote from 'models/quote';
import Order from 'models/order';

describe('model validations', () => {
let quote;
let buyOrder;
let sellOrder;
beforeEach(() => {
quote = new Quote({
symbol: 'TESTQUOTE',
price: 100.00,
});
buyOrder = new Order({
symbol: 'TESTQUOTE',
targetPrice: 90.00,
buy: true,
activeQuote: quote,
symbolList: ['TESTQUOTE']
});
sellOrder = new Order({
symbol: 'TESTQUOTE',
targetPrice: 101.00,
buy: false,
activeQuote: quote,
symbolList: ['TESTQUOTE']
});
});

it('valid sell order will work', () => {
expect(sellOrder.isValid()).toEqual(true);
});

it('valid buy order will work', () => {
expect(buyOrder.isValid()).toEqual(true);
});


it('price cannot be blank', () => {
buyOrder.set('targetPrice', '');
expect(buyOrder.isValid()).toEqual(false);
});

it('price cannot be a negative number', () => {
buyOrder.set('targetPrice', -1);
expect(buyOrder.isValid()).toEqual(false);
});

it('symbol cannot be blank', () => {
buyOrder.set('symbol', '');
expect(buyOrder.isValid()).toEqual(false);
});

it('buy price cannot be equal to current price', () => {
buyOrder.set('targetPrice', 100.00);
expect(buyOrder.isValid()).toEqual(false);
});

it('buy price cannot be higher than current price', () => {
buyOrder.set('targetPrice', 101.00);
expect(buyOrder.isValid()).toEqual(false);
});


it('sell price cannot be lower than current price', () => {
sellOrder.set('targetPrice', 100.00);
expect(sellOrder.isValid()).toEqual(false);
});

it('sell price cannot be equal to current price', () => {
sellOrder.set('targetPrice', 100.00);
expect(sellOrder.isValid()).toEqual(false);
});
});

describe('model custom methods', () => {
let testOrder1;
let testOrder2;
let bus;
beforeEach(() => {
bus = {};
bus = _.extend(bus, Backbone.Events);

const quote = new Quote({
symbol: 'HELLO',
price: 100.00,
});

const buyOrderData = {
symbol: 'HELLO',
targetPrice: 99.00,
buy: true,
bus: bus,
activeQuote: quote,
symbolList: ['HELLO']
}

const sellOrderData = {
symbol: 'HELLO',
targetPrice: 99.00,
buy: false,
bus: bus,
activeQuote: quote,
symbolList: ['HELLO']
}

testOrder1 = new Order(buyOrderData);
testOrder2 = new Order(sellOrderData);
});

it('valid buy order triggers bus', () => {
const spy = spyOn(bus, 'trigger');
testOrder1.quote.set('price', 50.00);
expect(spy).toHaveBeenCalled();
});

it('valid sell order triggers bus', () => {
const spy = spyOn(bus, 'trigger');
testOrder2.quote.set('price', 101.00);
expect(spy).toHaveBeenCalled();
});

});
32 changes: 31 additions & 1 deletion src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,22 @@ 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';

let bus = {};
bus = _.extend(bus, Backbone.Events);
const quoteList = new QuoteList();

const quoteData = [
{
Expand Down Expand Up @@ -32,4 +45,21 @@ $(document).ready(function() {
});

simulator.start();

const quoteListView = new QuoteListView({
model: quotes,
template: _.template($('#quote-template').html()),
el: '#quotes-container',
bus: bus
});
quoteListView.render();

const orders = new OrderList();
const orderListView = new OrderListView({
model: orders,
symbols: quotes,
template: _.template($('#order-template').html()),
el: '#order-workspace',
bus: bus
});
});
8 changes: 8 additions & 0 deletions src/collections/order_list.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import Backbone from 'backbone';
import Order from '../models/order';

const OrderList = Backbone.Collection.extend({
model: Order,
});

export default OrderList;
Loading