From dc987d78c95872581c9b6df3009600dd5c7740d9 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Tue, 23 Apr 2024 17:02:47 +0700 Subject: [PATCH] penambahan page monitoring building dan monitoring room --- .../add-new-building-room.component.css | 329 ++++++++ .../add-new-building-room.component.html | 720 ++++++++++++++++++ .../add-new-building-room.component.spec.ts | 23 + .../add-new-building-room.component.ts | 141 ++++ .../building/building.component.html | 17 + .../monitoring/building/building.component.ts | 18 + .../hemat-app/monitoring/monitoring.module.ts | 16 +- .../monitoring/room/room.component.css | 190 +++++ .../monitoring/room/room.component.html | 150 +++- .../monitoring/room/room.component.ts | 203 ++++- 10 files changed, 1798 insertions(+), 9 deletions(-) create mode 100644 src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.css create mode 100644 src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.html create mode 100644 src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.spec.ts create mode 100644 src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts 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 new file mode 100644 index 0000000..07a05e3 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.css @@ -0,0 +1,329 @@ +.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 new file mode 100644 index 0000000..036c239 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.html @@ -0,0 +1,720 @@ +
+
+
+ +
+
+
+
+
+ + +

Add New

+ + +
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ + + +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ + + +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ + + +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ + + +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+
+
+
+ + +
+
+ + +
+ + +
+
+
+
+
+
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 new file mode 100644 index 0000000..280a869 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.spec.ts @@ -0,0 +1,23 @@ +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 new file mode 100644 index 0000000..de3142f --- /dev/null +++ b/src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts @@ -0,0 +1,141 @@ +import { Component, OnInit } from "@angular/core"; +import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { Router } from "@angular/router"; +import { BlockUI, NgBlockUI } from "ng-block-ui"; + +@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; + numberTab: FormGroup; + stepOneForm: FormGroup; + stepTwoForm: FormGroup; + stepThreeForm: FormGroup; + stepFourForm: FormGroup; + isStepFourReached = false; + + repeatForm: FormGroup; + public repeatList: FormArray; + + get repeatFormGroup() { + return this.repeatForm.get('repeatArray') as FormArray; + } + + @BlockUI('numberTabs') blockUINumberTabs: NgBlockUI; + @BlockUI('iconTabs') blockUIIconTabs: NgBlockUI; + + countries = ["Amsterdam", "Berlin", "Frankfurt"]; + eventType = ["Banquet", "Fund Raiser", "Dinner Party", "Wedding"]; + eventLocation = ["Amsterdam", "Berlin", "Frankfurt"]; + eventStatus = ["Planning", "In Progress", "Finished"]; + requirements1 = [ + { id: 1, name: "Staffing" }, + { id: 2, name: "Catering" }, + ]; + agendaItems1 = [ + { id: 1, name: "1st item", idName: "item1" }, + { id: 2, name: "2st item", idName: "item2" }, + { id: 3, name: "3st item", idName: "item3" }, + { id: 4, name: "4st item", idName: "item4" }, + { id: 5, name: "5st item", idName: "item5" }, + ]; + + constructor(private formBuilder: FormBuilder, private router: Router,) {} + + ngOnInit() { + this.breadcrumb = { + mainlabel: "Device", + links: [ + { + name: "Home", + isLink: false, + link: "/dashboard/sales", + }, + { + name: "Device", + isLink: false, + }, + ], + }; + this.numberTab = this.formBuilder.group({ + buildName: ["", Validators.required], + phone: ["", Validators.required], + phoneNumber: ["", [Validators.required]], + email: ["", [Validators.required, Validators.email]], + address: ["", [Validators.required]], + owned: ["", [Validators.required]], + + }); + + this.repeatForm = this.formBuilder.group({ + repeatArray: this.formBuilder.array([this.createRepeat()]) + }); + + this.repeatList = this.repeatForm.get('repeatArray') as FormArray; + } + + createRepeat(): FormGroup { + return this.formBuilder.group({ + roomName: ['', Validators.required], + room: ['', Validators.required], + floor: ['', Validators.required], + status: ['', Validators.required], + }); + } + + addRepeat() { + this.repeatList.push(this.createRepeat()); + } + + removeRepeat(index) { + this.repeatList.removeAt(index); + } + + getRepeatFormGroup(index): FormGroup { + const formGroup = this.repeatList.controls[index] as FormGroup; + return formGroup; + } + + public previousFourthStep() { + this.isStepFourReached = true; + } + get f() { + return this.stepOneForm.controls; + } + get i() { + return this.stepTwoForm.controls; + } + get j() { + return this.stepThreeForm.controls; + } + get k() { + return this.stepFourForm.controls; + } + + submit() { + window.alert('Form submitted.'); + } + + cancel() { + this.router.navigate(["/monitoring"]); + } + + reloadNumberTabs() { + this.blockUINumberTabs.start('Loading..'); + + setTimeout(() => { + this.blockUINumberTabs.stop(); + }, 2500); + } + + reloadIconTabs() { + this.blockUIIconTabs.start('Loading..'); + + setTimeout(() => { + this.blockUIIconTabs.stop(); + }, 2500); + } +} diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html index 9196dc9..3bb1fdb 100644 --- a/src/app/content/hemat-app/monitoring/building/building.component.html +++ b/src/app/content/hemat-app/monitoring/building/building.component.html @@ -5,6 +5,23 @@
+
+
+ +
+
+ +
+
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts index 48f80cb..feecfc6 100644 --- a/src/app/content/hemat-app/monitoring/building/building.component.ts +++ b/src/app/content/hemat-app/monitoring/building/building.component.ts @@ -31,6 +31,24 @@ export class BuildingComponent { labels: [], }, }, + { + id: 3, + build_name: "PT Ikea", + total: "342", + donut: { + series: [50, 50], + labels: [], + }, + }, + { + id: 4, + build_name: "PT Tokopedia", + total: "342", + donut: { + series: [90, 10], + labels: [], + }, + }, ]; constructor(private chartApiservice: ChartApiService) {} diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts index 906523c..c9b4e27 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.module.ts +++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { ChartistModule } from 'ng-chartist'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; -import { FormsModule } from '@angular/forms'; -import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { NgbDatepickerModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { CardModule } from '../../../content/partials/general/card/card.module'; import { NgChartsModule } from 'ng2-charts'; import { BlockUIModule } from 'ng-block-ui'; @@ -15,14 +15,18 @@ 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'; @NgModule({ declarations: [ BuildingComponent, - RoomComponent + RoomComponent, + AddNewBuildingRoomComponent ], imports: [ CommonModule, + ReactiveFormsModule, ChartistModule, FormsModule, NgChartsModule, @@ -30,6 +34,8 @@ import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module'; MatchHeightModule, NgxDatatableModule, PerfectScrollbarModule, + NgbDatepickerModule, + ArchwizardModule, BreadcrumbModule, NgbModule, BlockUIModule.forRoot({ @@ -44,6 +50,10 @@ import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module'; path: 'monitoring-room', component: RoomComponent }, + { + path: 'add-new-room', + component: AddNewBuildingRoomComponent + }, ]) ] }) diff --git a/src/app/content/hemat-app/monitoring/room/room.component.css b/src/app/content/hemat-app/monitoring/room/room.component.css index e69de29..bd893c0 100644 --- a/src/app/content/hemat-app/monitoring/room/room.component.css +++ b/src/app/content/hemat-app/monitoring/room/room.component.css @@ -0,0 +1,190 @@ +:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label { + font-family: inherit; + font-size: medium; + font-weight: bold; + color: #6B6F82; +} +:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right { + position: relative; + height: 50px !important; +} + +:host ::ng-deep .datatable-icon-right:before { + font-family: 'icofont'; + font-style: normal; +} + +:host ::ng-deep .datatable-icon-skip:before { + font-family: 'icofont'; + font-style: normal; +} + +:host ::ng-deep .datatable-icon-left:before { + font-family: 'icofont'; + font-style: normal; +} + +:host ::ng-deep .datatable-icon-left:before { + content: "\2039"; + font-size: x-large; +} + +:host ::ng-deep .datatable-icon-prev:before { + content: "\00AB"; + font-size: x-large; +} + +:host ::ng-deep .datatable-icon-right:before { + content: "\203A"; + font-size: x-large; +} + +:host ::ng-deep .datatable-icon-skip:before { + content: "\00BB"; + font-size: x-large; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left, +.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right, +.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right, +.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a, +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] { + background-color: #d4d2e7; + font-weight: bold; + font-size: larger; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a { + height: 32px; + min-width: 34px; + line-height: 22px; + padding: 0; + border-radius: 3px; + margin: 0 3px; + text-align: center; + vertical-align: top; + padding-top: 3px; + text-decoration: none; + vertical-align: bottom; + color: #7c8091; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left, +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { + font-size: 14px; + line-height: 9px; + padding: 0px 08px; + background-color: #ffffff; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left, +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right, +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip, +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev, +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a { + background-color: #545454; + font-weight: bold; + color: white; + +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, +.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a { + background-color: #545454; + font-weight: bold; + color: white; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer { + background: #727e8e; + color: #ededed; + margin-top: -1px; + overflow: inherit; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-header { + font-weight: bold; + height: unset !important; + overflow: inherit +} + +:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager { + flex: 0 0 0%; +} + +:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager { + display: flex; +} + +:host ::ng-deep .block-ui-wrapper { + background: rgba(255, 249, 249, 0.5) !important; +} +:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager { + flex: 0 0 0%; +} + +:host ::ng-deep .ngx-datatable { + display: -webkit-box; +} + diff --git a/src/app/content/hemat-app/monitoring/room/room.component.html b/src/app/content/hemat-app/monitoring/room/room.component.html index 79f0391..01634af 100644 --- a/src/app/content/hemat-app/monitoring/room/room.component.html +++ b/src/app/content/hemat-app/monitoring/room/room.component.html @@ -1 +1,149 @@ -

room works!

+
+
+
+ +
+
+
+
+
+ + Room Table + +
+
+ +
+
+ +
+
+
+ + + + Room Name + + + {{ value }} + + + + + Category + + + + + + + + + + + Popularity + + + + + + + + + + Amount + + + {{value}} + + + + + + + + + +
+ + +
+
+
+
+
+
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.ts b/src/app/content/hemat-app/monitoring/room/room.component.ts index 4dbe412..619d416 100644 --- a/src/app/content/hemat-app/monitoring/room/room.component.ts +++ b/src/app/content/hemat-app/monitoring/room/room.component.ts @@ -1,10 +1,203 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; @Component({ - selector: 'app-room', - templateUrl: './room.component.html', - styleUrls: ['./room.component.css'] + selector: "app-room", + templateUrl: "./room.component.html", + styleUrls: ["./room.component.css"], }) -export class RoomComponent { +export class RoomComponent implements OnInit { + public breadcrumb: any; + // filteredRows: any[]; + searchTerm: string = ""; + firstRow = [ + "../../../assets/images/portrait/small/avatar-s-4.png", + "../../../assets/images/portrait/small/avatar-s-5.png", + "../../../assets/images/portrait/small/avatar-s-6.png", + ]; + secondRow = [ + "../../../assets/images/portrait/small/avatar-s-7.png", + "../../../assets/images/portrait/small/avatar-s-8.png", + ]; + thirdRow = [ + "../../../assets/images/portrait/small/avatar-s-1.png", + "../../../assets/images/portrait/small/avatar-s-2.png", + "../../../assets/images/portrait/small/avatar-s-3.png", + ]; + fourthRow = [ + "../../../assets/images/portrait/small/avatar-s-11.png", + "../../../assets/images/portrait/small/avatar-s-12.png", + ]; + fifthRow = [ + "../../../assets/images/portrait/small/avatar-s-6.png", + "../../../assets/images/portrait/small/avatar-s-4.png", + ]; + filteredRows = [ + { + type: "danger", + value: 100, + product: "iPhone X", + image: this.firstRow, + buttonname: "Mobile", + amount: "$ 1200.00", + bagde: "+8 more", + }, + { + type: "success", + value: 75, + product: "iPad", + image: this.secondRow, + buttonname: "Teblet", + amount: "$ 1190.00", + bagde: "+5 more", + }, + { + type: "danger", + value: 65, + product: "OnePlus", + image: this.thirdRow, + buttonname: "Mobile", + amount: "$ 999.00", + bagde: "+3 more", + }, + { + type: "success", + value: 55, + product: "ZenPad", + image: this.fourthRow, + buttonname: "Teblet", + amount: "$ 1150.00", + }, + { + type: "danger", + value: 45, + product: "Pixel 2", + image: this.fifthRow, + buttonname: "Mobile", + amount: "$ 1180.00", + }, + { + type: "danger", + value: 100, + product: "iPhone X", + image: this.firstRow, + buttonname: "Mobile", + amount: "$ 1200.00", + bagde: "+8 more", + }, + { + type: "success", + value: 75, + product: "iPad", + image: this.secondRow, + buttonname: "Teblet", + amount: "$ 1190.00", + bagde: "+5 more", + }, + { + type: "danger", + value: 65, + product: "OnePlus", + image: this.thirdRow, + buttonname: "Mobile", + amount: "$ 999.00", + bagde: "+3 more", + }, + { + type: "success", + value: 55, + product: "ZenPad", + image: this.fourthRow, + buttonname: "Teblet", + amount: "$ 1150.00", + }, + { + type: "danger", + value: 45, + product: "Pixel 2", + image: this.fifthRow, + buttonname: "Mobile", + amount: "$ 1180.00", + }, + { + type: "danger", + value: 100, + product: "iPhone X", + image: this.firstRow, + buttonname: "Mobile", + amount: "$ 1200.00", + bagde: "+8 more", + }, + { + type: "success", + value: 75, + product: "iPad", + image: this.secondRow, + buttonname: "Teblet", + amount: "$ 1190.00", + bagde: "+5 more", + }, + { + type: "danger", + value: 65, + product: "OnePlus", + image: this.thirdRow, + buttonname: "Mobile", + amount: "$ 999.00", + bagde: "+3 more", + }, + { + type: "success", + value: 55, + product: "ZenPad", + image: this.fourthRow, + buttonname: "Teblet", + amount: "$ 1150.00", + }, + { + type: "danger", + value: 45, + product: "Pixel 2", + image: this.fifthRow, + buttonname: "Mobile", + amount: "$ 1180.00", + }, + ]; + + constructor() {} + + ngOnInit() { + this.breadcrumb = { + mainlabel: "Device", + links: [ + { + name: "Home", + isLink: false, + link: "/dashboard/sales", + }, + { + name: "Device", + isLink: false, + }, + ], + }; + } + + filterRows() { + if (!this.searchTerm) { + this.filteredRows = [...this.filteredRows]; + } else { + this.filteredRows = this.filteredRows.filter((row) => + this.rowContainsSearchTerm(row) + ); + } + } + + rowContainsSearchTerm(row: any): boolean { + const searchTermLC = this.searchTerm.toLowerCase(); + return Object.values(row).some( + (value) => + value !== null && value.toString().toLowerCase().includes(searchTermLC) + ); + } }