bhushan.shinde/Angular-ENI-Process
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new changes

Browse Source
This commit is contained in:
Arun Jadhav
2024-09-25 11:51:35 +05:30
parent e5344b4e7d
commit 99966f03cd
3 changed files with 74 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/pages/veriable-form/veriable-form.component.html
View File

@@ -4,45 +4,37 @@
<div class="variableCal">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="rows">
<div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex">
<div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex" class="row-section">
<div formArrayName="columns" class="add-col-section">
<div class="row d-flex" *ngFor="let column of getColumns(row).controls; let colIndex = index" [formGroupName]="colIndex">
<div class="col-md-2">
<div class="form-group">
<select formControlName="type" class="form-control" >
<option value="" selected disabled>--Select--</option>
<option value="text">Text</option>
<option value="variable">Variable</option>
</select>
</div>
</div>
<div class="col-md-2" *ngIf="isText(row, colIndex)">
<div class="form-group" >
<input type="text" formControlName="textValue" placeholder="Enter text" class="form-control" (change)="onParamChange($event)" >
</div>
</div>
<div class="col-md-2" *ngIf="isVariable(row, colIndex)">
<div class="form-group" >
<input formControlName="variableValue" class="form-control" placeholder="Enter variable" >
</div>
</div>
<div class="" *ngFor="let column of getColumns(row).controls; let colIndex = index" [formGroupName]="colIndex" class="column-section">
<div class="form-group">
<select formControlName="type" class="form-control">
<option value="" selected disabled>--Select--</option>
<option value="text">Text</option>
<option value="variable">Variable</option>
</select>
</div>
<div class="form-group" *ngIf="isText(row, colIndex)">
<input type="text" formControlName="textValue" placeholder="Enter text" class="form-control"
(change)="onParamChange($event, rowIndex, colIndex)"> <span> {{inputValue}} </span>
</div>
<div class="form-group" *ngIf="isVariable(row, colIndex)">
<input formControlName="variableValue" class="form-control" placeholder="Enter variable">
</div>
</div>
</div>
<!-- Button to add a new column in the same row -->
<button type="button" class="mb-4" (click)="addColumn(rowIndex)">Add Column</button>
<button type="button" class="add-column-btn btn btn-success mt-0 " (click)="addColumn(rowIndex)">Add</button>
</div>
</div>
<!-- Button to add a new row -->
<button type="button" (click)="addRow()">Add Row</button>
<button type="button" class="add-row-btn btn btn-secondary mr-2 mt-0" (click)="addRow()">Add</button>
<button type="submit">Submit</button>
<button type="submit" class="submit-btn btn btn-success mt-0">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>

102
src/app/pages/veriable-form/veriable-form.component.sass
View File

@@ -1,71 +1,49 @@
// General form styles
form
max-width: 100%
margin: 20px auto
padding: 20px
border: 1px solid #ddd
border-radius: 5px
background-color: #f9f9f9
.container
margin-top: 20px
.form-row
.add-col-section
display: flex
flex-direction: row
.add-col-section div
display:flex
flex-direction: row
.column-section
width: auto
display: flex
flex-direction: row
.form-group
margin-bottom: 15px
width: 150px
display: flex
flex-direction: column
margin-bottom: 20px
padding: 10px
border: 1px solid #ccc
border-radius: 5px
background-color: #fff
margin-right: 10px!important
.form-column
display: flex
align-items: center
margin-bottom: 10px
.add-column-btn
margin-top: 10px
display: block
> *
margin-right: 10px
.add-row-btn
margin-top: 20px
select, input
padding: 8px
border-radius: 3px
border: 1px solid #ccc
width: 150px
.submit-btn
margin-top: 30px
.row-buttons
margin-top: 10px
.row-section
border: 1px solid #ccc
padding: 20px
margin-bottom: 20px
position: relative
.column-buttons
margin-left: auto // Push button to the right
@media (min-width: 768px)
.add-col-section
display: flex // Ensures that the columns are stacked vertically
// Button styles
button
padding: 10px 15px
border: none
background-color: #007bff
color: white
border-radius: 5px
cursor: pointer
margin-right: 10px
&:hover
background-color: #0056b3
&[type="submit"]
margin-top: 20px
background-color: #28a745
&:hover
background-color: #218838
// Media queries for responsiveness
@media (max-width: 768px)
.form-row
flex-direction: column
.form-column
flex-direction: column
align-items: flex-start
> *
margin-bottom: 10px
width: 100%
.column-section
display: flex
margin-bottom: 15px
flex-direction: row
.row-section
padding: 20px

19
src/app/pages/veriable-form/veriable-form.component.ts
View File

@@ -17,7 +17,8 @@ export class VeriableFormComponent implements OnInit {
variableList = ['Variable 1', 'Variable 2', 'Variable 3'];
public componentDestroyed = new Subject();
rdsValues: any;
selectedParamValue: any;
selectedParamValue: any = {};
inputValue: any;
constructor(private fb: FormBuilder, private api: ApiService) {
this.form = this.fb.group({
@@ -79,18 +80,26 @@ export class VeriableFormComponent implements OnInit {
});
}
onParamChange(event: any) {
onParamChange(event: any, rowIndex: number, colIndex: number) {
const selectedParam = event.target.value;
// Iterate through the 'modbus' array and find the parameter
for (let item of this.rdsValues.modbus) {
if (item.hasOwnProperty(selectedParam)) {
this.selectedParamValue = item[selectedParam];
// Initialize the row if not present
if (!this.selectedParamValue[rowIndex]) {
this.selectedParamValue[rowIndex] = {};
}
// Assign the selected param value to the specific row and column
this.selectedParamValue[rowIndex][colIndex] = item[selectedParam];
break;
}
}
console.log(this.selectedParamValue);
this.inputValue = this.selectedParamValue[rowIndex][colIndex]
console.log(`Row: ${rowIndex}, Column: ${colIndex}, Value:`, this.selectedParamValue[rowIndex][colIndex]);
}
onSubmit(): void {
console.log(this.form.value);
}