From 3f1c97ebe4455af4b723847dcf5fae84ee3a4f73 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Wed, 5 Jun 2024 13:35:58 +0700 Subject: [PATCH] penyesuaian UI device --- .../_layout/settings/menu-settings.config.ts | 4 +- .../hemat-app/device/device.component.html | 177 ++++++++++++------ .../hemat-app/device/device.component.ts | 17 ++ .../hemat-app/monitoring/monitoring.module.ts | 14 +- .../surveillance/surveillance.component.css | 0 .../surveillance/surveillance.component.html | 38 ++++ .../surveillance.component.spec.ts | 23 +++ .../surveillance/surveillance.component.ts | 10 + .../monitoring/water/water.component.css | 0 .../monitoring/water/water.component.html | 38 ++++ .../monitoring/water/water.component.spec.ts | 23 +++ .../monitoring/water/water.component.ts | 10 + 12 files changed, 296 insertions(+), 58 deletions(-) create mode 100644 src/app/content/hemat-app/monitoring/surveillance/surveillance.component.css create mode 100644 src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html create mode 100644 src/app/content/hemat-app/monitoring/surveillance/surveillance.component.spec.ts create mode 100644 src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts create mode 100644 src/app/content/hemat-app/monitoring/water/water.component.css create mode 100644 src/app/content/hemat-app/monitoring/water/water.component.html create mode 100644 src/app/content/hemat-app/monitoring/water/water.component.spec.ts create mode 100644 src/app/content/hemat-app/monitoring/water/water.component.ts diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index ba22220..22c73cc 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/src/app/_layout/settings/menu-settings.config.ts @@ -954,11 +954,11 @@ export const MenuSettingsConfig: MenuConfig = { }, { title: 'Surveillance', - page: '/monitoring' + page: '/monitoring/surveillance' }, { title: 'Water Consumption', - page: '/monitoring' + page: '/monitoring/water-monitoring' } ] } diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html index 609b12e..073ec4a 100644 --- a/src/app/content/hemat-app/device/device.component.html +++ b/src/app/content/hemat-app/device/device.component.html @@ -4,6 +4,68 @@
+
+
+
+
+
+
+
+
+
Total Device
+

{{filteredRows.length}}

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
Total Device Aktive
+

{{totalOn}}

+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
Total Device Non-Active
+

{{totalOff}}

+
+
+ +
+
+
+
+
+
+
+
+
- Device Table +
-
- +
+
+ + +
-
+
+
+ + +
+
+
+
+ + +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
- - Image - + + Image +
-
diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts index fb48169..aae3eec 100644 --- a/src/app/content/hemat-app/device/device.component.ts +++ b/src/app/content/hemat-app/device/device.component.ts @@ -13,12 +13,26 @@ import { BuildingService } from "../service/monitoring-api.service"; }) export class DeviceComponent implements OnInit { data: any; + totalOn: any; + totalOff: any; filteredRows: any[]; searchTerm: string = ""; rows: any = []; public breadcrumb: any; spinnerActive: boolean = false; + singlebasicSelected: any; + + singleSelectArray = [ + { item_id: 1, item_text: "Alaska" }, + { item_id: 2, item_text: "California" }, + { item_id: 3, item_text: "Colorado" }, + { item_id: 4, item_text: "New Mexico" }, + { item_id: 5, item_text: "Alabama" }, + { item_id: 6, item_text: "Connecticut" }, + { item_id: 7, item_text: "New York" }, + ]; + @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI; constructor( @@ -51,6 +65,9 @@ export class DeviceComponent implements OnInit { this.data = res; this.filteredRows = this.data.results.data; console.log(this.filteredRows); + this.totalOn = this.filteredRows.filter((row) => row.statusEntity.name.toLowerCase() === 'aktif').length + this.totalOff = this.filteredRows.filter((row) => row.statusEntity.name.toLowerCase() === 'nonaktif').length + // console.log(totalon); }); } diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts index 2c367d0..c1c1faf 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.module.ts +++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts @@ -24,6 +24,8 @@ import { NgxMasonryModule } from 'ngx-masonry'; import { UiSwitchModule } from 'ngx-ui-switch'; import { DetailRoomComponent } from './detail-room/detail-room.component'; import { FilterTopUsePipe } from './monitoring.pipe'; +import { SurveillanceComponent } from './surveillance/surveillance.component'; +import { WaterComponent } from './water/water.component'; @NgModule({ declarations: [ @@ -32,7 +34,9 @@ import { FilterTopUsePipe } from './monitoring.pipe'; AddNewBuildingRoomComponent, DetailComponent, DetailRoomComponent, - FilterTopUsePipe + FilterTopUsePipe, + SurveillanceComponent, + WaterComponent ], imports: [ CommonModule, @@ -62,6 +66,14 @@ import { FilterTopUsePipe } from './monitoring.pipe'; path: '', component: BuildingComponent, }, + { + path: 'surveillance', + component: SurveillanceComponent, + }, + { + path: 'water-monitoring', + component: WaterComponent, + }, { path: 'monitoring-room/:id', component: RoomComponent, diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.css b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html new file mode 100644 index 0000000..0bdeda6 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html @@ -0,0 +1,38 @@ +
+
+
+
+
+
+
+
+ + logo + +
+
+

Coming Soon

+

We're sorry for the inconvenience. +
Please check back later.

+
+
+
+ +
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.spec.ts b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.spec.ts new file mode 100644 index 0000000..2fec006 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SurveillanceComponent } from './surveillance.component'; + +describe('SurveillanceComponent', () => { + let component: SurveillanceComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SurveillanceComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SurveillanceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts new file mode 100644 index 0000000..fce0c45 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-surveillance', + templateUrl: './surveillance.component.html', + styleUrls: ['./surveillance.component.css'] +}) +export class SurveillanceComponent { + +} diff --git a/src/app/content/hemat-app/monitoring/water/water.component.css b/src/app/content/hemat-app/monitoring/water/water.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/monitoring/water/water.component.html b/src/app/content/hemat-app/monitoring/water/water.component.html new file mode 100644 index 0000000..0bdeda6 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/water/water.component.html @@ -0,0 +1,38 @@ +
+
+
+
+
+
+
+
+ + logo + +
+
+

Coming Soon

+

We're sorry for the inconvenience. +
Please check back later.

+
+
+
+ +
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/src/app/content/hemat-app/monitoring/water/water.component.spec.ts b/src/app/content/hemat-app/monitoring/water/water.component.spec.ts new file mode 100644 index 0000000..d8ad768 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/water/water.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WaterComponent } from './water.component'; + +describe('WaterComponent', () => { + let component: WaterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ WaterComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(WaterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/monitoring/water/water.component.ts b/src/app/content/hemat-app/monitoring/water/water.component.ts new file mode 100644 index 0000000..c52ed9a --- /dev/null +++ b/src/app/content/hemat-app/monitoring/water/water.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-water', + templateUrl: './water.component.html', + styleUrls: ['./water.component.css'] +}) +export class WaterComponent { + +}