Angular-ENI-Process/src/app/pages/veriable-form/veriable-form.component.ts

import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { ApiService } from 'src/app/_services';

@Component({
  selector: 'app-veriable-form',
  templateUrl: './veriable-form.component.html',
  styleUrls: ['./veriable-form.component.sass']
})
export class VeriableFormComponent implements OnInit {
  form: FormGroup;

  // Sample variable list for dropdown
  variableList = ['Variable 1', 'Variable 2', 'Variable 3'];
  public componentDestroyed = new Subject();
  rdsValues: any;
  selectedParamValue: any = {};
  inputValue: any;

  constructor(private fb: FormBuilder, private api: ApiService) {
    this.form = this.fb.group({
      rows: this.fb.array([]) // Form array for multiple rows
    });
  }

  ngOnInit(): void {
    // Initialize with one row
    this.addRow();
    this.getVarbaleValusData();
  }

  get rows(): FormArray {
    return this.form.get('rows') as FormArray;
  }

  getColumns(row: any): FormArray {
    return row.get('columns') as FormArray;
  }

  isText(row: any, colIndex: number): boolean {
    const columns = this.getColumns(row);
    return columns.at(colIndex).get('type')?.value === 'text';
  }

  isVariable(row: any, colIndex: number): boolean {
    const columns = this.getColumns(row);
    return columns.at(colIndex).get('type')?.value === 'variable';
  }

  createColumn(): FormGroup {
    return this.fb.group({
      type: [''], // Type can be 'text' or 'variable'
      textValue: [''], // For text input
      variableValue: [''] // For variable select
    });
  }

  addColumn(rowIndex: number): void {
    const row = this.rows.at(rowIndex).get('columns') as FormArray;
    row.push(this.createColumn());
  }

  addRow(): void {
    const row = this.fb.group({
      columns: this.fb.array([this.createColumn()]) // Initialize with one column
    });
    this.rows.push(row);
  }

  getVarbaleValusData(){
    const imei = 869009061127230
    this.api.getVariableValus(imei)
    .pipe(takeUntil(this.componentDestroyed))
    .subscribe((res:any)=>{
     this.rdsValues = res.resultObject
    },(error:HttpErrorResponse)=>{
    });
  }

  onParamChange(event: any, rowIndex: number, colIndex: number) {
    const selectedParam = event.target.value;

    for (let item of this.rdsValues.modbus) {
      if (item.hasOwnProperty(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;
      }
    }

      this.inputValue = this.selectedParamValue[rowIndex][colIndex]
    console.log(`Row: ${rowIndex}, Column: ${colIndex}, Value:`, this.selectedParamValue[rowIndex][colIndex]);
  }


  onSubmit(): void {
    console.log(this.form.value);
  }
}