integrasi building detail

src/app/content/hemat-app/monitoring/building/building.component.html

@@ -111,10 +111,10 @@
                     type="button"
                     class="btn btn-float btn-square btn-outline-secondary"
                     triggers="hover:click:hover"
-                    ngbTooltip="Edit"
+                    ngbTooltip="CCTV"
                     (click)="editRow(data)"
                   >
-                    <i class="feather ft-edit"></i>
+                    <i class="feather ft-camera"></i>
                   </button>
 
                   <button

src/app/content/hemat-app/monitoring/building/building.component.ts

@@ -91,7 +91,6 @@ export class BuildingComponent {
   }
 
   viewRoom(row) {
-    console.log(row);
     this.router.navigate(["/monitoring/monitoring-room", row.id]);
   }
 }

src/app/content/hemat-app/monitoring/detail/detail.component.html

@@ -11,11 +11,11 @@
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h3 class="danger">278</h3>
+                    <h3 class="danger">278 Kwh</h3>
-                    <span>New Projects</span>
+                    <span>Electricity</span>
                   </div>
                   <div class="align-self-center">
-                    <i class="icon-rocket danger font-large-2 float-right"></i>
+                    <i class="icon-energy danger font-large-2 float-right"></i>
                   </div>
                 </div>
               </div>
@@ -29,10 +29,10 @@
                 <div class="media d-flex">
                   <div class="media-body text-left">
                     <h3 class="success">156</h3>
-                    <span>New Clients</span>
+                    <span>Water</span>
                   </div>
                   <div class="align-self-center">
-                    <i class="icon-user success font-large-2 float-right"></i>
+                    <i class="icon-speedometer success font-large-2 float-right"></i>
                   </div>
                 </div>
               </div>
@@ -45,11 +45,11 @@
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h3 class="warning">64.89 %</h3>
+                    <h3 class="warning">{{device}}</h3>
-                    <span>Conversion Rate</span>
+                    <span>Device</span>
                   </div>
                   <div class="align-self-center">
-                    <i class="icon-pie-chart warning font-large-2 float-right"></i>
+                    <i class="icon-bulb warning font-large-2 float-right"></i>
                   </div>
                 </div>
               </div>
@@ -62,11 +62,11 @@
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h3 class="info">423</h3>
+                    <h3 class="info">{{room}}</h3>
-                    <span>Support Tickets</span>
+                    <span>Room</span>
                   </div>
                   <div class="align-self-center">
-                    <i class="icon-support info font-large-2 float-right"></i>
+                    <i class="icon-map info font-large-2 float-right"></i>
                   </div>
                 </div>
               </div>

src/app/content/hemat-app/monitoring/detail/detail.component.ts

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { BlockUI, NgBlockUI } from "ng-block-ui";
 import { ChartApiService } from "src/app/_services/chart.api";
+import { BuildingService } from "../../service/monitoring-api.service";
 interface Sales {
   name: string;
   sales: string;
@@ -24,10 +25,17 @@ export class DetailComponent {
   ExpenseschartOption: any;
   donutChart2: any;
   public breadcrumb: any;
+  // integrasi
+  electric: any;
+  water: any;
+  device: any;
+  room: any;
+  //......
   constructor(
     private chartApiservice: ChartApiService,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private monitoringApiService: BuildingService,
   ) {}
   hitRateOptions = {
     bodyClass: ['bg-hexagons', 'pt-0'],
@@ -88,6 +96,14 @@ export class DetailComponent {
       };
     }
 
+    this.route.params.subscribe(params => {
+      const buildingId = params['id'];
+      if (buildingId) {
+        this.fetchData(buildingId);
+        this.devicePerBuilding(buildingId);
+      }
+    });
+
     this.chartApiservice.getStatisticsData().subscribe(Response => {
       this.salesData = Response;
       this.getlineArea();
@@ -282,4 +298,17 @@ export class DetailComponent {
       this.blockUISalesRecieptsDues.stop();
     }, 2500);
   }
+
+  //integrasi
+  fetchData(buildingId) {
+    this.monitoringApiService.getRoomByBuildingId(buildingId).subscribe((res) => {
+      this.room = res.resp.map(entry => entry.roomEntity).length;
+    });
+  }
+
+  devicePerBuilding(buildingId) {
+    this.monitoringApiService.listDevicePerBuilding(buildingId).subscribe((res) => {
+      this.device = res.resp.reduce((sum, item) => sum + item.total_device, 0);
+    });
+  }
 }

src/app/content/hemat-app/monitoring/room/room.component.ts

@@ -30,7 +30,6 @@ export class RoomComponent implements OnInit {
     });
     this.route.params.subscribe(params => {
       const buildingId = params['id'];
-      console.log(buildingId);
       if (buildingId) {
         this.fetchData(buildingId);
       }

src/app/content/hemat-app/service/monitoring-api.service.ts

@@ -26,6 +26,15 @@ export class BuildingService {
     return this.http.get<any>(url, { headers });
   }
 
+  listDevicePerBuilding(id): Observable<any> {
+    const url = `https://kapi.absys.ninja/hemat/devices/aggregate/on?building_id=${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
+
   getBuildingData(page: number = 1, limit: number = 10): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`;
     // const headers = new HttpHeaders().set('Content-Type', 'application/json');