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

penyesuaian UI monitoring

This commit is contained in:
Fuzi_fauzia 2024-06-25 17:22:57 +07:00
parent 19b43b8a2d
commit 6261b36074
3 changed files with 103 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,6 +76,16 @@
*ngIf="spinnerFilterActive"
></i>
</button>
<button
type="button"
class="btn btn-outline-success ml-2"
(click)="doFilterCancel()"
style="
background-color: #252525 !important;
border-color: #bef264 !important;
"
>Cancel
</button>
</div>
</div>
</div>

17
src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
View File

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { BuildingService } from '../../service/monitoring-api.service';
import { DeviceService } from '../../service/device.service';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-control-device-seemore',
@ -29,6 +30,7 @@ export class ControlDeviceSeemoreComponent {
private deviceService: DeviceService,
private monitoringApiService: BuildingService,
private route: ActivatedRoute,
private toastr: ToastrService,
) {}
ngOnInit() {
@ -101,6 +103,12 @@ export class ControlDeviceSeemoreComponent {
}
doFilter() {
if (!this.buildingSelected) {
this.toastr.error("Warning", "Filter Building tidak boleh kosong.", {
timeOut: 5000,
closeButton: true,
});
} else {
this.spinnerFilterActive = true;
this.fetchData(
this.buildingSelected,
@ -112,6 +120,15 @@ export class ControlDeviceSeemoreComponent {
}, 3000);
}
}
doFilterCancel(){
this.buildingSelected = parseInt(this.paramsId);
this.categorySelected = undefined;
this.statusSelected = undefined;
this.fetchData(this.buildingSelected, 0, 0);
}
filterRows() {
if (!this.searchTerm) {
this.filteredRows = [...this.data.results.data];

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

@ -5,13 +5,13 @@
</div>
<div class="content-body">
<div class="row">
<div class="col-xl-4 col-md-6 col-12">
<div class="col-xl-3 col-md-6 col-12">
<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 style="color: #ffffff">Electricity</h5>
<h5 style="color: #ffffff">Kwh Consumption</h5>
<h3 style="color: #ffffff">
{{ topCard?.kwh_consumption }} Kwh
</h3>
@ -39,7 +39,7 @@
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
@ -71,7 +71,7 @@
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="col-xl-3 col-md-6 col-12">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
@ -103,6 +103,43 @@
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 col-12">
<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 style="color: #ffffff">Summary Cost</h5>
<h3 style="color: #ffffff">
{{
summaryCost?.summary_cost
| currency : "Rp " : "symbol" : "1.0-0"
}}
</h3>
</div>
<div class="align-self-center">
<div
style="
background-color: #414f2b;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="ri-money-dollar-box-line font-large-1 float-right"
style="color: #bef264 !important"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
@ -131,7 +168,7 @@
</div>
</div>
</div>
<div class="row">
<!-- <div class="row">
<div class="col-4">
<div class="card" style="background-color: #252525 !important">
<div
@ -250,25 +287,41 @@
</div>
</div>
</div>
</div>
</div> -->
<div class="row">
<div class="col-6" *ngFor="let item of deviceCategory?.usesd">
<div class="card overflow-hidden" style="background-color: #000000 !important">
<div
class="card overflow-hidden"
style="background-color: #000000 !important"
>
<div class="card-content">
<div class="card-body clearfix">
<div class="media align-items-stretch mb-2">
<div class="align-self-center">
<i class="icon-bulb background-round info font-large-1 mr-2" style="color: #bff264 !important"></i>
<i
class="icon-bulb background-round info font-large-1 mr-2"
style="color: #bff264 !important"
></i>
</div>
<div class="media-body">
<p style="color: #ffffff !important">
{{ item.category_device }}
<span class="float-right text-bold-600" style="color: #ffffff">{{ item.value.toFixed(1) }}%</span>
<span
class="float-right text-bold-600"
style="color: #ffffff"
>{{ item.value.toFixed(1) }}%</span
>
</p>
<div class="d-flex align-items-center justify-content-between">
<span style="color: #5F5454; margin-right: 5px;">0%</span>
<ngb-progressbar height="7px" [value]="item.value" style="flex-grow: 1; margin: 0 10px;"></ngb-progressbar>
<span style="color: #5F5454; margin-left: 5px;">100%</span>
<div
class="d-flex align-items-center justify-content-between"
>
<span style="color: #5f5454; margin-right: 5px">0%</span>
<ngb-progressbar
height="7px"
[value]="item.value"
style="flex-grow: 1; margin: 0 10px"
></ngb-progressbar>
<span style="color: #5f5454; margin-left: 5px">100%</span>
</div>
</div>
</div>
@ -277,8 +330,6 @@
</div>
</div>
<div class="col-12 text-right">
<button
class="btn btn-primary"