C14T1-Start

Author: Gregg

app/app.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { RacesComponent } from './races.component';
 import { RaceService } from './race.service';
 
+
 @Component({
   selector: 'racing-app',
   template: `

app/race.service.ts

@@ -1,9 +1,15 @@
 import { RACES } from './mocks';
 import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Race } from './race';
+import 'rxjs/add/operator/map';
 
 @Injectable()
 export class RaceService {
+
+
+
   getRaces() {
-    return RACES;
+    return
   }
 }

app/races.component.html

@@ -11,7 +11,7 @@ <h2>Cash left to enter races: <span>{{cashLeft() | currency:'USD':true}}</span>
         <tr>
           <td>
             <h3>{{race.name}}</h3>
-            <p class="date">{{race.date | date:'yMMMdhm'}}</p>
+            <p class="date">{{castDate(race.date) | date:'yMMMdhm'}}</p>
             <p class="description">{{race.about}}</p>
           </td>
           <td>

app/races.component.ts

@@ -15,17 +15,23 @@ export class RacesComponent {
   constructor(private raceService: RaceService) { }
 
   ngOnInit() {
-    this.races = this.raceService.getRaces();
+    this.raceService.getRaces() ;
   }
 
   totalCost() {
     let sum = 0;
-    for (let race of this.races) {
-      if (race.isRacing) sum += race.entryFee;
+    if (this.races) {
+      for (let race of this.races) {
+        if (race.isRacing) sum += race.entryFee;
+      }
     }
     return sum;
   }
 
+  castDate(date) {
+    return new Date(date);
+  }
+
   cashLeft() {
     return this.cash - this.totalCost();
   }

app/races.json

@@ -0,0 +1,32 @@
+{
+  "racesData":[
+    {
+      "id": 1,
+      "name": "Daytona Thunderdome",
+      "date": "2512-01-04T14:00:00",
+      "about": "Race through the ruins of an ancient Florida battle arena.",
+      "entryFee": 3200,
+      "isRacing": false,
+      "image": "/images/daytona_thunderdome.jpg",
+      "imageDescription": "Race track with laser lanes"
+    }, {
+      "id": 2,
+      "name": "San Francisco Ruins",
+      "date": "2512-07-03T20:00:00",
+      "about": "Drift down the streets of a city almost sunk under the ocean.",
+      "entryFee": 4700,
+      "isRacing": false,
+      "image": "/images/san_francisco_ruins.jpg",
+      "imageDescription": "Golden Gate Bridge with lasers"
+    }, {
+      "id": 3,
+      "name": "New York City Skyline",
+      "date": "2512-07-12T21:00:00",
+      "about": "Fly between buildings in the electronic sky.",
+      "entryFee": 4300,
+      "isRacing": true,
+      "image": "/images/new_york_city_skyline.jpg",
+      "imageDescription": "Bridge overlooking New York City"
+    }
+  ]
+}