integrasi monitoring list

This commit is contained in:
Fuzi_fauzia 2024-06-03 16:15:23 +07:00
parent a72ca4ef59
commit 6061f4e58e
13 changed files with 485 additions and 202 deletions

View File

@ -12,7 +12,7 @@
src="../../../../assets/images/logo/logo.png">
<!-- <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3> -->
<!-- <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}} - (V@2024.05.22.01)</h3> -->
<h3 class="brand-text" style="color: aliceblue;">Hemat - (V@2024.05.31.01)</h3>
<h3 class="brand-text" style="color: aliceblue;">Hemat - (V@2024.06.03.01)</h3>
</a></li>
<li class="nav-item d-md-none"><a class="nav-link open-navbar-container" data-toggle="collapse"

View File

@ -92,13 +92,28 @@
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="categoryEntity"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Category</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value.name }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="watt"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>watt</span>
<span>Watt</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
@ -108,52 +123,37 @@
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="typeId"
name="typeEntity"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>typeId</span>
<span>Type</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
{{ value.name }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="roomBuildingId"
[flexGrow]="1"
[minWidth]="40"
>
<ng-template ngx-datatable-header-template>
<span>roomBuildingId</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="voltageId"
name="voltageEntity"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>voltageId</span>
<span>Voltage</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
{{ value.name }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="statusId"
name="statusEntity"
[flexGrow]="1"
[minWidth]="90"
>
@ -164,7 +164,7 @@
ngx-datatable-cell-template
let-value="value"
>
{{ value === 2 ? "Aktif" : "Tidak Aktif" }}
{{ value.name }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
@ -204,7 +204,7 @@
</div>
</div>
</section>
<section id="configuration">
<!-- <section id="configuration">
<div class="row">
<div class="col-lg-6 col-12">
<div class="card pull-up">
@ -245,7 +245,7 @@
</div>
</div>
</div>
</section>
</section> -->
</div>
</div>
</div>

View File

@ -0,0 +1,151 @@
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<section id="basic-form-layouts">
<div class="row">
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
<m-card>
<ng-container mCardHeaderTitle>
<h2>
{{
isEditMode()
? "Edit List Monitoring"
: isViewMode()
? "View List Monitoring"
: "Add New List Monitoring"
}}
</h2>
</ng-container>
<ng-container mCardBody>
<form
[formGroup]="projectInfo"
(ngSubmit)="onProjectInfoSubmit()"
>
<div class="form-body">
<h4 class="form-section">
<i class="feather ft-user"></i> General Information
</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="buildingId">Building *</label>
<div class="input-group">
<select
id="buildingId"
class="form-control"
formControlName="buildingId"
[ngClass]="{
'is-invalid': submitted && f.buildingId.errors
}"
>
<option
*ngFor="let data of dataBuildingList"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.buildingId.errors"
class="invalid-feedback"
>
<div *ngIf="f.buildingId.errors.required">
Building is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="buildingId">Room *</label>
<div class="input-group">
<select
id="buildingId"
class="form-control"
formControlName="buildingId"
[ngClass]="{
'is-invalid': submitted && f.buildingId.errors
}"
>
<option
*ngFor="let data of dataRoomList"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.buildingId.errors"
class="invalid-feedback"
>
<div *ngIf="f.buildingId.errors.required">
Room is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="buildingId">Status *</label>
<div class="input-group">
<select
id="buildingId"
class="form-control"
formControlName="buildingId"
[ngClass]="{
'is-invalid': submitted && f.buildingId.errors
}"
>
<option
*ngFor="let data of dataMasterStatus"
[value]="data.id"
>
{{ data.name }}
</option>
</select>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.buildingId.errors"
class="invalid-feedback"
>
<div *ngIf="f.buildingId.errors.required">
Building is required
</div>
</small>
</div>
</div>
</div>
</div>
<div class="form-actions">
<button
type="button"
class="btn btn-warning mr-1"
(click)="cancel()"
>
<i class="feather ft-x"></i> Cancel
</button>
<button type="submit" class="btn btn-primary">
<i class="la la-check"></i> Save
</button>
</div>
</form>
</ng-container>
</m-card>
</div>
</div>
</section>
</div>
</div>
</div>

