control device

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

@@ -15,11 +15,12 @@
                       <div class="form-group">
                         <ng-select
                           class="select-custom"
-                          [items]="singleSelectArray"
+                          [items]="dataBuildingList"
                           [searchable]="true"
-                          bindLabel="item_text"
+                          bindLabel="name"
+                          bindValue="id"
                           placeholder="Select Building"
-                          [(ngModel)]="singlebasicSelected"
+                          [(ngModel)]="buildingSelected"
                         >
                         </ng-select>
                       </div>
@@ -28,66 +29,57 @@
                       <div class="form-group">
                         <ng-select
                           class="select-custom"
-                          [items]="singleSelectArray"
+                          [items]="dataMasterCategori"
                           [searchable]="true"
-                          bindLabel="item_text"
-                          placeholder="Select Type"
-                          [(ngModel)]="singlebasicSelected"
-                        >
-                        </ng-select>
-                      </div>
-                    </div>
-                    <div class="col-2">
-                      <div class="form-group">
-                        <ng-select
-                          class="select-custom"
-                          [items]="singleSelectArray"
-                          [searchable]="true"
-                          bindLabel="item_text"
+                          bindLabel="name"
+                          bindValue="id"
                           placeholder="Select Category"
-                          [(ngModel)]="singlebasicSelected"
+                          [(ngModel)]="categorySelected"
+                        >
+                        </ng-select>
+                      </div>
+                    </div>
+                    <div class="col-2">
+                      <div class="form-group">
+                        <ng-select
+                          class="select-custom"
+                          [items]="dataMasterStatus"
+                          [searchable]="true"
+                          bindLabel="name"
+                          bindValue="id"
+                          placeholder="Select Status"
+                          [(ngModel)]="statusSelected"
                         >
                         </ng-select>
                       </div>
                     </div>
 
                     <div class="col-2 text-left">
-                      <button
-                        type="button"
-                        class="btn btn-success mr-1"
-                        style="
-                          background-color: #252525 !important;
-                          border-color: #bef264 !important;
-                        "
-                      >
-                        <i
-                          class="la la-search"
-                          style="color: #ffffff !important"
-                        ></i>
-                      </button>
+                      <div class="d-flex">
+                        <button
+                          type="button"
+                          class="btn btn-outline-success ml-2"
+                          (click)="doFilter()"
+                          style="
+                            background-color: #252525 !important;
+                            border-color: #bef264 !important;
+                          "
+                          [disabled]="spinnerFilterActive"
+                        >
+                          <i
+                            class="la la-search"
+                            style="color: #ffffff !important"
+                            *ngIf="!spinnerFilterActive"
+                          ></i>
+                          <i
+                            class="la la-spinner spinner"
+                            style="color: #ffffff !important"
+                            *ngIf="spinnerFilterActive"
+                          ></i>
+                        </button>
+                      </div>
                     </div>
                     <div class="col-2"></div>
-
-                    <div class="col-2 text-right">
-                      <button
-                        class="btn btn-secondary"
-                        [disabled]="spinnerActive"
-                        (click)="addDevice()"
-                        style="
-                          background-color: #bef264 !important;
-                          border-color: #bef264 !important;
-                          color: #000000 !important;
-                        "
-                      >
-                        <i
-                          class="la la-spinner spinner"
-                          *ngIf="spinnerActive"
-                        ></i>
-                        <i class="feather ft-plus" *ngIf="!spinnerActive"></i
-                        >&nbsp;
-                        <span style="font-weight: 600">Synchronization</span>
-                      </button>
-                    </div>
                   </div>
 
                   <div class="card-dashboard"></div>
@@ -133,7 +125,7 @@
                         <br />
                         <span
                           class="text-muted"
-                          >lamp</span
+                          >{{item.category_name}}</span
                         >
                       </div>
                     </div>
@@ -143,7 +135,9 @@
                         class="switchery"
                         switchColor="black"
                         color="rgb(190, 242, 100)"
