perbaikan detail building
This commit is contained in:
parent
23154e6862
commit
b968e8e434
|
|
@ -1,329 +0,0 @@
|
|||
.tab-content .tab-pane {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: #CACFE7;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .wizard-steps.vertical {
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical .large-filled-symbols {
|
||||
width: 10;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.wizard-steps.vertical {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.vertical .large-filled-symbols {
|
||||
width: 20% !important;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li .step-indicator {
|
||||
color: #999;
|
||||
font-size: 19px;
|
||||
text-align: center;
|
||||
border: 5px solid #f4f5fa;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||
color: #e6e6e6;
|
||||
border: 3px solid #e6e6e6 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing1:after {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:host ::ng-deep.horizontal.large-filled-symbols ul.steps-indicator li.done .step-indicator {
|
||||
color: #fff;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #666EE8;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
|
||||
background-color: #e6e6e6;
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 5px !important;
|
||||
width: calc(100% - 50px);
|
||||
top: -25px;
|
||||
left: calc(50% + 25px);
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done:before {
|
||||
background-color: #666EE8;
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 5px !important;
|
||||
width: calc(100% - 50px);
|
||||
top: -25px;
|
||||
left: calc(50% + 25px);
|
||||
}
|
||||
|
||||
:host ::ng-deep :host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before {
|
||||
background-color: #f4f5fa;
|
||||
height: 10px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before {
|
||||
background-color: #666EE8;
|
||||
height: 5px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li .step-indicator {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
border: 5px solid #f4f5fa;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current .step-indicator {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done .step-indicator {
|
||||
color: #fff;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #666EE8;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
|
||||
background-color: #f4f5fa;
|
||||
height: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
|
||||
background-color: #666EE8;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):after {
|
||||
background-color: #666EE8;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: 50px;
|
||||
height: 10px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current:after {
|
||||
color: #666EE8;
|
||||
border: 1px solid #f4f5fa;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||
color: #e6e6e6;
|
||||
border: 1px solid #e6e6e6 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done.step:after {
|
||||
background-color: #666EE8;
|
||||
border-color: #666EE8;
|
||||
color: #FFF;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal ul.steps-indicator li .step-indicator {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
|
||||
background-color: #666EE8;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.current .step-indicator {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<section id="basic-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-6" *blockUI="'numberTabs'; message: 'Loading'">
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle>
|
||||
<!-- <h2>Add New</h2> -->
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-block">
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<form [formGroup]="userProfileForm" class="row">
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<label for="name">Building*</label>
|
||||
<select
|
||||
id="buildingId"
|
||||
class="form-control"
|
||||
formControlName="buildingId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let list of listBuildingMaster"
|
||||
[value]="list.id"
|
||||
>
|
||||
{{ list.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<label for="statusId">Status*</label>
|
||||
<select
|
||||
id="statusId"
|
||||
class="form-control"
|
||||
formControlName="statusId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let list of dataMasterstatus"
|
||||
[value]="list.id"
|
||||
>
|
||||
{{ list.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- <div class="form-group col-12 mb-2">
|
||||
<label for="name">Status*</label>
|
||||
<select
|
||||
id="statusId"
|
||||
class="form-control"
|
||||
formControlName="statusId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let list of dataMasterstatus"
|
||||
[value]="list.id"
|
||||
>
|
||||
{{ list.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div> -->
|
||||
<div class="form-group col-12 mb-2 contact-repeater">
|
||||
<div class="" formArrayName="userArray">
|
||||
<div
|
||||
class=""
|
||||
*ngFor="
|
||||
let userForm of userFormGroup.controls;
|
||||
let i = index
|
||||
"
|
||||
>
|
||||
<div [formGroupName]="i" class="">
|
||||
<div class="input-group mb-1">
|
||||
<select
|
||||
id="roomId"
|
||||
class="form-control"
|
||||
formControlName="roomId"
|
||||
[ngClass]="{
|
||||
'is-invalid':
|
||||
submitted && f.interestedIn.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let list of listRoomMaster"
|
||||
[value]="list.id"
|
||||
>
|
||||
{{ list.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
type="button"
|
||||
(click)="removePhone(i)"
|
||||
>
|
||||
<i class="feather ft-x"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
(click)="addPhone()"
|
||||
>
|
||||
<i class="feather ft-plus"></i> Add Room
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-center">
|
||||
<button
|
||||
uiSref="personal"
|
||||
type="button"
|
||||
class="btn btn-raised btn-danger mr-1"
|
||||
(click)="cancel()"
|
||||
>
|
||||
<span style="margin-right: 10px">
|
||||
<i class="feather ft-x"></i>
|
||||
</span>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
uiSref="work"
|
||||
class="btn btn-info btn-raised"
|
||||
(click)="save()"
|
||||
>
|
||||
Save
|
||||
<span style="margin-left: 10px">
|
||||
<!-- <i class="feather ft-chevron-right"></i> -->
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<m-card style="background: transparent !important">
|
||||
<ng-container mCardHeaderTitle>
|
||||
<!-- <h2>Profile Image</h2> -->
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-block">
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body text-center">
|
||||
<img
|
||||
src="../../../assets/images/backgrounds/smart3.jpg"
|
||||
alt="Profile Image"
|
||||
class="img-fluid rounded-circle"
|
||||
style="max-width: 50%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AddNewBuildingRoomComponent } from './add-new-building-room.component';
|
||||
|
||||
describe('AddNewBuildingRoomComponent', () => {
|
||||
let component: AddNewBuildingRoomComponent;
|
||||
let fixture: ComponentFixture<AddNewBuildingRoomComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ AddNewBuildingRoomComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(AddNewBuildingRoomComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import { Component, OnInit } from "@angular/core";
|
||||
import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { BlockUI, NgBlockUI } from "ng-block-ui";
|
||||
import { BuildingService } from "../../service/monitoring-api.service";
|
||||
|
||||
@Component({
|
||||
selector: "app-add-new-building-room",
|
||||
templateUrl: "./add-new-building-room.component.html",
|
||||
styleUrls: ["./add-new-building-room.component.css"],
|
||||
})
|
||||
export class AddNewBuildingRoomComponent implements OnInit {
|
||||
public breadcrumb: any;
|
||||
dataMasterstatus: any;
|
||||
listRoomMaster: any;
|
||||
listBuildingMaster: any;
|
||||
mode: string;
|
||||
userProfileForm: FormGroup;
|
||||
public userList: FormArray;
|
||||
submitted = false;
|
||||
get userFormGroup() {
|
||||
return this.userProfileForm.get('userArray') as FormArray;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private monitoringApiService: BuildingService,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Add building",
|
||||
links: [
|
||||
{
|
||||
name: "Add Building",
|
||||
isLink: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.userProfileForm = this.formBuilder.group({
|
||||
buildingId: ['', Validators.required],
|
||||
roomId: [''],
|
||||
statusId: ['', Validators.required],
|
||||
userArray: this.formBuilder.array([this.createRoom()]),
|
||||
});
|
||||
|
||||
this.userList = this.userProfileForm.get('userArray') as FormArray;
|
||||
this.listMaster();
|
||||
this.listRoom();
|
||||
this.listBuilding();
|
||||
}
|
||||
|
||||
createRoom(): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
roomId: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
listMaster() {
|
||||
this.monitoringApiService.getMasterData().subscribe((res) => {
|
||||
this.dataMasterstatus = res.results.data.find(
|
||||
(item) => item.name === "master_status"
|
||||
).headerDetailParam;
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
listRoom() {
|
||||
this.monitoringApiService.getListRoomData().subscribe((res) => {
|
||||
this.listRoomMaster = res.results;
|
||||
});
|
||||
}
|
||||
|
||||
listBuilding(){
|
||||
this.monitoringApiService.getMasterBuildingData().subscribe((res) => {
|
||||
this.listBuildingMaster = res.results.data;
|
||||
console.log(this.listBuildingMaster);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
save(){
|
||||
this.submitted = true;
|
||||
|
||||
if (this.userProfileForm.invalid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = this.userProfileForm.value;
|
||||
const transformedData = {
|
||||
buildingId: formData.buildingId,
|
||||
roomId: formData.userArray.map(room => room.roomId),
|
||||
statusId: formData.statusId
|
||||
};
|
||||
|
||||
this.monitoringApiService.postBatchBuilding(transformedData).subscribe((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
addPhone() {
|
||||
this.userList.push(this.createRoom());
|
||||
}
|
||||
|
||||
removePhone(index) {
|
||||
this.userList.removeAt(index);
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.router.navigate(["/monitoring"]);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,70 +5,98 @@
|
|||
</div>
|
||||
<div class="content-body">
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="col-xl-4 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5 style="color: #ffffff">Electricity</h5>
|
||||
<h3 class="danger">{{ topCard?.kwh_consumption }} Kwh</h3>
|
||||
<h3 style="color: #ffffff">
|
||||
{{ topCard?.kwh_consumption }} Kwh
|
||||
</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-energy danger font-large-2 float-right"></i>
|
||||
<div
|
||||
style="
|
||||
background-color: #414f2b;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="icon-energy primary font-large-1 float-right"
|
||||
style="color: #bef264 !important"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5 style="color: #ffffff">Water</h5>
|
||||
<h3 class="success">{{ topCard?.water_consumption }}</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i
|
||||
class="icon-speedometer success font-large-2 float-right"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="col-xl-4 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5 style="color: #ffffff">Device</h5>
|
||||
<h3 class="warning">{{ topCard?.total_device }}</h3>
|
||||
<h3 style="color: #ffffff">{{ topCard?.total_device }}</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-bulb warning font-large-2 float-right"></i>
|
||||
<div
|
||||
style="
|
||||
background-color: #414f2b;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="ri-device-line primary font-large-1 float-right"
|
||||
style="color: #bef264 !important"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 col-12">
|
||||
<div class="col-xl-4 col-md-6 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5 style="color: #ffffff">Room</h5>
|
||||
<h3 class="info">{{ topCard?.total_room }}</h3>
|
||||
<h3 style="color: #ffffff">{{ topCard?.total_room }}</h3>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-map info font-large-2 float-right"></i>
|
||||
<div
|
||||
style="
|
||||
background-color: #414f2b;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<i
|
||||
class="ri-building-2-line font-large-1 float-right"
|
||||
style="color: #bef264 !important"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -234,10 +262,8 @@
|
|||
<div class="media align-items-stretch mb-2">
|
||||
<div class="align-self-center">
|
||||
<i
|
||||
class="icon-bulb background-round info font-large-2 mr-2"
|
||||
style="
|
||||
color: #BFF264 !important;
|
||||
"
|
||||
class="icon-bulb background-round info font-large-1 mr-2"
|
||||
style="color: #bff264 !important"
|
||||
></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
|
|
@ -259,6 +285,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-right">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
style="
|
||||
background-color: #c3f164 !important;
|
||||
color: #000000 !important;
|
||||
border-radius: 10px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 700;
|
||||
"
|
||||
>
|
||||
See More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, ElementRef, ViewChild } from "@angular/core";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { ChartOptions, ChartType, ChartDataset } from "chart.js";
|
||||
import { EnergyMonitoringService } from "../../service/energy-monitoring.service";
|
||||
import { CurrencyPipe } from "@angular/common";
|
||||
|
|
@ -118,12 +118,14 @@ export class DetailComponent {
|
|||
temperature: any;
|
||||
deviceCategory: any;
|
||||
chartKwhWater: any;
|
||||
paramsId: any;
|
||||
//......
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private energyMonitoringService: EnergyMonitoringService,
|
||||
private currencyPipe: CurrencyPipe
|
||||
private currencyPipe: CurrencyPipe,
|
||||
private router: Router,
|
||||
) {}
|
||||
|
||||
get formattedSummaryCost(): string {
|
||||
|
|
@ -142,6 +144,7 @@ export class DetailComponent {
|
|||
this.breadcrumbLink();
|
||||
this.route.params.subscribe((params) => {
|
||||
const buildingId = params["id"];
|
||||
this.paramsId = params["id"];
|
||||
if (buildingId) {
|
||||
this.dataEnergyMonitoringTopCard(buildingId);
|
||||
this.dataEnergyMonitoringSummary(buildingId);
|
||||
|
|
@ -342,4 +345,8 @@ export class DetailComponent {
|
|||
|
||||
return weeks;
|
||||
}
|
||||
|
||||
seeMore(paramsId){
|
||||
this.router.navigate(["/device/control-device"],{ queryParams: { paramsId } });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
|
|||
import { BuildingComponent } from './building/building.component';
|
||||
import { RoomComponent } from './room/room.component';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-building-room.component';
|
||||
import { ArchwizardModule } from 'angular-archwizard';
|
||||
import { DetailComponent } from './detail/detail.component';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
|
|
@ -32,7 +31,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
|
|||
declarations: [
|
||||
BuildingComponent,
|
||||
RoomComponent,
|
||||
AddNewBuildingRoomComponent,
|
||||
DetailComponent,
|
||||
DetailRoomComponent,
|
||||
FilterTopUsePipe,
|
||||
|
|
@ -81,21 +79,6 @@ import { NgSelectModule } from '@ng-select/ng-select';
|
|||
component: RoomComponent,
|
||||
data: { mode: 'room' }
|
||||
},
|
||||
{
|
||||
path: 'add-new-room',
|
||||
component: AddNewBuildingRoomComponent,
|
||||
data: { mode: 'room' }
|
||||
},
|
||||
{
|
||||
path: 'add-new-building',
|
||||
component: AddNewBuildingRoomComponent,
|
||||
data: { mode: 'build' }
|
||||
},
|
||||
{
|
||||
path: 'edit-new-building/:id',
|
||||
component: AddNewBuildingRoomComponent,
|
||||
data: { mode: 'build' }
|
||||
},
|
||||
{
|
||||
path: 'view-new-building/:id',
|
||||
component: DetailComponent,
|
||||
|
|
|
|||
Loading…
Reference in New Issue