fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slicing device

This commit is contained in:
Fuzi_fauzia 2024-07-16 15:04:12 +07:00
parent d22eaa50e1
commit efb6ae0060
5 changed files with 147 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/content/hemat-app/device/device-control/device-control.component.css
View File

@ -1,15 +1,29 @@
:host ::ng-deep .ng-select .ng-select-container { :host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important; color: #242222 !important;
background-color: #252525 !important; background-color: #FBFBFB !important;
height: 40px !important; height: 40px !important;
border-radius: 12px !important; /* Menambahkan border-radius */ border-radius: 12px !important;
box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
} }
.background-round { .background-round {
background-color: #252525 !important; background-color: #252525 !important;
padding: 8px; padding: 8px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #BEF264; border: 2px solid #BEF264;
border-color: #BEF264 !important; 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;
} }

61
src/app/content/hemat-app/device/device-control/device-control.component.html
View File

@ -1,4 +1,4 @@
<div class="app-content content" style="background-color: #000000 !important;"> <div class="app-content content" style="background-color: #fbfbfb !important">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,7 +7,7 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-12"> <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-content">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@ -21,7 +21,7 @@
bindValue="id" bindValue="id"
placeholder="Select Building" placeholder="Select Building"
[(ngModel)]="buildingSelected" [(ngModel)]="buildingSelected"
style="width: 100% !important;" style="width: 100% !important"
> >
</ng-select> </ng-select>
</div> </div>
@ -61,20 +61,20 @@
class="btn btn-outline-success ml-2" class="btn btn-outline-success ml-2"
(click)="doFilter()" (click)="doFilter()"
style=" style="
background-color: #252525 !important; background-color: #DDE1E6 !important;
border-color: #ffffff !important; border-color: #6B6B6B !important;
border-radius: 12px; border-radius: 12px;
" "
[disabled]="spinnerFilterActive" [disabled]="spinnerFilterActive"
> >
<i <i
class="la la-search" class="la la-search"
style="color: #ffffff !important" style="color: #6B6B6B !important"
*ngIf="!spinnerFilterActive" *ngIf="!spinnerFilterActive"
></i> ></i>
<i <i
class="la la-spinner spinner" class="la la-spinner spinner"
style="color: #ffffff !important" style="color: #6B6B6B !important"
*ngIf="spinnerFilterActive" *ngIf="spinnerFilterActive"
></i> ></i>
</button> </button>
@ -83,9 +83,9 @@
class="btn btn-outline-success ml-2" class="btn btn-outline-success ml-2"
(click)="doCancelFilter()" (click)="doCancelFilter()"
style=" style="
background-color: #252525 !important; background-color: #FBFBFB !important;
border-color: #ffffff !important; border-color: #6B6B6B !important;
color: #ffffff; color: #6B6B6B;
border-radius: 12px; border-radius: 12px;
" "
> >
@ -103,10 +103,18 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-12" *ngIf="filteredRows?.length === 0"> <div class="col-12" *ngIf="filteredRows?.length === 0">
<div class="card" style="background-color: #252525; min-height: 200px;"> <div
class="card"
style="
background-color: #fbfbfb !important;
box-shadow: none !important;
"
>
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<p class="text-center" style="color: #ffffff;">No data available</p> <p class="text-center" style="color: #242222">
No data available
</p>
</div> </div>
</div> </div>
</div> </div>
@ -114,7 +122,7 @@
<div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows"> <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
<div <div
class="card" class="card"
style="background-color: #252525; position: relative" style="background-color: #dde1e6; position: relative"
> >
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
@ -122,7 +130,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414F2B; background-color: #37a647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -131,24 +139,25 @@
justify-content: center; justify-content: center;
" "
> >
<i class="{{item.category_icon}} font-large-1 blue-grey d-block" <i
style="color: #bef264 !important" class="{{
item.category_icon
}} font-large-1 blue-grey d-block"
style="color: #ffffff !important"
></i> ></i>
</div> </div>
<div style="margin-top: 10px"> <div style="margin-top: 10px">
<span <span class="text-custom-name">{{ item.name }}</span>
class="text-muted"
style="color: #ffffff !important"
>{{ item.name }}</span
>
<br /> <br />
<span <span class="text-custom-category">{{
class="text-muted" item.category_name
>{{item.category_name}}</span }}</span>
>
</div> </div>
</div> </div>
<div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;"> <div
class="ui-switch-container"
style="position: absolute; bottom: 10px; right: 10px"
>
<ui-switch <ui-switch
style="border-color: #bef264 !important" style="border-color: #bef264 !important"
class="switchery" class="switchery"

36
src/app/content/hemat-app/device/device.component.css
View File