-                        checked
+                        size="small"
+                        [checked]="item.status_id === 2"
+                        (change)="switchChanged($event, item)"
                       ></ui-switch>
                     </div>
                   </div>

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

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { BuildingService } from '../../service/monitoring-api.service';
-import { DeviceService } from '../../service/device.service';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+import { BuildingService } from "../../service/monitoring-api.service";
+import { DeviceService } from "../../service/device.service";
 
 @Component({
-  selector: 'app-device-control',
-  templateUrl: './device-control.component.html',
-  styleUrls: ['./device-control.component.css']
+  selector: "app-device-control",
+  templateUrl: "./device-control.component.html",
+  styleUrls: ["./device-control.component.css"],
 })
 export class DeviceControlComponent {
   data: any;
@@ -14,7 +14,16 @@ export class DeviceControlComponent {
   totalOff: any;
   filteredRows: any[];
   searchTerm: string = "";
-  rows: any = [];
+  buildingSelected: any;
+  statusSelected: any;
+  categorySelected: any;
+  dataMasterCategori: any;
+  dataBuildingList: any;
+  dataMasterStatus: any;
+  storedData: any;
+  spinnerFilterActive = false;
+  switchState: boolean;
+
   public breadcrumb: any;
   spinnerActive: boolean = false;
 
@@ -30,10 +39,10 @@ export class DeviceControlComponent {
     { item_id: 7, item_text: "New York" },
   ];
 
-
   constructor(
     private router: Router,
-    private deviceService: DeviceService
+    private deviceService: DeviceService,
+    private monitoringApiService: BuildingService
   ) {}
 
   ngOnInit() {
@@ -51,19 +60,60 @@ export class DeviceControlComponent {
         },
       ],
     };
-    this.fetchData();
+    this.storedData = JSON.parse(localStorage.getItem("currentUser"));
+    this.buildingSelected = this.storedData.buildingId;
+    this.fetchData(
+      this.buildingSelected,
+      this.categorySelected,
+      this.statusSelected
+    );
+    this.dataListMaster();
+    this.dataListBuilding();
   }
 
-  fetchData() {
-    this.deviceService.getDeviceLIst().subscribe((res) => {
-      console.log(res);
+  fetchData(buildingSelected, categorySelected, statusSelected) {
+    this.deviceService
+      .getDeviceData(buildingSelected, categorySelected, statusSelected)
+      .subscribe((res) => {
+        this.data = res;
+        this.filteredRows = this.data.results.data;
+        console.log(this.filteredRows);
+      });
+  }
 
-      this.data = res;
-      this.filteredRows = this.data.data;
-      console.log(this.filteredRows);
+  dataListMaster() {
+    this.monitoringApiService.getMasterListData().subscribe((data) => {
+      const dataCategory = data.data.find(
+        (item) => item.name === "master_category"
+      ).headerDetailParam;
+      const dataStatus = data.data.find(
+        (item) => item.name === "master_status"
+      ).headerDetailParam;
+      this.dataMasterCategori = dataCategory.filter(
+        (item) => item.status === "2"
+      );
+      this.dataMasterStatus = dataStatus.filter((item) => item.status === "2");
     });
   }
 
+  dataListBuilding() {
+    this.monitoringApiService.getBuildingList().subscribe((data) => {
+      this.dataBuildingList = data.data.filter((item) => item.statusId === 2);
+    });
+  }
+
+  doFilter() {
+    this.spinnerFilterActive = true;
+    this.fetchData(
+      this.buildingSelected,
+      this.categorySelected,
+      this.statusSelected
+    );
+    setTimeout(() => {
+      this.spinnerFilterActive = false;
+    }, 3000);
+  }
+
   filterRows() {
     if (!this.searchTerm) {
       this.filteredRows = [...this.data.results.data];
@@ -82,11 +132,21 @@ export class DeviceControlComponent {
     );
   }
 
-  addFieldValue() {
-    
+  switchChanged(ev, data) {
+    console.log(ev);
+    console.log(data);
+    const requestData = {
+      device_id: data.device_id,
+      switch: data.mapping[0].switch,
+      value: ev,
+      command_type: "on_off",
+    };
+    this.deviceService.deviceSwitch(requestData).subscribe((res) => {
+      console.log(res);
+    });
   }
 
-  addDevice(): void {
+  addFieldValue() {}
 
-  }
+  addDevice(): void {}
 }

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

@@ -34,16 +34,6 @@ export class DeviceComponent implements OnInit {
 
   singlebasicSelected: any;
 
-  singleSelectArray = [
-    { item_id: 1, item_text: "Alaska" },
-    { item_id: 2, item_text: "California" },
-    { item_id: 3, item_text: "Colorado" },
-    { item_id: 4, item_text: "New Mexico" },
-    { item_id: 5, item_text: "Alabama" },
-    { item_id: 6, item_text: "Connecticut" },
-    { item_id: 7, item_text: "New York" },
-  ];
-
   constructor(
     private modalService: NgbModal,
     private router: Router,

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

@@ -50,4 +50,14 @@ export class DeviceService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  deviceSwitch(data): Observable<any> {
+    const endpoint = `/devices`;
+    const url = `${BASE_URL}${endpoint}/device-switch`;
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
+    });
+    return this.http.post<any>(url, data, { headers });
+  }
 }