fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

integrasi table device dan table master category

This commit is contained in:
Fuzi_fauzia 2024-05-18 20:26:44 +07:00
parent cfa140b6ea
commit e92c576844
15 changed files with 431 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html
View File

@ -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
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
*ngIf="submitted && f.name.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
<div *ngIf="f.name.errors.required">
Device Name is required
</div>
</small>
</div>
@ -430,7 +430,7 @@
>
<i class="feather ft-x"></i> Cancel
</button>
<button type="submit" class="btn btn-primary">
<button type="submit" class="btn btn-primary" (click)="saveEdit()">
<i class="la la-check"></i> Save
</button>
</div>

35
src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
View File

@ -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"]);

28
src/app/content/hemat-app/device/device.component.html
View File

@ -63,6 +63,20 @@
{{ rowIndex + 1 }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="icon"
[flexGrow]="1"
[minWidth]="140"
>
<ng-template ngx-datatable-header-template>
<span>Device Name</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row">
<span class="avatar avatar-sm rounded-circle">
<img [src]="row.icon" /><i></i
></span>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Name"
[flexGrow]="1"
@ -175,12 +189,12 @@
>
<i class="ficon feather ft-edit"></i>
</button>
<button
<!-- <button
class="btn btn-sm btn-danger"
(click)="deleteRow(row)"
>
<i class="ficon feather ft-trash-2"></i>
</button>
</button> -->
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
@ -198,11 +212,13 @@
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Use </h6>
<h6 class="text-muted">Total Use</h6>
<h3>3,568</h3>
</div>
<div class="align-self-center">
<i class="feather ft-zap danger font-large-2 float-right"></i>
<i
class="feather ft-zap danger font-large-2 float-right"
></i>
</div>
</div>
</div>
@ -219,7 +235,9 @@
<h3>Rp 1.000.000.000.000</h3>
</div>
<div class="align-self-center">
<i class="feather ft-trending-up success font-large-2 float-right"></i>
<i
class="feather ft-trending-up success font-large-2 float-right"
></i>
</div>
</div>
</div>

18
src/app/content/hemat-app/device/device.component.ts
View File

@ -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(() => {

56
src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.css Normal file
View File

@ -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;
}

44
src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html Normal file
View File

@ -0,0 +1,44 @@
<div class="modal-header">
<h4 class="modal-title">Add New Row</h4>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="myForm">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name:</label>
<input
type="text"
class="form-control"
id="name"
formControlName="name"
/>
</div>
<div class="form-group col-md-6">
<label for="status">Status:</label>
<select
id="projectinput5"
class="form-control"
formControlName="status"
>
<option value="1">Aktif</option>
<option value="0">Tidak Aktif</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
(click)="activeModal.dismiss('Cross click')"
>
Close
</button>
<button type="button" class="btn btn-primary" (click)="addRow()">
Save Changes
</button>
</div>

23
src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.spec.ts Normal file
View File

@ -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<AddEditMasterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddEditMasterComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(AddEditMasterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

54
src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts Normal file
View File

@ -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)`);
}
}
}

13
src/app/content/hemat-app/master/master-category/master-category.component.html
View File

@ -29,6 +29,7 @@
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
(click)="openAddMasterModal()"
>
<i class="feather ft-plus"></i>&nbsp; Add new master
</button>
@ -74,7 +75,7 @@
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Salary"
name="Status"
[flexGrow]="1"
[minWidth]="90"
>
@ -85,7 +86,7 @@
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
{{ value === '1' ? 'Aktif' : 'Tidak Aktif'}}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@ -98,20 +99,16 @@
let-rowIndex="rowIndex"
let-row="row"
>
<button
class="btn btn-sm btn-info mr-1"
>
<i class="ficon feather ft-eye"></i>
</button>
<button
class="btn btn-sm btn-warning mr-1"
(click)="editRow(row)"
>
<i class="ficon feather ft-edit"></i>
</button>
<button
class="btn btn-sm btn-danger"
(click)="deleteRow(row)"
>
<i class="ficon feather ft-trash-2"></i>

107
src/app/content/hemat-app/master/master-category/master-category.component.ts
View File

@ -1,27 +1,31 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { BlockUI, NgBlockUI } from 'ng-block-ui';
import { TableApiService } from 'src/app/_services/table-api.service';
import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { BlockUI, NgBlockUI } from "ng-block-ui";
import { TableApiService } from "src/app/_services/table-api.service";
import { BuildingService } from "../../service/monitoring-api.service";
import { AddEditMasterComponent } from "../add-edit-master/add-edit-master.component";
@Component({
selector: 'app-master-category',
templateUrl: './master-category.component.html',
styleUrls: ['./master-category.component.css']
selector: "app-master-category",
templateUrl: "./master-category.component.html",
styleUrls: ["./master-category.component.css"],
})
export class MasterCategoryComponent implements OnInit{
export class MasterCategoryComponent implements OnInit {
data: any;
filteredRows: any[];
searchTerm: string = "";
rows: any = [];
public breadcrumb: any;
dataMasterCategori: any;
@BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
constructor(
private tableApiservice: TableApiService,
private modalService: NgbModal,
private router: Router
private router: Router,
private monitoringApiService: BuildingService
) {}
ngOnInit() {
@ -42,19 +46,25 @@ export class MasterCategoryComponent implements OnInit{
}
fetchData() {
this.tableApiservice.getTableInitialisationData().subscribe((response) => {
this.data = response;
this.filteredRows = this.data.rows;
this.monitoringApiService.getMasterData().subscribe((res) => {
this.data = res.data.data;
this.dataMasterCategori = res.data.data.find(
(item) => item.name === "master_category"
);
this.filteredRows = this.dataMasterCategori.headerDetailParam;
});
}
filterRows() {
if (!this.searchTerm) {
this.filteredRows = [...this.data.rows];
this.filteredRows = [
...this.data.find((item) => item.name === "master_category")
.headerDetailParam,
];
} else {
this.filteredRows = this.data.rows.filter((row) =>
this.rowContainsSearchTerm(row)
);
this.filteredRows = this.data
.find((item) => item.name === "master_category")
.headerDetailParam.filter((row) => this.rowContainsSearchTerm(row));
}
}
@ -62,22 +72,69 @@ export class MasterCategoryComponent implements OnInit{
const searchTermLC = this.searchTerm.toLowerCase();
return Object.values(row).some(
(value) =>
value !== null &&
value.toString().toLowerCase().includes(searchTermLC)
value !== null && value.toString().toLowerCase().includes(searchTermLC)
);
}
viewRow(row) {
console.log("View row:", row);
this.router.navigate(["/device/view", row.name]);
openAddMasterModal() {
const modalRef = this.modalService.open(AddEditMasterComponent, {
size: "lg",
});
modalRef.componentInstance.headerId = this.dataMasterCategori.id;
modalRef.componentInstance.mode = "add";
modalRef.result.then(
(result) => {
console.log(result);
if (result) {
this.monitoringApiService
.postHeaderDetailParam(result)
.subscribe((res) => {
console.log(res);
this.fetchData();
});
}
},
(reason) => {
console.log(`Dismissed: ${reason}`);
}
);
}
editRow(row) {
console.log("Edit row:", row);
this.router.navigate(["/device/edit", row.name]);
const modalRef = this.modalService.open(AddEditMasterComponent, {
size: "lg",
});
modalRef.componentInstance.headerId = this.dataMasterCategori.id;
modalRef.componentInstance.dataRow = row;
modalRef.componentInstance.mode = "edit";
modalRef.result.then(
(result) => {
console.log(result);
if (result) {
this.monitoringApiService
.putHeaderDetailParam(result, row.id)
.subscribe((res) => {
console.log(res);
this.fetchData();
});
}
},
(reason) => {
console.log(`Dismissed: ${reason}`);
}
);
}
deleteRow(row) {
console.log("Delete row:", row);
const confirmDelete = confirm("Are you sure you want to delete this item?");
if (confirmDelete) {
this.monitoringApiService
.deleteHeaderDetailParam(row.id)
.subscribe((res) => {
this.fetchData();
});
}
}
}

7
src/app/content/hemat-app/master/master.module.ts
View File

@ -8,7 +8,7 @@ import { MasterTypeComponent } from './master-type/master-type.component';
import { RouterModule } from '@angular/router';
import { ChartistModule } from 'ng-chartist';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgChartsModule } from 'ng2-charts';
import { BlockUIModule } from 'ng-block-ui';
@ -21,6 +21,7 @@ import { MasterStatusComponent } from './master-status/master-status.component';
import { MasterDurationUseComponent } from './master-duration-use/master-duration-use.component';
import { MasterUserComponent } from './master-user/master-user.component';
import { MasterRoleComponent } from './master-role/master-role.component';
import { AddEditMasterComponent } from './add-edit-master/add-edit-master.component';
@ -33,7 +34,8 @@ import { MasterRoleComponent } from './master-role/master-role.component';
MasterStatusComponent,
MasterDurationUseComponent,
MasterUserComponent,
MasterRoleComponent
MasterRoleComponent,
AddEditMasterComponent
],
imports: [
CommonModule,
@ -45,6 +47,7 @@ import { MasterRoleComponent } from './master-role/master-role.component';
NgxDatatableModule,
PerfectScrollbarModule,
BreadcrumbModule,
ReactiveFormsModule,
NgbModule,
BlockUIModule.forRoot({
template: BlockTemplateComponent

2
src/app/content/hemat-app/monitoring/building/building.component.html
View File

@ -43,7 +43,7 @@
class="text-muted mb-0"
style="font-family: Montserrat, sans-serif"
>
{{ data.build_name }}
{{ data.build_name ? data.build_name : data.name}}
</h3>
</div>
</div>

17
src/app/content/hemat-app/monitoring/building/building.component.ts
View File

@ -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;

70
src/app/content/hemat-app/service/monitoring-api.service.ts
View File

@ -9,8 +9,74 @@ export class BuildingService {
constructor(private http: HttpClient) {}
getBuildingData(page: number = 1, limit: number = 10): Observable<any> {
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<any>(url, { headers });
}
getDeviceData(page: number = 1, limit: number = 10): Observable<any> {
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<any>(url, { headers });
}
getSyncDeviceData(page: number = 1, limit: number = 10): Observable<any> {
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<any>(url, { headers });
}
getDeviceById(deviceId: any): Observable<any> {
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<any>(url, { headers });
}
getMasterData(page: number = 1, limit: number = 10): Observable<any> {
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<any>(url, { headers });
}
postHeaderDetailParam(data: any): Observable<any> {
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<any>(url, data, { headers });
}
putHeaderDetailParam(data: any, id: any): Observable<any> {
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<any>(url, data, { headers });
}
deleteHeaderDetailParam(id: any): Observable<any> {
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<any>(url, { headers });
}
}

3
src/app/login/login.component.ts
View File

@ -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