Visual changes (#108)

* Basic dynamically added buy-sell component

* Adds a basic component to display ticker info on the top right of the
GUI

* Dashboard with actual components

* Adds AM charts

* More fake component data
Better handling of dashboard blocks

* Attempting to make the dashboard scalable

* Fixes dashboard sizing
Adjusts dashboard widget margins

* Gets a chart!

* Buy sell updates

* Sprucing the buy sell components

Updates material

Fix up git Pr issues

web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.html

@@ -1,8 +0,0 @@
-<div class="loading-spinner" *ngIf="tickerCards === null || tickerCards.length === 0">
-  <mat-progress-spinner color="accent" mode="indeterminate"></mat-progress-spinner>
-</div>
-<mat-grid-list cols="4" rowHeight="4:3" >
-    <mat-grid-tile *ngFor="let ticker of tickerCards">
-  <app-exchange-currency-ticker  [ticker]="ticker" ></app-exchange-currency-ticker>
-  </mat-grid-tile>
-</mat-grid-list>

web/src/app/shared/all-enabled-currency-tickers/all-enabled-currency-tickers.component.ts

@@ -1,77 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service';
-
-@Component({
-  selector: 'app-all-enabled-currency-tickers',
-  templateUrl: './all-enabled-currency-tickers.component.html',
-  styleUrls: ['./all-enabled-currency-tickers.component.scss']
-})
-export class AllEnabledCurrencyTickersComponent implements OnInit {
-  private ws: WebsocketHandlerService;
-  allCurrencies:ExchangeCurrency[];
-  tickerCards: TickerUpdate[];
-
-  constructor(private websocketHandler: WebsocketHandlerService) {
-    this.ws = websocketHandler;
-    this.allCurrencies = <ExchangeCurrency[]>[];
-    this.tickerCards = <TickerUpdate[]>[];
-    this.ws.messages.subscribe(msg => {
-      if (msg.Event === 'ticker_update') {
-        var modal = <ExchangeCurrency>{};
-        modal.currencyPair = msg.data.CurrencyPair;
-        modal.exchangeName = msg.Exchange;
-        var found = false;
-        
-        for(var i = 0; i< this.allCurrencies.length; i++) {
-          if(this.allCurrencies[i].currencyPair === msg.data.CurrencyPair &&
-            this.allCurrencies[i].exchangeName === msg.Exchange) {
-              found = true;
-            }
-        }
-        if(!found) {
-          //time to add
-          var ticker = <TickerUpdate>msg.data;
-          ticker.Exchange = msg.Exchange;
-          this.tickerCards.push(ticker);
-          this.allCurrencies.push(modal);
-        } else {
-          //time to replace
-          for(var j = 0; j< this.tickerCards.length; j++) {
-            if(this.tickerCards[j].Exchange === msg.Exchange 
-              && this.tickerCards[j].CurrencyPair === msg.data.CurrencyPair) {
-              var ticker = <TickerUpdate>msg.data;
-                this.tickerCards[j] = ticker;
-                this.tickerCards[j].Exchange = msg.Exchange;
-              return;
-              }
-          }
-        }
-      }
-    });
-   }
-  ngOnInit() {  }
-}
-
-export interface ExchangeCurrency {
-  currencyPair: string;
-  exchangeName:string;
-}
-
-export interface CurrencyPair {
-  delimiter: string;
-  first_currency: string;
-  second_currency: string;
-}
-
-export interface TickerUpdate {
-  Pair: CurrencyPair;
-  CurrencyPair: string;
-  Last: number;
-  High: number;
-  Low: number;
-  Bid: number;
-  Ask: number;
-  Volume: number;
-  PriceATH: number;
-  Exchange:string;
-}

web/src/app/shared/all-updates-ticker/all-updates-ticker.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="showTicker" class="one-time-animation" >
+  <p>{{message}}</p>
+</div>

web/src/app/shared/all-updates-ticker/all-updates-ticker.component.scss

@@ -1,5 +1,5 @@
 .one-time-animation {
-    animation: one-time-animation 2s forwards 1;
+    animation :  one-time-animation 2s forwards 1;
   }
   @keyframes one-time-animation {
     from {
@@ -16,4 +16,6 @@
     box-shadow: 0 0 10px green inset;
     transition: box-shadow 2s ease;
   }
-  
+  p {
+    font-size:14px;
+  }

web/src/app/shared/all-updates-ticker/all-updates-ticker.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service';
+
+@Component({
+  selector: 'app-all-updates-ticker',
+  templateUrl: './all-updates-ticker.component.html',
+  styleUrls: ['./all-updates-ticker.component.scss']
+})
+export class AllEnabledCurrencyTickersComponent implements OnInit {
+  private ws: WebsocketHandlerService;
+  allCurrencies:ExchangeCurrency[];
+  tickerCard: TickerUpdate;
+  showTicker:boolean;
+  message:string;
+
+  constructor(private websocketHandler: WebsocketHandlerService) {
+    this.ws = websocketHandler;
+    this.allCurrencies = <ExchangeCurrency[]>[];
+    this.ws.messages.subscribe(msg => {
+      if (msg.Event === 'ticker_update') {
+        this.showTicker = false;
+        var modal = <ExchangeCurrency>{};
+        modal.currencyPair = msg.data.CurrencyPair;
+        modal.exchangeName = msg.Exchange;
+        var ticker = <TickerUpdate>msg.data;
+        this.tickerCard = ticker;
+        this.tickerCard.Exchange = msg.Exchange;
+        
+        if(this.tickerCard.Last > 0) {
+        this.showTicker = true;
+          this.message =  this.tickerCard.Exchange + " " + this.tickerCard.CurrencyPair + "  Last: " + this.tickerCard.Last;
+        }
+      }
+    });
+   }
+  ngOnInit() {  }
+}
+
+export interface ExchangeCurrency {
+  currencyPair: string;
+  exchangeName:string;
+}
+
+export interface CurrencyPair {
+  delimiter: string;
+  first_currency: string;
+  second_currency: string;
+}
+
+export interface TickerUpdate {
+  Pair: CurrencyPair;
+  CurrencyPair: string;
+  Last: number;
+  High: number;
+  Low: number;
+  Bid: number;
+  Ask: number;
+  Volume: number;
+  PriceATH: number;
+  Exchange:string;
+}

web/src/app/shared/buy-form/buy-form.component.html

@@ -0,0 +1,12 @@
+    <form class="form-content">
+        <mat-form-field>
+            <input matInput name="smsUsername" placeholder="Amount">
+        </mat-form-field>
+        <mat-form-field>
+            <input matInput name="smsPassword" placeholder="Offer">
+        </mat-form-field>
+        <div mat-line></div>
+    <div class="spacer">
+            <button mat-raised-button color="primary">CONFIRM BUY</button>
+            </div>
+    </form>

web/src/app/shared/buy-form/buy-form.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BuySellFormComponent } from './buy-sell-form.component';
+import { BuyFormComponent } from './buy-form.component';
 
 describe('BuySellFormComponent', () => {
-  let component: BuySellFormComponent;
-  let fixture: ComponentFixture<BuySellFormComponent>;
+  let component: BuyFormComponent;
+  let fixture: ComponentFixture<BuyFormComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BuySellFormComponent ]
+      declarations: [ BuyFormComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BuySellFormComponent);
+    fixture = TestBed.createComponent(BuyFormComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

web/src/app/shared/buy-form/buy-form.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-buy-form',
+  templateUrl: './buy-form.component.html',
+  styleUrls: ['./buy-form.component.scss']
+})
+export class BuyFormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

web/src/app/shared/buy-sell-form/buy-sell-form.component.html

@@ -1,3 +0,0 @@
-<p>
-  buy-sell-form works!
-</p>

web/src/app/shared/buy-sell-form/buy-sell-form.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-buy-sell-form',
-  templateUrl: './buy-sell-form.component.html',
-  styleUrls: ['./buy-sell-form.component.scss']
-})
-export class BuySellFormComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

