penambahan button cancel device control

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

@@ -61,7 +61,8 @@
                           (click)="doFilter()"
                           style="
                             background-color: #252525 !important;
-                            border-color: #bef264 !important;
+                            border-color: #ffffff !important;
+                            border-radius: 12px;
                           "
                           [disabled]="spinnerFilterActive"
                         >
@@ -76,6 +77,19 @@
                             *ngIf="spinnerFilterActive"
                           ></i>
                         </button>
+                        <button
+                          type="button"
+                          class="btn btn-outline-success ml-2"
+                          (click)="doCancelFilter()"
+                          style="
+                            background-color: #252525 !important;
+                            border-color: #ffffff !important;
+                            color: #ffffff;
+                            border-radius: 12px;
+                          "
+                        >
+                          Cancel
+                        </button>
                       </div>
                     </div>
                   </div>

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

@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 import { BuildingService } from "../../service/monitoring-api.service";
 import { DeviceService } from "../../service/device.service";
+import { ToastrService } from "ngx-toastr";
 
 @Component({
   selector: "app-device-control",
@@ -42,7 +43,8 @@ export class DeviceControlComponent {
   constructor(
     private router: Router,
     private deviceService: DeviceService,
-    private monitoringApiService: BuildingService
+    private monitoringApiService: BuildingService,
+    private toastr: ToastrService
   ) {}
 
   ngOnInit() {
@@ -103,15 +105,30 @@ export class DeviceControlComponent {
   }
 
   doFilter() {
-    this.spinnerFilterActive = true;
+    if (!this.buildingSelected) {
-    this.fetchData(
+      this.toastr.error("Warning", "Filter Building tidak boleh kosong.", {
-      this.buildingSelected,
+        timeOut: 5000,
-      this.categorySelected,
+        closeButton: true,
-      this.statusSelected
+      });
-    );
+    } else {
-    setTimeout(() => {
+      this.spinnerFilterActive = true;
-      this.spinnerFilterActive = false;
+      this.fetchData(
-    }, 3000);
+        this.buildingSelected,
+        this.categorySelected,
+        this.statusSelected
+      );
+      setTimeout(() => {
+        this.spinnerFilterActive = false;
+      }, 3000);
+    }
+  }
+
+  doCancelFilter() {
+    this.storedData = JSON.parse(localStorage.getItem("currentUser"));
+    this.buildingSelected = this.storedData.buildingId;
+    this.categorySelected = undefined;
+    this.statusSelected = undefined;
+    this.fetchData(this.buildingSelected, 0, 0);
   }
 
   filterRows() {