control device

This commit is contained in:
Fuzi_fauzia 2024-06-20 17:20:22 +07:00
parent 49d37ee7e1
commit 7b9935585a
4 changed files with 142 additions and 88 deletions

View File

@ -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,67 +29,58 @@
<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">
<div class="d-flex">
<button
type="button"
class="btn btn-success mr-1"
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>
</button>
</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"
style="color: #ffffff !important"
*ngIf="spinnerFilterActive"
></i>
<i class="feather ft-plus" *ngIf="!spinnerActive"></i
>&nbsp;
<span style="font-weight: 600">Synchronization</span>
</button>
</div>
</div>
<div class="col-2"></div>
</div>
<div class="card-dashboard"></div>
</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>

View File

@ -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.data;
this.filteredRows = this.data.results.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 {}
}

View File

@ -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,

View File

@ -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 });
}
}