Added device list

mean-app/src/app/data.service.ts

@@ -7,9 +7,12 @@ import { LineData } from './line-data';
 import { GraphData } from './graph-data';
 import { LabelData } from './label-data';
 
+import { Device } from './device';
+
 @Injectable()
 export class DataService {
   private baseUrl: string = '/webapi/data';
+  private deviceUrl: string = '/webapi/device';
 
   constructor(private http : Http){}
 
@@ -24,6 +27,18 @@ export class DataService {
     return lineChartData$;
   }
 
+
+  devices(): Observable<Device[]> {
+    let devices$ =
+      //<LineData>( {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'} );
+      this.http
+        .get((`${this.deviceUrl}`)
+          , {headers: this.getHeaders()})
+        .map(mapDevice);
+
+    return devices$;
+  }
+
   private getHeaders(){
     let headers = new Headers();
     headers.append('Accept', 'application/json');
@@ -51,3 +66,19 @@ function timeToData(r:any){
   return times;
 }
 
+
+
+function mapDevice(response:Response): Device[] {
+  let devices = response.json().map(toDevice);
+  return devices;
+}
+
+
+function toDevice(r:any){
+  let device = <Device>({
+      sn: r.SN,
+      name: r.name
+  });
+
+  return device;
+}

mean-app/src/app/device.component.html

@@ -1 +1,9 @@
-<line-chart></line-chart>
+<div>
+
+<ul>
+        <li *ngFor="let device of devices">
+          <span class="badge"> {{device.sn}} </span> {{device.name}}
+        </li>
+</ul>
+
+</div>

mean-app/src/app/device.component.ts

@@ -1,10 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Device } from './device';
+
+import { DataService } from './data.service';
 
 @Component({
   selector: 'device',
   templateUrl: './device.component.html'
 })
 
-export class DeviceComponent {
+export class DeviceComponent implements OnInit {
+
+  public devices:Device[];
+
+  constructor(private dataService: DataService) {}
+
+  ngOnInit(): void {
+
+    this.dataService
+      .devices()
+      .subscribe(res => {
+        
+      		this.devices = res;
+
+      });
+
+  }
 
 }

mean-app/src/app/device.ts

@@ -0,0 +1,4 @@
+export class Device {
+  public sn: string;
+  public name: string;
+}