web/src/app/shared/buy-sell/buy-sell.component.html

@@ -3,12 +3,16 @@
     <ng-template mat-tab-label>
       BUY
     </ng-template>
-    <app-buy-sell-form></app-buy-sell-form>
+    <div class="spacer">
+    <app-buy-form></app-buy-form>
+  </div>
   </mat-tab>
   <mat-tab>
     <ng-template mat-tab-label>
       SELL
     </ng-template>
-    <app-buy-sell-form></app-buy-sell-form>
+    <div class="spacer">
+        <app-sell-form></app-sell-form>
+  </div>
   </mat-tab>
 </mat-tab-group>

web/src/app/shared/buy-sell/buy-sell.component.ts

@@ -7,7 +7,7 @@ import { Component, OnInit,Directive, ViewContainerRef } from '@angular/core';
 })
 export class BuySellComponent implements OnInit {
 
-  constructor(public viewContainerRef: ViewContainerRef) { }
+  constructor() { }
 
   ngOnInit() {
   }

web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.html

@@ -1,28 +0,0 @@
-<mat-card class="exchange-card one-time-animation"  >
-  <mat-card-header>
-      <mat-card-title>{{ticker?.Exchange}} {{ticker?.CurrencyPair}} Ticker update</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-      <mat-grid-list cols="3" rowHeight="16:9" >
-          <mat-grid-tile>
-              <p>Last: {{ticker?.Last | number:'1.0-1'}}</p>
-            </mat-grid-tile>
-          <mat-grid-tile>
-              <p> Low: {{ticker?.Low | number:'1.0-1'}}</p>
-          </mat-grid-tile>
-          <mat-grid-tile>
-              <p> High: {{ticker?.High | number:'1.0-1'}}</p>
-          </mat-grid-tile>
-          
-          <mat-grid-tile>
-              <p> Bid: {{ticker?.Bid | number:'1.0-1'}}</p>
-            </mat-grid-tile>
-            <mat-grid-tile>
-                <p> Ask: {{ticker?.Ask | number:'1.0-1'}}</p>
-              </mat-grid-tile>
-              <mat-grid-tile>
-                  <p>Volume: {{ticker?.Volume | number:'1.0-1'}}</p>
-                </mat-grid-tile>
-      </mat-grid-list>
-  </mat-card-content>
-

web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.spec.ts

@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ExchangeCurrencyTickerComponent } from './exchange-currency-ticker.component';
-
-describe('ExchangeCurrencyTickerComponent', () => {
-  let component: ExchangeCurrencyTickerComponent;
-  let fixture: ComponentFixture<ExchangeCurrencyTickerComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ExchangeCurrencyTickerComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ExchangeCurrencyTickerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

web/src/app/shared/exchange-currency-ticker/exchange-currency-ticker.component.ts

@@ -1,34 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-@Component({
-  selector: 'app-exchange-currency-ticker',
-  templateUrl: './exchange-currency-ticker.component.html',
-  styleUrls: ['./exchange-currency-ticker.component.scss'],
-})
-export class ExchangeCurrencyTickerComponent implements OnInit {
-  @Input('ticker') ticker: TickerUpdate;
-
-  constructor() {}
-  ngOnInit() { }
-
-}
-
-
-export interface CurrencyPair {
-  delimiter: string;
-  first_currency: string;
-  second_currency: string;
-}
-
-export interface TickerUpdate {
-  Pair: CurrencyPair;
-  CurrencyPair: string;
-  Last: number;
-  High: number;
-  Low: number;
-  Bid: number;
-  Ask: number;
-  Volume: number;
-  PriceATH: number;
-  Exchange:string;
-}
-

web/src/app/shared/my-orders/my-orders.component.html

@@ -1,5 +1,14 @@
-<mat-card class="my-orders-card" flex="33">
-  <mat-card-header>
-      <mat-card-title>My Orders</mat-card-title>
-  </mat-card-header>
-</mat-card>
+<div class="mat-row-container">
+    <div class="mat-table">
+      <div class="mat-header-row">
+        <div class="mat-header-cell">Amount</div>
+        <div class="mat-header-cell">Total</div>
+        <div class="mat-header-cell">Price</div>
+      </div>
+      <div class="mat-row" *ngFor="let order of orders">
+        <div class="mat-cell">{{order.amount}}</div>
+        <div class="mat-cell">{{order.total}}</div>
+        <div class="mat-cell">{{order.price}}</div>
+      </div>
+    </div>
+  </div>

web/src/app/shared/my-orders/my-orders.component.ts

@@ -6,10 +6,30 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./my-orders.component.scss']
 })
 export class MyOrdersComponent implements OnInit {
-
+  public orders:MyOrders[] = [];
+  
   constructor() { }
 
   ngOnInit() {
+    var item = new MyOrders();
+    item.amount = 1234;
+      item.price = 423;
+      item.total = 2;
+    item.count = 3;
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
   }
-
+}
+
+
+export class MyOrders {
+  public count:number;
+  public total:number;
+  public price:number;
+  public amount:number;
 }

