penyesuaian UI list room

This commit is contained in:
Fuzi_fauzia 2024-06-13 17:14:14 +07:00
parent f6db135ac6
commit 7a07bf5b07
14 changed files with 1162 additions and 1121 deletions

View File

@ -13,7 +13,7 @@
href="https://allbestsistem.com/" href="https://allbestsistem.com/"
target="_blank" target="_blank"
style="background-color: #000000 !important;" style="background-color: #000000 !important;"
>Smart Building Management Systems (V@2024-06-12.01) >Smart Building Management Systems (V@2024-06-13.01)
</a></span </a></span
> >
</p> </p>

File diff suppressed because it is too large Load Diff

View File

@ -28,6 +28,7 @@ export class CostManagementComponent implements OnInit {
dataMasterCategori: any; dataMasterCategori: any;
dataBuildingList: any; dataBuildingList: any;
public focucedElement = ""; public focucedElement = "";
spinnerActive = false; spinnerActive = false;
spinnerActiveActual = false; spinnerActiveActual = false;
spinnerFilterActive = false; spinnerFilterActive = false;
@ -245,12 +246,12 @@ export class CostManagementComponent implements OnInit {
} }
doFilter() { doFilter() {
const requestData = { // const requestData = {
building: this.buildingSelected, // building: this.buildingSelected,
category: this.categorySelected, // category: this.categorySelected,
date: this.dateSelected, // date: this.dateSelected,
searchTerm: this.searchTerm, // searchTerm: this.searchTerm,
}; // };
this.spinnerFilterActive = true; this.spinnerFilterActive = true;
setTimeout(() => { setTimeout(() => {
this.spinnerFilterActive = false; this.spinnerFilterActive = false;
@ -259,9 +260,9 @@ export class CostManagementComponent implements OnInit {
this.dateSelected, this.dateSelected,
this.categorySelected this.categorySelected
); );
this.dataCompWaterElectCost(this.buildingSelected); // this.dataCompWaterElectCost(this.buildingSelected);
this.dataCompPrevMonthCost(this.buildingSelected); // this.dataCompPrevMonthCost(this.buildingSelected);
this.dataCompActEstCost(this.buildingSelected); // this.dataCompActEstCost(this.buildingSelected);
}, 3000); }, 3000);
} }

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-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,9 +7,13 @@
<section id="basic-form-layouts"> <section id="basic-form-layouts">
<div class="row"> <div class="row">
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'"> <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
<m-card> <div class="card" style="background-color: #252525 !important">
<ng-container mCardHeaderTitle> <div class="card-content">
<h2> <div
class="card-header"
style="background-color: #252525 !important"
>
<h2 style="color: #ffffff">
{{ {{
isEditMode() isEditMode()
? "Edit Device" ? "Edit Device"
@ -18,20 +22,23 @@
: "Add New Device" : "Add New Device"
}} }}
</h2> </h2>
</ng-container> </div>
<ng-container mCardBody> <div class="card-body">
<form <form
[formGroup]="projectInfo" [formGroup]="projectInfo"
(ngSubmit)="onProjectInfoSubmit()" (ngSubmit)="onProjectInfoSubmit()"
> >
<div class="form-body"> <div class="form-body">
<h4 class="form-section"> <h4 class="form-section" style="color: #ffffff">
<i class="feather ft-user"></i> General Information <i class="feather ft-user" style="color: #ffffff"></i>
General Information
</h4> </h4>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="name">Device Name *</label> <label for="name" style="color: #ffffff"
>Device Name *</label
>
<input <input
type="text" type="text"
id="name" id="name"
@ -55,7 +62,9 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="categoryId">Category *</label> <label for="categoryId" style="color: #ffffff"
>Category *</label
>
<div class="input-group"> <div class="input-group">
<select <select
id="categoryId" id="categoryId"
@ -72,15 +81,6 @@
{{ data.name }} {{ data.name }}
</option> </option>
</select> </select>
<div class="input-group-append" *ngIf="mode === 'edit'">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
</div> </div>
<small <small
class="form-text text-muted danger" class="form-text text-muted danger"
@ -97,7 +97,9 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="voltageId">Voltage *</label> <label for="voltageId" style="color: #ffffff"
>Voltage *</label
>
<div class="input-group"> <div class="input-group">
<select <select
id="voltageId" id="voltageId"
@ -114,15 +116,6 @@
{{ data.name }} {{ data.name }}
</option> </option>
</select> </select>
<div class="input-group-append" *ngIf="mode === 'edit'">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
</div> </div>
<small <small
class="form-text text-muted danger" class="form-text text-muted danger"
@ -137,7 +130,9 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="typeId">Type *</label> <label for="typeId" style="color: #ffffff"
>Type *</label
>
<select <select
id="typeId" id="typeId"
class="form-control" class="form-control"
@ -168,7 +163,9 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="durationId">Duration Use *</label> <label for="durationId" style="color: #ffffff"
>Duration Use *</label
>
<select <select
id="durationId" id="durationId"
class="form-control" class="form-control"
@ -197,7 +194,9 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="statusId">Status *</label> <label for="statusId" style="color: #ffffff"
>Status *</label
>
<select <select
id="statusId" id="statusId"
class="form-control" class="form-control"
@ -228,13 +227,16 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="roomBuildingId">Location Room *</label> <label for="roomBuildingId" style="color: #ffffff"
>Location Room *</label
>
<select <select
id="roomBuildingId" id="roomBuildingId"
class="form-control" class="form-control"
formControlName="roomBuildingId" formControlName="roomBuildingId"
[ngClass]="{ [ngClass]="{
'is-invalid': submitted && f.roomBuildingId.errors 'is-invalid':
submitted && f.roomBuildingId.errors
}" }"
> >
<option <option
@ -257,7 +259,9 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="watt">Watt *</label> <label for="watt" style="color: #ffffff"
>Watt *</label
>
<input <input
type="text" type="text"
id="watt" id="watt"
@ -280,58 +284,41 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <h4 class="form-section">
<i class="la la-paperclip"></i> Energy Information
</h4>
<div class="form-group">
<label for="projectinput5">Auto update *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div> -->
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button <button
type="button" type="button"
class="btn btn-warning mr-1" class="btn btn-warning mr-1"
style="
color: #c3f164 !important;
background-color: #000000 !important;
border-color: #c3f164 !important;
"
(click)="cancel()" (click)="cancel()"
> >
<i class="feather ft-x"></i> {{mode === 'edit' ? 'Cancel' : 'Back'}} <i class="feather ft-x"></i>
{{ mode === "edit" ? "Cancel" : "Back" }}
</button> </button>
<button type="submit" class="btn btn-primary" (click)="saveEdit()" *ngIf="mode === 'edit'"> <button
type="submit"
class="btn btn-primary"
style="
color: #000000 !important;
background-color: #c3f164 !important;
"
(click)="saveEdit()"
*ngIf="mode === 'edit'"
>
<i class="la la-check"></i> Save <i class="la la-check"></i> Save
</button> </button>
</div> </div>
</form> </form>
</ng-container> </div>
</m-card> </div>
</div>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</div> </div>
</div> </div>

