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

penyesuaian UI sesuai Figma

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-06-12 15:17:08 +07:00
parent ef118ad33e
commit 468045384e
25 changed files with 1419 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,33 +7,13 @@
}
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
stroke: #01a32f;
stroke-width: 20px !important;
stroke: #BEF264;
stroke-width: 30px !important;
}
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
stroke: #757575;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
stroke: #dcdf03;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
stroke: #757575;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
stroke: #d50c08;
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart3 .ct-series-b .ct-slice-donut {
stroke: #757575;
stroke-width: 20px !important;
stroke: #ffffff;
stroke-width: 30px !important;
}
.btn-no-hover {

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

@@ -1,4 +1,4 @@
<div class="app-content content">
<div class="app-content content" style="background-color: #000000 !important;">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -21,35 +21,28 @@
class="col-xl-4 col-md-6 col-12"
*ngFor="let data of filteredRows"
>
<div class="card">
<div class="card-header mb-2">
<div class="card" style="background-color: #252525 !important;">
<div class="card-header mb-2" style="background-color: #252525 !important;">
<div class="row">
<div class="col-12 text-center">
<h4
class="text-muted mb-1 font-weight-bold"
style="font-family: Montserrat, sans-serif"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
>
Building Name
</h4>
<h3
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
>
{{ data.build_name ? data.build_name : data.name }}
</h3>
</div>
</div>
<hr style="border-top: 3px solid #100a0a" />
<hr style="border-top: 4px solid #ffffff; border-color: #ffffff !important;" />
</div>
<div class="card-content">
<div
[ngClass]="{
'donut-chart1': data.donut.series[0] <= 50,
'donut-chart2':
data.donut.series[0] > 50 && data.donut.series[0] < 75,
'donut-chart3': data.donut.series[0] >= 75
}"
>
<div class="donut-chart1">
<x-chartist
*ngIf="data"
[data]="data.donut"
@@ -71,11 +64,11 @@
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em"
style="font-size: 2em; color: #ffffff !important;"
>
{{ data.total }} kWh
</h3>
<h6>Consumtion</h6>
<h6 style="color: #ffffff !important;">Consumtion</h6>
</div>
<div class="form-group text-center">
@@ -83,8 +76,8 @@
type="button"
class="btn btn-primary round btn-min-width mr-1 mb-1"
(click)="viewRoom(data)"
triggers="hover:click:hover"
ngbTooltip="Room"
style="background-color: #ffffff !important; color: #000000;"
>
Room
</button>
@@ -92,8 +85,8 @@
type="button"
class="btn btn-success round btn-min-width mr-1 mb-1"
(click)="viewRow(data)"
triggers="hover:click:hover"
ngbTooltip="Detail"
style="background-color: #BEF264 !important; color: #000000;"
>
Detail
</button>

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

