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

View File

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

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 {
margin: 0 0.3rem;
}
@ -8,12 +20,12 @@
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
stroke: #BEF264;
stroke-width: 30px !important;
stroke-width: 35px !important;
}
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
stroke: #ffffff;
stroke-width: 30px !important;
stroke-width: 35px !important;
}
.btn-no-hover {
@ -24,3 +36,8 @@
background-color: transparent !important;
color: inherit !important;
}
.btn-primary.round:hover {
color: #BEF264 !important;
border-color: #BEF264 !important;
}

View File

@ -21,7 +21,7 @@
class="col-xl-4 col-md-6 col-12"
*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="row">
<div class="col-12 text-center">
@ -32,8 +32,8 @@
Building
</h4>
<h3
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
class="text-muted mb-0 open-sans"
>
{{ data.build_name ? data.build_name : data.name }}
</h3>
@ -57,36 +57,36 @@
class="text-center"
style="
position: absolute;
top: 65%;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
"
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em; color: #ffffff !important;"
class="display-4 open-sans"
style="font-size: 40px;"
>
{{ data.total }} kWh
</h3>
<h6 style="color: #ffffff !important;">Consumption</h6>
<h6 style="color: #ffffff !important; font-size: 20px;">Consumption</h6>
</div>
<div class="form-group text-center">
<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)"
ngbTooltip="Room"
style="background-color: #ffffff !important; color: #000000;"
style="background-color: #ffffff !important; color: #000000; width: 163px;"
>
Room
</button>
<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)"
ngbTooltip="Detail"
style="background-color: #BEF264 !important; color: #000000;"
style="background-color: #BEF264 !important; color: #000000; width: 163px;"
>
Detail
</button>

View File

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

View File

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

View File

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