perbaikan UI
This commit is contained in:
parent
57bcbcccde
commit
9377bebcb4
|
@ -13,7 +13,7 @@
|
||||||
href="https://allbestsistem.com/"
|
href="https://allbestsistem.com/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
style="background-color: #ffffff !important;"
|
style="background-color: #ffffff !important;"
|
||||||
>Smart Building Management Systems (V@2024-08-19.2)
|
>Smart Building Management Systems (V@2024-08-20.2)
|
||||||
</a></span
|
</a></span
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -31,6 +31,5 @@ export class SelectIconComponent {
|
||||||
} else {
|
} else {
|
||||||
this.iconSelected.emit(undefined);
|
this.iconSelected.emit(undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,7 +45,7 @@
|
||||||
<label for="status" style="color: #242222">Status:</label>
|
<label for="status" style="color: #242222">Status:</label>
|
||||||
<select
|
<select
|
||||||
id="projectinput5"
|
id="projectinput5"
|
||||||
class="form-control"
|
class="form-control custom-select"
|
||||||
formControlName="status"
|
formControlName="status"
|
||||||
>
|
>
|
||||||
<option *ngFor="let data of dataMasterStatus" [value]="data.id">
|
<option *ngFor="let data of dataMasterStatus" [value]="data.id">
|
||||||
|
|
|
@ -1,10 +1,15 @@
|
||||||
<div class="modal-header" style="background-color: #FBFBFB !important">
|
<div class="modal-header" style="background-color: #fbfbfb !important">
|
||||||
<h4 class="modal-title" style="color: #242222">{{labelModal}}</h4>
|
<h4 class="modal-title" style="color: #242222">{{ labelModal }}</h4>
|
||||||
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
|
<button
|
||||||
|
type="button"
|
||||||
|
class="close"
|
||||||
|
aria-label="Close"
|
||||||
|
(click)="activeModal.dismiss('Cross click')"
|
||||||
|
>
|
||||||
<span aria-hidden="true">×</span>
|
<span aria-hidden="true">×</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" style="background-color: #FBFBFB !important">
|
<div class="modal-body" style="background-color: #fbfbfb !important">
|
||||||
<form [formGroup]="myForm">
|
<form [formGroup]="myForm">
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<div class="form-group col-md-6">
|
<div class="form-group col-md-6">
|
||||||
|
@ -15,9 +20,15 @@
|
||||||
id="name"
|
id="name"
|
||||||
formControlName="name"
|
formControlName="name"
|
||||||
maxlength="50"
|
maxlength="50"
|
||||||
[ngClass]="{'is-invalid': myForm.get('name').invalid && myForm.get('name').touched}"
|
[ngClass]="{
|
||||||
|
'is-invalid':
|
||||||
|
myForm.get('name').invalid && myForm.get('name').touched
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
<div *ngIf="myForm.get('name').invalid && myForm.get('name').touched" class="text-danger">
|
<div
|
||||||
|
*ngIf="myForm.get('name').invalid && myForm.get('name').touched"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
Name is required.
|
Name is required.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -29,9 +40,15 @@
|
||||||
id="email"
|
id="email"
|
||||||
formControlName="email"
|
formControlName="email"
|
||||||
maxlength="50"
|
maxlength="50"
|
||||||
[ngClass]="{'is-invalid': myForm.get('email').invalid && myForm.get('email').touched}"
|
[ngClass]="{
|
||||||
|
'is-invalid':
|
||||||
|
myForm.get('email').invalid && myForm.get('email').touched
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
<div *ngIf="myForm.get('email').invalid && myForm.get('email').touched" class="text-danger">
|
<div
|
||||||
|
*ngIf="myForm.get('email').invalid && myForm.get('email').touched"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
Please enter a valid email.
|
Please enter a valid email.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,9 +61,15 @@
|
||||||
formControlName="phone"
|
formControlName="phone"
|
||||||
pattern="^[0-9]*$"
|
pattern="^[0-9]*$"
|
||||||
maxlength="13"
|
maxlength="13"
|
||||||
[ngClass]="{'is-invalid': myForm.get('phone').invalid && myForm.get('phone').touched}"
|
[ngClass]="{
|
||||||
|
'is-invalid':
|
||||||
|
myForm.get('phone').invalid && myForm.get('phone').touched
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
<div *ngIf="myForm.get('phone').invalid && myForm.get('phone').touched" class="text-danger">
|
<div
|
||||||
|
*ngIf="myForm.get('phone').invalid && myForm.get('phone').touched"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
Please enter a valid phone number.
|
Please enter a valid phone number.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -58,9 +81,15 @@
|
||||||
id="owner"
|
id="owner"
|
||||||
maxlength="30"
|
maxlength="30"
|
||||||
formControlName="owner"
|
formControlName="owner"
|
||||||
[ngClass]="{'is-invalid': myForm.get('owner').invalid && myForm.get('owner').touched}"
|
[ngClass]="{
|
||||||
|
'is-invalid':
|
||||||
|
myForm.get('owner').invalid && myForm.get('owner').touched
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
<div *ngIf="myForm.get('owner').invalid && myForm.get('owner').touched" class="text-danger">
|
<div
|
||||||
|
*ngIf="myForm.get('owner').invalid && myForm.get('owner').touched"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
Owner is required.
|
Owner is required.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -72,9 +101,15 @@
|
||||||
id="address"
|
id="address"
|
||||||
formControlName="address"
|
formControlName="address"
|
||||||
maxlength="90"
|
maxlength="90"
|
||||||
[ngClass]="{'is-invalid': myForm.get('address').invalid && myForm.get('address').touched}"
|
[ngClass]="{
|
||||||
|
'is-invalid':
|
||||||
|
myForm.get('address').invalid && myForm.get('address').touched
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
<div *ngIf="myForm.get('address').invalid && myForm.get('address').touched" class="text-danger">
|
<div
|
||||||
|
*ngIf="myForm.get('address').invalid && myForm.get('address').touched"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
Address is required.
|
Address is required.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -86,9 +121,14 @@
|
||||||
id="kwh"
|
id="kwh"
|
||||||
formControlName="kwh"
|
formControlName="kwh"
|
||||||
maxlength="15"
|
maxlength="15"
|
||||||
[ngClass]="{'is-invalid': myForm.get('kwh').invalid && myForm.get('kwh').touched}"
|
[ngClass]="{
|
||||||
|
'is-invalid': myForm.get('kwh').invalid && myForm.get('kwh').touched
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
<div *ngIf="myForm.get('kwh').invalid && myForm.get('kwh').touched" class="text-danger">
|
<div
|
||||||
|
*ngIf="myForm.get('kwh').invalid && myForm.get('kwh').touched"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
Please enter a valid KWH.
|
Please enter a valid KWH.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -96,29 +136,37 @@
|
||||||
<label for="statusId" style="color: #242222">Status:</label>
|
<label for="statusId" style="color: #242222">Status:</label>
|
||||||
<select
|
<select
|
||||||
id="statusId"
|
id="statusId"
|
||||||
class="form-control"
|
class="form-control custom-select"
|
||||||
formControlName="statusId"
|
formControlName="statusId"
|
||||||
[ngClass]="{'is-invalid': myForm.get('statusId').invalid && myForm.get('statusId').touched}"
|
[ngClass]="{
|
||||||
|
'is-invalid':
|
||||||
|
myForm.get('statusId').invalid && myForm.get('statusId').touched
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<option *ngFor="let data of filteredDataStatus" [value]="data.id">
|
<option *ngFor="let data of filteredDataStatus" [value]="data.id">
|
||||||
{{ data.name }}
|
{{ data.name }}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<div *ngIf="myForm.get('statusId').invalid && myForm.get('statusId').touched" class="text-danger">
|
<div
|
||||||
|
*ngIf="
|
||||||
|
myForm.get('statusId').invalid && myForm.get('statusId').touched
|
||||||
|
"
|
||||||
|
class="text-danger"
|
||||||
|
>
|
||||||
Status is required.
|
Status is required.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer" style="background-color: #FBFBFB !important">
|
<div class="modal-footer" style="background-color: #fbfbfb !important">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn btn-secondary"
|
class="btn btn-secondary"
|
||||||
style="
|
style="
|
||||||
color: #242222 !important;
|
color: #242222 !important;
|
||||||
background-color: #FBFBFB !important;
|
background-color: #fbfbfb !important;
|
||||||
border-color: #FBFBFB !important;
|
border-color: #fbfbfb !important;
|
||||||
"
|
"
|
||||||
(click)="activeModal.dismiss('Cross click')"
|
(click)="activeModal.dismiss('Cross click')"
|
||||||
>
|
>
|
||||||
|
@ -126,7 +174,7 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
style="color: #ffffff !important; background-color: #37A647 !important"
|
style="color: #ffffff !important; background-color: #37a647 !important"
|
||||||
class="btn btn-primary"
|
class="btn btn-primary"
|
||||||
(click)="addRow()"
|
(click)="addRow()"
|
||||||
>
|
>
|
||||||
|
|
|
@ -138,7 +138,7 @@
|
||||||
<p
|
<p
|
||||||
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
|
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
|
||||||
>
|
>
|
||||||
<span>(v@2024.08.19.2)</span>
|
<span>(v@2024.08.20.2)</span>
|
||||||
</p>
|
</p>
|
||||||
<!-- <div class="card-body">
|
<!-- <div class="card-body">
|
||||||
<a
|
<a
|
||||||
|
|
Loading…
Reference in New Issue