web/src/app/shared/navbar/navbar.component.html

@@ -7,6 +7,7 @@
         </a>
         <app-selected-currency></app-selected-currency>
         <div class="flex-spacer"></div>
+        <app-all-updates-ticker></app-all-updates-ticker>
         <theme-picker></theme-picker>
         &nbsp;
         &nbsp;

web/src/app/shared/orders/orders.component.html

@@ -1,5 +1,16 @@
-<mat-card class="orders-card" flex="33">
-  <mat-card-header>
-      <mat-card-title>Orders</mat-card-title>
-  </mat-card-header>
-</mat-card>
+<div class="mat-row-container">
+    <div class="mat-table">
+      <div class="mat-header-row">
+        <div class="mat-header-cell">Count</div>
+        <div class="mat-header-cell">Amount</div>
+        <div class="mat-header-cell">Total</div>
+        <div class="mat-header-cell">Price</div>
+      </div>
+      <div class="mat-row" *ngFor="let order of orders">
+        <div class="mat-cell">{{order.count}}</div>
+        <div class="mat-cell">{{order.amount}}</div>
+        <div class="mat-cell">{{order.total}}</div>
+        <div class="mat-cell">{{order.price}}</div>
+      </div>
+    </div>
+  </div>

web/src/app/shared/orders/orders.component.ts

