integrasi table device dan table master category

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html

@@ -36,19 +36,19 @@
                             type="text"
                             id="projectinput1"
                             class="form-control"
-                            formControlName="firstName"
-                            placeholder="First Name"
+                            formControlName="name"
+                            placeholder="Device Name"
                             [ngClass]="{
-                              'is-invalid': submitted && f.firstName.errors
+                              'is-invalid': submitted && f.name.errors
                             }"
                           />
                           <small
                             class="form-text text-muted danger"
-                            *ngIf="submitted && f.firstName.errors"
+                            *ngIf="submitted && f.name.errors"
                             class="invalid-feedback"
                           >
-                            <div *ngIf="f.firstName.errors.required">
-                              First Name is required
+                            <div *ngIf="f.name.errors.required">
+                              Device Name is required
                             </div>
                           </small>
                         </div>
@@ -430,7 +430,7 @@
                     >
                       <i class="feather ft-x"></i> Cancel
                     </button>
-                    <button type="submit" class="btn btn-primary">
+                    <button type="submit" class="btn btn-primary" (click)="saveEdit()">
                       <i class="la la-check"></i> Save
                     </button>
                   </div>

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { BlockUI, NgBlockUI } from "ng-block-ui";
+import { BuildingService } from "../../service/monitoring-api.service";
 
 @Component({
   selector: "app-add-edit-device",
@@ -53,17 +54,32 @@ export class AddEditDeviceComponent implements OnInit{
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private monitoringApiService: BuildingService,
   ) {}
 
   ngOnInit() {
     this.route.data.subscribe((data) => {
+      console.log(data);
+      
       this.mode = data.mode;
+      console.log(this.mode);
+      
+    });
+    this.route.params.subscribe(params => {
+      console.log(params);
+      
+      const deviceId = params['id'];
+      console.log(deviceId);
+      
+      if (deviceId) {
+        this.loadDevice(deviceId);
+      }
     });
     this.setBreadcrumb()
 
     this.projectInfo = this.formBuilder.group({
-      firstName: ["", Validators.required],
+      name: ["", Validators.required],
       lastName: ["", Validators.required],
       email: ["", [Validators.required, Validators.email]],
       phone: ["", Validators.required],
@@ -75,6 +91,15 @@ export class AddEditDeviceComponent implements OnInit{
     });
   }
 
+  loadDevice(deviceId: string) {
+    this.monitoringApiService.getDeviceById(deviceId).subscribe(data => {
+      console.log(data);
+      this.projectInfo = this.formBuilder.group({
+        name: data.name,
+      });
+    });
+  }
+
   setBreadcrumb() {
     if (this.isAddMode()) {
       this.breadcrumb = {
@@ -164,7 +189,11 @@ export class AddEditDeviceComponent implements OnInit{
     }
   }
 
-  addData() {}
+  
+
+  saveEdit() {
+    
+  }
 
   cancel() {
     this.router.navigate(["/device"]);

src/app/content/hemat-app/device/device.component.html

@@ -63,6 +63,20 @@
                         {{ rowIndex + 1 }}
                       </ng-template>
                     </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="icon"
+                      [flexGrow]="1"
+                      [minWidth]="140"
+                    >
+                    <ng-template ngx-datatable-header-template>
+                      <span>Device Name</span>
+                    </ng-template>
+                      <ng-template ngx-datatable-cell-template let-row="row">
+                        <span class="avatar avatar-sm rounded-circle">
+                          <img [src]="row.icon" /><i></i
+                        ></span>
+                      </ng-template>
+                    </ngx-datatable-column>
                     <ngx-datatable-column
                       name="Name"
                       [flexGrow]="1"
@@ -175,12 +189,12 @@
                         >
                           <i class="ficon feather ft-edit"></i>
                         </button>
-                        <button
+                        <!-- <button
                           class="btn btn-sm btn-danger"
                           (click)="deleteRow(row)"
                         >
                           <i class="ficon feather ft-trash-2"></i>
-                        </button>
+                        </button> -->
                       </ng-template>
                     </ngx-datatable-column>
                   </ngx-datatable>
@@ -198,11 +212,13 @@
                 <div class="card-body">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h6 class="text-muted">Total Use </h6>
+                      <h6 class="text-muted">Total Use</h6>
                       <h3>3,568</h3>
                     </div>
                     <div class="align-self-center">
-                      <i class="feather ft-zap danger font-large-2 float-right"></i>
+                      <i
+                        class="feather ft-zap danger font-large-2 float-right"
+                      ></i>
                     </div>
                   </div>
                 </div>
@@ -219,7 +235,9 @@
                       <h3>Rp 1.000.000.000.000</h3>
                     </div>
                     <div class="align-self-center">
-                      <i class="feather ft-trending-up success font-large-2 float-right"></i>
+                      <i
+                        class="feather ft-trending-up success font-large-2 float-right"
+                      ></i>
                     </div>
                   </div>
                 </div>

src/app/content/hemat-app/device/device.component.ts

@@ -4,6 +4,7 @@ import { NgBlockUI, BlockUI } from "ng-block-ui";
 import { TableApiService } from "src/app/_services/table-api.service";
 import { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component";
 import { ActivatedRoute, Router } from "@angular/router";
+import { BuildingService } from "../service/monitoring-api.service";
 
 @Component({
   selector: "app-device",
@@ -23,7 +24,8 @@ export class DeviceComponent implements OnInit {
   constructor(
     private tableApiservice: TableApiService,
     private modalService: NgbModal,
-    private router: Router
+    private router: Router,
+    private monitoringApiService: BuildingService,
   ) {}
 
   ngOnInit() {
@@ -45,9 +47,10 @@ export class DeviceComponent implements OnInit {
   }
 
   fetchData() {
-    this.tableApiservice.getTableInitialisationData().subscribe((response) => {
-      this.data = response;
-      this.filteredRows = this.data.rows;
+    this.monitoringApiService.getDeviceData().subscribe((res) => {
+      console.log(res);
+      this.data = res;
+      this.filteredRows = this.data.data;
     });
   }
 
@@ -98,11 +101,11 @@ export class DeviceComponent implements OnInit {
   }
 
   viewRow(row) {
-    this.router.navigate(["/device/view", row.name]);
+    this.router.navigate(["/device/view", row.id]);
   }
 
   editRow(row) {
-    this.router.navigate(["/device/edit", row.name]);
+    this.router.navigate(["/device/edit", row.id]);
   }
 
   deleteRow(row) {
@@ -112,6 +115,9 @@ export class DeviceComponent implements OnInit {
   addDevice(): void {
     // Aktifkan spinner
     this.spinnerActive = true;
+    this.monitoringApiService.getSyncDeviceData().subscribe((res) => {
+      console.log(res);
+    });
 
     // Lakukan proses tambahan (misalnya, panggil API atau proses yang memakan waktu)
     setTimeout(() => {