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/_services/auth.service.ts

@@ -3,6 +3,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { User } from '../_models';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
@@ -22,4 +24,24 @@ export class AuthService {
   public get userValue(): User {
     return this.userSubject.value;
   }
+
+
+
+  // API's
+
+  login(adminData: any) {
+    return this.http
+      .post<any>(`${environment.apiUrl}authorize/web-login/`, adminData)
+      .pipe(
+        map((user) => {
+              localStorage.removeItem('currentUser');
+          if (user && user.token) {
+            localStorage.setItem('currentUser', JSON.stringify(user));
+            localStorage.setItem('token', user.token.access);
+            this.userSubject.next(user);
+          }
+          return user;
+        })
+      );
+  }
 }

src/app/_shared/login/login.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { AuthService } from 'src/app/_services';
 
 @Component({
   selector: 'app-login',
@@ -10,7 +12,7 @@ export class LoginComponent implements OnInit {
   public loginForm!: FormGroup
   public submited: boolean = false
 
-  constructor(private formBuilder: FormBuilder) { }
+  constructor(private formBuilder: FormBuilder,private auth:AuthService, private router: Router) { }
 
   ngOnInit(): void {
     this.loginForm = this.formBuilder.group(
@@ -35,7 +37,22 @@ export class LoginComponent implements OnInit {
       this.submited = true;
       return;
     }
+    const reqObj = {
+      userName: this.loginForm.value.username,
+      password: this.loginForm.value.password,
+    };
+
+    this.auth.login(reqObj).subscribe(
+      (data: any) => {
+        this.router.navigateByUrl('/admin/dashboard');
+      },
+      (error) => {
+        localStorage.clear();
+      }
+    );
   }
 
+
+
 }
 

src/app/_shared/sign-up/sign-up.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { ConfirmPasswordValidator } from 'src/app/_helper/matchpassword.validators';
+import { AuthService } from 'src/app/_services';
 @Component({
   selector: 'app-sign-up',
   templateUrl: './sign-up.component.html',
@@ -9,14 +11,13 @@ import { ConfirmPasswordValidator } from 'src/app/_helper/matchpassword.validato
 export class SignUpComponent implements OnInit {
   public signupForm!: FormGroup;
   public submitted: boolean = false;
-  constructor(private formBuilder: FormBuilder) {}
+  constructor(private formBuilder: FormBuilder, private router: Router, private auth: AuthService) {}
 
   ngOnInit(): void {
     this.signupForm = this.formBuilder.group(
       {
         fullname: ['', Validators.required],
         imei: ['', Validators.required],
-        email: ['', [Validators.required, Validators.email]],
         password: [
           '',
           [
@@ -42,5 +43,19 @@ export class SignUpComponent implements OnInit {
       this.submitted = true;
       return;
     }
+    const reqObj = {
+      fullName: this.signupForm.value.fullname,
+      imei: this.signupForm.value.imei,
+      password: this.signupForm.value.password,
+      confirmPassword : this.signupForm.value.confirmPassword,
+    };
+    this.auth.login(reqObj).subscribe(
+      (data: any) => {
+        this.router.navigateByUrl('/login');
+      },
+      (error) => {
+        localStorage.clear();
+      }
+    );
   }
 }

src/app/app.module.ts

@@ -5,13 +5,14 @@ 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';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NumberOnlyDirective } from './_helper/number-only.directive';
 import { VeriableFormComponent } from './pages/veriable-form/veriable-form.component';
+import { HeaderComponent } from './pages/header/header.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { VeriableFormComponent } from './pages/veriable-form/veriable-form.compo
     LoginComponent,
     NumberOnlyDirective,
     VeriableFormComponent,
+    HeaderComponent,
 
   ],
   imports: [
@@ -27,6 +29,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/header/header.component.html

@@ -0,0 +1,24 @@
+<header class=" bg-light">
+    <div class="container">
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <a class="navbar-brand" href="#"> <img src="https://enianalytics.com/images/eni-tech-logo.png" alt="lohi"> </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item active">
+              <a class="nav-link" href="#">form 1 <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">form 2</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">form 3</a>
+            </li>
+
+          </ul>
+        </div>
+      </nav>
+    </div>
+</header>

src/app/pages/header/header.component.sass

@@ -0,0 +1,20 @@
+header
+    border-bottom: 1px solid #cccccc3b
+    box-shadow: 0 0 8px #c2c2c252
+
+.bg-light
+    background: #fff!important
+
+nav img
+    width: 100px
+
+ul li a
+    font-weight: 600
+    font-family: 'Inter', sans-serif
+    font-size: 14px
+    text-transform: uppercase
+    color: #444444
+
+ul li.active a, ul li:hover  a
+    color:#e76b20
+

src/app/pages/header/header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.sass']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -1,46 +1,41 @@
+<app-header></app-header>
 <div class="container">
-    <div class="row">
-      <div class="col-md-12">
-        <div class="variableCal">
-          <form [formGroup]="formGroup">
-
-            <div class="form-group" formArrayName="items" *ngFor="let item of items.controls; let i = index">
-              <div class="row" [formGroupName]="i">
-                <div class="col-md-3">
-                  <select formControlName="type" (change)="onTypeChange(i)" class="form-control">
-                    <option value="" selected disabled > Select </option>
-                    <option value="variable">Variable</option>
-                    <option value="text">Text</option>
-                  </select>
-                </div>
-
-                <div class="col-md-3" *ngIf="item.get('type')?.value === 'variable'">
-                  <select formControlName="variable" class="form-control">
-                    <option value="" selected disabled > Select </option>
-                    <option *ngFor="let v of variableList" [value]="v">{{ v }}</option>
-                  </select>
-                  <div>
-                    <p>Variable Calculation: {{ calculateVariable(i) }}</p>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="variableCal">
+        <form [formGroup]="form" (ngSubmit)="onSubmit()">
+          <div formArrayName="rows">
+            <div *ngFor="let row of rows.controls; let rowIndex = index" [formGroupName]="rowIndex" class="row-section">
+              <div formArrayName="columns" class="add-col-section">
+                <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 *ngIf="item.get('type')?.value === 'text'" class="col-md-3">
-                  <input formControlName="text" placeholder="Enter text here" class="form-control" />
-                </div>
-                <div class="col-md-3">
-                  <button class="btn btn-danger" (click)="removeRow(i)" *ngIf="items.length > 1">Remove Row</button>
-                  <button class="btn btn-primary ml-2" (click)="addRow()" *ngIf="i === items.length - 1">Add Row</button>
-                </div>
               </div>
+
+              <!-- Button to add a new column in the same row -->
+              <button type="button" class="add-column-btn btn btn-success mt-0 " (click)="addColumn(rowIndex)">Add</button>
             </div>
-            <div class="row">
-                <div class="col-md-12">
-                  <button type="submit" class="btn btn-primary" (click)="onSubmit()" >Submit</button>
-                </div>
-              </div>
+          </div>
 
-          </form>
-        </div>
+          <!-- Button to add a new row -->
+          <button type="button" class="add-row-btn btn btn-secondary mr-2 mt-0" (click)="addRow()">Add</button>
+
+          <button type="submit" class="submit-btn btn btn-success mt-0">Submit</button>
+        </form>
       </div>
     </div>
   </div>
+</div>

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

@@ -0,0 +1,50 @@
+.container
+  margin-top: 20px
+
+.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
+    margin-right: 10px!important
+
+.add-column-btn
+  margin-top: 10px
+  display: block
+
+.add-row-btn
+  margin-top: 20px
+
+.submit-btn
+  margin-top: 30px
+
+.row-section
+  border: 1px solid #ccc
+  padding: 20px
+  margin-bottom: 20px
+  position: relative
+
+@media (min-width: 768px)
+  .add-col-section
+    display: flex // Ensures that the columns are stacked vertically
+
+  .column-section
+        display: flex
+        margin-bottom: 15px
+        flex-direction: row
+
+  .row-section
+    padding: 20px
+    overflow-y: auto

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',
@@ -7,57 +11,90 @@ import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
   styleUrls: ['./veriable-form.component.sass']
 })
 export class VeriableFormComponent implements OnInit {
-  formGroup: FormGroup;
-  variableList = ['Variable1', 'Variable2', 'Variable3'];  // Example variable list
+  form: FormGroup;
+  public componentDestroyed = new Subject();
+  rdsValues: any;
+  selectedParamValue: any = {};
+  inputValue: any;
 
-  constructor(private fb: FormBuilder) {
-    this.formGroup = this.fb.group({
-      items: this.fb.array([this.createItem()])
+  constructor(private fb: FormBuilder, private api: ApiService) {
+    this.form = this.fb.group({
+      rows: this.fb.array([])
     });
   }
 
   ngOnInit(): void {
-
+    // Initialize with one row
+    this.addRow();
+    this.getVarbaleValusData();
   }
 
-  get items() {
-    return this.formGroup.get('items') as FormArray;
+  get rows(): FormArray {
+    return this.form.get('rows') as FormArray;
   }
 
-  createItem(): FormGroup {
+  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: [''],
-      variable: [''],
-      text: ['']
+      textValue: [''],
+      variableValue: ['']
     });
   }
 
-  addRow() {
-    this.items.push(this.createItem());
+  addColumn(rowIndex: number): void {
+    const row = this.rows.at(rowIndex).get('columns') as FormArray;
+    row.push(this.createColumn());
   }
 
-  removeRow(index: number) {
-    this.items.removeAt(index);
+  addRow(): void {
+    const row = this.fb.group({
+      columns: this.fb.array([this.createColumn()])
+    });
+    this.rows.push(row);
   }
 
-  onTypeChange(index: number) {
-    const type = this.items?.at(index)?.get('type')?.value;
-    if (type === 'variable') {
-      this.items?.at(index)?.get('text')?.setValue('');
-    } else {
-      this.items?.at(index)?.get('variable')?.setValue('');
+  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)) {
+        if (!this.selectedParamValue[rowIndex]) {
+          this.selectedParamValue[rowIndex] = {};
+        }
+        this.selectedParamValue[rowIndex][colIndex] = item[selectedParam];
+        break;
+      }
     }
+      this.inputValue = this.selectedParamValue[rowIndex][colIndex]
+    console.log(`Row: ${rowIndex}, Column: ${colIndex}, Value:`, this.selectedParamValue[rowIndex][colIndex]);
   }
 
-  calculateVariable(index: number): string {
-    const selectedVariable = this.items?.at(index)?.get('variable')?.value;
-    return `Calculated value for ${selectedVariable}`;
+
+  onSubmit(): void {
+    console.log(this.form.value);
   }
-
-  onSubmit() {
-      const formData = this.formGroup.value;
-      console.log(formData);
-
-  }
-
 }

src/index.html

@@ -13,5 +13,7 @@
 </head>
 <body class="mat-typography">
   <app-root></app-root>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
 </body>
 </html>