integrasi building list dan room list

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

@@ -131,7 +131,7 @@
                     class="btn btn-float btn-square btn-outline-secondary"
                     triggers="hover:click:hover"
                     ngbTooltip="Room"
-                    [routerLink]="['/monitoring/monitoring-room']"
+                    (click)="viewRoom(data)"
                   >
                     <i class="feather ft-log-in"></i>
                   </button>

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

@@ -47,39 +47,28 @@ export class BuildingComponent {
         showLabel: false,
       },
     };
-    this.fetchData();
-    // this.buildingData();
+    this.listBuilding();
   }
 
-  fetchData() {
-    // this.monitoringApiService.getBuildingData().subscribe((res) => {
-    //   this.data = res;
-    //   this.filteredRows = res.data;
-    //   console.log(this.filteredRows);
-      
-    //   this.dataTop = [];
-    //   for (let i = 0; i < res.length; i++) {
-    //     if (res[i].topUse.label[i]) {
-    //       this.dataTop.push({
-    //         label: res[i].topUse.label ? res[i].topUse.label : '',
-    //         value: res[i].topUse.value ? res[i].topUse.value : 0,
-    //       });
-    //     }
-    //   }
-    // });
-    this.monitoringService.getMonitoringBuildingData().subscribe((res) => {
-      this.data = res;
-      this.filteredRows = res;
+  listBuilding() {
+    this.monitoringApiService.listBuilding().subscribe((res) => {
+      console.log(res.data);
+      this.data = res.data;
+      this.filteredRows = res.data;
 
       this.dataTop = [];
-      for (let i = 0; i < res.length; i++) {
-        if (res[i].topUse.label[i]) {
-          this.dataTop.push({
-            label: res[i].topUse.label,
-            value: res[i].topUse.value,
-          });
+      const maxItems = 4;
+
+      res.data.forEach((item) => {
+        for (let i = 0; i < maxItems; i++) {
+          if (item.topUse.label[i] !== undefined) {
+            this.dataTop.push({
+              label: item.topUse.label,
+              value: item.topUse.value,
+            });
+          }
         }
-      }
+      });
     });
   }
 
@@ -114,4 +103,9 @@ export class BuildingComponent {
   editRow(row) {
     this.router.navigate(["/monitoring/edit-new-building", row.id]);
   }
+
+  viewRoom(row){
+    console.log(row);
+    this.router.navigate(["/monitoring/monitoring-room", row.id]);
+  }
 }

src/app/content/hemat-app/monitoring/monitoring.module.ts

@@ -59,7 +59,7 @@ import { UiSwitchModule } from 'ngx-ui-switch';
         component: BuildingComponent,
       },
       {
-        path: 'monitoring-room',
+        path: 'monitoring-room/:id',
         component: RoomComponent,
         data: { mode: 'room' }
       },

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

@@ -39,7 +39,7 @@
                         class="text-muted mb-0"
                         style="font-family: Montserrat, sans-serif"
                       >
-                        {{ data.product }}
+                        {{ data.name }}
                       </h4>
                     </div>
                   </div>
@@ -48,7 +48,8 @@
                 <div class="card-body card_padding">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h3 class="info">{{ data.value }} kWh</h3>
+                      <!-- <h3 class="info">{{ data.value }} kWh</h3> -->
+                      <h3 class="info">265 kWh</h3>
                       <h6>Consumtion</h6>
                     </div>
                     <div>
@@ -61,8 +62,8 @@
                     <ngb-progressbar
                       height="7px"
                       width="100%"
-                      type="{{ data.type }}"
-                      value="{{ data.value }}"
+                      type="warning"
+                      value="75"
                     ></ngb-progressbar>
                   </div>
                 </div>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { TableMonitoringService } from "../monitoring.service";
+import { BuildingService } from "../../service/monitoring-api.service";
 
 @Component({
   selector: "app-room",
@@ -17,12 +18,22 @@ export class RoomComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private monitoringService: TableMonitoringService,
-    private router: Router
+    private router: Router,
+    private monitoringApiService: BuildingService,
   ) {}
 
   ngOnInit() {
     this.route.data.subscribe((data) => {
       this.mode = data.mode;
+      console.log(this.mode);
+      
+    });
+    this.route.params.subscribe(params => {
+      const buildingId = params['id'];
+      console.log(buildingId);
+      if (buildingId) {
+        this.fetchData(buildingId);
+      }
     });
     this.breadcrumb = {
       mainlabel: "Room",
@@ -40,14 +51,21 @@ export class RoomComponent implements OnInit {
         },
       ],
     };
-    this.fetchData();
-    
   }
 
-  fetchData() {
+  fetchData(buildingId) {
     this.monitoringService.getMonitoringRoomData().subscribe((Response) => {
-      this.data = Response;
-      this.filteredRows = Response;
+      console.log(Response);
+      
+      // this.data = Response;
+      // this.filteredRows = Response;
+    });
+    this.monitoringApiService.getRoomByBuildingId(buildingId).subscribe((res) => {
+      const roomEntities = res.resp.map(entry => entry.roomEntity);
+      this.data = roomEntities;
+      this.filteredRows = roomEntities;
+      console.log(roomEntities, 'roomEntities');
+      
     });
   }