updated packages and added config downloads

package.json

@@ -16,7 +16,6 @@
     "@angular/common": "~9.0.0",
     "@angular/compiler": "~9.0.0",
     "@angular/core": "~9.0.0",
-    "@angular/flex-layout": "^8.0.0-beta.27",
     "@angular/forms": "~9.0.0",
     "@angular/material": "^9.0.0",
     "@angular/platform-browser": "~9.0.0",
@@ -25,19 +24,18 @@
     "@angular/router": "~9.0.0",
     "@angular/service-worker": "~9.0.0",
     "aws-amplify": "^1.2.2",
-    "ngx-gauge": "^1.0.0-beta.11",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.25",
+    "@angular-devkit/build-angular": "^0.900.1",
     "@angular/cli": "^9.0.1",
     "@angular/compiler-cli": "~9.0.0",
     "@angular/language-service": "~9.0.0",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
+    "@types/node": "^13.7.0",
     "codelyzer": "^5.2.1",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

src/app/app.module.ts

@@ -1,6 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -18,7 +17,6 @@ import { SignUpComponent } from './auth/sign-up/sign-up.component';
 import { ConfirmCodeComponent } from './auth/confirm-code/confirm-code.component';
 import { ProfileComponent } from './auth/profile/profile.component';
 import { AvatarComponent } from './auth/profile/avatar/avatar.component';
-import { NgxGaugeModule} from 'ngx-gauge';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { ConfigsComponent } from './configs/configs.component';
@@ -46,8 +44,6 @@ import { HttpClientModule } from '@angular/common/http';
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     ReactiveFormsModule,
     FormsModule,
-    NgxGaugeModule,
-    FlexLayoutModule,
     MatTableModule,
     MatSortModule,
     HttpClientModule

src/app/configs/configs.component.html

@@ -2,9 +2,9 @@
     <h2>Configuration</h2>
     <form [formGroup]="configForm">
         <mat-form-field>
-            <input matInput placeholder="Certificate ID" type="text" [formControl]="certificateIDInput"  [matAutocomplete]="auto" (change)="onCertificateChange($event)"required>
+            <input matInput placeholder="Certificate ID" type="text" [formControl]="certificateIDInput" [matAutocomplete]="auto" (onChange)="onCertificateChange($event)"required>
             <mat-autocomplete #auto="matAutocomplete">
-                <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+                <mat-option *ngFor="let option of filteredOptions | async" [value]="option" (click)="onSelect($event)">
                     {{option}}
                 </mat-option>
             </mat-autocomplete>
@@ -30,7 +30,7 @@
                 <mat-form-field>
                     <input matInput placeholder="Device Type" type="text" formControlName="devicetype" required>
                 </mat-form-field>
-                <div *ngFor="let tag of plcarray(i).controls; let j = index"> 
+                <div *ngFor="let tag of plcArray(i).controls; let j = index"> 
                     <h3>Tag {{j+1}}</h3>
                     <div [formGroup]="tag">
                         <mat-form-field>

src/app/configs/configs.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, FormArray } from '@angular/forms';
 import { Observable } from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 @Component({
   selector: 'app-configs',
   templateUrl: './configs.component.html',
@@ -14,7 +14,7 @@ export class ConfigsComponent implements OnInit {
 
   get certificateIDInput() { return this.configForm.get('certificateID'); }
   get devicesArray() { return this.configForm.get('devices') as FormArray; }
-
+  configDownloaded = {};
   configForm = this.builder.group({
     certificateID: '',
     devices: new FormArray([])
@@ -23,24 +23,27 @@ export class ConfigsComponent implements OnInit {
   options: string[] = ['1217f08d31bbc1e9f70aabb700fb33878ccc1ec6caa38c5efb8c9f2709c7a444',
   '1370cf88050a5d9bc5aeef22f2b9756224c080c89f703eefeee8c9081dc6424e', '1e1f59fb7ac397487ceddbd65ff3ecb39e021997c1926317d076b2fe1f8a9614'];
   filteredOptions: Observable<string[]>;
+
   ngOnInit() {
     this.filteredOptions = this.certificateIDInput.valueChanges.pipe(
       startWith(''),
       map(value => this._filter(value))
     );
    }
-   plcarray(i) { return this.configForm.get('devices.' + i + '.plcdata') as FormArray; }
+
+   plcArray(i) { return this.configForm.get('devices.' + i + '.plcdata') as FormArray; }
    private _filter(value: string): string[] {
      const filterValue = value.toLowerCase();
      return this.options.filter(option => option.toLowerCase().includes(filterValue));
    }
-   // Setup a function for onChangeCertificateID to get said config and load the form dynamically
-   onCertificateChange(e) {
-    console.log(e.target.value);
-    const config = this.http.get('https://4ax24ru9ra.execute-api.us-east-1.amazonaws.com/Gamma/HPIoTgetConfig/?certificateID='
-     + e.target.value);
-    console.log(config);
-    const numberOfDevices = 3;
+   onSelect(e){
+     // console.log(e.target.innerText.slice(1, -1));
+     this.configForm.controls.certificateID.setValue(e.target.innerText.slice(1, -1));
+     this.onCertificateChange();
+   }
+   buildForms() {
+    const numberOfDevices = Object.keys(this.configDownloaded).length - 2;
+    console.log(numberOfDevices);
     if (this.devicesArray.length < numberOfDevices) {
       for (let i = this.devicesArray.length; i < numberOfDevices; i++) {
         this.devicesArray.push(this.builder.group({
@@ -58,4 +61,18 @@ export class ConfigsComponent implements OnInit {
       }
     }
    }
+   onCertificateChange() {
+    // console.log(this.certificateIDInput.value);
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json'
+      })
+    };
+    const config = this.http.get('https://4ax24ru9ra.execute-api.us-east-1.amazonaws.com/Gamma/HPIoTgetConfig/?certificateID='
+     + this.certificateIDInput.value, httpOptions);
+    config.subscribe(
+      data => {this.configDownloaded = data; console.log(this.configDownloaded); this.buildForms(); },
+      (err) => console.log(err)
+    );
+   }
 }