penyesuaian UI list room
This commit is contained in:
parent
f6db135ac6
commit
7a07bf5b07
|
|
@ -13,7 +13,7 @@
|
|||
href="https://allbestsistem.com/"
|
||||
target="_blank"
|
||||
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
|
||||
>
|
||||
</p>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -28,6 +28,7 @@ export class CostManagementComponent implements OnInit {
|
|||
dataMasterCategori: any;
|
||||
dataBuildingList: any;
|
||||
public focucedElement = "";
|
||||
|
||||
spinnerActive = false;
|
||||
spinnerActiveActual = false;
|
||||
spinnerFilterActive = false;
|
||||
|
|
@ -245,12 +246,12 @@ export class CostManagementComponent implements OnInit {
|
|||
}
|
||||
|
||||
doFilter() {
|
||||
const requestData = {
|
||||
building: this.buildingSelected,
|
||||
category: this.categorySelected,
|
||||
date: this.dateSelected,
|
||||
searchTerm: this.searchTerm,
|
||||
};
|
||||
// const requestData = {
|
||||
// building: this.buildingSelected,
|
||||
// category: this.categorySelected,
|
||||
// date: this.dateSelected,
|
||||
// searchTerm: this.searchTerm,
|
||||
// };
|
||||
this.spinnerFilterActive = true;
|
||||
setTimeout(() => {
|
||||
this.spinnerFilterActive = false;
|
||||
|
|
@ -259,9 +260,9 @@ export class CostManagementComponent implements OnInit {
|
|||
this.dateSelected,
|
||||
this.categorySelected
|
||||
);
|
||||
this.dataCompWaterElectCost(this.buildingSelected);
|
||||
this.dataCompPrevMonthCost(this.buildingSelected);
|
||||
this.dataCompActEstCost(this.buildingSelected);
|
||||
// this.dataCompWaterElectCost(this.buildingSelected);
|
||||
// this.dataCompPrevMonthCost(this.buildingSelected);
|
||||
// this.dataCompActEstCost(this.buildingSelected);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -7,331 +7,318 @@
|
|||
<section id="basic-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle>
|
||||
<h2>
|
||||
{{
|
||||
isEditMode()
|
||||
? "Edit Device"
|
||||
: isViewMode()
|
||||
? "View Device"
|
||||
: "Add New Device"
|
||||
}}
|
||||
</h2>
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<form
|
||||
[formGroup]="projectInfo"
|
||||
(ngSubmit)="onProjectInfoSubmit()"
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div
|
||||
class="card-header"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<div class="form-body">
|
||||
<h4 class="form-section">
|
||||
<i class="feather ft-user"></i> General Information
|
||||
</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="name">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
|
||||
<h2 style="color: #ffffff">
|
||||
{{
|
||||
isEditMode()
|
||||
? "Edit Device"
|
||||
: isViewMode()
|
||||
? "View Device"
|
||||
: "Add New Device"
|
||||
}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form
|
||||
[formGroup]="projectInfo"
|
||||
(ngSubmit)="onProjectInfoSubmit()"
|
||||
>
|
||||
<div class="form-body">
|
||||
<h4 class="form-section" style="color: #ffffff">
|
||||
<i class="feather ft-user" style="color: #ffffff"></i>
|
||||
General Information
|
||||
</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="name" style="color: #ffffff"
|
||||
>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>
|
||||
</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 class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="categoryId">Category *</label>
|
||||
<div class="input-group">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-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
|
||||
id="categoryId"
|
||||
id="typeId"
|
||||
class="form-control"
|
||||
formControlName="categoryId"
|
||||
formControlName="typeId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.categoryId.errors
|
||||
'is-invalid': submitted && f.typeId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterCategori"
|
||||
*ngFor="let data of dataMasterType"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="input-group-append" *ngIf="mode === 'edit'">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
(click)="addData()"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.typeId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.typeId.errors.required">
|
||||
Type is required
|
||||
</div>
|
||||
</small>
|
||||
</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 class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="voltageId">Voltage *</label>
|
||||
<div class="input-group">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="durationId" style="color: #ffffff"
|
||||
>Duration Use *</label
|
||||
>
|
||||
<select
|
||||
id="voltageId"
|
||||
id="durationId"
|
||||
class="form-control"
|
||||
formControlName="voltageId"
|
||||
formControlName="durationId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.voltageId.errors
|
||||
'is-invalid': submitted && f.durationId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterVoltage"
|
||||
*ngFor="let data of dataMasterDuration"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="input-group-append" *ngIf="mode === 'edit'">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
(click)="addData()"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<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" 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>
|
||||
<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">Type *</label>
|
||||
<select
|
||||
id="typeId"
|
||||
class="form-control"
|
||||
formControlName="typeId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.typeId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterType"
|
||||
[value]="data.id"
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="roomBuildingId" style="color: #ffffff"
|
||||
>Location Room *</label
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.typeId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.typeId.errors.required">
|
||||
Type is required
|
||||
</div>
|
||||
</small>
|
||||
<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" 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 class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="durationId">Duration Use *</label>
|
||||
<select
|
||||
id="durationId"
|
||||
class="form-control"
|
||||
formControlName="durationId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.durationId.errors
|
||||
}"
|
||||
>
|
||||
<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
|
||||
}"
|
||||
<div class="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-warning mr-1"
|
||||
style="
|
||||
color: #c3f164 !important;
|
||||
background-color: #000000 !important;
|
||||
border-color: #c3f164 !important;
|
||||
"
|
||||
(click)="cancel()"
|
||||
>
|
||||
<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"
|
||||
<i class="feather ft-x"></i>
|
||||
{{ mode === "edit" ? "Cancel" : "Back" }}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
style="
|
||||
color: #000000 !important;
|
||||
background-color: #c3f164 !important;
|
||||
"
|
||||
(click)="saveEdit()"
|
||||
*ngIf="mode === 'edit'"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
</div>
|
||||
</small>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<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>
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -85,9 +85,7 @@
|
|||
|
||||
<section id="configuration">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-12"
|
||||
>
|
||||
<div class="col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
|
|
@ -95,6 +93,7 @@
|
|||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<ng-select
|
||||
class="select-custom"
|
||||
[items]="singleSelectArray"
|
||||
[searchable]="true"
|
||||
bindLabel="item_text"
|
||||
|
|
@ -107,6 +106,7 @@
|
|||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<ng-select
|
||||
class="select-custom"
|
||||
[items]="singleSelectArray"
|
||||
[searchable]="true"
|
||||
bindLabel="item_text"
|
||||
|
|
@ -119,6 +119,7 @@
|
|||
<div class="col-2">
|
||||
<div class="form-group">
|
||||
<ng-select
|
||||
class="select-custom"
|
||||
[items]="singleSelectArray"
|
||||
[searchable]="true"
|
||||
bindLabel="item_text"
|
||||
|
|
@ -129,34 +130,35 @@
|
|||
</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">
|
||||
<button
|
||||
type="button"
|
||||
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>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2 text-right">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
[disabled]="spinnerActive"
|
||||
(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
|
||||
class="la la-spinner spinner"
|
||||
|
|
@ -164,7 +166,7 @@
|
|||
></i>
|
||||
<i class="feather ft-plus" *ngIf="!spinnerActive"></i
|
||||
>
|
||||
<span style="font-weight: 600;">Synchronization</span>
|
||||
<span style="font-weight: 600">Synchronization</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -238,7 +240,9 @@
|
|||
ngx-datatable-cell-template
|
||||
let-value="value"
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value.name }}</p>
|
||||
<p style="color: #ffffff !important">
|
||||
{{ value.name }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -253,7 +257,7 @@
|
|||
ngx-datatable-cell-template
|
||||
let-value="value"
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -268,7 +272,9 @@
|
|||
ngx-datatable-cell-template
|
||||
let-value="value"
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value.name }}</p>
|
||||
<p style="color: #ffffff !important">
|
||||
{{ value.name }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -283,7 +289,9 @@
|
|||
ngx-datatable-cell-template
|
||||
let-value="value"
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value.name }}</p>
|
||||
<p style="color: #ffffff !important">
|
||||
{{ value.name }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -298,7 +306,9 @@
|
|||
ngx-datatable-cell-template
|
||||
let-value="value"
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value.name }}</p>
|
||||
<p style="color: #ffffff !important">
|
||||
{{ value.name }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -316,17 +326,29 @@
|
|||
>
|
||||
<button
|
||||
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)"
|
||||
>
|
||||
<i class="ficon feather ft-eye" style="color: #BEF264 !important;"></i>
|
||||
<i
|
||||
class="ficon feather ft-eye"
|
||||
style="color: #bef264 !important"
|
||||
></i>
|
||||
</button>
|
||||
<button
|
||||
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)"
|
||||
>
|
||||
<i class="ficon feather ft-edit" style="color: #BEF264 !important;"></i>
|
||||
<i
|
||||
class="ficon feather ft-edit"
|
||||
style="color: #bef264 !important"
|
||||
></i>
|
||||
</button>
|
||||
<!-- <button
|
||||
class="btn btn-sm btn-danger"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">Add New Row</h4>
|
||||
<div class="modal-header" style="background-color: #000000 !important">
|
||||
<h4 class="modal-title" style="color: #ffffff">Add New Row</h4>
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body" style="background-color: #000000 !important">
|
||||
<form [formGroup]="myForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="name">Name:</label>
|
||||
<label for="name" style="color: #ffffff">Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="status">Status:</label>
|
||||
<label for="status" style="color: #ffffff">Status:</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
class="form-control"
|
||||
|
|
@ -31,15 +31,21 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer" style="background-color: #000000 !important">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
style="color: #c3f164 !important; background-color: #000000 !important; border-color: #c3f164 !important;"
|
||||
(click)="activeModal.dismiss('Cross click')"
|
||||
>
|
||||
Close
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">Add New Row</h4>
|
||||
<div class="modal-header" style="background-color: #000000 !important">
|
||||
<h4 class="modal-title" style="color: #ffffff">Add New Row</h4>
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body" style="background-color: #000000 !important">
|
||||
<form [formGroup]="myForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="name">Name Building:</label>
|
||||
<label for="name" style="color: #ffffff">Name Building:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="name">Email:</label>
|
||||
<label for="name" style="color: #ffffff">Email:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="phone">Phone:</label>
|
||||
<label for="phone" style="color: #ffffff">Phone:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="owner">Owner:</label>
|
||||
<label for="owner" style="color: #ffffff">Owner:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="address">Address:</label>
|
||||
<label for="address" style="color: #ffffff">Address:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="address">KWH:</label>
|
||||
<label for="address" style="color: #ffffff">KWH:</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="statusId">Status:</label>
|
||||
<label for="statusId" style="color: #ffffff">Status:</label>
|
||||
<!-- <select
|
||||
id="projectinput5"
|
||||
class="form-control"
|
||||
|
|
@ -85,15 +85,25 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="modal-footer" style="background-color: #000000 !important">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
style="
|
||||
color: #c3f164 !important;
|
||||
background-color: #000000 !important;
|
||||
border-color: #c3f164 !important;
|
||||
"
|
||||
(click)="activeModal.dismiss('Cross click')"
|
||||
>
|
||||
Close
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
<div class="modal-header">
|
||||
<h4 class="modal-title">Add New Row</h4>
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="myForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="name">Name Room:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="name"
|
||||
formControlName="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="description">Description:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="description"
|
||||
formControlName="description"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="form-group col-md-6">
|
||||
<div class="modal-header" style="background-color: #000000 !important">
|
||||
<h4 class="modal-title" style="color: #ffffff">Add New Row</h4>
|
||||
<button type="button" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" style="background-color: #000000 !important">
|
||||
<form [formGroup]="myForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="name" style="color: #ffffff">Name Room:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="name"
|
||||
formControlName="name"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="description" style="color: #ffffff">Description:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="description"
|
||||
formControlName="description"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="form-group col-md-6">
|
||||
<label for="statusId">Status:</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
|
|
@ -37,19 +37,28 @@
|
|||
</option>
|
||||
</select>
|
||||
</div> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
(click)="activeModal.dismiss('Cross click')"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" (click)="addRow()">
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer" style="background-color: #000000 !important">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
style="
|
||||
color: #c3f164 !important;
|
||||
background-color: #000000 !important;
|
||||
border-color: #c3f164 !important;
|
||||
"
|
||||
(click)="activeModal.dismiss('Cross click')"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
style="color: #000000 !important; background-color: #c3f164 !important"
|
||||
(click)="addRow()"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
class="text-muted mb-1 font-weight-bold"
|
||||
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
|
||||
>
|
||||
Building Name
|
||||
Building
|
||||
</h4>
|
||||
<h3
|
||||
class="text-muted mb-0"
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
>
|
||||
{{ data.total }} kWh
|
||||
</h3>
|
||||
<h6 style="color: #ffffff !important;">Consumtion</h6>
|
||||
<h6 style="color: #ffffff !important;">Consumption</h6>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-center">
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
color: #ffffff;
|
||||
"
|
||||
class="barchart"
|
||||
height="328"
|
||||
height="400"
|
||||
width="1900"
|
||||
baseChart
|
||||
[datasets]="barChartData"
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
<span
|
||||
class="float-right text-bold-600"
|
||||
style="color: #ffffff"
|
||||
>{{ item.value }}%</span
|
||||
>{{ item.value.toFixed(1) }}%</span
|
||||
>
|
||||
</p>
|
||||
<ngb-progressbar
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@ export class DetailComponent {
|
|||
// chart bar
|
||||
public barChartOptions: ChartOptions = {
|
||||
responsive: true,
|
||||
animation: {
|
||||
duration: 0 // Menonaktifkan animasi
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
stacked: true,
|
||||
|
|
|
|||
|
|
@ -5,4 +5,6 @@
|
|||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .progress-bar {
|
||||
background-color: #bef264 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -10,34 +10,34 @@
|
|||
<input type="text" class="form-control" placeholder="Search..." [(ngModel)]="searchTerm"
|
||||
(input)="filterRows()" />
|
||||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<!-- <div class="col-md-6 text-right">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
[routerLink]="['/monitoring/add-new-room']"
|
||||
>
|
||||
<i class="feather ft-plus"></i> Add new room
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div
|
||||
class="col-xl-3 col-lg-6 col-12"
|
||||
*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-header mb-2">
|
||||
<div class="card-header mb-2" style="background-color: #252525 !important">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h5
|
||||
class="text-muted mb-1"
|
||||
style="font-family: Montserrat, sans-serif"
|
||||
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
|
||||
>
|
||||
Room Name
|
||||
Room
|
||||
</h5>
|
||||
<h4
|
||||
class="text-muted mb-0"
|
||||
style="font-family: Montserrat, sans-serif"
|
||||
style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
|
||||
>
|
||||
{{ data.name }}
|
||||
</h4>
|
||||
|
|
@ -49,12 +49,13 @@
|
|||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<!-- <h3 class="info">{{ data.value }} kWh</h3> -->
|
||||
<h3 class="info">265 kWh</h3>
|
||||
<h6>Consumtion</h6>
|
||||
<h3 style="color: #ffffff;">{{data.totalKwh}} kWh</h3>
|
||||
<h6 style="color: #ffffff;">Consumption</h6>
|
||||
</div>
|
||||
<div>
|
||||
<i
|
||||
class="feather ft-server info font-large-2 float-right"
|
||||
style="color: #bef264 !important;"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,12 +64,12 @@
|
|||
height="7px"
|
||||
width="100%"
|
||||
type="warning"
|
||||
value="75"
|
||||
value="{{data.totalKwh}}"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group text-center">
|
||||
<!-- <div class="form-group text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-icon btn-outline-primary mr-1"
|
||||
|
|
@ -87,7 +88,7 @@
|
|||
>
|
||||
<i class="la la-building"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
<p
|
||||
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>
|
||||
<div class="card-body">
|
||||
<a
|
||||
|
|
|
|||
Loading…
Reference in New Issue