slicing see all control device
This commit is contained in:
parent
60d14b2fce
commit
d22eaa50e1
|
|
@ -1,4 +1,4 @@
|
|||
<div class="app-content content">
|
||||
<div class="app-content content" style="background-color: #FBFBFB;">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
|
|
@ -53,13 +53,13 @@
|
|||
class="text-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
top: 73%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
"
|
||||
>
|
||||
<h3
|
||||
class="display-4 blue-grey darken-1 custom-total"
|
||||
class="custom-total"
|
||||
>
|
||||
{{ data.total }} KWH
|
||||
</h3>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,37 @@
|
|||
:host ::ng-deep .ng-select .ng-select-container {
|
||||
color: #ffffff !important;
|
||||
background-color: #252525 !important;
|
||||
|
||||
/* :host ::ng-deep .ng-select .ng-select-container {
|
||||
color: #242222 !important;
|
||||
background-color: #FBFBFB !important;
|
||||
height: 40px !important;
|
||||
border-radius: 12px;
|
||||
border-radius: 12px !important;
|
||||
} */
|
||||
|
||||
:host ::ng-deep .ng-select .ng-select-container {
|
||||
color: #242222 !important;
|
||||
background-color: #FBFBFB !important;
|
||||
height: 40px !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
|
||||
}
|
||||
|
||||
|
||||
.background-round {
|
||||
background-color: #252525 !important;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #bef264;
|
||||
border-color: #bef264 !important;
|
||||
background-color: #252525 !important;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #BEF264;
|
||||
border-color: #BEF264 !important;
|
||||
}
|
||||
|
||||
.text-custom-name{
|
||||
color: #242222 !important;
|
||||
font-family: "Open Sans", sans-serif !important;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-custom-category{
|
||||
color: #242222 !important;
|
||||
font-family: "Open Sans", sans-serif !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="app-content content" style="background-color: #000000 !important">
|
||||
<div class="app-content content" style="background-color: #FBFBFB;">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<section id="configuration">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card" style="background-color: #FBFBFB !important; box-shadow: none !important;">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
bindValue="id"
|
||||
placeholder="Select Building"
|
||||
[(ngModel)]="buildingSelected"
|
||||
style="width: 100% !important;"
|
||||
>
|
||||
</ng-select>
|
||||
</div>
|
||||
|
|
@ -35,6 +36,7 @@
|
|||
bindValue="id"
|
||||
placeholder="Select Category"
|
||||
[(ngModel)]="categorySelected"
|
||||
style="width: 100% !important;"
|
||||
>
|
||||
</ng-select>
|
||||
</div>
|
||||
|
|
@ -49,6 +51,7 @@
|
|||
bindValue="id"
|
||||
placeholder="Select Status"
|
||||
[(ngModel)]="statusSelected"
|
||||
style="width: 100% !important;"
|
||||
>
|
||||
</ng-select>
|
||||
</div>
|
||||
|
|
@ -60,20 +63,20 @@
|
|||
class="btn btn-outline-success ml-2"
|
||||
(click)="doFilter()"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
border-color: #ffffff !important;
|
||||
background-color: #DDE1E6 !important;
|
||||
border-color: #6B6B6B !important;
|
||||
border-radius: 12px;
|
||||
"
|
||||
[disabled]="spinnerFilterActive"
|
||||
>
|
||||
<i
|
||||
class="la la-search"
|
||||
style="color: #ffffff !important"
|
||||
style="color: #6B6B6B !important"
|
||||
*ngIf="!spinnerFilterActive"
|
||||
></i>
|
||||
<i
|
||||
class="la la-spinner spinner"
|
||||
style="color: #ffffff !important"
|
||||
style="color: #6B6B6B !important"
|
||||
*ngIf="spinnerFilterActive"
|
||||
></i>
|
||||
</button>
|
||||
|
|
@ -82,9 +85,9 @@
|
|||
class="btn btn-outline-success ml-2"
|
||||
(click)="doFilterCancel()"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
border-color: #ffffff !important;
|
||||
color: #ffffff !important;
|
||||
background-color: #FBFBFB !important;
|
||||
border-color: #6B6B6B !important;
|
||||
color: #6B6B6B !important;
|
||||
border-radius: 12px;
|
||||
"
|
||||
>Cancel
|
||||
|
|
@ -103,7 +106,7 @@
|
|||
<div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
|
||||
<div
|
||||
class="card"
|
||||
style="background-color: #252525; position: relative"
|
||||
style="background-color: #DDE1E6; position: relative"
|
||||
>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
|
|
@ -111,7 +114,7 @@
|
|||
<div class="align-self-center">
|
||||
<div
|
||||
style="
|
||||
background-color: #414F2B;
|
||||
background-color: #37A647;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
|
@ -121,29 +124,28 @@
|
|||
"
|
||||
>
|
||||
<i
|
||||
class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block"
|
||||
style="color: #bef264 !important"
|
||||
class="{{item.category_icon}} font-large-1 blue-grey d-block"
|
||||
style="color: #ffffff !important"
|
||||
></i>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<span
|
||||
class="text-muted"
|
||||
style="color: #ffffff !important"
|
||||
class="text-custom-name"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
<br />
|
||||
<span
|
||||
class="text-muted"
|
||||
class="text-custom-category"
|
||||
>{{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"
|
||||
style="border-color: #ffffff !important"
|
||||
class="switchery"
|
||||
switchColor="black"
|
||||
color="rgb(190, 242, 100)"
|
||||
color="rgb(55, 166, 71)"
|
||||
size="small"
|
||||
[checked]="item.status_id === 2"
|
||||
(change)="switchChanged($event, item)"
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export class ControlDeviceSeemoreComponent {
|
|||
filterDevices(devices: any[]): any[] {
|
||||
return devices.filter((device) =>
|
||||
device.mapping.some(
|
||||
(map) => map.name.startsWith("switch") && map.type === "Boolean"
|
||||
(map) => map.code.startsWith("switch") && map.type === "Boolean"
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -106,13 +106,17 @@ export class ControlDeviceSeemoreComponent {
|
|||
this.dataMasterCategori = dataCategory.filter(
|
||||
(item) => item.statusName.toLowerCase() === "aktif"
|
||||
);
|
||||
this.dataMasterStatus = dataStatus.filter((item) => item.statusName.toLowerCase() === "aktif");
|
||||
this.dataMasterStatus = dataStatus.filter((item) => item.statusName.toLowerCase() === "aktif" || item.status === "71");
|
||||
});
|
||||
}
|
||||
|
||||
dataListBuilding() {
|
||||
this.monitoringApiService.getBuildingList().subscribe((data) => {
|
||||
this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif");
|
||||
console.log(data);
|
||||
|
||||
this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif" || item.status_id === 71);
|
||||
console.log(this.dataBuildingList);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -163,8 +167,8 @@ export class ControlDeviceSeemoreComponent {
|
|||
|
||||
switchChanged(ev, data) {
|
||||
const requestData = {
|
||||
device_id: data.device_id,
|
||||
switch: data.mapping[0].switch,
|
||||
id: data.id,
|
||||
code: data.mapping[0].code,
|
||||
value: ev,
|
||||
command_type: "on_off",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
|
|||
import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-device-seemore.component';
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-interceptor.service';
|
||||
import { ClipboardModule } from 'ngx-clipboard';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -59,6 +60,7 @@ import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-int
|
|||
NgxMasonryModule,
|
||||
UiSwitchModule,
|
||||
NgSelectModule,
|
||||
ClipboardModule,
|
||||
NgxEchartsModule.forRoot({
|
||||
echarts: () => import('echarts')
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in New Issue