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,11 +1,12 @@
:host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important;
background-color: #252525 !important;
color: #242222 !important;
background-color: #FBFBFB !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-color: #252525 !important;
padding: 8px;
@ -13,3 +14,16 @@
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;
}

63
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-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,7 +21,7 @@
bindValue="id"
placeholder="Select Building"
[(ngModel)]="buildingSelected"
style="width: 100% !important;"
style="width: 100% !important"
>
</ng-select>
</div>
@ -61,20 +61,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>
@ -83,9 +83,9 @@
class="btn btn-outline-success ml-2"
(click)="doCancelFilter()"
style="
background-color: #252525 !important;
border-color: #ffffff !important;
color: #ffffff;
background-color: #FBFBFB !important;
border-color: #6B6B6B !important;
color: #6B6B6B;
border-radius: 12px;
"
>
@ -103,10 +103,18 @@
<section id="configuration">
<div class="row">
<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-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>
@ -114,7 +122,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">
@ -122,7 +130,7 @@
<div class="align-self-center">
<div
style="
background-color: #414F2B;
background-color: #37a647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -131,24 +139,25 @@
justify-content: center;
"
>
<i class="{{item.category_icon}} font-large-1 blue-grey d-block"
style="color: #bef264 !important"
<i
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"
>{{ item.name }}</span
>
<span class="text-custom-name">{{ item.name }}</span>
<br />
<span
class="text-muted"
>{{item.category_name}}</span
<span class="text-custom-category">{{
item.category_name
}}</span>
</div>
</div>
<div
class="ui-switch-container"
style="position: absolute; bottom: 10px; right: 10px"
>
</div>
</div>
<div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;">
<ui-switch
style="border-color: #bef264 !important"
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 {
background: #252525;
color: #ededed;
background: #DDE1E6;
color: #242222;
margin-top: -1px;
overflow: inherit;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
background: #DDE1E6;
color: #242222;
font-weight: bold;
height: unset !important;
overflow: inherit;
@ -311,20 +313,38 @@
}
:host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important;
background-color: #252525 !important;
color: #242222 !important;
background-color: #FBFBFB !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 {
color: #ffffff !important;
color: #242222 !important;
}
: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 {
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-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,22 +7,22 @@
<section id="configuration">
<div class="row">
<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-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted" style="color: #ffffff !important">
<h6 class="text-custom-label">
Total Device
</h6>
<h3 style="color: #ffffff !important">
<h3 class="text-custom-data">
{{ summaryTotal?.length }}
</h3>
</div>
<div class="align-self-center">
<div
style="
background-color: #414f2b;
background-color: #37A647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -33,7 +33,7 @@
>
<i
class="ri-device-line primary font-large-1 float-right"
style="color: #bef264 !important"
style="color: #ffffff !important"
></i>
</div>
</div>
@ -43,20 +43,20 @@
</div>
</div>
<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-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-light" style="color: #ffffff !important">
<h6 class="text-custom-label">
Total Device Active
</h6>
<h3 style="color: #ffffff !important">{{ totalOn }}</h3>
<h3 class="text-custom-data">{{ totalOn }}</h3>
</div>
<div class="align-self-center">
<div
style="
background-color: #414f2b;
background-color: #37A647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -67,7 +67,7 @@
>
<i
class="feather ft-wifi primary font-large-1 float-right"
style="color: #bef264 !important"
style="color: #ffffff !important"
></i>
</div>
</div>
@ -77,20 +77,20 @@
</div>
</div>
<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-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted" style="color: #ffffff !important">
<h6 class="text-custom-label">
Total Device Non-Active
</h6>
<h3 style="color: #ffffff !important">{{ totalOff }}</h3>
<h3 class="text-custom-data">{{ totalOff }}</h3>
</div>
<div class="align-self-center">
<div
style="
background-color: #414f2b;
background-color: #37A647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -101,7 +101,7 @@
>
<i
class="feather ft-wifi-off primary font-large-1 float-right"
style="color: #bef264 !important"
style="color: #ffffff !important"
></i>
</div>
</div>
@ -116,7 +116,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;">
<div class="card-content">
<div class="card-body">
<div class="row mb-2">
@ -172,31 +172,31 @@
class="btn btn-outline-success ml-2"
(click)="doFilter()"
style="
background-color: #252525 !important;
border-color: #ffffff !important;
background-color: #DDE1E6 !important;
border-color: #242222 !important;
border-radius: 12px;
"
[disabled]="spinnerFilterActive || newDeviceActive"
>
<i
class="la la-search"
style="color: #ffffff !important"
style="color: #242222 !important"
*ngIf="!spinnerFilterActive"
></i>
<i
class="la la-spinner spinner"
style="color: #ffffff !important"
style="color: #242222 !important"
*ngIf="spinnerFilterActive"
></i>
</button>
<button
type="button"
class="btn btn-outline-success ml-2"
class="btn ml-2"
(click)="doCancelFilter()"
style="
background-color: #252525 !important;
border-color: #ffffff !important;
color: #ffffff;
background-color: #FBFBFB !important;
border-color: #242222 !important;
color: #242222;
border-radius: 12px;
"
>
@ -213,9 +213,9 @@
[disabled]="spinnerActive"
(click)="addDevice()"
style="
background-color: #bef264 !important;
border-color: #bef264 !important;
color: #000000 !important;
background-color: #37A647 !important;
border-color: #37A647 !important;
color: #ffffff !important;
"
>
<i
@ -233,9 +233,9 @@
[disabled]="spinnerExportActive"
(click)="exportDevice()"
style="
background-color: #bef264 !important;
border-color: #bef264 !important;
color: #000000 !important;
background-color: #37A647 !important;
border-color: #37A647 !important;
color: #ffffff !important;
"
>
<i
@ -257,9 +257,9 @@
[disabled]="spinnerNewDeviceActive"
(click)="newDevice()"
style="
background-color: #bef264 !important;
border-color: #bef264 !important;
color: #000000 !important;
background-color: #37A647 !important;
border-color: #37A647 !important;
color: #ffffff !important;
"
>
<i
@ -279,9 +279,9 @@
[disabled]="spinnerNewDeviceActive"
(click)="allDevice()"
style="
background-color: #bef264 !important;
border-color: #bef264 !important;
color: #000000 !important;
background-color: #37A647 !important;
border-color: #37A647 !important;
color: #ffffff !important;
"
>
<i
@ -328,7 +328,7 @@
[minWidth]="20"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Image</span>
<span class="style-custom-label">Image</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row">
<span class="avatar avatar-sm rounded-circle">
@ -342,7 +342,7 @@
[minWidth]="150"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important"
<span class="style-custom-label"
>Device Name</span
>
</ng-template>
@ -350,7 +350,7 @@
let-value="value"
ngx-datatable-cell-template
>
<p style="color: #ffffff !important">{{ value }}</p>
<p class="style-custom-label">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@ -359,7 +359,7 @@
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important"
<span class="style-custom-label"
>Building</span
>
</ng-template>
@ -367,7 +367,7 @@
let-value="value"
ngx-datatable-cell-template
>
<p style="color: #ffffff !important">{{ value }}</p>
<p class="style-custom-label">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@ -376,7 +376,7 @@
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important"
<span class="style-custom-label"
>Category</span
>
</ng-template>
@ -384,7 +384,7 @@
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">
<p class="style-custom-label">
{{ value }}
</p>
</ng-template>
@ -395,13 +395,13 @@
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Watt</span>
<span class="style-custom-label">Watt</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">{{ value }}</p>
<p class="style-custom-label">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@ -410,13 +410,13 @@
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Type</span>
<span class="style-custom-label">Type</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">
<p class="style-custom-label">
{{ value }}
</p>
</ng-template>
@ -427,13 +427,13 @@
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Voltage</span>
<span class="style-custom-label">Voltage</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
<p style="color: #ffffff !important">
<p class="style-custom-label">
{{ value }}
</p>
</ng-template>
@ -461,7 +461,7 @@
[minWidth]="150"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Actions</span>
<span class="style-custom-label">Actions</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
@ -471,27 +471,27 @@
<button
class="btn btn-sm btn-info mr-1"
style="
background-color: #000000 !important;
border-color: #bef264 !important;
background-color: #DDE1E6 !important;
border-color: #37A647 !important;
"
(click)="viewRow(row)"
>
<i
class="ficon feather ft-eye"
style="color: #bef264 !important"
style="color: #37A647 !important"
></i>
</button>
<button
class="btn btn-sm btn-warning mr-1"
style="
background-color: #000000 !important;
border-color: #bef264 !important;
background-color: #DDE1E6 !important;
border-color: #37A647 !important;
"
(click)="editRow(row)"
>
<i
class="ficon feather ft-edit"
style="color: #bef264 !important"
style="color: #37A647 !important"
></i>
</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 id="configuration">
<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="card"