@@ -6,10 +6,54 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./orders.component.scss']
 })
 export class OrdersComponent implements OnInit {
-
+  public orders:Order[] = [];
   constructor() { }
 
   ngOnInit() {
+    var item = new Order();
+    item.amount = 12;
+      item.price = 23;
+      item.total = 3;
+    item.count = 3;
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    
   }
 
 }
+
+
+export class Order {
+  public count:number;
+  public total:number;
+  public price:number;
+  public amount:number;
+}

web/src/app/shared/price-history/price-history.component.html

@@ -1,5 +1,3 @@
-<mat-card class="price-history-card" flex="33">
-  <mat-card-header>
-      <mat-card-title>Price History</mat-card-title>
-  </mat-card-header>
-</mat-card>
+<div style="width:100%;height:100%">
+<amCharts id="chartdiv" [options]="options" [style.width.%]="100" [style.height.%]="100"></amCharts>
+</div>

web/src/app/shared/price-history/price-history.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AmChartsService, AmChart } from "@amcharts/amcharts3-angular";
 
 @Component({
   selector: 'app-price-history',
@@ -6,10 +7,471 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./price-history.component.scss']
 })
 export class PriceHistoryComponent implements OnInit {
+  private chart: AmChart;
 
-  constructor() { }
+  public chartData = [ {
+    "country": "USA",
+    "visits": 4252
+  }, {
+    "country": "China",
+    "visits": 1882
+  }, {
+    "country": "Japan",
+    "visits": 1809
+  }, {
+    "country": "Germany",
+    "visits": 1322
+  }, {
+    "country": "UK",
+    "visits": 1122
+  }, {
+    "country": "France",
+    "visits": 1114
+  }, {
+    "country": "India",
+    "visits": 984
+  }, {
+    "country": "Spain",
+    "visits": 711
+  }, {
+    "country": "Netherlands",
+    "visits": 665
+  }, {
+    "country": "Russia",
+    "visits": 580
+  }, {
+    "country": "South Korea",
+    "visits": 443
+  }, {
+    "country": "Canada",
+    "visits": 441
+  }, {
+    "country": "Brazil",
+    "visits": 395
+  }, {
+    "country": "Italy",
+    "visits": 386
+  }, {
+    "country": "Australia",
+    "visits": 384
+  }, {
+    "country": "Taiwan",
+    "visits": 338
+  }, {
+    "country": "Poland",
+    "visits": 328
+} ];
+
+  public options = {
+    "type": "serial",
+  "theme": "light",
+  "dataDateFormat": "YYYY-MM-DD",
+  "zoomOutOnDataUpdate": false,
+  "valueAxes": [{
+    "position": "left"
+  }],
+  "graphs": [{
+    "id": "g1",
+    "balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
+    "closeField": "close",
+    "fillColors": "#7f8da9",
+    "highField": "high",
+    "lineColor": "#7f8da9",
+    "lineAlpha": 1,
+    "lowField": "low",
+    "fillAlphas": 0.9,
+    "negativeFillColors": "#db4c3c",
+    "negativeLineColor": "#db4c3c",
+    "openField": "open",
+    "title": "Price:",
+    "type": "candlestick",
+    "valueField": "close"
+  }, {
+    "valueField": "open",
+    "bullet": "round",
+    "bulletColor": "#0c0",
+    "bulletAlpha": 0,
+    "alphaField": "openAlpha",
+    "lineAlpha": 0,
+    "showBalloon": false,
+    "visibleInLegend": false
+  }, {
+    "valueField": "high",
+    "bullet": "round",
+    "bulletColor": "#0c0",
+    "bulletAlpha": 0,
+    "alphaField": "highAlpha",
+    "lineAlpha": 0,
+    "showBalloon": false,
+    "visibleInLegend": false
+  }, {
+    "valueField": "low",
+    "bullet": "round",
+    "bulletColor": "#0c0",
+    "bulletAlpha": 0,
+    "alphaField": "lowAlpha",
+    "lineAlpha": 0,
+    "showBalloon": false,
+    "visibleInLegend": false
+  }, {
+    "valueField": "close",
+    "bullet": "round",
+    "bulletColor": "#0c0",
+    "bulletAlpha": 0,
+    "alphaField": "closeAlpha",
+    "lineAlpha": 0,
+    "showBalloon": false,
+    "visibleInLegend": false
+  }],
+  "chartScrollbar": {
+    "graph": "g1",
+    "graphType": "line",
+    "scrollbarHeight": 30
+  },
+  "chartCursor": {
+    "valueLineEnabled": true,
+    "valueLineBalloonEnabled": true
+  },
+  "categoryField": "date",
+  "categoryAxis": {
+    "parseDates": true
+  },
+  "listeners": [{
+    "event": "clickGraphItem",
+    "method": function(e) {
+      
+      // does previous bullet exist?
+      if (e.chart.firstPoint !== undefined) {
+        // reset
+        e.item.dataContext[e.graph.alphaField] = 1;
+        e.chart.firstPoint = undefined;
+      }
+      // is this the same bullet that is already selected?
+      else if( e.item.dataContext[e.graph.alphaField] === 1 ) {
+        // unselect it
+        e.item.dataContext[e.graph.alphaField] = undefined;
+        e.chart.firstPoint = undefined;
+      }
+      // first click
+      else {
+        e.item.dataContext[e.graph.alphaField] = 1;
+        e.chart.firstPoint = e.item;
+      }
+      
+      //console.log(e.item);
+      e.chart.validateData();
+    }
+  }],
+  "dataProvider": [{
+    "date": "2011-08-01",
+    "open": "136.65",
+    "high": "136.96",
+    "low": "134.15",
+    "close": "136.49"
+  }, {
+    "date": "2011-08-02",
+    "open": "135.26",
+    "high": "135.95",
+    "low": "131.50",
+    "close": "131.85"
+  }, {
+    "date": "2011-08-05",
+    "open": "132.90",
+    "high": "135.27",
+    "low": "128.30",
+    "close": "135.25"
+  }, {
+    "date": "2011-08-06",
+    "open": "134.94",
+    "high": "137.24",
+    "low": "132.63",
+    "close": "135.03"
+  }, {
+    "date": "2011-08-07",
+    "open": "136.76",
+    "high": "136.86",
+    "low": "132.00",
+    "close": "134.01"
+  }, {
+    "date": "2011-08-08",
+    "open": "131.11",
+    "high": "133.00",
+    "low": "125.09",
+    "close": "126.39"
+  }, {
+    "date": "2011-08-09",
+    "open": "123.12",
+    "high": "127.75",
+    "low": "120.30",
+    "close": "125.00"
+  }, {
+    "date": "2011-08-12",
+    "open": "128.32",
+    "high": "129.35",
+    "low": "126.50",
+    "close": "127.79"
+  }, {
+    "date": "2011-08-13",
+    "open": "128.29",
+    "high": "128.30",
+    "low": "123.71",
+    "close": "124.03"
+  }, {
+    "date": "2011-08-14",
+    "open": "122.74",
+    "high": "124.86",
+    "low": "119.65",
+    "close": "119.90"
+  }, {
+    "date": "2011-08-15",
+    "open": "117.01",
+    "high": "118.50",
+    "low": "111.62",
+    "close": "117.05"
+  }, {
+    "date": "2011-08-16",
+    "open": "122.01",
+    "high": "123.50",
+    "low": "119.82",
+    "close": "122.06"
+  }, {
+    "date": "2011-08-19",
+    "open": "123.96",
+    "high": "124.50",
+    "low": "120.50",
+    "close": "122.22"
+  }, {
+    "date": "2011-08-20",
+    "open": "122.21",
+    "high": "128.96",
+    "low": "121.00",
+    "close": "127.57"
+  }, {
+    "date": "2011-08-21",
+    "open": "131.22",
+    "high": "132.75",
+    "low": "130.33",
+    "close": "132.51"
+  }, {
+    "date": "2011-08-22",
+    "open": "133.09",
+    "high": "133.34",
+    "low": "129.76",
+    "close": "131.07"
+  }, {
+    "date": "2011-08-23",
+    "open": "130.53",
+    "high": "135.37",
+    "low": "129.81",
+    "close": "135.30"
+  }, {
+    "date": "2011-08-26",
+    "open": "133.39",
+    "high": "134.66",
+    "low": "132.10",
+    "close": "132.25"
+  }, {
+    "date": "2011-08-27",
+    "open": "130.99",
+    "high": "132.41",
+    "low": "126.63",
+    "close": "126.82"
+  }, {
+    "date": "2011-08-28",
+    "open": "129.88",
+    "high": "134.18",
+    "low": "129.54",
+    "close": "134.08"
+  }, {
+    "date": "2011-08-29",
+    "open": "132.67",
+    "high": "138.25",
+    "low": "132.30",
+    "close": "136.25"
+  }, {
+    "date": "2011-08-30",
+    "open": "139.49",
+    "high": "139.65",
+    "low": "137.41",
+    "close": "138.48"
+  }, {
+    "date": "2011-09-03",
+    "open": "139.94",
+    "high": "145.73",
+    "low": "139.84",
+    "close": "144.16"
+  }, {
+    "date": "2011-09-04",
+    "open": "144.97",
+    "high": "145.84",
+    "low": "136.10",
+    "close": "136.76"
+  }, {
+    "date": "2011-09-05",
+    "open": "135.56",
+    "high": "137.57",
+    "low": "132.71",
+    "close": "135.01"
+  }, {
+    "date": "2011-09-06",
+    "open": "132.01",
+    "high": "132.30",
+    "low": "130.00",
+    "close": "131.77"
+  }, {
+    "date": "2011-09-09",
+    "open": "136.99",
+    "high": "138.04",
+    "low": "133.95",
+    "close": "136.71"
+  }, {
+    "date": "2011-09-10",
+    "open": "137.90",
+    "high": "138.30",
+    "low": "133.75",
+    "close": "135.49"
+  }, {
+    "date": "2011-09-11",
+    "open": "135.99",
+    "high": "139.40",
+    "low": "135.75",
+    "close": "136.85"
+  }, {
+    "date": "2011-09-12",
+    "open": "138.83",
+    "high": "139.00",
+    "low": "136.65",
+    "close": "137.20"
+  }, {
+    "date": "2011-09-13",
+    "open": "136.57",
+    "high": "138.98",
+    "low": "136.20",
+    "close": "138.81"
+  }, {
+    "date": "2011-09-16",
+    "open": "138.99",
+    "high": "140.59",
+    "low": "137.60",
+    "close": "138.41"
+  }, {
+    "date": "2011-09-17",
+    "open": "139.06",
+    "high": "142.85",
+    "low": "137.83",
+    "close": "140.92"
+  }, {
+    "date": "2011-09-18",
+    "open": "143.02",
+    "high": "143.16",
+    "low": "139.40",
+    "close": "140.77"
+  }, {
+    "date": "2011-09-19",
+    "open": "140.15",
+    "high": "141.79",
+    "low": "139.32",
+    "close": "140.31"
+  }, {
+    "date": "2011-09-20",
+    "open": "141.14",
+    "high": "144.65",
+    "low": "140.31",
+    "close": "144.15"
+  }, {
+    "date": "2011-09-23",
+    "open": "146.73",
+    "high": "149.85",
+    "low": "146.65",
+    "close": "148.28"
+  }, {
+    "date": "2011-09-24",
+    "open": "146.84",
+    "high": "153.22",
+    "low": "146.82",
+    "close": "153.18"
+  }, {
+    "date": "2011-09-25",
+    "open": "154.47",
+    "high": "155.00",
+    "low": "151.25",
+    "close": "152.77"
+  }, {
+    "date": "2011-09-26",
+    "open": "153.77",
+    "high": "154.52",
+    "low": "152.32",
+    "close": "154.50"
+  }, {
+    "date": "2011-09-27",
+    "open": "153.44",
+    "high": "154.60",
+    "low": "152.75",
+    "close": "153.47"
+  }, {
+    "date": "2011-09-30",
+    "open": "154.63",
+    "high": "157.41",
+    "low": "152.93",
+    "close": "156.34"
+  }, {
+    "date": "2011-10-01",
+    "open": "156.55",
+    "high": "158.59",
+    "low": "155.89",
+    "close": "158.45"
+  }, {
+    "date": "2011-10-02",
+    "open": "157.78",
+    "high": "159.18",
+    "low": "157.01",
+    "close": "157.92"
+  }, {
+    "date": "2011-10-03",
+    "open": "158.00",
+    "high": "158.08",
+    "low": "153.50",
+    "close": "156.24"
+  }, {
+    "date": "2011-10-04",
+    "open": "158.37",
+    "high": "161.58",
+    "low": "157.70",
+    "close": "161.45"
+  }, {
+    "date": "2011-10-07",
+    "open": "163.49",
+    "high": "167.91",
+    "low": "162.97",
+    "close": "167.91"
+  }, {
+    "date": "2011-10-08",
+    "open": "170.20",
+    "high": "171.11",
+    "low": "166.68",
+    "close": "167.86"
+  }, {
+    "date": "2011-10-09",
+    "open": "167.55",
+    "high": "167.88",
+    "low": "165.60",
+    "close": "166.79"
+  }]
+    };
+
+
+   
+
+  constructor(private AmCharts: AmChartsService) { }
 
   ngOnInit() {
   }
 
+
+  ngOnDestroy() {
+    if (this.chart) {
+      this.AmCharts.destroyChart(this.chart);
+    }
+  }
+
 }