View File

@ -85,9 +85,7 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div <div class="col-12">
class="col-12"
>
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #252525 !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
@ -95,6 +93,7 @@
<div class="col-2"> <div class="col-2">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom"
[items]="singleSelectArray" [items]="singleSelectArray"
[searchable]="true" [searchable]="true"
bindLabel="item_text" bindLabel="item_text"
@ -107,6 +106,7 @@
<div class="col-2"> <div class="col-2">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom"
[items]="singleSelectArray" [items]="singleSelectArray"
[searchable]="true" [searchable]="true"
bindLabel="item_text" bindLabel="item_text"
@ -119,6 +119,7 @@
<div class="col-2"> <div class="col-2">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom"
[items]="singleSelectArray" [items]="singleSelectArray"
[searchable]="true" [searchable]="true"
bindLabel="item_text" bindLabel="item_text"
@ -129,34 +130,35 @@
</div> </div>
</div> </div>
<div class="col-2">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
</div>
</div>
<div class="col-2 text-left"> <div class="col-2 text-left">
<button <button
type="button" type="button"
class="btn btn-success mr-1" class="btn btn-success mr-1"
style="background-color: #252525 !important; border-color: #BEF264 !important;" style="
background-color: #252525 !important;
border-color: #bef264 !important;
"
> >
<i class="la la-search" style="color: #ffffff !important;"></i> <i
class="la la-search"
style="color: #ffffff !important"
></i>
</button> </button>
</div> </div>
<div class="col-2">
</div>
<div class="col-2 text-right"> <div class="col-2 text-right">
<button <button
class="btn btn-secondary" class="btn btn-secondary"
[disabled]="spinnerActive" [disabled]="spinnerActive"
(click)="addDevice()" (click)="addDevice()"
style="background-color: #BEF264 !important; border-color: #BEF264 !important; color: #000000 !important;" style="
background-color: #bef264 !important;
border-color: #bef264 !important;
color: #000000 !important;
"
> >
<i <i
class="la la-spinner spinner" class="la la-spinner spinner"
@ -164,7 +166,7 @@
></i> ></i>
<i class="feather ft-plus" *ngIf="!spinnerActive"></i <i class="feather ft-plus" *ngIf="!spinnerActive"></i
>&nbsp; >&nbsp;
<span style="font-weight: 600;">Synchronization</span> <span style="font-weight: 600">Synchronization</span>
</button> </button>
</div> </div>
</div> </div>
@ -238,7 +240,9 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important">{{ value.name }}</p> <p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -268,7 +272,9 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important">{{ value.name }}</p> <p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -283,7 +289,9 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important">{{ value.name }}</p> <p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -298,7 +306,9 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important">{{ value.name }}</p> <p style="color: #ffffff !important">
{{ value.name }}
</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -316,17 +326,29 @@
> >
<button <button
class="btn btn-sm btn-info mr-1" class="btn btn-sm btn-info mr-1"
style="background-color: #000000 !important; border-color: #BEF264 !important;" style="
background-color: #000000 !important;
border-color: #bef264 !important;
"
(click)="viewRow(row)" (click)="viewRow(row)"
> >
<i class="ficon feather ft-eye" style="color: #BEF264 !important;"></i> <i
class="ficon feather ft-eye"
style="color: #bef264 !important"
></i>
</button> </button>
<button <button
class="btn btn-sm btn-warning mr-1" class="btn btn-sm btn-warning mr-1"
style="background-color: #000000 !important; border-color: #BEF264 !important;" style="
background-color: #000000 !important;
border-color: #bef264 !important;
"
(click)="editRow(row)" (click)="editRow(row)"
> >
<i class="ficon feather ft-edit" style="color: #BEF264 !important;"></i> <i
class="ficon feather ft-edit"
style="color: #bef264 !important"
></i>
</button> </button>
<!-- <button <!-- <button
class="btn btn-sm btn-danger" class="btn btn-sm btn-danger"

