Files
hemat_solution/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html
2024-05-21 11:33:05 +07:00

343 lines
14 KiB
HTML

<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 Device"
: isViewMode()
? "View Device"
: "Add New Device"
}}
</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="name">Device Name *</label>
<input
type="text"
id="name"
class="form-control"
formControlName="name"
placeholder="Device Name"
[ngClass]="{
'is-invalid': submitted && f.name.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.name.errors"
class="invalid-feedback"
>
<div *ngIf="f.name.errors.required">
Device Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Duration Use *</label>
<div class="input-group">
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<div class="input-group-append">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Category *</label>
<div class="input-group">
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<div class="input-group-append">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Selection Option *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Location *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Status *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Location Room *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Type *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<h4 class="form-section">
<i class="la la-paperclip"></i> Energy Information
</h4>
<div class="form-group">
<label for="projectinput5">Auto update *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</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" (click)="saveEdit()">
<i class="la la-check"></i> Save
</button>
</div>
</form>
</ng-container>
</m-card>
</div>
</div>
</section>
</div>
</div>
</div>