fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perbaikan form input add device

This commit is contained in:
Fuzi_fauzia 2024-04-20 14:39:24 +07:00
parent 6c9b4f18b4
commit dc74154a27
2 changed files with 349 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

370
src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html
View File

@ -25,7 +25,7 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="projectinput1">First Name *</label> <label for="projectinput1">Device Name *</label>
<input <input
type="text" type="text"
id="projectinput1" id="projectinput1"
@ -49,24 +49,40 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="projectinput2">Last Name *</label> <label for="projectinput5">Duration Use *</label>
<input <div class="input-group">
type="text" <select
id="projectinput2" id="projectinput5"
class="form-control" class="form-control"
formControlName="lastName" formControlName="interestedIn"
placeholder="Last Name" [ngClass]="{
[ngClass]="{ 'is-invalid': submitted && f.interestedIn.errors
'is-invalid': submitted && f.lastName.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 <small
class="form-text text-muted danger" class="form-text text-muted danger"
*ngIf="submitted && f.lastName.errors" *ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback" class="invalid-feedback"
> >
<div *ngIf="f.lastName.errors.required"> <div *ngIf="f.interestedIn.errors.required">
Last Name is required Interest is required
</div> </div>
</small> </small>
</div> </div>
@ -75,86 +91,78 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="projectinput3">E-mail *</label> <label for="projectinput5">Category *</label>
<input <div class="input-group">
type="text" <select
id="projectinput3" id="projectinput5"
class="form-control" class="form-control"
formControlName="email" formControlName="interestedIn"
placeholder="E-mail" [ngClass]="{
[ngClass]="{ 'is-invalid': submitted && f.interestedIn.errors
'is-invalid': submitted && f.email.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 <small
class="form-text text-muted danger" class="form-text text-muted danger"
*ngIf="submitted && f.email.errors" *ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback" class="invalid-feedback"
> >
<div *ngIf="f.email.errors.required"> <div *ngIf="f.interestedIn.errors.required">
Email is required Interest is required
</div>
<div *ngIf="f.email.errors.email">
Email must be a valid email address
</div> </div>
</small> </small>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="projectinput4">Contact Number *</label> <label for="projectinput5">Selection Option *</label>
<input <select
type="text" id="projectinput5"
id="projectinput4"
class="form-control" class="form-control"
formControlName="phone" formControlName="interestedIn"
placeholder="Phone"
[ngClass]="{ [ngClass]="{
'is-invalid': submitted && f.phone.errors 'is-invalid': submitted && f.interestedIn.errors
}" }"
(keypress)="keyPress($event)" >
/> <option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small <small
class="form-text text-muted danger" class="form-text text-muted danger"
*ngIf="submitted && f.phone.errors" *ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback" class="invalid-feedback"
> >
<div *ngIf="f.phone.errors.required"> <div *ngIf="f.interestedIn.errors.required">
phone is required Interest is required
</div> </div>
</small> </small>
</div> </div>
</div> </div>
</div> </div>
<h4 class="form-section">
<i class="la la-paperclip"></i> Energy Information
</h4>
<div class="form-group">
<label for="companyName">Company *</label>
<input
type="text"
id="companyName"
class="form-control"
formControlName="company"
placeholder="Company Name"
[ngClass]="{
'is-invalid': submitted && f.company.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.company.errors"
class="invalid-feedback"
>
<div *ngIf="f.company.errors.required">
Company is required
</div>
</small>
</div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="projectinput5">Interested in *</label> <label for="projectinput5">Location *</label>
<select <select
id="projectinput5" id="projectinput5"
class="form-control" class="form-control"
@ -183,37 +191,237 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="projectinput6">Budget *</label> <label for="projectinput5">Status *</label>
<select <select
id="projectinput6" id="projectinput5"
class="form-control" class="form-control"
formControlName="budget" formControlName="interestedIn"
[ngClass]="{ [ngClass]="{
'is-invalid': submitted && f.budget.errors 'is-invalid': submitted && f.interestedIn.errors
}" }"
> >
<option <option
*ngFor="let range of budget" *ngFor="let interest of interestedIn"
[value]="range" [value]="interest"
> >
{{ range }} {{ interest }}
</option> </option>
</select> </select>
<small <small
class="form-text text-muted danger" class="form-text text-muted danger"
*ngIf="submitted && f.budget.errors" *ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback" class="invalid-feedback"
> >
<div *ngIf="f.budget.errors.required"> <div *ngIf="f.interestedIn.errors.required">
Budget is required Interest is required
</div> </div>
</small> </small>
</div> </div>
</div> </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="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput1">Price/Kwh *</label>
<input
type="text"
id="projectinput1"
class="form-control"
formControlName="firstName"
placeholder="First Name"
[ngClass]="{
'is-invalid': submitted && f.firstName.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput1">Kwh *</label>
<input
type="text"
id="projectinput1"
class="form-control"
formControlName="firstName"
placeholder="First Name"
[ngClass]="{
'is-invalid': submitted && f.firstName.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput1">Voltage *</label>
<input
type="text"
id="projectinput1"
class="form-control"
formControlName="firstName"
placeholder="First Name"
[ngClass]="{
'is-invalid': submitted && f.firstName.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<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>
<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>
<div class="form-actions"> <div class="form-actions">
<button type="button" class="btn btn-warning mr-1" (click)="cancel()"> <button
type="button"
class="btn btn-warning mr-1"
(click)="cancel()"
>
<i class="feather ft-x"></i> Cancel <i class="feather ft-x"></i> Cancel
</button> </button>
<button type="submit" class="btn btn-primary"> <button type="submit" class="btn btn-primary">

