From e92c576844c42e51874ff68bc1b165415116531d Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Sat, 18 May 2024 20:26:44 +0700 Subject: [PATCH] integrasi table device dan table master category --- .../add-edit-device.component.html | 14 +-- .../add-edit-device.component.ts | 35 +++++- .../hemat-app/device/device.component.html | 28 ++++- .../hemat-app/device/device.component.ts | 18 ++- .../add-edit-master.component.css | 56 +++++++++ .../add-edit-master.component.html | 44 +++++++ .../add-edit-master.component.spec.ts | 23 ++++ .../add-edit-master.component.ts | 54 +++++++++ .../master-category.component.html | 13 +-- .../master-category.component.ts | 107 ++++++++++++++---- .../content/hemat-app/master/master.module.ts | 7 +- .../building/building.component.html | 2 +- .../monitoring/building/building.component.ts | 17 ++- .../service/monitoring-api.service.ts | 70 +++++++++++- src/app/login/login.component.ts | 3 + 15 files changed, 431 insertions(+), 60 deletions(-) create mode 100644 src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.css create mode 100644 src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html create mode 100644 src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.spec.ts create mode 100644 src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html index 92e2f6f..9bbd4e1 100644 --- a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html +++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html @@ -36,19 +36,19 @@ type="text" id="projectinput1" class="form-control" - formControlName="firstName" - placeholder="First Name" + formControlName="name" + placeholder="Device Name" [ngClass]="{ - 'is-invalid': submitted && f.firstName.errors + 'is-invalid': submitted && f.name.errors }" /> -
- First Name is required +
+ Device Name is required
@@ -430,7 +430,7 @@ > Cancel - diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts index 07d3c76..cf38bc1 100644 --- a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts +++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from "@angular/core"; import { FormBuilder, FormGroup, NgForm, 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-edit-device", @@ -53,17 +54,32 @@ export class AddEditDeviceComponent implements OnInit{ constructor( private formBuilder: FormBuilder, private router: Router, - private route: ActivatedRoute + private route: ActivatedRoute, + private monitoringApiService: BuildingService, ) {} ngOnInit() { this.route.data.subscribe((data) => { + console.log(data); + this.mode = data.mode; + console.log(this.mode); + + }); + this.route.params.subscribe(params => { + console.log(params); + + const deviceId = params['id']; + console.log(deviceId); + + if (deviceId) { + this.loadDevice(deviceId); + } }); this.setBreadcrumb() this.projectInfo = this.formBuilder.group({ - firstName: ["", Validators.required], + name: ["", Validators.required], lastName: ["", Validators.required], email: ["", [Validators.required, Validators.email]], phone: ["", Validators.required], @@ -75,6 +91,15 @@ export class AddEditDeviceComponent implements OnInit{ }); } + loadDevice(deviceId: string) { + this.monitoringApiService.getDeviceById(deviceId).subscribe(data => { + console.log(data); + this.projectInfo = this.formBuilder.group({ + name: data.name, + }); + }); + } + setBreadcrumb() { if (this.isAddMode()) { this.breadcrumb = { @@ -164,7 +189,11 @@ export class AddEditDeviceComponent implements OnInit{ } } - addData() {} + + + saveEdit() { + + } cancel() { this.router.navigate(["/device"]); diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html index db0f6b6..ad36cad 100644 --- a/src/app/content/hemat-app/device/device.component.html +++ b/src/app/content/hemat-app/device/device.component.html @@ -63,6 +63,20 @@ {{ rowIndex + 1 }} + + + Device Name + + + + + + - + --> @@ -198,11 +212,13 @@
-
Total Use
+
Total Use

3,568

- +
@@ -219,7 +235,9 @@

Rp 1.000.000.000.000

- +
diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts index 84492f2..0376dac 100644 --- a/src/app/content/hemat-app/device/device.component.ts +++ b/src/app/content/hemat-app/device/device.component.ts @@ -4,6 +4,7 @@ import { NgBlockUI, BlockUI } from "ng-block-ui"; import { TableApiService } from "src/app/_services/table-api.service"; import { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component"; import { ActivatedRoute, Router } from "@angular/router"; +import { BuildingService } from "../service/monitoring-api.service"; @Component({ selector: "app-device", @@ -23,7 +24,8 @@ export class DeviceComponent implements OnInit { constructor( private tableApiservice: TableApiService, private modalService: NgbModal, - private router: Router + private router: Router, + private monitoringApiService: BuildingService, ) {} ngOnInit() { @@ -45,9 +47,10 @@ export class DeviceComponent implements OnInit { } fetchData() { - this.tableApiservice.getTableInitialisationData().subscribe((response) => { - this.data = response; - this.filteredRows = this.data.rows; + this.monitoringApiService.getDeviceData().subscribe((res) => { + console.log(res); + this.data = res; + this.filteredRows = this.data.data; }); } @@ -98,11 +101,11 @@ export class DeviceComponent implements OnInit { } viewRow(row) { - this.router.navigate(["/device/view", row.name]); + this.router.navigate(["/device/view", row.id]); } editRow(row) { - this.router.navigate(["/device/edit", row.name]); + this.router.navigate(["/device/edit", row.id]); } deleteRow(row) { @@ -112,6 +115,9 @@ export class DeviceComponent implements OnInit { addDevice(): void { // Aktifkan spinner this.spinnerActive = true; + this.monitoringApiService.getSyncDeviceData().subscribe((res) => { + console.log(res); + }); // Lakukan proses tambahan (misalnya, panggil API atau proses yang memakan waktu) setTimeout(() => { diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.css b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.css new file mode 100644 index 0000000..fa6d7fd --- /dev/null +++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.css @@ -0,0 +1,56 @@ +/* modal-add-edit.component.css */ +::ng-deep .modal-backdrop.show { + z-index: auto !important; + } + + ::ng-deep .input-group-append .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-radius: 0; + border-left: 0; + flex-grow: 0; + border-left: 1px solid #ced4da; + padding: 0.375rem 0.75rem; + } + + ::ng-deep .input-group { + display: flex; + flex-wrap: nowrap; /* Prevents wrapping of the items */ + align-items: center; + } + + ::ng-deep .form-control { + flex-grow: 1; /* Ensures select takes up available space */ + padding-right: 0.5rem; + } + + ::ng-deep .input-group select, + ::ng-deep .input-group .input-group-append .btn { + padding-right: 5px; /* Adjust padding if necessary */ + } + + ::ng-deep .input-group .form-control { + margin-right: 2px; /* Adjust margin to make space */ + } + + + .form-group { + margin-bottom: 1rem; + } + + .form-control { + display: block; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + } + \ No newline at end of file diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html new file mode 100644 index 0000000..511590b --- /dev/null +++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html @@ -0,0 +1,44 @@ +
+

Add New Row

+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+
+ + +
diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.spec.ts b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.spec.ts new file mode 100644 index 0000000..3dcac33 --- /dev/null +++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddEditMasterComponent } from './add-edit-master.component'; + +describe('AddEditMasterComponent', () => { + let component: AddEditMasterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddEditMasterComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddEditMasterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts new file mode 100644 index 0000000..e215737 --- /dev/null +++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts @@ -0,0 +1,54 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'app-add-edit-master', + templateUrl: './add-edit-master.component.html', + styleUrls: ['./add-edit-master.component.css'] +}) +export class AddEditMasterComponent implements OnInit{ + @Input() headerId: number; + @Input() dataRow: any; + @Input() mode: any; + myForm: FormGroup; + + constructor(public activeModal: NgbActiveModal, private fb: FormBuilder) {} + + ngOnInit() { + this.createForm(); + if (this.dataRow) { + this.editForm(); + } + } + + createForm() { + this.myForm = this.fb.group({ + name: ['', Validators.required], + status: ['', Validators.required], + headerId: this.headerId + }); + } + + editForm(){ + this.myForm = this.fb.group({ + id: this.dataRow.id, + name: this.dataRow.name, + status: this.dataRow.status, + headerId: this.dataRow.headerId + }); + } + + addRow() { + if (this.myForm.valid) { + this.activeModal.close(this.myForm.value); + } + } + + addDepartment() { + let newDept = prompt("Enter new department name:"); + if (newDept) { + alert(`Department ${newDept} added! (simulated)`); + } + } +} diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.html b/src/app/content/hemat-app/master/master-category/master-category.component.html index 707d4ca..b25954e 100644 --- a/src/app/content/hemat-app/master/master-category/master-category.component.html +++ b/src/app/content/hemat-app/master/master-category/master-category.component.html @@ -29,6 +29,7 @@
@@ -74,7 +75,7 @@ @@ -85,7 +86,7 @@ ngx-datatable-cell-template let-value="value" > - {{ value }} + {{ value === '1' ? 'Aktif' : 'Tidak Aktif'}} -
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 35270b3..5f50ac8 100644 --- a/src/app/content/hemat-app/monitoring/building/building.component.ts +++ b/src/app/content/hemat-app/monitoring/building/building.component.ts @@ -48,10 +48,25 @@ export class BuildingComponent { }, }; this.fetchData(); - this.buildingData(); + // this.buildingData(); } fetchData() { + // this.monitoringApiService.getBuildingData().subscribe((res) => { + // this.data = res; + // this.filteredRows = res.data; + // console.log(this.filteredRows); + + // this.dataTop = []; + // for (let i = 0; i < res.length; i++) { + // if (res[i].topUse.label[i]) { + // this.dataTop.push({ + // label: res[i].topUse.label ? res[i].topUse.label : '', + // value: res[i].topUse.value ? res[i].topUse.value : 0, + // }); + // } + // } + // }); this.monitoringService.getMonitoringBuildingData().subscribe((res) => { this.data = res; this.filteredRows = res; diff --git a/src/app/content/hemat-app/service/monitoring-api.service.ts b/src/app/content/hemat-app/service/monitoring-api.service.ts index 53af053..117bd31 100644 --- a/src/app/content/hemat-app/service/monitoring-api.service.ts +++ b/src/app/content/hemat-app/service/monitoring-api.service.ts @@ -9,8 +9,74 @@ export class BuildingService { constructor(private http: HttpClient) {} getBuildingData(page: number = 1, limit: number = 10): Observable { - const url = `http://167.86.72.99:3100/building?page=${page}&limit=${limit}`; - const headers = new HttpHeaders().set('Content-Type', 'application/json'); + const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`; + // const headers = new HttpHeaders().set('Content-Type', 'application/json'); + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); return this.http.get(url, { headers }); } + + getDeviceData(page: number = 1, limit: number = 10): Observable { + const url = `https://kapi.absys.ninja/hemat/devices?page=${page}&limit=${limit}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getSyncDeviceData(page: number = 1, limit: number = 10): Observable { + const url = `https://kapi.absys.ninja/hemat/devices/Synchronization`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getDeviceById(deviceId: any): Observable { + const url = `https://kapi.absys.ninja/hemat/devices/${deviceId}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + getMasterData(page: number = 1, limit: number = 10): Observable { + const url = `https://kapi.absys.ninja/hemat/header-param?page=${page}&limit=${limit}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } + + postHeaderDetailParam(data: any): Observable { + const url = `https://kapi.absys.ninja/hemat/header-detail-param`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.post(url, data, { headers }); + } + putHeaderDetailParam(data: any, id: any): Observable { + const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.put(url, data, { headers }); + } + + deleteHeaderDetailParam(id: any): Observable { + const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.delete(url, { headers }); + } } diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts index a6903d4..bc55662 100644 --- a/src/app/login/login.component.ts +++ b/src/app/login/login.component.ts @@ -64,8 +64,11 @@ export class LoginComponent implements OnInit { email: this.f.email.value, password: this.f.password.value, }; + this.authService.doLogin(value).then( (res) => { + console.log(res, 'res login'); + if ( this.loginForm.controls["rememberMe"] && this.loginForm.controls["rememberMe"].value