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

penyasuaian UI dashboard

This commit is contained in:
Fuzi_fauzia 2024-06-13 23:57:07 +07:00
parent 863a493b66
commit fb1ba66cd0
6 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.ts
View File

@ -54,7 +54,7 @@ export class AddEditMasterBuildingComponent {
owner: this.dataRow.owner, owner: this.dataRow.owner,
address: this.dataRow.address, address: this.dataRow.address,
phone: this.dataRow.phone, phone: this.dataRow.phone,
kwh: this.dataRow.phone, kwh: this.dataRow.kwh,
}); });
} }
@ -65,8 +65,10 @@ export class AddEditMasterBuildingComponent {
(item) => item.name === "master_status" (item) => item.name === "master_status"
); );
this.dataStatus = this.dataMasterStatus.headerDetailParam; this.dataStatus = this.dataMasterStatus.headerDetailParam;
console.log(this.dataStatus);
this.filteredDataStatus = this.dataStatus.filter( this.filteredDataStatus = this.dataStatus.filter(
(item) => item.status === "1" (item) => item.status === "2"
); );
}); });
} }

21
src/app/content/hemat-app/monitoring/building/building.component.css
View File

@ -1,3 +1,15 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600&display=swap');
.open-sans{
font-family: "Open Sans", sans-serif !important;
color: #ffffff !important;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
font-variation-settings:
"wdth" 100;
}
:host ::ng-deep .gap_fl_btn { :host ::ng-deep .gap_fl_btn {
margin: 0 0.3rem; margin: 0 0.3rem;
} }
@ -8,12 +20,12 @@
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut { :host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
stroke: #BEF264; stroke: #BEF264;
stroke-width: 30px !important; stroke-width: 35px !important;
} }
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut { :host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
stroke: #ffffff; stroke: #ffffff;
stroke-width: 30px !important; stroke-width: 35px !important;
} }
.btn-no-hover { .btn-no-hover {
@ -24,3 +36,8 @@
background-color: transparent !important; background-color: transparent !important;
color: inherit !important; color: inherit !important;
} }
.btn-primary.round:hover {
color: #BEF264 !important;
border-color: #BEF264 !important;
}

22
src/app/content/hemat-app/monitoring/building/building.component.html
View File

@ -21,7 +21,7 @@
class="col-xl-4 col-md-6 col-12" class="col-xl-4 col-md-6 col-12"
*ngFor="let data of filteredRows" *ngFor="let data of filteredRows"
> >
<div class="card" style="background-color: #252525 !important;"> <div class="card" style="background-color: #252525 !important; border-radius: 10px;">
<div class="card-header mb-2" style="background-color: #252525 !important;"> <div class="card-header mb-2" style="background-color: #252525 !important;">
<div class="row"> <div class="row">
<div class="col-12 text-center"> <div class="col-12 text-center">
@ -32,8 +32,8 @@
Building Building
</h4> </h4>
<h3 <h3
class="text-muted mb-0" class="text-muted mb-0 open-sans"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
> >
{{ data.build_name ? data.build_name : data.name }} {{ data.build_name ? data.build_name : data.name }}
</h3> </h3>
@ -57,36 +57,36 @@
class="text-center" class="text-center"
style=" style="
position: absolute; position: absolute;
top: 65%; top: 70%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
" "
> >
<h3 <h3
class="display-4 blue-grey darken-1" class="display-4 open-sans"
style="font-size: 2em; color: #ffffff !important;" style="font-size: 40px;"
> >
{{ data.total }} kWh {{ data.total }} kWh
</h3> </h3>
<h6 style="color: #ffffff !important;">Consumption</h6> <h6 style="color: #ffffff !important; font-size: 20px;">Consumption</h6>
</div> </div>
<div class="form-group text-center"> <div class="form-group text-center">
<button <button
type="button" type="button"
class="btn btn-primary round btn-min-width mr-1 mb-1" class="btn btn-primary round btn-min-width mr-5 mb-1"
(click)="viewRoom(data)" (click)="viewRoom(data)"
ngbTooltip="Room" ngbTooltip="Room"
style="background-color: #ffffff !important; color: #000000;" style="background-color: #ffffff !important; color: #000000; width: 163px;"
> >
Room Room
</button> </button>
<button <button
type="button" type="button"
class="btn btn-success round btn-min-width mr-1 mb-1" class="btn btn-success round btn-min-width mb-1"
(click)="viewRow(data)" (click)="viewRow(data)"
ngbTooltip="Detail" ngbTooltip="Detail"
style="background-color: #BEF264 !important; color: #000000;" style="background-color: #BEF264 !important; color: #000000; width: 163px;"
> >
Detail Detail
</button> </button>

2
src/app/content/hemat-app/monitoring/building/building.component.ts
View File

@ -41,7 +41,7 @@ export class BuildingComponent {
fullwidth: true, fullwidth: true,
height: "300px", height: "300px",
donut: true, donut: true,
donutWidth: 100, donutWidth: 50,
startAngle: 270, startAngle: 270,
total: 200, total: 200,
showLabel: false, showLabel: false,

8
src/app/content/hemat-app/monitoring/detail/detail.component.css
View File

@ -83,4 +83,12 @@ canvas {
:host ::ng-deep .progress-bar { :host ::ng-deep .progress-bar {
background-color: #BEF264 !important; background-color: #BEF264 !important;
}
.background-round {
background-color: #252525 !important;
padding: 8px;
border-radius: 50%;
border: 2px solid #BEF264;
border-color: #BEF264 !important;
} }

3
src/app/content/hemat-app/monitoring/detail/detail.component.html
View File

@ -227,7 +227,7 @@
<div class="col-6" *ngFor="let item of deviceCategory?.usesd"> <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
<div <div
class="card overflow-hidden" class="card overflow-hidden"
style="background-color: #252525 !important" style="background-color: #000000 !important"
> >
<div class="card-content"> <div class="card-content">
<div class="card-body cleartfix"> <div class="card-body cleartfix">
@ -237,7 +237,6 @@
class="icon-bulb background-round info font-large-2 mr-2" class="icon-bulb background-round info font-large-2 mr-2"
style=" style="
color: #BFF264 !important; color: #BFF264 !important;
background-color: #252525 !important;
" "
></i> ></i>
</div> </div>