View File

@ -1,14 +1,14 @@
<div class="modal-header"> <div class="modal-header" style="background-color: #000000 !important">
<h4 class="modal-title">Add New Row</h4> <h4 class="modal-title" style="color: #ffffff">Add New Row</h4>
<button type="button" class="close" aria-label="Close"> <button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body" style="background-color: #000000 !important">
<form [formGroup]="myForm"> <form [formGroup]="myForm">
<div class="form-row"> <div class="form-row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="name">Name:</label> <label for="name" style="color: #ffffff">Name:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -17,7 +17,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="status">Status:</label> <label for="status" style="color: #ffffff">Status:</label>
<select <select
id="projectinput5" id="projectinput5"
class="form-control" class="form-control"
@ -31,15 +31,21 @@
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer" style="background-color: #000000 !important">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
style="color: #c3f164 !important; background-color: #000000 !important; border-color: #c3f164 !important;"
(click)="activeModal.dismiss('Cross click')" (click)="activeModal.dismiss('Cross click')"
> >
Close Close
</button> </button>
<button type="button" class="btn btn-primary" (click)="addRow()"> <button
type="button"
style="color: #000000 !important; background-color: #c3f164 !important"
class="btn btn-primary"
(click)="addRow()"
>
Save Changes Save Changes
</button> </button>
</div> </div>

