perbaikan validasi penempatan device dalam ruangan

This commit is contained in:
Fuzi_fauzia 2024-08-20 15:37:50 +07:00
parent 2a4135c966
commit b195055651
3 changed files with 88 additions and 45 deletions

View File

@ -4,13 +4,14 @@ import { ActivatedRoute, Router } from "@angular/router";
import { BlockUI, NgBlockUI } from "ng-block-ui"; import { BlockUI, NgBlockUI } from "ng-block-ui";
import { BuildingService } from "../../service/monitoring-api.service"; import { BuildingService } from "../../service/monitoring-api.service";
import { LoginService } from "../../service/login.service"; import { LoginService } from "../../service/login.service";
import Swal from "sweetalert2";
@Component({ @Component({
selector: "app-add-edit-device", selector: "app-add-edit-device",
templateUrl: "./add-edit-device.component.html", templateUrl: "./add-edit-device.component.html",
styleUrls: ["./add-edit-device.component.css"], styleUrls: ["./add-edit-device.component.css"],
}) })
export class AddEditDeviceComponent implements OnInit{ export class AddEditDeviceComponent implements OnInit {
@ViewChild("f", { read: true }) userProfileForm: NgForm; @ViewChild("f", { read: true }) userProfileForm: NgForm;
dataMasterCategori: any; dataMasterCategori: any;
dataMasterVoltage: any; dataMasterVoltage: any;
@ -43,8 +44,8 @@ export class AddEditDeviceComponent implements OnInit{
ngOnInit() { ngOnInit() {
this.authService.startTokenCheck(); this.authService.startTokenCheck();
this.authService.startTrackingActivity(); this.authService.startTrackingActivity();
this.route.params.subscribe(params => { this.route.params.subscribe((params) => {
const id = params['id']; const id = params["id"];
this.deviceId = id; this.deviceId = id;
if (id) { if (id) {
this.loadDevice(id); this.loadDevice(id);
@ -52,7 +53,7 @@ export class AddEditDeviceComponent implements OnInit{
this.dataListRoomBuilding(); this.dataListRoomBuilding();
} }
}); });
this.setBreadcrumb() this.setBreadcrumb();
this.route.data.subscribe((data) => { this.route.data.subscribe((data) => {
this.mode = data.mode; this.mode = data.mode;
}); });
@ -69,52 +70,72 @@ export class AddEditDeviceComponent implements OnInit{
} }
loadDevice(deviceId: string) { loadDevice(deviceId: string) {
this.monitoringApiService.getDeviceById(deviceId).subscribe(data => { this.monitoringApiService.getDeviceById(deviceId).subscribe((data) => {
this.dataDevice = data; this.dataDevice = data;
this.formGetDevice(data) this.formGetDevice(data);
}); });
} }
dataListMaster() { dataListMaster() {
this.monitoringApiService.getMasterListData().subscribe(data => { this.monitoringApiService.getMasterListData().subscribe((data) => {
const dataCategory = data.data.find( const dataCategory = data.data.find(
(item) => item.name === "master_category" (item) => item.name === "master_category"
).headerDetailParam; ).headerDetailParam;
this.dataMasterCategori = dataCategory.filter(item => item.statusName.toLowerCase() === "aktif" || item.status.toLowerCase() === "71") this.dataMasterCategori = dataCategory.filter(
(item) =>
item.statusName.toLowerCase() === "aktif" ||
item.status.toLowerCase() === "71"
);
const dataVoltage = data.data.find( const dataVoltage = data.data.find(
(item) => item.name === "master_voltage" (item) => item.name === "master_voltage"
).headerDetailParam; ).headerDetailParam;
this.dataMasterVoltage = dataVoltage.filter(item => item.statusName.toLowerCase() === "aktif" || item.status.toLowerCase() === "71") this.dataMasterVoltage = dataVoltage.filter(
(item) =>
item.statusName.toLowerCase() === "aktif" ||
item.status.toLowerCase() === "71"
);
const dataType = data.data.find( const dataType = data.data.find(
(item) => item.name === "master_type" (item) => item.name === "master_type"
).headerDetailParam; ).headerDetailParam;
this.dataMasterType = dataType.filter(item => item.statusName.toLowerCase() === "aktif" || item.status.toLowerCase() === "71") this.dataMasterType = dataType.filter(
(item) =>
item.statusName.toLowerCase() === "aktif" ||
item.status.toLowerCase() === "71"
);
const dataDuration = data.data.find( const dataDuration = data.data.find(
(item) => item.name === "master_duration" (item) => item.name === "master_duration"
).headerDetailParam; ).headerDetailParam;
this.dataMasterDuration = dataDuration.filter(item => item.statusName.toLowerCase() === "aktif" || item.status.toLowerCase() === "71") this.dataMasterDuration = dataDuration.filter(
(item) =>
item.statusName.toLowerCase() === "aktif" ||
item.status.toLowerCase() === "71"
);
const dataStatus = data.data.find( const dataStatus = data.data.find(
(item) => item.name === "master_status" (item) => item.name === "master_status"
).headerDetailParam; ).headerDetailParam;
this.dataMasterStatus = dataStatus.filter(item => item.statusName.toLowerCase() === "aktif" || item.status.toLowerCase() === "71") this.dataMasterStatus = dataStatus.filter(
(item) =>
item.statusName.toLowerCase() === "aktif" ||
item.status.toLowerCase() === "71"
);
}); });
} }
dataListRoomBuilding() { dataListRoomBuilding() {
this.monitoringApiService.getBuildingRoomList().subscribe(data => { this.monitoringApiService.getBuildingRoomList().subscribe((data) => {
const newArray = data.results.data.map(item => ({ const newArray = data.results.data.map((item) => ({
id: item.id, id: item.id,
name: `${item.buildingEntity.name} (${item.roomEntity.name})` name: `${item.buildingEntity.name} (${item.roomEntity.name})`,
})); }));
this.dataBuildingRoomList = newArray this.dataBuildingRoomList = newArray;
}); });
} }
formGetDevice(data){ formGetDevice(data) {
this.projectInfo.patchValue({ this.projectInfo.patchValue({
name: data.data.name, name: data.data.name,
categoryId: data.data.categoryId, categoryId: data.data.categoryId,
@ -122,21 +143,24 @@ export class AddEditDeviceComponent implements OnInit{
typeId: data.data.typeId, typeId: data.data.typeId,
durationId: data.data.durationId, durationId: data.data.durationId,
roomBuildingId: data.data.roomBuildingId, roomBuildingId: data.data.roomBuildingId,
watt: data.data.watt watt: data.data.watt,
}); });
if (this.mode === 'view') { if (this.mode === "view") {
this.formDisable(); this.formDisable();
} }
if (this.projectInfo.get("roomBuildingId").value) {
this.projectInfo.get("roomBuildingId").disable();
}
} }
formDisable(){ formDisable() {
this.projectInfo.get('name').disable() this.projectInfo.get("name").disable();
this.projectInfo.get('categoryId').disable() this.projectInfo.get("categoryId").disable();
this.projectInfo.get('voltageId').disable() this.projectInfo.get("voltageId").disable();
this.projectInfo.get('typeId').disable() this.projectInfo.get("typeId").disable();
this.projectInfo.get('durationId').disable() this.projectInfo.get("durationId").disable();
this.projectInfo.get('roomBuildingId').disable() this.projectInfo.get("roomBuildingId").disable();
this.projectInfo.get('watt').disable() this.projectInfo.get("watt").disable();
} }
setBreadcrumb() { setBreadcrumb() {
@ -226,12 +250,39 @@ export class AddEditDeviceComponent implements OnInit{
if (event.keyCode !== 8 && !pattern.test(inputChar)) { if (event.keyCode !== 8 && !pattern.test(inputChar)) {
event.preventDefault(); event.preventDefault();
} }
} }
saveEdit() { saveEdit() {
this.monitoringApiService.putDevice(this.projectInfo.value, this.deviceId).subscribe(data => { if (this.projectInfo.get("roomBuildingId").value) {
this.router.navigate(["/device"]); this.monitoringApiService
}); .putDevice(this.projectInfo.value, this.deviceId)
.subscribe((data) => {
this.router.navigate(["/device"]);
});
} else {
Swal.fire({
title: "Apakah kamu yakin?",
text: "Data lokasi device tidak dapat diubah!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, save it!",
}).then((result) => {
if (result.isConfirmed) {
this.monitoringApiService
.putDevice(this.projectInfo.value, this.deviceId)
.subscribe((data) => {
this.router.navigate(["/device"]);
});
Swal.fire({
title: "Saved!",
text: "Data berhasil disimpan.",
icon: "success",
});
}
});
}
} }
cancel() { cancel() {

View File

@ -29,10 +29,10 @@
(ngSubmit)="onProjectInfoSubmit()" (ngSubmit)="onProjectInfoSubmit()"
> >
<div class="form-body"> <div class="form-body">
<h4 class="form-section" style="color: #242222"> <!-- <h4 class="form-section" style="color: #242222">
<i class="feather ft-user" style="color: #242222"></i> <i class="feather ft-user" style="color: #242222"></i>
General Information General Information
</h4> </h4> -->
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
@ -246,15 +246,9 @@
</option> </option>
</select> </select>
</div> </div>
<small <div *ngIf="projectInfo.get('statusId').touched && projectInfo.get('statusId').invalid" class="text-danger">
class="form-text text-muted danger" Status is required.
*ngIf="submitted && f.statusId.errors" </div>
class="invalid-feedback"
>
<div *ngIf="f.statusId.errors.required">
Status is required
</div>
</small>
</div> </div>
</div> </div>
</div> </div>

View File

@ -69,8 +69,6 @@ export class AddEditMasterComponent implements OnInit {
editForm() { editForm() {
console.log(this.dataRow);
const formControls = { const formControls = {
id: this.dataRow.id, id: this.dataRow.id,
name: [this.dataRow.name, Validators.required], name: [this.dataRow.name, Validators.required],