web/src/app/shared/sell-form/sell-form.component.html

@@ -0,0 +1,12 @@
+<form class="form-content">
+    <mat-form-field>
+        <input matInput name="smsUsername" placeholder="Amount">
+    </mat-form-field>
+    <mat-form-field>
+        <input matInput name="smsPassword" placeholder="Offer">
+    </mat-form-field>
+    <div mat-line></div>
+    <div class="spacer">
+        <button mat-raised-button color="primary">CONFIRM SELL</button>
+      </div>
+</form>

web/src/app/shared/sell-form/sell-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SellFormComponent } from './sell-form.component';
+
+describe('SellFormComponent', () => {
+  let component: SellFormComponent;
+  let fixture: ComponentFixture<SellFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SellFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SellFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/shared/sell-form/sell-form.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sell-form',
+  templateUrl: './sell-form.component.html',
+  styleUrls: ['./sell-form.component.scss']
+})
+export class SellFormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

web/src/app/shared/trade-history/trade-history.component.html

@@ -1,5 +1,14 @@
-<mat-card class="trade-history-card" flex="33">
-  <mat-card-header>
-      <mat-card-title>Trade History</mat-card-title>
-  </mat-card-header>
-</mat-card>
+<div class="mat-row-container">
+    <div class="mat-table">
+      <div class="mat-header-row">
+        <div class="mat-header-cell">Time</div>
+        <div class="mat-header-cell">Price</div>
+        <div class="mat-header-cell">Amount</div>
+      </div>
+      <div class="mat-row" *ngFor="let order of orders">
+        <div class="mat-cell">{{order.time | date: 'HH:mm'}}</div>
+        <div class="mat-cell">{{order.price}}</div>
+        <div class="mat-cell">{{order.amount}}</div>
+      </div>
+    </div>
+  </div>

web/src/app/shared/trade-history/trade-history.component.ts

@@ -6,10 +6,51 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./trade-history.component.scss']
 })
 export class TradeHistoryComponent implements OnInit {
-
+  public orders:TradeHistoryOrder[] = [];
   constructor() { }
 
   ngOnInit() {
+    var item = new TradeHistoryOrder();
+      item.amount = 1,
+      item.price = 1,
+      item.time = new Date()
+      this.orders.push(item);
+      this.orders.push(item);
+      this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+      this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
+    this.orders.push(item);
   }
 
+
+
 }
+export class TradeHistoryOrder {
+  public price:number;
+  public time:Date;
+  public amount:number;
+}