integrasi edit device, penyesuaian UI jadi vertical dan penambahan UI list monitoring

This commit is contained in:
2024-05-31 17:21:39 +07:00
parent b2c1020c22
commit a6c77fe052
23 changed files with 1512 additions and 866 deletions

View File

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