new changes

src/app/_services/api.service.ts

@@ -1,9 +1,35 @@
 import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { environment } from '../../environments/environment';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+const httpOptions = {
+  headers: new HttpHeaders({
+    'Content-Type': 'application/json',
+    Authorization: '',
+    Accept: 'application/json'
+  })
+};
+const httpFileOptions = {
+  headers: new HttpHeaders({
+    'Content-Type': 'multipart/form-data',
+    Accept: 'multipart/form-data'
+  })
+};
 
 @Injectable({
   providedIn: 'root'
 })
 export class ApiService {
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
+
+  // get variable values
+  public getVariableValus(imei:any): Observable<any> {
+    return this.http.get<any>(`http://13.202.55.56/backend/Sadmin/EniAnalyticsRawData/getRawData?imei=${imei}`,)
+      .pipe(map(user => {
+        return user;
+      }));
+  }
 }

src/app/app.module.ts

@@ -5,7 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SignUpComponent } from './_shared/sign-up/sign-up.component';
 import { LoginComponent } from './_shared/login/login.component';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { JwtInterceptor } from './_helper/jwt.interceptor';
 import { ErrorInterceptor } from './_helper/error.interceptor';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -27,6 +27,7 @@ import { VeriableFormComponent } from './pages/veriable-form/veriable-form.compo
     AppRoutingModule,
     BrowserAnimationsModule,
     ReactiveFormsModule,
+    HttpClientModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },

src/app/pages/veriable-form/veriable-form.component.html

@@ -6,11 +6,12 @@
           <div formArrayName="rows">
             <div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex">
               <div formArrayName="columns" class="add-col-section">
-                <div *ngFor="let column of getColumns(row).controls; let colIndex = index" [formGroupName]="colIndex">
-                  <div class="row">
+                <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>
@@ -18,17 +19,15 @@
                     </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" >
+                        <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" >
-                        <select formControlName="variableValue" class="form-control" >
-                          <option *ngFor="let variable of variableList" [value]="variable">{{ variable }}</option>
-                        </select>
+                        <input formControlName="variableValue" class="form-control" placeholder="Enter variable" >
                       </div>
                     </div>
-                  </div>
+
                 </div>
               </div>
 

src/app/pages/veriable-form/veriable-form.component.ts

@@ -1,5 +1,9 @@
+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',
@@ -11,8 +15,11 @@ export class VeriableFormComponent implements OnInit {
 
   // Sample variable list for dropdown
   variableList = ['Variable 1', 'Variable 2', 'Variable 3'];
+  public componentDestroyed = new Subject();
+  rdsValues: any;
+  selectedParamValue: any;
 
-  constructor(private fb: FormBuilder) {
+  constructor(private fb: FormBuilder, private api: ApiService) {
     this.form = this.fb.group({
       rows: this.fb.array([]) // Form array for multiple rows
     });
@@ -21,6 +28,7 @@ export class VeriableFormComponent implements OnInit {
   ngOnInit(): void {
     // Initialize with one row
     this.addRow();
+    this.getVarbaleValusData();
   }
 
   get rows(): FormArray {
@@ -61,6 +69,28 @@ export class VeriableFormComponent implements OnInit {
     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) {
+    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];
+        break;
+      }
+    }
+    console.log(this.selectedParamValue);
+
+  }
   onSubmit(): void {
     console.log(this.form.value);
   }