integrasi edit device, penyesuaian UI jadi vertical dan penambahan UI list monitoring
This commit is contained in:
@@ -55,24 +55,24 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Duration Use *</label>
|
||||
<label for="categoryId">Category *</label>
|
||||
<div class="input-group">
|
||||
<select
|
||||
id="projectinput5"
|
||||
id="categoryId"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
formControlName="categoryId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
'is-invalid': submitted && f.categoryId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
*ngFor="let data of dataMasterCategori"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ interest }}
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-append" *ngIf="mode === 'edit'">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@@ -84,11 +84,11 @@
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
*ngIf="submitted && f.categoryId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.categoryId.errors.required">
|
||||
Category is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
@@ -97,24 +97,24 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Category *</label>
|
||||
<label for="voltageId">Voltage *</label>
|
||||
<div class="input-group">
|
||||
<select
|
||||
id="projectinput5"
|
||||
id="voltageId"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
formControlName="voltageId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
'is-invalid': submitted && f.voltageId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
*ngFor="let data of dataMasterVoltage"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ interest }}
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-append" *ngIf="mode === 'edit'">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@@ -126,40 +126,40 @@
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
*ngIf="submitted && f.voltageId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.voltageId.errors.required">
|
||||
Voltage is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Selection Option *</label>
|
||||
<label for="typeId">Type *</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
id="typeId"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
formControlName="typeId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
'is-invalid': submitted && f.typeId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
*ngFor="let data of dataMasterType"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ interest }}
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
*ngIf="submitted && f.typeId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.typeId.errors.required">
|
||||
Type is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
@@ -168,58 +168,58 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Location *</label>
|
||||
<label for="durationId">Duration Use *</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
id="durationId"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
formControlName="durationId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
'is-invalid': submitted && f.durationId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
*ngFor="let data of dataMasterDuration"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ interest }}
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
*ngIf="submitted && f.durationId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.durationId.errors.required">
|
||||
Duration is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Status *</label>
|
||||
<label for="statusId">Status *</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
id="statusId"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
formControlName="statusId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
'is-invalid': submitted && f.statusId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
*ngFor="let data of dataMasterStatus"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ interest }}
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
*ngIf="submitted && f.statusId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.statusId.errors.required">
|
||||
Status is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
@@ -228,65 +228,60 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Location Room *</label>
|
||||
<label for="roomBuildingId">Location Room *</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
id="roomBuildingId"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
formControlName="roomBuildingId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
'is-invalid': submitted && f.roomBuildingId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
*ngFor="let data of dataBuildingRoomList"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ interest }}
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
*ngIf="submitted && f.roomBuildingId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.roomBuildingId.errors.required">
|
||||
location room is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Type *</label>
|
||||
<select
|
||||
id="projectinput5"
|
||||
<label for="watt">Watt *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="watt"
|
||||
class="form-control"
|
||||
formControlName="interestedIn"
|
||||
formControlName="watt"
|
||||
placeholder="Watt"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.interestedIn.errors
|
||||
'is-invalid': submitted && f.watt.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let interest of interestedIn"
|
||||
[value]="interest"
|
||||
>
|
||||
{{ interest }}
|
||||
</option>
|
||||
</select>
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.interestedIn.errors"
|
||||
*ngIf="submitted && f.watt.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.interestedIn.errors.required">
|
||||
Interest is required
|
||||
<div *ngIf="f.watt.errors.required">
|
||||
watt is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="form-section">
|
||||
<!-- <h4 class="form-section">
|
||||
<i class="la la-paperclip"></i> Energy Information
|
||||
</h4>
|
||||
|
||||
@@ -316,7 +311,7 @@
|
||||
Interest is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button
|
||||
@@ -324,9 +319,9 @@
|
||||
class="btn btn-warning mr-1"
|
||||
(click)="cancel()"
|
||||
>
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
<i class="feather ft-x"></i> {{mode === 'edit' ? 'Cancel' : 'Back'}}
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" (click)="saveEdit()">
|
||||
<button type="submit" class="btn btn-primary" (click)="saveEdit()" *ngIf="mode === 'edit'">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -11,47 +11,26 @@ import { BuildingService } from "../../service/monitoring-api.service";
|
||||
})
|
||||
export class AddEditDeviceComponent implements OnInit{
|
||||
@ViewChild("f", { read: true }) userProfileForm: NgForm;
|
||||
dataMasterCategori: any;
|
||||
dataMasterVoltage: any;
|
||||
dataMasterType: any;
|
||||
dataMasterDuration: any;
|
||||
dataMasterStatus: any;
|
||||
dataBuildingRoomList: any;
|
||||
deviceId: any;
|
||||
|
||||
model: any = {};
|
||||
dataDevice: any;
|
||||
mode: string;
|
||||
|
||||
@BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI("userProfile") blockUIUserProfile: NgBlockUI;
|
||||
|
||||
options = {
|
||||
minimize: true,
|
||||
reload: true,
|
||||
expand: true,
|
||||
close: true,
|
||||
};
|
||||
public breadcrumb: any;
|
||||
|
||||
projectInfo: FormGroup;
|
||||
|
||||
submitted = false;
|
||||
|
||||
interestedIn = [
|
||||
"design",
|
||||
"development",
|
||||
"illustration",
|
||||
"branding",
|
||||
"video",
|
||||
"design",
|
||||
"development",
|
||||
"illustration",
|
||||
"branding",
|
||||
"video",
|
||||
];
|
||||
budget = [
|
||||
"less than 5000$",
|
||||
"5000$ - 10000$",
|
||||
"10000$ - 20000$",
|
||||
"more than 20000$",
|
||||
];
|
||||
priority = ["Low", "Medium", "High"];
|
||||
status = ["Not Started", "Started", "Fixed"];
|
||||
|
||||
constructor(
|
||||
private formBuilder: FormBuilder,
|
||||
private router: Router,
|
||||
@@ -60,28 +39,29 @@ export class AddEditDeviceComponent implements OnInit{
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data.subscribe((data) => {
|
||||
this.mode = data.mode;
|
||||
});
|
||||
this.route.params.subscribe(params => {
|
||||
const deviceId = params['id'];
|
||||
|
||||
if (deviceId) {
|
||||
this.loadDevice(deviceId);
|
||||
const id = params['id'];
|
||||
this.deviceId = id;
|
||||
if (id) {
|
||||
this.loadDevice(id);
|
||||
this.dataListMaster();
|
||||
this.dataListRoomBuilding();
|
||||
}
|
||||
});
|
||||
this.setBreadcrumb()
|
||||
this.route.data.subscribe((data) => {
|
||||
this.mode = data.mode;
|
||||
});
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
name: ["", Validators.required],
|
||||
lastName: ["", Validators.required],
|
||||
email: ["", [Validators.required, Validators.email]],
|
||||
phone: ["", Validators.required],
|
||||
company: ["", Validators.required],
|
||||
interestedIn: ["", Validators.required],
|
||||
budget: ["", Validators.required],
|
||||
selectFile: [, Validators.required],
|
||||
aboutProject: ["", Validators.required],
|
||||
categoryId: ["", Validators.required],
|
||||
voltageId: ["", Validators.required],
|
||||
typeId: ["", Validators.required],
|
||||
durationId: ["", Validators.required],
|
||||
statusId: ["", Validators.required],
|
||||
roomBuildingId: ["", Validators.required],
|
||||
watt: ["", Validators.required],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -92,11 +72,70 @@ export class AddEditDeviceComponent implements OnInit{
|
||||
});
|
||||
}
|
||||
|
||||
dataListMaster() {
|
||||
this.monitoringApiService.getMasterListData().subscribe(data => {
|
||||
const dataCategory = data.data.find(
|
||||
(item) => item.name === "master_category"
|
||||
).headerDetailParam;
|
||||
this.dataMasterCategori = dataCategory.filter(item => item.status === "2")
|
||||
|
||||
const dataVoltage = data.data.find(
|
||||
(item) => item.name === "master_voltage"
|
||||
).headerDetailParam;
|
||||
this.dataMasterVoltage = dataVoltage.filter(item => item.status === "2")
|
||||
|
||||
const dataType = data.data.find(
|
||||
(item) => item.name === "master_type"
|
||||
).headerDetailParam;
|
||||
this.dataMasterType = dataType.filter(item => item.status === "2")
|
||||
|
||||
const dataDuration = data.data.find(
|
||||
(item) => item.name === "master_duration"
|
||||
).headerDetailParam;
|
||||
this.dataMasterDuration = dataDuration.filter(item => item.status === "2")
|
||||
|
||||
const dataStatus = data.data.find(
|
||||
(item) => item.name === "master_status"
|
||||
).headerDetailParam;
|
||||
this.dataMasterStatus = dataStatus.filter(item => item.status === "2")
|
||||
});
|
||||
}
|
||||
|
||||
dataListRoomBuilding() {
|
||||
this.monitoringApiService.getBuildingRoomList().subscribe(data => {
|
||||
const newArray = data.results.data.map(item => ({
|
||||
id: item.id,
|
||||
name: `${item.buildingEntity.name} (${item.roomEntity.name})`
|
||||
}));
|
||||
this.dataBuildingRoomList = newArray
|
||||
});
|
||||
}
|
||||
|
||||
formGetDevice(data){
|
||||
console.log(data);
|
||||
this.projectInfo.patchValue({
|
||||
name: data.data.name,
|
||||
categoryId: data.data.categoryId,
|
||||
voltageId: data.data.voltageId,
|
||||
typeId: data.data.typeId,
|
||||
durationId: data.data.durationId,
|
||||
statusId: data.data.statusId,
|
||||
roomBuildingId: data.data.roomBuildingId,
|
||||
watt: data.data.watt
|
||||
});
|
||||
if (this.mode === 'view') {
|
||||
this.formDisable();
|
||||
}
|
||||
}
|
||||
|
||||
formDisable(){
|
||||
this.projectInfo.get('name').disable()
|
||||
this.projectInfo.get('categoryId').disable()
|
||||
this.projectInfo.get('voltageId').disable()
|
||||
this.projectInfo.get('typeId').disable()
|
||||
this.projectInfo.get('durationId').disable()
|
||||
this.projectInfo.get('statusId').disable()
|
||||
this.projectInfo.get('roomBuildingId').disable()
|
||||
this.projectInfo.get('watt').disable()
|
||||
}
|
||||
|
||||
setBreadcrumb() {
|
||||
@@ -189,7 +228,9 @@ export class AddEditDeviceComponent implements OnInit{
|
||||
}
|
||||
|
||||
saveEdit() {
|
||||
|
||||
this.monitoringApiService.putDevice(this.projectInfo.value, this.deviceId).subscribe(data => {
|
||||
this.router.navigate(["/device"]);
|
||||
});
|
||||
}
|
||||
|
||||
cancel() {
|
||||
|
||||
Reference in New Issue
Block a user