@@ -55,14 +55,14 @@ canvas {
stroke-width: 20px !important;
}
:host ::ng-deep .donut-chart2 {
/* :host ::ng-deep .donut-chart2 {
-webkit-filter: drop-shadow(0px 10px 11px rgba(187,187,187)) !important;
filter: drop-shadow(0px 10px 11px rgba(187,187,187));
}
} */
:host ::ng-deep .donut-chart2 .ct-label {
fill: #111010;
color: rgba(0, 0, 0, 0.4);
fill: #ffffff;
color: rgb(255, 255, 255);
font-size: 1.75rem;
line-height: 1;
}
@@ -80,3 +80,7 @@ canvas {
:host ::ng-deep .sp-line-total-cost .ct-point{
stroke-width: 0px;
}
:host ::ng-deep .progress-bar {
background-color: #BEF264 !important;
}

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

@@ -1,4 +1,4 @@
<div class="app-content content">
<div class="app-content content" style="background-color: #000000 !important">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -6,12 +6,12 @@
<div class="content-body">
<div class="row">
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h5>Electricity</h5>
<h5 style="color: #ffffff">Electricity</h5>
<h3 class="danger">{{ topCard?.kwh_consumption }} Kwh</h3>
</div>
<div class="align-self-center">
@@ -23,12 +23,12 @@
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h5>Water</h5>
<h5 style="color: #ffffff">Water</h5>
<h3 class="success">{{ topCard?.water_consumption }}</h3>
</div>
<div class="align-self-center">
@@ -42,12 +42,12 @@
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h5>Device</h5>
<h5 style="color: #ffffff">Device</h5>
<h3 class="warning">{{ topCard?.total_device }}</h3>
</div>
<div class="align-self-center">
@@ -59,12 +59,12 @@
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<div class="card">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h5>Room</h5>
<h5 style="color: #ffffff">Room</h5>
<h3 class="info">{{ topCard?.total_room }}</h3>
</div>
<div class="align-self-center">
@@ -78,50 +78,61 @@
</div>
<div class="row">
<div class="col-12">
<div class="card">
<section id="chartjs-bar-charts">
<div class="row">
<div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
<m-card [options]="options">
<ng-container mCardHeaderTitle> </ng-container>
<ng-container mCardBody>
<div class="z" style="display: block">
<canvas
class="barchart"
height="328"
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
>
</canvas>
</div>
</ng-container>
</m-card>
</div>
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
<canvas
style="
background-color: #252525 !important;
border-color: #252525;
color: #ffffff;
"
class="barchart"
height="328"
width="1900"
baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
chartType="bar"
>
</canvas>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">Summary Cost</h4>
<div class="card" style="background-color: #252525 !important">
<div
class="card-header"
style="background-color: #252525 !important"
>
<h4 class="card-title text-center" style="color: #ffffff">
Summary Cost
</h4>
<hr
style="
border-top: 4px solid #ffffff;
border-color: #ffffff !important;
"
/>
</div>
<div class="card-body">
<div class="card-block">
<div class="text-center" style="height: 150px !important">
<h2 class="font-large-3 text-bold-400">
<h2 class="font-large-3 text-bold-400" style="color: #ffffff">
{{
summaryCost?.summary_cost
| currency : "Rp " : "symbol" : "1.0-0"
}}
</h2>
<p class="blue-grey lighten-2 mb-0 mt-2">
<p
class="blue-grey lighten-2 mb-0 mt-2"
style="color: #ffffff !important"
>
Based on the estimated costs you have
</p>
</div>
@@ -130,9 +141,20 @@
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">Air Quality</h4>
<div class="card" style="background-color: #252525 !important">
<div
class="card-header"
style="background-color: #252525 !important"
>
<h4 class="card-title text-center" style="color: #ffffff">
Air Quality
</h4>
<hr
style="
border-top: 4px solid #ffffff;
border-color: #ffffff !important;
"
/>
</div>
<div class="card-body">
<div class="card-block">
@@ -158,7 +180,7 @@
>
<h3
class="display-4 blue-grey darken-1"
style="font-size: 2em"
style="font-size: 2em; color: #ffffff !important"
>
{{ airQuality }}
</h3>
@@ -168,9 +190,20 @@
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-header">
<h4 class="card-title text-center">Temperature and Humidity</h4>
<div class="card" style="background-color: #252525 !important">
<div
class="card-header"
style="background-color: #252525 !important"
>
<h4 class="card-title text-center" style="color: #ffffff">
Temperature and Humidity
</h4>
<hr
style="
border-top: 4px solid #ffffff;
border-color: #ffffff !important;
"
/>
</div>
<div class="card-body">
<div class="card-block">
@@ -192,25 +225,33 @@
</div>
<div class="row">
<div class="col-6" *ngFor="let item of deviceCategory?.usesd">
<div class="card overflow-hidden">
<div
class="card overflow-hidden"
style="background-color: #252525 !important"
>
<div class="card-content">
<div class="card-body cleartfix">
<div class="media align-items-stretch mb-2">
<div class="align-self-center">
<i
class="icon-bulb background-round info font-large-2 mr-2"
style="
color: #BFF264 !important;
background-color: #252525 !important;
"
></i>
</div>
<div class="media-body">
<p>
<p style="color: #ffffff !important">
{{ item.category_device }}
<span class="float-right text-bold-600"
<span
class="float-right text-bold-600"
style="color: #ffffff"
>{{ item.value }}%</span
>
</p>
<ngb-progressbar
height="7px"
type="danger"
[value]="item.value"
></ngb-progressbar>
</div>

32
src/app/content/hemat-app/monitoring/detail/detail.component.ts
View File

@@ -50,24 +50,24 @@ export class DetailComponent {
{
data: [],
label: "KWH Consumption",
backgroundColor: "#00a5a8",
borderColor: "#00a5a8",
pointBackgroundColor: "#00a5a8",
pointBorderColor: "#00a5a8",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#00a5a8",
backgroundColor: "#C3F164",
borderColor: "#C3F164",
pointBackgroundColor: "#C3F164",
pointBorderColor: "#C3F164",
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#C3F164",
barPercentage: 0.5,
categoryPercentage: 0.5,
},
{
data: [],
label: "Water Consumption",
backgroundColor: "#ff4081",
borderColor: "#ff4081",
pointBackgroundColor: "#ff4081",
pointBorderColor: "#ff4081",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "#ff4081",
backgroundColor: "#64CFF1",
borderColor: "#64CFF1",
pointBackgroundColor: "#64CFF1",
pointBorderColor: "#64CFF1",
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#64CFF1",
barPercentage: 0.5,
categoryPercentage: 0.5,
},
@@ -76,9 +76,9 @@ export class DetailComponent {
data: [],
label: "Weekly Kwh Average",
backgroundColor: "rgba(0,255,255,0)",
borderColor: "#1e9ff2",
borderColor: "#ffffff",
fill: false,
pointBorderColor: "#1e9ff2",
pointBorderColor: "#ffffff",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
@@ -91,9 +91,9 @@ export class DetailComponent {
data: [],
label: "Weekly Water Average",
backgroundColor: "rgba(0,255,255,0)",
borderColor: "#1e9ff2",
borderColor: "#ffffff",
fill: false,
pointBorderColor: "#1e9ff2",
pointBorderColor: "#ffffff",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,