penambahan "see more" control device
This commit is contained in:
parent
e1f42b5378
commit
20859bd463
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -1 +1,149 @@
|
||||||
<p>control-device-seemore works!</p>
|
<div class="app-content content" style="background-color: #000000 !important">
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<div class="content-header row mb-1">
|
||||||
|
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||||
|
</div>
|
||||||
|
<div class="content-body">
|
||||||
|
<section id="configuration">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card" style="background-color: #252525 !important">
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="form-group">
|
||||||
|
<ng-select
|
||||||
|
class="select-custom"
|
||||||
|
[items]="dataBuildingList"
|
||||||
|
[searchable]="true"
|
||||||
|
bindLabel="name"
|
||||||
|
bindValue="id"
|
||||||
|
placeholder="Select Building"
|
||||||
|
[(ngModel)]="buildingSelected"
|
||||||
|
>
|
||||||
|
</ng-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="form-group">
|
||||||
|
<ng-select
|
||||||
|
class="select-custom"
|
||||||
|
[items]="dataMasterCategori"
|
||||||
|
[searchable]="true"
|
||||||
|
bindLabel="name"
|
||||||
|
bindValue="id"
|
||||||
|
placeholder="Select Category"
|
||||||
|
[(ngModel)]="categorySelected"
|
||||||
|
>
|
||||||
|
</ng-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
<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-3 text-left">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="configuration">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-12" *ngFor="let item of filteredRows">
|
||||||
|
<div
|
||||||
|
class="card"
|
||||||
|
style="background-color: #252525; position: relative"
|
||||||
|
>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="media d-flex">
|
||||||
|
<div class="align-self-center">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
background-color: #414F2B;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block"
|
||||||
|
style="color: #bef264 !important"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px">
|
||||||
|
<span
|
||||||
|
class="text-muted"
|
||||||
|
style="color: #ffffff !important"
|
||||||
|
>{{ item.name }}</span
|
||||||
|
>
|
||||||
|
<br />
|
||||||
|
<span
|
||||||
|
class="text-muted"
|
||||||
|
>{{item.category_name}}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;">
|
||||||
|
<ui-switch
|
||||||
|
style="border-color: #bef264 !important"
|
||||||
|
class="switchery"
|
||||||
|
switchColor="black"
|
||||||
|
color="rgb(190, 242, 100)"
|
||||||
|
size="small"
|
||||||
|
[checked]="item.status_id === 2"
|
||||||
|
(change)="switchChanged($event, item)"
|
||||||
|
></ui-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
@ -1,4 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
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({
|
@Component({
|
||||||
selector: 'app-control-device-seemore',
|
selector: 'app-control-device-seemore',
|
||||||
|
|
@ -6,5 +9,138 @@ import { Component } from '@angular/core';
|
||||||
styleUrls: ['./control-device-seemore.component.css']
|
styleUrls: ['./control-device-seemore.component.css']
|
||||||
})
|
})
|
||||||
export class ControlDeviceSeemoreComponent {
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -266,9 +266,9 @@
|
||||||
<span class="float-right text-bold-600" style="color: #ffffff">{{ item.value.toFixed(1) }}%</span>
|
<span class="float-right text-bold-600" style="color: #ffffff">{{ item.value.toFixed(1) }}%</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="d-flex align-items-center justify-content-between">
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
<span style="color: #ffffff; margin-right: 5px;">0%</span>
|
<span style="color: #5F5454; margin-right: 5px;">0%</span>
|
||||||
<ngb-progressbar height="7px" [value]="item.value" style="flex-grow: 1; margin: 0 10px;"></ngb-progressbar>
|
<ngb-progressbar height="7px" [value]="item.value" style="flex-grow: 1; margin: 0 10px;"></ngb-progressbar>
|
||||||
<span style="color: #ffffff; margin-left: 5px;">100%</span>
|
<span style="color: #5F5454; margin-left: 5px;">100%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -289,6 +289,7 @@
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
"
|
"
|
||||||
|
(click)="seeMore(paramsId)"
|
||||||
>
|
>
|
||||||
See More
|
See More
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -171,43 +171,23 @@ export class DetailComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
breadcrumbLink() {
|
breadcrumbLink() {
|
||||||
if (this.mode === "room") {
|
this.breadcrumb = {
|
||||||
this.breadcrumb = {
|
mainlabel: "Energy Monitoring",
|
||||||
mainlabel: "Energy Monitoring",
|
linkBack: "/monitoring",
|
||||||
linkBack: "/monitoring/monitoring-room",
|
isLinkBack: true,
|
||||||
isLinkBack: true,
|
links: [
|
||||||
links: [
|
{
|
||||||
{
|
name: "Dashboard",
|
||||||
name: "Dashboard",
|
isLink: false,
|
||||||
isLink: false,
|
link: "",
|
||||||
link: "",
|
},
|
||||||
},
|
{
|
||||||
{
|
name: "Energy Monitoring",
|
||||||
name: "Energy Monitoring",
|
isLink: false,
|
||||||
isLink: false,
|
link: "",
|
||||||
link: "",
|
},
|
||||||
},
|
],
|
||||||
],
|
};
|
||||||
};
|
|
||||||
} else {
|
|
||||||
this.breadcrumb = {
|
|
||||||
mainlabel: "Energy Monitoring",
|
|
||||||
linkBack: "/monitoring",
|
|
||||||
isLinkBack: true,
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
name: "Dashboard",
|
|
||||||
isLink: false,
|
|
||||||
link: "",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Energy Monitoring",
|
|
||||||
isLink: false,
|
|
||||||
link: "",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
//integrasi
|
//integrasi
|
||||||
dataEnergyMonitoringTopCard(buildingId) {
|
dataEnergyMonitoringTopCard(buildingId) {
|
||||||
|
|
@ -347,6 +327,6 @@ export class DetailComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
seeMore(paramsId){
|
seeMore(paramsId){
|
||||||
this.router.navigate(["/device/control-device"],{ queryParams: { paramsId } });
|
this.router.navigate(["/monitoring/control-device-see-more/", paramsId]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-
|
||||||
component: WaterComponent,
|
component: WaterComponent,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'control-device/:id',
|
path: 'control-device-see-more/:id',
|
||||||
component: ControlDeviceSeemoreComponent,
|
component: ControlDeviceSeemoreComponent,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue