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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_layout/footer/footer.component.html
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>

1432
src/app/_layout/settings/menu-settings.config.ts
View File

File diff suppressed because it is too large Load Diff

19
src/app/content/hemat-app/cost-management/cost-management.component.ts
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);
} }

557
src/app/content/hemat-app/device/add-edit-device/add-edit-device.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-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,331 +7,318 @@
<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"
isEditMode() style="background-color: #252525 !important"
? "Edit Device"
: isViewMode()
? "View Device"
: "Add New Device"
}}
</h2>
</ng-container>
<ng-container mCardBody>
<form
[formGroup]="projectInfo"
(ngSubmit)="onProjectInfoSubmit()"
> >
<div class="form-body"> <h2 style="color: #ffffff">
<h4 class="form-section"> {{
<i class="feather ft-user"></i> General Information isEditMode()
</h4> ? "Edit Device"
<div class="row"> : isViewMode()
<div class="col-md-6"> ? "View Device"
<div class="form-group"> : "Add New Device"
<label for="name">Device Name *</label> }}
<input </h2>
type="text" </div>
id="name" <div class="card-body">
class="form-control" <form
formControlName="name" [formGroup]="projectInfo"
placeholder="Device Name" (ngSubmit)="onProjectInfoSubmit()"
[ngClass]="{ >
'is-invalid': submitted && f.name.errors <div class="form-body">
}" <h4 class="form-section" style="color: #ffffff">
/> <i class="feather ft-user" style="color: #ffffff"></i>
<small General Information
class="form-text text-muted danger" </h4>
*ngIf="submitted && f.name.errors" <div class="row">
class="invalid-feedback" <div class="col-md-6">
> <div class="form-group">
<div *ngIf="f.name.errors.required"> <label for="name" style="color: #ffffff"
Device Name is required >Device Name *</label
>
<input
type="text"
id="name"
class="form-control"
formControlName="name"
placeholder="Device Name"
[ngClass]="{
'is-invalid': submitted && f.name.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.name.errors"
class="invalid-feedback"
>
<div *ngIf="f.name.errors.required">
Device Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="categoryId" style="color: #ffffff"
>Category *</label
>
<div class="input-group">
<select
id="categoryId"
class="form-control"
formControlName="categoryId"
[ngClass]="{
'is-invalid': submitted && f.categoryId.errors
}"
>
<option
*ngFor="let data of dataMasterCategori"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
</div> </div>
</small> <small
class="form-text text-muted danger"
*ngIf="submitted && f.categoryId.errors"
class="invalid-feedback"
>
<div *ngIf="f.categoryId.errors.required">
Category is required
</div>
</small>
</div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="row">
<div class="form-group"> <div class="col-md-6">
<label for="categoryId">Category *</label> <div class="form-group">
<div class="input-group"> <label for="voltageId" style="color: #ffffff"
>Voltage *</label
>
<div class="input-group">
<select
id="voltageId"
class="form-control"
formControlName="voltageId"
[ngClass]="{
'is-invalid': submitted && f.voltageId.errors
}"
>
<option
*ngFor="let data of dataMasterVoltage"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.voltageId.errors"
class="invalid-feedback"
>
<div *ngIf="f.voltageId.errors.required">
Voltage is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="typeId" style="color: #ffffff"
>Type *</label
>
<select <select
id="categoryId" id="typeId"
class="form-control" class="form-control"
formControlName="categoryId" formControlName="typeId"
[ngClass]="{ [ngClass]="{
'is-invalid': submitted && f.categoryId.errors 'is-invalid': submitted && f.typeId.errors
}" }"
> >
<option <option
*ngFor="let data of dataMasterCategori" *ngFor="let data of dataMasterType"
[value]="data.id" [value]="data.id"
> >
{{ data.name }} {{ data.name }}
</option> </option>
</select> </select>
<div class="input-group-append" *ngIf="mode === 'edit'"> <small
<button class="form-text text-muted danger"
type="button" *ngIf="submitted && f.typeId.errors"
class="btn btn-primary" class="invalid-feedback"
(click)="addData()" >
> <div *ngIf="f.typeId.errors.required">
Add Type is required
</button> </div>
</div> </small>
</div> </div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.categoryId.errors"
class="invalid-feedback"
>
<div *ngIf="f.categoryId.errors.required">
Category is required
</div>
</small>
</div> </div>
</div> </div>
</div> <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" style="color: #ffffff"
<label for="voltageId">Voltage *</label> >Duration Use *</label
<div class="input-group"> >
<select <select
id="voltageId" id="durationId"
class="form-control" class="form-control"
formControlName="voltageId" formControlName="durationId"
[ngClass]="{ [ngClass]="{
'is-invalid': submitted && f.voltageId.errors 'is-invalid': submitted && f.durationId.errors
}" }"
> >
<option <option
*ngFor="let data of dataMasterVoltage" *ngFor="let data of dataMasterDuration"
[value]="data.id" [value]="data.id"
> >
{{ data.name }} {{ data.name }}
</option> </option>
</select> </select>
<div class="input-group-append" *ngIf="mode === 'edit'"> <small
<button class="form-text text-muted danger"
type="button" *ngIf="submitted && f.durationId.errors"
class="btn btn-primary" class="invalid-feedback"
(click)="addData()" >
> <div *ngIf="f.durationId.errors.required">
Add Duration is required
</button> </div>
</div> </small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="statusId" style="color: #ffffff"
>Status *</label
>
<select
id="statusId"
class="form-control"
formControlName="statusId"
[ngClass]="{
'is-invalid': submitted && f.statusId.errors
}"
>
<option
*ngFor="let data of dataMasterStatus"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.statusId.errors"
class="invalid-feedback"
>
<div *ngIf="f.statusId.errors.required">
Status is required
</div>
</small>
</div> </div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.voltageId.errors"
class="invalid-feedback"
>
<div *ngIf="f.voltageId.errors.required">
Voltage is required
</div>
</small>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="row">
<div class="form-group"> <div class="col-md-6">
<label for="typeId">Type *</label> <div class="form-group">
<select <label for="roomBuildingId" style="color: #ffffff"
id="typeId" >Location Room *</label
class="form-control"
formControlName="typeId"
[ngClass]="{
'is-invalid': submitted && f.typeId.errors
}"
>
<option
*ngFor="let data of dataMasterType"
[value]="data.id"
> >
{{ data.name }} <select
</option> id="roomBuildingId"
</select> class="form-control"
<small formControlName="roomBuildingId"
class="form-text text-muted danger" [ngClass]="{
*ngIf="submitted && f.typeId.errors" 'is-invalid':
class="invalid-feedback" submitted && f.roomBuildingId.errors
> }"
<div *ngIf="f.typeId.errors.required"> >
Type is required <option
</div> *ngFor="let data of dataBuildingRoomList"
</small> [value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.roomBuildingId.errors"
class="invalid-feedback"
>
<div *ngIf="f.roomBuildingId.errors.required">
location room is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="watt" style="color: #ffffff"
>Watt *</label
>
<input
type="text"
id="watt"
class="form-control"
formControlName="watt"
placeholder="Watt"
[ngClass]="{
'is-invalid': submitted && f.watt.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.watt.errors"
class="invalid-feedback"
>
<div *ngIf="f.watt.errors.required">
watt is required
</div>
</small>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="form-actions">
<div class="col-md-6"> <button
<div class="form-group"> type="button"
<label for="durationId">Duration Use *</label> class="btn btn-warning mr-1"
<select style="
id="durationId" color: #c3f164 !important;
class="form-control" background-color: #000000 !important;
formControlName="durationId" border-color: #c3f164 !important;
[ngClass]="{ "
'is-invalid': submitted && f.durationId.errors (click)="cancel()"
}"
>
<option
*ngFor="let data of dataMasterDuration"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.durationId.errors"
class="invalid-feedback"
>
<div *ngIf="f.durationId.errors.required">
Duration is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="statusId">Status *</label>
<select
id="statusId"
class="form-control"
formControlName="statusId"
[ngClass]="{
'is-invalid': submitted && f.statusId.errors
}"
>
<option
*ngFor="let data of dataMasterStatus"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.statusId.errors"
class="invalid-feedback"
>
<div *ngIf="f.statusId.errors.required">
Status is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="roomBuildingId">Location Room *</label>
<select
id="roomBuildingId"
class="form-control"
formControlName="roomBuildingId"
[ngClass]="{
'is-invalid': submitted && f.roomBuildingId.errors
}"
>
<option
*ngFor="let data of dataBuildingRoomList"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.roomBuildingId.errors"
class="invalid-feedback"
>
<div *ngIf="f.roomBuildingId.errors.required">
location room is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="watt">Watt *</label>
<input
type="text"
id="watt"
class="form-control"
formControlName="watt"
placeholder="Watt"
[ngClass]="{
'is-invalid': submitted && f.watt.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.watt.errors"
class="invalid-feedback"
>
<div *ngIf="f.watt.errors.required">
watt is required
</div>
</small>
</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 <i class="feather ft-x"></i>
*ngFor="let interest of interestedIn" {{ mode === "edit" ? "Cancel" : "Back" }}
[value]="interest" </button>
> <button
{{ interest }} type="submit"
</option> class="btn btn-primary"
</select> style="
<small color: #000000 !important;
class="form-text text-muted danger" background-color: #c3f164 !important;
*ngIf="submitted && f.interestedIn.errors" "
class="invalid-feedback" (click)="saveEdit()"
*ngIf="mode === 'edit'"
> >
<div *ngIf="f.interestedIn.errors.required"> <i class="la la-check"></i> Save
Interest is required </button>
</div> </div>
</small> </form>
</div> --> </div>
</div> </div>
<div class="form-actions"> </div>
<button
type="button"
class="btn btn-warning mr-1"
(click)="cancel()"
>
<i class="feather ft-x"></i> {{mode === 'edit' ? 'Cancel' : 'Back'}}
</button>
<button type="submit" class="btn btn-primary" (click)="saveEdit()" *ngIf="mode === 'edit'">
<i class="la la-check"></i> Save
</button>
</div>
</form>
</ng-container>
</m-card>
</div> </div>
</div> </div>
</section> </section>
</div> </div>
</div> </div>
</div> </div>