View File

@ -1,14 +1,14 @@
<div class="modal-header"> <div class="modal-header" style="background-color: #000000 !important">
<h4 class="modal-title">Add New Row</h4> <h4 class="modal-title" style="color: #ffffff">Add New Row</h4>
<button type="button" class="close" aria-label="Close"> <button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body" style="background-color: #000000 !important">
<form [formGroup]="myForm"> <form [formGroup]="myForm">
<div class="form-row"> <div class="form-row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="name">Name Building:</label> <label for="name" style="color: #ffffff">Name Building:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -17,7 +17,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="name">Email:</label> <label for="name" style="color: #ffffff">Email:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -26,7 +26,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="phone">Phone:</label> <label for="phone" style="color: #ffffff">Phone:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -35,7 +35,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="owner">Owner:</label> <label for="owner" style="color: #ffffff">Owner:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -44,7 +44,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="address">Address:</label> <label for="address" style="color: #ffffff">Address:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -53,7 +53,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="address">KWH:</label> <label for="address" style="color: #ffffff">KWH:</label>
<input <input
type="number" type="number"
class="form-control" class="form-control"
@ -62,7 +62,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="statusId">Status:</label> <label for="statusId" style="color: #ffffff">Status:</label>
<!-- <select <!-- <select
id="projectinput5" id="projectinput5"
class="form-control" class="form-control"
@ -85,15 +85,25 @@
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer" style="background-color: #000000 !important">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
style="
color: #c3f164 !important;
background-color: #000000 !important;
border-color: #c3f164 !important;
"
(click)="activeModal.dismiss('Cross click')" (click)="activeModal.dismiss('Cross click')"
> >
Close Close
</button> </button>
<button type="button" class="btn btn-primary" (click)="addRow()"> <button
type="button"
style="color: #000000 !important; background-color: #c3f164 !important"
class="btn btn-primary"
(click)="addRow()"
>
Save Changes Save Changes
</button> </button>
</div> </div>

View File

@ -1,14 +1,14 @@
<div class="modal-header"> <div class="modal-header" style="background-color: #000000 !important">
<h4 class="modal-title">Add New Row</h4> <h4 class="modal-title" style="color: #ffffff">Add New Row</h4>
<button type="button" class="close" aria-label="Close"> <button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body" style="background-color: #000000 !important">
<form [formGroup]="myForm"> <form [formGroup]="myForm">
<div class="form-row"> <div class="form-row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="name">Name Room:</label> <label for="name" style="color: #ffffff">Name Room:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -17,7 +17,7 @@
/> />
</div> </div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="description">Description:</label> <label for="description" style="color: #ffffff">Description:</label>
<input <input
type="text" type="text"
class="form-control" class="form-control"
@ -40,16 +40,25 @@
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer" style="background-color: #000000 !important">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
style="
color: #c3f164 !important;
background-color: #000000 !important;
border-color: #c3f164 !important;
"
(click)="activeModal.dismiss('Cross click')" (click)="activeModal.dismiss('Cross click')"
> >
Close Close
</button> </button>
<button type="button" class="btn btn-primary" (click)="addRow()"> <button
type="button"
class="btn btn-primary"
style="color: #000000 !important; background-color: #c3f164 !important"
(click)="addRow()"
>
Save Changes Save Changes
</button> </button>
</div> </div>

View File

@ -29,7 +29,7 @@
class="text-muted mb-1 font-weight-bold" class="text-muted mb-1 font-weight-bold"
style="font-family: Montserrat, sans-serif; color: #ffffff !important;" style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
> >
Building Name Building
</h4> </h4>
<h3 <h3
class="text-muted mb-0" class="text-muted mb-0"
@ -68,7 +68,7 @@
> >
{{ data.total }} kWh {{ data.total }} kWh
</h3> </h3>
<h6 style="color: #ffffff !important;">Consumtion</h6> <h6 style="color: #ffffff !important;">Consumption</h6>
</div> </div>
<div class="form-group text-center"> <div class="form-group text-center">

View File