100
src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
View File

@ -1,27 +1,26 @@
import { Component, ViewChild } from '@angular/core'; import { Component, ViewChild } from "@angular/core";
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
import { Router } from '@angular/router'; import { Router } from "@angular/router";
import { BlockUI, NgBlockUI } from 'ng-block-ui'; import { BlockUI, NgBlockUI } from "ng-block-ui";
@Component({ @Component({
selector: 'app-add-edit-device', selector: "app-add-edit-device",
templateUrl: './add-edit-device.component.html', templateUrl: "./add-edit-device.component.html",
styleUrls: ['./add-edit-device.component.css'] styleUrls: ["./add-edit-device.component.css"],
}) })
export class AddEditDeviceComponent { export class AddEditDeviceComponent {
@ViewChild("f", { read: true }) userProfileForm: NgForm;
@ViewChild('f', { read: true }) userProfileForm: NgForm;
model: any = {}; model: any = {};
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI; @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI; @BlockUI("userProfile") blockUIUserProfile: NgBlockUI;
options = { options = {
minimize: true, minimize: true,
reload: true, reload: true,
expand: true, expand: true,
close: true close: true,
}; };
public breadcrumb: any; public breadcrumb: any;
@ -29,44 +28,60 @@ export class AddEditDeviceComponent {
submitted = false; submitted = false;
interestedIn = ['design', 'development', 'illustration', 'branding', 'video']; interestedIn = [
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$']; "design",
priority = ['Low', 'Medium', 'High']; "development",
status = ['Not Started', 'Started', 'Fixed']; "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) { } constructor(private formBuilder: FormBuilder, private router: Router) {}
ngOnInit() { ngOnInit() {
this.breadcrumb = { this.breadcrumb = {
'mainlabel': 'Basic Forms', mainlabel: "Basic Forms",
'links': [ links: [
{ {
'name': 'Home', name: "Home",
'isLink': true, isLink: true,
'link': '/dashboard/sales' link: "/dashboard/sales",
}, },
{ {
'name': 'Form Layouts', name: "Form Layouts",
'isLink': true, isLink: true,
'link': '#' link: "#",
}, },
{ {
'name': 'Basic Forms', name: "Basic Forms",
'isLink': false isLink: false,
} },
] ],
}; };
this.projectInfo = this.formBuilder.group({ this.projectInfo = this.formBuilder.group({
firstName: ['', Validators.required], firstName: ["", Validators.required],
lastName: ['', Validators.required], lastName: ["", Validators.required],
email: ['', [Validators.required, Validators.email]], email: ["", [Validators.required, Validators.email]],
phone: ['', Validators.required], phone: ["", Validators.required],
company: ['', Validators.required], company: ["", Validators.required],
interestedIn: ['', Validators.required], interestedIn: ["", Validators.required],
budget: ['', Validators.required], budget: ["", Validators.required],
selectFile: [, Validators.required], selectFile: [, Validators.required],
aboutProject: ['', Validators.required], aboutProject: ["", Validators.required],
}); });
} }
@ -83,7 +98,7 @@ export class AddEditDeviceComponent {
} }
reloadProjectInfo() { reloadProjectInfo() {
this.blockUIProjectInfo.start('Loading..'); this.blockUIProjectInfo.start("Loading..");
setTimeout(() => { setTimeout(() => {
this.blockUIProjectInfo.stop(); this.blockUIProjectInfo.stop();
@ -91,7 +106,7 @@ export class AddEditDeviceComponent {
} }
reloadUserProfile() { reloadUserProfile() {
this.blockUIUserProfile.start('Loading..'); this.blockUIUserProfile.start("Loading..");
setTimeout(() => { setTimeout(() => {
this.blockUIUserProfile.stop(); this.blockUIUserProfile.stop();
@ -107,8 +122,11 @@ export class AddEditDeviceComponent {
} }
} }
cancel() { addData(){
this.router.navigate(['/device']); // Adjust the path as per your routing setup
} }
cancel() {
this.router.navigate(["/device"]); // Adjust the path as per your routing setup
}
} }