@ -277,13 +277,15 @@
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer { :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
background: #252525; background: #DDE1E6;
color: #ededed; color: #242222;
margin-top: -1px; margin-top: -1px;
overflow: inherit; overflow: inherit;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header { :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
background: #DDE1E6;
color: #242222;
font-weight: bold; font-weight: bold;
height: unset !important; height: unset !important;
overflow: inherit; overflow: inherit;
@ -311,20 +313,38 @@
} }
:host ::ng-deep .ng-select .ng-select-container { :host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important; color: #242222 !important;
background-color: #252525 !important; background-color: #FBFBFB !important;
height: 40px !important; height: 40px !important;
border-radius: 12px; border-radius: 12px !important;
box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
} }
:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input { :host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
color: #ffffff !important; color: #242222 !important;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row { :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */ background-color: #FBFBFB; /* Black color for table rows */
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover { :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
background-color: #1a1a1a; /* Darker black for hover effect */ background-color: #DDE1E6; /* Darker black for hover effect */
} }
.text-custom-label{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 16px;
}
.text-custom-data{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 24px;
font-weight: 700;
}
.style-custom-label{
color: #242222 !important;
}

114
src/app/content/hemat-app/device/device.component.html
View File

@ -1,4 +1,4 @@
<div class="app-content content" style="background-color: #000000 !important"> <div class="app-content content" style="background-color: #FBFBFB !important">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,22 +7,22 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-lg-4 col-12"> <div class="col-lg-4 col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !important; box-shadow: none !important;">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
<div class="media-body text-left"> <div class="media-body text-left">
<h6 class="text-muted" style="color: #ffffff !important"> <h6 class="text-custom-label">
Total Device Total Device
</h6> </h6>
<h3 style="color: #ffffff !important"> <h3 class="text-custom-data">
{{ summaryTotal?.length }} {{ summaryTotal?.length }}
</h3> </h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414f2b; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -33,7 +33,7 @@
> >
<i <i
class="ri-device-line primary font-large-1 float-right" class="ri-device-line primary font-large-1 float-right"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
</div> </div>
@ -43,20 +43,20 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-12"> <div class="col-lg-4 col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !important; box-shadow: none !important;">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
<div class="media-body text-left"> <div class="media-body text-left">
<h6 class="text-light" style="color: #ffffff !important"> <h6 class="text-custom-label">
Total Device Active Total Device Active
</h6> </h6>
<h3 style="color: #ffffff !important">{{ totalOn }}</h3> <h3 class="text-custom-data">{{ totalOn }}</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414f2b; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -67,7 +67,7 @@
> >
<i <i
class="feather ft-wifi primary font-large-1 float-right" class="feather ft-wifi primary font-large-1 float-right"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
</div> </div>
@ -77,20 +77,20 @@
</div> </div>
</div> </div>
<div class="col-lg-4 col-12"> <div class="col-lg-4 col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !important; box-shadow: none !important;">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
<div class="media-body text-left"> <div class="media-body text-left">
<h6 class="text-muted" style="color: #ffffff !important"> <h6 class="text-custom-label">
Total Device Non-Active Total Device Non-Active
</h6> </h6>
<h3 style="color: #ffffff !important">{{ totalOff }}</h3> <h3 class="text-custom-data">{{ totalOff }}</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414f2b; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -101,7 +101,7 @@
> >
<i <i
class="feather ft-wifi-off primary font-large-1 float-right" class="feather ft-wifi-off primary font-large-1 float-right"
style="color: #bef264 !important" style="color: #ffffff !important"
></i> ></i>
</div> </div>
</div> </div>
@ -116,7 +116,7 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #FBFBFB !important; box-shadow: none;">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="row mb-2"> <div class="row mb-2">
@ -172,31 +172,31 @@
class="btn btn-outline-success ml-2" class="btn btn-outline-success ml-2"
(click)="doFilter()" (click)="doFilter()"
style=" style="
background-color: #252525 !important; background-color: #DDE1E6 !important;
border-color: #ffffff !important; border-color: #242222 !important;
border-radius: 12px; border-radius: 12px;
" "
[disabled]="spinnerFilterActive || newDeviceActive" [disabled]="spinnerFilterActive || newDeviceActive"
> >
<i <i
class="la la-search" class="la la-search"
style="color: #ffffff !important" style="color: #242222 !important"
*ngIf="!spinnerFilterActive" *ngIf="!spinnerFilterActive"
></i> ></i>
<i <i
class="la la-spinner spinner" class="la la-spinner spinner"
style="color: #ffffff !important" style="color: #242222 !important"
*ngIf="spinnerFilterActive" *ngIf="spinnerFilterActive"
></i> ></i>
</button> </button>
<button <button
type="button" type="button"
class="btn btn-outline-success ml-2" class="btn ml-2"
(click)="doCancelFilter()" (click)="doCancelFilter()"
style=" style="
background-color: #252525 !important; background-color: #FBFBFB !important;
border-color: #ffffff !important; border-color: #242222 !important;
color: #ffffff; color: #242222;
border-radius: 12px; border-radius: 12px;
" "
> >
@ -213,9 +213,9 @@
[disabled]="spinnerActive" [disabled]="spinnerActive"
(click)="addDevice()" (click)="addDevice()"
style=" style="
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
> >
<i <i
@ -233,9 +233,9 @@
[disabled]="spinnerExportActive" [disabled]="spinnerExportActive"
(click)="exportDevice()" (click)="exportDevice()"
style=" style="
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
> >
<i <i
@ -257,9 +257,9 @@
[disabled]="spinnerNewDeviceActive" [disabled]="spinnerNewDeviceActive"
(click)="newDevice()" (click)="newDevice()"
style=" style="
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
> >
<i <i
@ -279,9 +279,9 @@
[disabled]="spinnerNewDeviceActive" [disabled]="spinnerNewDeviceActive"
(click)="allDevice()" (click)="allDevice()"
style=" style="
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
> >
<i <i
@ -328,7 +328,7 @@
[minWidth]="20" [minWidth]="20"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Image</span> <span class="style-custom-label">Image</span>
</ng-template> </ng-template>
<ng-template ngx-datatable-cell-template let-row="row"> <ng-template ngx-datatable-cell-template let-row="row">
<span class="avatar avatar-sm rounded-circle"> <span class="avatar avatar-sm rounded-circle">
@ -342,7 +342,7 @@
[minWidth]="150" [minWidth]="150"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important" <span class="style-custom-label"
>Device Name</span >Device Name</span
> >
</ng-template> </ng-template>
@ -350,7 +350,7 @@
let-value="value" let-value="value"
ngx-datatable-cell-template ngx-datatable-cell-template
> >
<p style="color: #ffffff !important">{{ value }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -359,7 +359,7 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important" <span class="style-custom-label"
>Building</span >Building</span
> >
</ng-template> </ng-template>
@ -367,7 +367,7 @@
let-value="value" let-value="value"
ngx-datatable-cell-template ngx-datatable-cell-template
> >
<p style="color: #ffffff !important">{{ value }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -376,7 +376,7 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important" <span class="style-custom-label"
>Category</span >Category</span
> >
</ng-template> </ng-template>
@ -384,7 +384,7 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important"> <p class="style-custom-label">
{{ value }} {{ value }}
</p> </p>
</ng-template> </ng-template>
@ -395,13 +395,13 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Watt</span> <span class="style-custom-label">Watt</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important">{{ value }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -410,13 +410,13 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Type</span> <span class="style-custom-label">Type</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important"> <p class="style-custom-label">
{{ value }} {{ value }}
</p> </p>
</ng-template> </ng-template>
@ -427,13 +427,13 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Voltage</span> <span class="style-custom-label">Voltage</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important"> <p class="style-custom-label">
{{ value }} {{ value }}
</p> </p>
</ng-template> </ng-template>
@ -461,7 +461,7 @@
[minWidth]="150" [minWidth]="150"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Actions</span> <span class="style-custom-label">Actions</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
@ -471,27 +471,27 @@
<button <button
class="btn btn-sm btn-info mr-1" class="btn btn-sm btn-info mr-1"
style=" style="
background-color: #000000 !important; background-color: #DDE1E6 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
" "
(click)="viewRow(row)" (click)="viewRow(row)"
> >
<i <i
class="ficon feather ft-eye" class="ficon feather ft-eye"
style="color: #bef264 !important" style="color: #37A647 !important"
></i> ></i>
</button> </button>
<button <button
class="btn btn-sm btn-warning mr-1" class="btn btn-sm btn-warning mr-1"
style=" style="
background-color: #000000 !important; background-color: #DDE1E6 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
" "
(click)="editRow(row)" (click)="editRow(row)"
> >
<i <i
class="ficon feather ft-edit" class="ficon feather ft-edit"
style="color: #bef264 !important" style="color: #37A647 !important"
></i> ></i>
</button> </button>
<!-- <button <!-- <button

9
src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
View File

@ -103,6 +103,15 @@
</section> </section>
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-12" *ngIf="filteredRows?.length === 0">
<div class="card" style="background-color: #DDE1E6; min-height: 200px;">
<div class="card-content">
<div class="card-body">
<p class="text-center" style="color: #242222;">No data available</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows"> <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
<div <div
class="card" class="card"