penyesuaian UI list room
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
<div class="app-content content">
|
||||
<div class="app-content content" style="background-color: #000000 !important">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
@@ -7,331 +7,318 @@
|
||||
<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="card" style="background-color: #252525 !important">
|
||||
<div class="card-content">
|
||||
<div
|
||||
class="card-header"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<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
|
||||
<h2 style="color: #ffffff">
|
||||
{{
|
||||
isEditMode()
|
||||
? "Edit Device"
|
||||
: isViewMode()
|
||||
? "View Device"
|
||||
: "Add New Device"
|
||||
}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form
|
||||
[formGroup]="projectInfo"
|
||||
(ngSubmit)="onProjectInfoSubmit()"
|
||||
>
|
||||
<div class="form-body">
|
||||
<h4 class="form-section" style="color: #ffffff">
|
||||
<i class="feather ft-user" style="color: #ffffff"></i>
|
||||
General Information
|
||||
</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="name" style="color: #ffffff"
|
||||
>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="categoryId" style="color: #ffffff"
|
||||
>Category *</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<select
|
||||
id="categoryId"
|
||||
class="form-control"
|
||||
formControlName="categoryId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.categoryId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterCategori"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</small>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.categoryId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.categoryId.errors.required">
|
||||
Category is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="categoryId">Category *</label>
|
||||
<div class="input-group">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="voltageId" style="color: #ffffff"
|
||||
>Voltage *</label
|
||||
>
|
||||
<div class="input-group">
|
||||
<select
|
||||
id="voltageId"
|
||||
class="form-control"
|
||||
formControlName="voltageId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.voltageId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterVoltage"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.voltageId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.voltageId.errors.required">
|
||||
Voltage is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="typeId" style="color: #ffffff"
|
||||
>Type *</label
|
||||
>
|
||||
<select
|
||||
id="categoryId"
|
||||
id="typeId"
|
||||
class="form-control"
|
||||
formControlName="categoryId"
|
||||
formControlName="typeId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.categoryId.errors
|
||||
'is-invalid': submitted && f.typeId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterCategori"
|
||||
*ngFor="let data of dataMasterType"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="input-group-append" *ngIf="mode === 'edit'">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
(click)="addData()"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.typeId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.typeId.errors.required">
|
||||
Type is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.categoryId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.categoryId.errors.required">
|
||||
Category is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="voltageId">Voltage *</label>
|
||||
<div class="input-group">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="durationId" style="color: #ffffff"
|
||||
>Duration Use *</label
|
||||
>
|
||||
<select
|
||||
id="voltageId"
|
||||
id="durationId"
|
||||
class="form-control"
|
||||
formControlName="voltageId"
|
||||
formControlName="durationId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.voltageId.errors
|
||||
'is-invalid': submitted && f.durationId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterVoltage"
|
||||
*ngFor="let data of dataMasterDuration"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="input-group-append" *ngIf="mode === 'edit'">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
(click)="addData()"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.durationId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.durationId.errors.required">
|
||||
Duration is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="statusId" style="color: #ffffff"
|
||||
>Status *</label
|
||||
>
|
||||
<select
|
||||
id="statusId"
|
||||
class="form-control"
|
||||
formControlName="statusId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.statusId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterStatus"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.statusId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.statusId.errors.required">
|
||||
Status is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.voltageId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.voltageId.errors.required">
|
||||
Voltage is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="typeId">Type *</label>
|
||||
<select
|
||||
id="typeId"
|
||||
class="form-control"
|
||||
formControlName="typeId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.typeId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterType"
|
||||
[value]="data.id"
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="roomBuildingId" style="color: #ffffff"
|
||||
>Location Room *</label
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.typeId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.typeId.errors.required">
|
||||
Type is required
|
||||
</div>
|
||||
</small>
|
||||
<select
|
||||
id="roomBuildingId"
|
||||
class="form-control"
|
||||
formControlName="roomBuildingId"
|
||||
[ngClass]="{
|
||||
'is-invalid':
|
||||
submitted && f.roomBuildingId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataBuildingRoomList"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.roomBuildingId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<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="watt" style="color: #ffffff"
|
||||
>Watt *</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="watt"
|
||||
class="form-control"
|
||||
formControlName="watt"
|
||||
placeholder="Watt"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.watt.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.watt.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.watt.errors.required">
|
||||
watt is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="durationId">Duration Use *</label>
|
||||
<select
|
||||
id="durationId"
|
||||
class="form-control"
|
||||
formControlName="durationId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.durationId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterDuration"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.durationId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.durationId.errors.required">
|
||||
Duration is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="statusId">Status *</label>
|
||||
<select
|
||||
id="statusId"
|
||||
class="form-control"
|
||||
formControlName="statusId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.statusId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataMasterStatus"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.statusId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.statusId.errors.required">
|
||||
Status is required
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="roomBuildingId">Location Room *</label>
|
||||
<select
|
||||
id="roomBuildingId"
|
||||
class="form-control"
|
||||
formControlName="roomBuildingId"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.roomBuildingId.errors
|
||||
}"
|
||||
>
|
||||
<option
|
||||
*ngFor="let data of dataBuildingRoomList"
|
||||
[value]="data.id"
|
||||
>
|
||||
{{ data.name }}
|
||||
</option>
|
||||
</select>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.roomBuildingId.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<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="watt">Watt *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="watt"
|
||||
class="form-control"
|
||||
formControlName="watt"
|
||||
placeholder="Watt"
|
||||
[ngClass]="{
|
||||
'is-invalid': submitted && f.watt.errors
|
||||
}"
|
||||
/>
|
||||
<small
|
||||
class="form-text text-muted danger"
|
||||
*ngIf="submitted && f.watt.errors"
|
||||
class="invalid-feedback"
|
||||
>
|
||||
<div *ngIf="f.watt.errors.required">
|
||||
watt 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
|
||||
}"
|
||||
<div class="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-warning mr-1"
|
||||
style="
|
||||
color: #c3f164 !important;
|
||||
background-color: #000000 !important;
|
||||
border-color: #c3f164 !important;
|
||||
"
|
||||
(click)="cancel()"
|
||||
>
|
||||
<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"
|
||||
<i class="feather ft-x"></i>
|
||||
{{ mode === "edit" ? "Cancel" : "Back" }}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
style="
|
||||
color: #000000 !important;
|
||||
background-color: #c3f164 !important;
|
||||
"
|
||||
(click)="saveEdit()"
|
||||
*ngIf="mode === 'edit'"
|
||||
>
|
||||
<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> {{mode === 'edit' ? 'Cancel' : 'Back'}}
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" (click)="saveEdit()" *ngIf="mode === 'edit'">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user