perbaikan routing dan penambahan button back pada page monitoring

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

@@ -11,9 +11,7 @@
             *blockUI="'zeroConfiguration'; message: 'Loading'"
           >
             <m-card>
-              <ng-container mCardHeaderTitle>
-                Device Table
-              </ng-container>
+              <ng-container mCardHeaderTitle> Device Table </ng-container>
               <ng-container mCardBody>
                 <div class="row mb-2">
                   <div class="col-md-6">
@@ -23,15 +21,21 @@
                       placeholder="Search..."
                       [(ngModel)]="searchTerm"
                       (input)="filterRows()"
-                      (touchstart)="onTouchStart($event)"
                     />
                   </div>
                   <div class="col-md-6 text-right">
                     <button
                       class="btn btn-secondary"
-                      [routerLink]="['/device/add-row']"
+                      [disabled]="spinnerActive"
+                      (click)="addDevice()"
                     >
-                      <i class="feather ft-plus"></i>&nbsp; Add new device
+                      <i
+                        class="la la-spinner spinner"
+                        *ngIf="spinnerActive"
+                      ></i>
+                      <i class="feather ft-plus" *ngIf="!spinnerActive"></i
+                      >&nbsp;
+                      <span>Syncing Data</span>
                     </button>
                   </div>
                 </div>

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

@@ -16,6 +16,7 @@ export class DeviceComponent implements OnInit {
   searchTerm: string = "";
   rows: any = [];
   public breadcrumb: any;
+  spinnerActive: boolean = false;
 
   @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
 
@@ -108,7 +109,17 @@ export class DeviceComponent implements OnInit {
     console.log("Delete row:", row);
   }
 
-  onTouchStart(event: Event) {
-    event.preventDefault(); // Add this if necessary
+  addDevice(): void {
+    // Aktifkan spinner
+    this.spinnerActive = true;
+
+    // Lakukan proses tambahan (misalnya, panggil API atau proses yang memakan waktu)
+    setTimeout(() => {
+      // Selesaikan proses tambahan di sini
+
+      // Nonaktifkan spinner setelah proses selesai
+      this.spinnerActive = false;
+      this.fetchData();
+    }, 3000); // Ganti 3000 dengan waktu yang sesuai dengan proses tambahan Anda (dalam milidetik)
   }
 }