Added name

mean-app/dist/main.bundle.js

@@ -26,6 +26,7 @@ var DataService = (function () {
         this.http = http;
         this.getUrl = '/webapi/data';
         this.usageUrl = 'webapi/usage';
+        this.nameUrl = 'webapi/name';
         this.deviceUrl = '/webapi/device';
     }
     DataService.prototype.get = function (id) {
@@ -40,6 +41,12 @@ var DataService = (function () {
             .map(mapUsage);
         return usageData$;
     };
+    DataService.prototype.name = function (id) {
+        var nameData$ = this.http
+            .get((this.nameUrl + "/" + id), { headers: this.getHeaders() })
+            .map(mapName);
+        return nameData$;
+    };
     DataService.prototype.devices = function () {
         var devices$ = this.http
             .get(("" + this.deviceUrl), { headers: this.getHeaders() })
@@ -104,6 +111,10 @@ function toUsage(r) {
     });
     return usage;
 }
+function mapName(response) {
+    var name = response.json().name;
+    return name;
+}
 function mapDevice(response) {
     var devices = response.json().map(toDevice);
     return devices;
@@ -175,6 +186,7 @@ var DetailComponent = (function () {
     function DetailComponent(dataService, route) {
         this.dataService = dataService;
         this.route = route;
+        this.name = "Loading";
         this.hov = 0;
         this.htv = 0;
         this.ht = 0;
@@ -200,6 +212,11 @@ var DetailComponent = (function () {
             _this.htv = res.htv;
             _this.ht = res.ht;
         });
+        this.dataService
+            .name(id)
+            .subscribe(function (res) {
+            _this.name = res;
+        });
     };
     DetailComponent = __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
@@ -616,7 +633,7 @@ module.exports = "<div>\r\n\t\r\n</div>"
 /***/ 673:
 /***/ (function(module, exports) {
 
-module.exports = "<span *ngIf=\"loaded\">\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\tHOV: {{hov}}, HTV: {{htv}}, HT: {{ht}}\r\n\t</div>\r\n\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data2\"></line-chart>\r\n\t</div>\r\n\r\n</span>\r\n"
+module.exports = "<span *ngIf=\"loaded\">\r\n\r\n\t<div class=\"col-md-12\">\r\n\t\t<h2>{{name}}</h2>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-12\">\r\n\t\t<b>HOV:</b> {{hov}}, <b>HTV:</b> {{htv}}, <b>HT:</b> {{ht}}\r\n\t</div>\r\n\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data\"></line-chart>\r\n\t</div>\r\n\r\n\t<div class=\"col-md-6\">\r\n\t\t<line-chart [label]=\"label\" [data]=\"data2\"></line-chart>\r\n\t</div>\r\n\r\n</span>\r\n"
 
 /***/ }),
 

mean-app/server/routes/webapi.js

@@ -66,6 +66,26 @@ router.get('/usage/:device', function(req, res) {
 
 });
 
+
+router.get('/name/:device', function(req, res) {
+
+  let devid = req.params.device;
+
+  connection.query(
+    'SELECT name FROM device WHERE SN = ?', [devid],
+                     function (error, results, fields) {
+   if (error) throw error;
+
+   if (results.length  > 0) {
+
+        res.status(200);
+        res.send(JSON.stringify(results));
+    }
+
+  });
+
+});
+
 /* GET api listing. */
 router.get('/', function(req, res) {
   res.status(200);

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

@@ -14,6 +14,7 @@ import { Usage } from './usage';
 export class DataService {
   private getUrl: string = '/webapi/data';
   private usageUrl: string = 'webapi/usage';
+  private nameUrl: string = 'webapi/name';
   private deviceUrl: string = '/webapi/device';
 
   constructor(private http : Http){}
@@ -38,6 +39,16 @@ export class DataService {
     return usageData$;
   }
 
+  name(id:string): Observable<string> {
+    let nameData$ =
+      this.http
+        .get((`${this.nameUrl}/${id}`)
+          , {headers: this.getHeaders()})
+        .map(mapName);
+
+    return nameData$;
+  }
+
 
   devices(): Observable<Device[]> {
     let devices$ =
@@ -113,6 +124,10 @@ function toUsage(r:any){
   return usage;
 }
 
+function mapName(response:Response): string {
+  let name = response.json().name;
+  return name;
+}
 
 function mapDevice(response:Response): Device[] {
   let devices = response.json().map(toDevice);

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

@@ -1,7 +1,11 @@
 <span *ngIf="loaded">
 
-	<div class="col-md-6">
-		HOV: {{hov}}, HTV: {{htv}}, HT: {{ht}}
+	<div class="col-md-12">
+		<h2>{{name}}</h2>
+	</div>
+
+	<div class="col-md-12">
+		<b>HOV:</b> {{hov}}, <b>HTV:</b> {{htv}}, <b>HT:</b> {{ht}}
 	</div>
 
 

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

@@ -13,6 +13,8 @@ import {LabelData} from "./label-data";
 
 export class DetailComponent implements OnInit {
 
+  public name:string = "Loading";
+
   public data:LineData;
   public label:LabelData;
 
@@ -55,6 +57,16 @@ export class DetailComponent implements OnInit {
 
       });
 
+      this.dataService
+      .name(id)
+      .subscribe(res => {
+
+        this.name = res;
+        
+      });
+
+
+
   }
 
 }