@ -88,7 +88,7 @@
color: #ffffff; color: #ffffff;
" "
class="barchart" class="barchart"
height="328" height="400"
width="1900" width="1900"
baseChart baseChart
[datasets]="barChartData" [datasets]="barChartData"
@ -247,7 +247,7 @@
<span <span
class="float-right text-bold-600" class="float-right text-bold-600"
style="color: #ffffff" style="color: #ffffff"
>{{ item.value }}%</span >{{ item.value.toFixed(1) }}%</span
> >
</p> </p>
<ngb-progressbar <ngb-progressbar

View File

@ -32,6 +32,9 @@ export class DetailComponent {
// chart bar // chart bar
public barChartOptions: ChartOptions = { public barChartOptions: ChartOptions = {
responsive: true, responsive: true,
animation: {
duration: 0 // Menonaktifkan animasi
},
scales: { scales: {
x: { x: {
stacked: true, stacked: true,

View File

@ -5,4 +5,6 @@
:host ::ng-deep .block-ui-wrapper { :host ::ng-deep .block-ui-wrapper {
background: rgba(255, 249, 249, 0.5) !important; background: rgba(255, 249, 249, 0.5) !important;
} }
:host ::ng-deep .progress-bar {
background-color: #bef264 !important;
}

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-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -10,34 +10,34 @@
<input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchTerm" <input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchTerm"
(input)="filterRows()" /> (input)="filterRows()" />
</div> </div>
<div class="col-md-6 text-right"> <!-- <div class="col-md-6 text-right">
<button <button
class="btn btn-secondary" class="btn btn-secondary"
[routerLink]="['/monitoring/add-new-room']" [routerLink]="['/monitoring/add-new-room']"
> >
<i class="feather ft-plus"></i>&nbsp; Add new room <i class="feather ft-plus"></i>&nbsp; Add new room
</button> </button>
</div> </div> -->
</div> </div>
<div class="row mt-2"> <div class="row mt-2">
<div <div
class="col-xl-3 col-lg-6 col-12" class="col-xl-3 col-lg-6 col-12"
*ngFor="let data of filteredRows" *ngFor="let data of filteredRows"
> >
<div class="card pull-up"> <div class="card pull-up" style="background-color: #252525 !important">
<div class="card-content"> <div class="card-content">
<div class="card-header mb-2"> <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">
<h5 <h5
class="text-muted mb-1" class="text-muted mb-1"
style="font-family: Montserrat, sans-serif" style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
> >
Room Name Room
</h5> </h5>
<h4 <h4
class="text-muted mb-0" class="text-muted mb-0"
style="font-family: Montserrat, sans-serif" style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
> >
{{ data.name }} {{ data.name }}
</h4> </h4>
@ -49,12 +49,13 @@
<div class="media d-flex"> <div class="media d-flex">
<div class="media-body text-left"> <div class="media-body text-left">
<!-- <h3 class="info">{{ data.value }} kWh</h3> --> <!-- <h3 class="info">{{ data.value }} kWh</h3> -->
<h3 class="info">265 kWh</h3> <h3 style="color: #ffffff;">{{data.totalKwh}} kWh</h3>
<h6>Consumtion</h6> <h6 style="color: #ffffff;">Consumption</h6>
</div> </div>
<div> <div>
<i <i
class="feather ft-server info font-large-2 float-right" class="feather ft-server info font-large-2 float-right"
style="color: #bef264 !important;"
></i> ></i>
</div> </div>
</div> </div>
@ -63,12 +64,12 @@
height="7px" height="7px"
width="100%" width="100%"
type="warning" type="warning"
value="75" value="{{data.totalKwh}}"
></ngb-progressbar> ></ngb-progressbar>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group text-center"> <!-- <div class="form-group text-center">
<button <button
type="button" type="button"
class="btn btn-icon btn-outline-primary mr-1" class="btn btn-icon btn-outline-primary mr-1"
@ -87,7 +88,7 @@
> >
<i class="la la-building"></i> <i class="la la-building"></i>
</button> </button>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>

View File

@ -136,7 +136,7 @@
<p <p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1" class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
> >
<span>(v@2024.06.12.01)</span> <span>(v@2024.06.13.01)</span>
</p> </p>
<div class="card-body"> <div class="card-body">
<a <a