View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddEditListComponent } from './add-edit-list.component';
describe('AddEditListComponent', () => {
let component: AddEditListComponent;
let fixture: ComponentFixture<AddEditListComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddEditListComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(AddEditListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,165 @@
import { Component, 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-list',
templateUrl: './add-edit-list.component.html',
styleUrls: ['./add-edit-list.component.css']
})
export class AddEditListComponent {
@ViewChild("f", { read: true }) userProfileForm: NgForm;
model: any = {};
mode: string;
public breadcrumb: any;
projectInfo: FormGroup;
submitted = false;
dataBuildingList: any;
dataRoomList: any;
dataMasterStatus: any
@BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
constructor(
private formBuilder: FormBuilder,
private router: Router,
private route: ActivatedRoute,
private monitoringApiService: BuildingService,
) {}
ngOnInit() {
this.route.data.subscribe((data) => {
this.mode = data.mode;
});
this.setBreadcrumb();
this.dataListBuilding();
this.dataListRoom();
this.dataListMaster();
this.projectInfo = this.formBuilder.group({
buildingId: ["", Validators.required],
roomId: ["", Validators.required],
statusId: ["", Validators.required],
});
}
setBreadcrumb() {
if (this.isAddMode()) {
this.breadcrumb = {
mainlabel: "Cost Management",
links: [
{
name: "Home",
isLink: false,
},
{
name: "Cost Management",
isLink: false,
},
{
name: "Add New Cost Management",
isLink: false,
},
],
};
} else if (this.isEditMode()) {
this.breadcrumb = {
mainlabel: "Cost Management",
links: [
{
name: "Home",
isLink: false,
},
{
name: "Cost Management",
isLink: false,
},
{
name: "Edit New Cost Management",
isLink: false,
},
],
};
} else if (this.isViewMode()) {
this.breadcrumb = {
mainlabel: "Cost Management",
links: [
{
name: "Home",
isLink: false,
},
{
name: "Cost Management",
isLink: false,
},
{
name: "View New Cost Management",
isLink: false,
},
],
};
}
}
isEditMode() {
return this.mode === "edit";
}
isViewMode() {
return this.mode === "view";
}
isAddMode() {
return this.mode === "add";
}
get f() {
return this.projectInfo.controls;
}
onProjectInfoSubmit() {
this.submitted = true;
if (this.projectInfo.invalid) {
return;
}
}
keyPress(event: any) {
const pattern = /[0-9\+\-\ ]/;
const inputChar = String.fromCharCode(event.charCode);
if (event.keyCode !== 8 && !pattern.test(inputChar)) {
event.preventDefault();
}
}
dataListBuilding() {
this.monitoringApiService.getBuildingList().subscribe(data => {
this.dataBuildingList = data.data
});
}
dataListRoom() {
this.monitoringApiService.getListRoomData().subscribe(data => {
this.dataRoomList = data.data
});
}
dataListMaster() {
this.monitoringApiService.getMasterListData().subscribe(data => {
const dataStatus = data.data.find(
(item) => item.name === "master_status"
).headerDetailParam;
this.dataMasterStatus = dataStatus.filter(item => item.status === "2")
});
}
addData() {}
cancel() {
this.router.navigate(["/list-monitoring"]);
}
}

View File

@ -29,7 +29,7 @@
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
[routerLink]="['/cost-management/add-row']"
[routerLink]="['/list-monitoring/add-row']"
>
<i class="feather ft-plus"></i>&nbsp; Add new data
</button>
@ -59,83 +59,41 @@
{{ rowIndex + 1 }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Name"
name="buildingEntity"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Estimasi Cost Name</span>
<span>Building</span>
</ng-template>
<ng-template
let-value="value"
ngx-datatable-cell-template
>
{{ value }}
{{ value.name }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Position"
name="roomEntity"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Category</span>
<span>Room</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
{{ value.name }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Office"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Location</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Age"
[flexGrow]="1"
[minWidth]="40"
>
<ng-template ngx-datatable-header-template>
<span>Location Room</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Startdate"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Duration Use</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Salary"
name="statusEntity"
[flexGrow]="1"
[minWidth]="90"
>
@ -146,9 +104,10 @@
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
{{ value.name }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Actions"
[flexGrow]="1"

View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { TableApiService } from 'src/app/_services/table-api.service';
import { BuildingService } from '../service/monitoring-api.service';
@Component({
selector: 'app-list-monitoring',
@ -16,7 +17,8 @@ export class ListMonitoringComponent {
constructor(
private tableApiservice: TableApiService,
private router: Router
private router: Router,
private monitoringApiService: BuildingService
) {}
ngOnInit() {
@ -37,9 +39,12 @@ export class ListMonitoringComponent {
}
fetchData() {
this.tableApiservice.getTableInitialisationData().subscribe((response) => {
this.data = response;
this.filteredRows = this.data.rows;
this.monitoringApiService.getBuildingRoomList().subscribe((res) => {
console.log(res);
this.data = res;
this.filteredRows = this.data.results.data;
console.log(this.filteredRows);
});
}
@ -64,12 +69,12 @@ export class ListMonitoringComponent {
viewRow(row) {
console.log("View row:", row);
this.router.navigate(["/cost-management/view", row.name]);
this.router.navigate(["/list-monitoring/view", row.name]);
}
editRow(row) {
console.log("Edit row:", row);
this.router.navigate(["/cost-management/edit", row.name]);
this.router.navigate(["/list-monitoring/edit", row.name]);
}
deleteRow(row) {

View File

@ -12,12 +12,14 @@ import { BlockUIModule } from 'ng-block-ui';
import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { ListMonitoringComponent } from './list-monitoring.component';
import { AddEditListComponent } from './add-edit-list/add-edit-list.component';
@NgModule({
declarations: [
ListMonitoringComponent
ListMonitoringComponent,
AddEditListComponent
],
imports: [
CommonModule,
@ -37,7 +39,21 @@ import { ListMonitoringComponent } from './list-monitoring.component';
path: '',
component: ListMonitoringComponent
},
{
path: 'add-row',
component: AddEditListComponent,
data: { mode: 'add' }
},
{
path: 'edit/:id',
component: AddEditListComponent,
data: { mode: 'edit' }
},
{
path: 'view/:id',
component: AddEditListComponent,
data: { mode: 'view' }
}
])
]
})

View File

@ -1 +1,38 @@
<p>master-user works!</p>
<div class="app-content content bg-maintenance-image">
<div class="content-wrapper">
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
<div class="card-body">
<span class="card-title text-center">
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
width="250" alt="logo">
</span>
</div>
<div class="card-body text-center">
<h3>This page is under maintenance</h3>
<p>We're sorry for the inconvenience.
<br> Please check back later.</p>
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
</div>
<hr>
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</p> -->
</div>
</div>
</div>
</section>
</div>
</div>
</div>

View File

@ -108,6 +108,15 @@ export class BuildingService {
return this.http.get<any>(url, { headers });
}
getBuildingList(): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/building/list`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
getListRoomData(): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/room/list`;
const headers = new HttpHeaders({

View File

@ -1,119 +1,37 @@
<div class="app-content content">
<div class="app-content content bg-maintenance-image">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<section id="configuration">
<div class="row">
<div
class="col-12"
*blockUI="'zeroConfiguration'; message: 'Loading'"
>
<m-card>
<ng-container mCardHeaderTitle>
User Access Table
</ng-container>
<ng-container mCardBody>
<div class="row mb-2">
<div class="col-md-6">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
(touchstart)="onTouchStart($event)"
/>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-secondary">
<i class="feather ft-plus"></i>&nbsp; Add new user
</button>
</div>
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
<div class="card-body">
<span class="card-title text-center">
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
width="250" alt="logo">
</span>
</div>
<div class="card-dashboard">
<ngx-datatable
class="bootstrap table-bordered"
[limit]="15"
[rows]="filteredRows"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="50"
fxFlex="auto"
[scrollbarH]="true"
>
<ngx-datatable-column
name="#"
[flexGrow]="1"
[minWidth]="10"
>
<ng-template
ngx-datatable-cell-template
let-rowIndex="rowIndex"
>
{{ rowIndex + 1 }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Name"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Category Name</span>
</ng-template>
<ng-template
let-value="value"
ngx-datatable-cell-template
>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Salary"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span>Status</span>
</ng-template>
<ng-template
ngx-datatable-cell-template
let-value="value"
>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="Actions"
[flexGrow]="1"
[minWidth]="150"
>
<ng-template
ngx-datatable-cell-template
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">
<i class="ficon feather ft-edit"></i>
</button>
<button class="btn btn-sm btn-danger">
<i class="ficon feather ft-trash-2"></i>
</button>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
<div class="card-body text-center">
<h3>This page is under maintenance</h3>
<p>We're sorry for the inconvenience.
<br> Please check back later.</p>
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
</div>
</ng-container>
</m-card>
<hr>
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
class="la la-facebook"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
class="la la-twitter"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
class="la la-linkedin font-medium-4"></span></a>
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
class="la la-github font-medium-4"></span></a>
</p> -->
</div>
</div>
</div>
</div>
</section>
</section>
</div>
</div>
</div>

View File

@ -133,7 +133,7 @@
<p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
>
<span>New to Modern ? (v@2024.05.31.01)</span>
<span>New to Modern ? (v@2024.06.03.01)</span>
</p>
<div class="card-body">
<a