diff --git a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.css b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.css deleted file mode 100644 index 07a05e3..0000000 --- a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.html b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.html deleted file mode 100644 index 093c460..0000000 --- a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.html +++ /dev/null @@ -1,176 +0,0 @@ -
-
-
- -
-
-
-
-
- - - - - -
-
-
-
-
- - -
-
- - -
- -
-
-
-
-
- - -
-
-
-
- -
- -
- - -
-
-
-
-
- - -
-
- - - - - -
-
-
- Profile Image -
-
-
- - -
-
-
-
-
-
diff --git a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.spec.ts b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.spec.ts deleted file mode 100644 index 280a869..0000000 --- a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.spec.ts +++ /dev/null @@ -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; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddNewBuildingRoomComponent ] - }) - .compileComponents(); - - fixture = TestBed.createComponent(AddNewBuildingRoomComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts deleted file mode 100644 index 4ebaaf1..0000000 --- a/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts +++ /dev/null @@ -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"]); - } -} diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html index cc45279..2d1dbee 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.html +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html @@ -5,70 +5,98 @@
-
+
Electricity
-

{{ topCard?.kwh_consumption }} Kwh

+

+ {{ topCard?.kwh_consumption }} Kwh +

- +
+ +
-
-
-
-
-
-
-
Water
-

{{ topCard?.water_consumption }}

-
-
- -
-
-
-
-
-
-
+
Device
-

{{ topCard?.total_device }}

+

{{ topCard?.total_device }}

- +
+ +
-
+
Room
-

{{ topCard?.total_room }}

+

{{ topCard?.total_room }}

- +
+ +
@@ -234,10 +262,8 @@
@@ -259,6 +285,20 @@
+
+ +
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts index e7c43d2..c42689a 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts @@ -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 } }); + } } diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts index 7966276..4eda176 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.module.ts +++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts @@ -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,