78
src/app/content/hemat-app/device/device.component.html
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
@ -253,7 +257,7 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff !important">{{ value }}</p> <p style="color: #ffffff !important">{{ value }}</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"

20
src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
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>

34
src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html
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>

97
src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
View File

@ -1,31 +1,31 @@
<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"
id="name" id="name"
formControlName="name" formControlName="name"
/> />
</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"
id="description" id="description"
formControlName="description" formControlName="description"
/> />
</div> </div>
<!-- <div class="form-group col-md-6"> <!-- <div class="form-group col-md-6">
<label for="statusId">Status:</label> <label for="statusId">Status:</label>
<select <select
id="projectinput5" id="projectinput5"
@ -37,19 +37,28 @@
</option> </option>
</select> </select>
</div> --> </div> -->
</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"
(click)="activeModal.dismiss('Cross click')" style="
> color: #c3f164 !important;
Close background-color: #000000 !important;
</button> border-color: #c3f164 !important;
<button type="button" class="btn btn-primary" (click)="addRow()"> "
Save Changes (click)="activeModal.dismiss('Cross click')"
</button> >
</div> Close
</button>
<button
type="button"
class="btn btn-primary"
style="color: #000000 !important; background-color: #c3f164 !important"
(click)="addRow()"
>
Save Changes
</button>
</div>

4
src/app/content/hemat-app/monitoring/building/building.component.html
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">

4
src/app/content/hemat-app/monitoring/detail/detail.component.html
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

3
src/app/content/hemat-app/monitoring/detail/detail.component.ts
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,

4
src/app/content/hemat-app/monitoring/room/room.component.css
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;
}

27
src/app/content/hemat-app/monitoring/room/room.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-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>

2
src/app/login/login.component.html
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