diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css index e69de29..b5ff912 100644 --- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css +++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.css @@ -0,0 +1,13 @@ +:host ::ng-deep .ng-select .ng-select-container { + color: #ffffff !important; + background-color: #252525 !important; + height: 40px !important; + } + + .background-round { + background-color: #252525 !important; + padding: 8px; + border-radius: 50%; + border: 2px solid #BEF264; + border-color: #BEF264 !important; + } \ No newline at end of file diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html index 0c60194..022168f 100644 --- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html +++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html @@ -1 +1,149 @@ -

control-device-seemore works!

+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ {{ item.name }} +
+ {{item.category_name}} +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts index a119326..1ec741d 100644 --- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts +++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts @@ -1,4 +1,7 @@ import { Component } from '@angular/core'; +import { BuildingService } from '../../service/monitoring-api.service'; +import { DeviceService } from '../../service/device.service'; +import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'app-control-device-seemore', @@ -6,5 +9,138 @@ import { Component } from '@angular/core'; styleUrls: ['./control-device-seemore.component.css'] }) export class ControlDeviceSeemoreComponent { + data: any; + filteredRows: any[]; + searchTerm: string = ""; + buildingSelected: any; + statusSelected: any; + categorySelected: any; + dataMasterCategori: any; + dataBuildingList: any; + dataMasterStatus: any; + spinnerFilterActive = false; + switchState: boolean; + paramsId: any; + public breadcrumb: any; + spinnerActive: boolean = false; + + constructor( + private deviceService: DeviceService, + private monitoringApiService: BuildingService, + private route: ActivatedRoute, + ) {} + + ngOnInit() { + this.route.params.subscribe((params) => { + const buildingId = params["id"]; + this.paramsId = buildingId ? buildingId: 0; + this.buildingSelected = parseInt(this.paramsId); + + }); + this.breadcrumb = { + mainlabel: "Control Device", + linkBack: `/monitoring/view-new-building/${this.buildingSelected}`, + isLinkBack: true, + links: [ + { + name: "Dashboard", + isLink: false, + link: "", + }, + { + name: "Energy Monitoring", + isLink: false, + link: "", + }, + { + name: "Control Device", + isLink: false, + link: "", + }, + ], + }; + + this.fetchData( + this.buildingSelected, + this.categorySelected, + this.statusSelected + ); + this.dataListMaster(); + this.dataListBuilding(); + } + + fetchData(buildingSelected, categorySelected, statusSelected) { + this.deviceService + .getDeviceData(buildingSelected, categorySelected, statusSelected) + .subscribe((res) => { + this.data = res; + this.filteredRows = this.data.results.data; + }); + } + + 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); + console.log(this.dataBuildingList); + + }); + } + + 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]; + } else { + this.filteredRows = this.data.results.data.filter((row) => + this.rowContainsSearchTerm(row) + ); + } + } + + rowContainsSearchTerm(row: any): boolean { + const searchTermLC = this.searchTerm.toLowerCase(); + return Object.values(row).some( + (value) => + value !== null && value.toString().toLowerCase().includes(searchTermLC) + ); + } + + switchChanged(ev, 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); + }); + } } diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html index d1993ab..341b051 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.html +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html @@ -266,9 +266,9 @@ {{ item.value.toFixed(1) }}%

- 0% + 0% - 100% + 100%
@@ -289,6 +289,7 @@ font-family: 'Open Sans', sans-serif; font-weight: 700; " + (click)="seeMore(paramsId)" > See More diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts index c42689a..8a441eb 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts @@ -171,43 +171,23 @@ export class DetailComponent { } breadcrumbLink() { - if (this.mode === "room") { - this.breadcrumb = { - mainlabel: "Energy Monitoring", - linkBack: "/monitoring/monitoring-room", - isLinkBack: true, - links: [ - { - name: "Dashboard", - isLink: false, - link: "", - }, - { - name: "Energy Monitoring", - isLink: false, - link: "", - }, - ], - }; - } else { - this.breadcrumb = { - mainlabel: "Energy Monitoring", - linkBack: "/monitoring", - isLinkBack: true, - links: [ - { - name: "Dashboard", - isLink: false, - link: "", - }, - { - name: "Energy Monitoring", - isLink: false, - link: "", - }, - ], - }; - } + this.breadcrumb = { + mainlabel: "Energy Monitoring", + linkBack: "/monitoring", + isLinkBack: true, + links: [ + { + name: "Dashboard", + isLink: false, + link: "", + }, + { + name: "Energy Monitoring", + isLink: false, + link: "", + }, + ], + }; } //integrasi dataEnergyMonitoringTopCard(buildingId) { @@ -347,6 +327,6 @@ export class DetailComponent { } seeMore(paramsId){ - this.router.navigate(["/device/control-device"],{ queryParams: { paramsId } }); + this.router.navigate(["/monitoring/control-device-see-more/", paramsId]); } } diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts index e6aec68..2fc8c35 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.module.ts +++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts @@ -77,7 +77,7 @@ import { ControlDeviceSeemoreComponent } from './control-device-seemore/control- component: WaterComponent, }, { - path: 'control-device/:id', + path: 'control-device-see-more/:id', component: ControlDeviceSeemoreComponent, }, {