diff --git a/package-lock.json b/package-lock.json index ccd3cbf..0d5a47b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,23 +26,23 @@ } }, "@angular-devkit/build-angular": { - "version": "0.803.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.803.24.tgz", - "integrity": "sha512-uA789spMVghXehwAhl5zK0loY/wfxblUiL+y21T24LMCJc15a9QX5dwbXH72ioHz7qdzb/agXk7AK+foc2/0Hw==", + "version": "0.803.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.803.25.tgz", + "integrity": "sha512-WY0E7NgXuog3phhz5ZdutZPWQ9nbOr+omGN5KI1e8MZs1sJO4xkyaGRT8zOulkogkqJ2NboTBq3j9uSbZkcYeg==", "dev": true, "requires": { - "@angular-devkit/architect": "0.803.24", - "@angular-devkit/build-optimizer": "0.803.24", - "@angular-devkit/build-webpack": "0.803.24", - "@angular-devkit/core": "8.3.24", + "@angular-devkit/architect": "0.803.25", + "@angular-devkit/build-optimizer": "0.803.25", + "@angular-devkit/build-webpack": "0.803.25", + "@angular-devkit/core": "8.3.25", "@babel/core": "7.8.3", "@babel/preset-env": "7.8.3", - "@ngtools/webpack": "8.3.24", + "@ngtools/webpack": "8.3.25", "ajv": "6.10.2", "autoprefixer": "9.6.1", - "browserslist": "4.8.3", + "browserslist": "4.8.6", "cacache": "12.0.2", - "caniuse-lite": "1.0.30001019", + "caniuse-lite": "1.0.30001024", "circular-dependency-plugin": "5.2.0", "clean-css": "4.2.1", "copy-webpack-plugin": "5.1.1", @@ -90,19 +90,19 @@ }, "dependencies": { "@angular-devkit/architect": { - "version": "0.803.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.803.24.tgz", - "integrity": "sha512-ONY/Ppzyvtb0tqgwnzQvlGlexb5nTyy58ljgL1aQLTO3cNTkpl4IQYUCTdvn61gGA+FWPAXMCCbNqOPZMsOZCQ==", + "version": "0.803.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.803.25.tgz", + "integrity": "sha512-usV/zEncKCKQuF6AD3pRU6N5i5fbaAux/qZb+nbOz9/2G5jrXwe5sH+y3vxbgqB83e3LqusEQCTu7/tfg6LwZg==", "dev": true, "requires": { - "@angular-devkit/core": "8.3.24", + "@angular-devkit/core": "8.3.25", "rxjs": "6.4.0" } }, "@angular-devkit/core": { - "version": "8.3.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.24.tgz", - "integrity": "sha512-xpT5yg+ddGDnifryBv2sRSYtq5F3iZIS+lN/K2AhhEa50B7Z+QaCVlEzoV/IfrGd6sLArdnKYwjLHFZ0LElUuw==", + "version": "8.3.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.25.tgz", + "integrity": "sha512-l7Gqy1tMrTpRmPVlovcFX8UA3mtXRlgO8kcSsbJ9MKRKNTCcxlfsWEYY5igyDBUVh6ADkgSIu0nuk31ZGTe0lw==", "dev": true, "requires": { "ajv": "6.10.2", @@ -142,9 +142,9 @@ } }, "@angular-devkit/build-optimizer": { - "version": "0.803.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.803.24.tgz", - "integrity": "sha512-Z+d7M+WpBq7AWWRwbxzb1l9O9qkylxnDRKxXvq3Tzjn43g+2WyspE91dMyrg1ISc+p8jgX6xKSblRLvtWqpA8w==", + "version": "0.803.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.803.25.tgz", + "integrity": "sha512-MiQimuEs8QeM3xo7bR3Yk1OWHHlp2pGCc2GLUMIcWhKqM+QjoRky0HoGoBazbznx292l+xjFjANvPEKbqJ2v7Q==", "dev": true, "requires": { "loader-utils": "1.2.3", @@ -155,30 +155,30 @@ } }, "@angular-devkit/build-webpack": { - "version": "0.803.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.803.24.tgz", - "integrity": "sha512-Bbd5KUGaE+edN0sp8K3azuqS/JTBmeWXIumdBEtqWyL6VsohX7fL+toJlSvRkj8lg02LVyozAFetXKnyaBkfCQ==", + "version": "0.803.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.803.25.tgz", + "integrity": "sha512-WR7HWJIWL6TB3WHG7ZFn8s0z3WlojeQlod75UIKl5i+f4OU90kp8kxcoH5G6OCXu56x5w40oIi1ve5ljjWSJkw==", "dev": true, "requires": { - "@angular-devkit/architect": "0.803.24", - "@angular-devkit/core": "8.3.24", + "@angular-devkit/architect": "0.803.25", + "@angular-devkit/core": "8.3.25", "rxjs": "6.4.0" }, "dependencies": { "@angular-devkit/architect": { - "version": "0.803.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.803.24.tgz", - "integrity": "sha512-ONY/Ppzyvtb0tqgwnzQvlGlexb5nTyy58ljgL1aQLTO3cNTkpl4IQYUCTdvn61gGA+FWPAXMCCbNqOPZMsOZCQ==", + "version": "0.803.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.803.25.tgz", + "integrity": "sha512-usV/zEncKCKQuF6AD3pRU6N5i5fbaAux/qZb+nbOz9/2G5jrXwe5sH+y3vxbgqB83e3LqusEQCTu7/tfg6LwZg==", "dev": true, "requires": { - "@angular-devkit/core": "8.3.24", + "@angular-devkit/core": "8.3.25", "rxjs": "6.4.0" } }, "@angular-devkit/core": { - "version": "8.3.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.24.tgz", - "integrity": "sha512-xpT5yg+ddGDnifryBv2sRSYtq5F3iZIS+lN/K2AhhEa50B7Z+QaCVlEzoV/IfrGd6sLArdnKYwjLHFZ0LElUuw==", + "version": "8.3.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.25.tgz", + "integrity": "sha512-l7Gqy1tMrTpRmPVlovcFX8UA3mtXRlgO8kcSsbJ9MKRKNTCcxlfsWEYY5igyDBUVh6ADkgSIu0nuk31ZGTe0lw==", "dev": true, "requires": { "ajv": "6.10.2", @@ -1453,23 +1453,6 @@ "semver": "^5.5.0" }, "dependencies": { - "browserslist": { - "version": "4.8.6", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.6.tgz", - "integrity": "sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==", - "dev": true, - "requires": { - "caniuse-lite": "^1.0.30001023", - "electron-to-chromium": "^1.3.341", - "node-releases": "^1.1.47" - } - }, - "caniuse-lite": { - "version": "1.0.30001025", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001025.tgz", - "integrity": "sha512-SKyFdHYfXUZf5V85+PJgLYyit27q4wgvZuf8QTOk1osbypcROihMBlx9GRar2/pIcKH2r4OehdlBr9x6PXetAQ==", - "dev": true - }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -1881,23 +1864,6 @@ "semver": "^5.5.0" }, "dependencies": { - "browserslist": { - "version": "4.8.6", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.6.tgz", - "integrity": "sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==", - "dev": true, - "requires": { - "caniuse-lite": "^1.0.30001023", - "electron-to-chromium": "^1.3.341", - "node-releases": "^1.1.47" - } - }, - "caniuse-lite": { - "version": "1.0.30001025", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001025.tgz", - "integrity": "sha512-SKyFdHYfXUZf5V85+PJgLYyit27q4wgvZuf8QTOk1osbypcROihMBlx9GRar2/pIcKH2r4OehdlBr9x6PXetAQ==", - "dev": true - }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -3879,12 +3845,12 @@ "dev": true }, "@ngtools/webpack": { - "version": "8.3.24", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.3.24.tgz", - "integrity": "sha512-OpR7t/99qNOpADayCuM67agBVdYkdbFyEEcOLaDFYh3LsefHOSSxtAGv8M77e7dguvtaljHTiVkMxgcXFsZM0Q==", + "version": "8.3.25", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-8.3.25.tgz", + "integrity": "sha512-yHvgxXUXlgdWijtzcRjTaUqzK+6TVK/8p7PreBR00GsLxhl4U1jQSC6yDaZUCjOaEkiczFWl4hEuC4wTU/hLdg==", "dev": true, "requires": { - "@angular-devkit/core": "8.3.24", + "@angular-devkit/core": "8.3.25", "enhanced-resolve": "4.1.0", "rxjs": "6.4.0", "tree-kill": "1.2.2", @@ -3892,9 +3858,9 @@ }, "dependencies": { "@angular-devkit/core": { - "version": "8.3.24", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.24.tgz", - "integrity": "sha512-xpT5yg+ddGDnifryBv2sRSYtq5F3iZIS+lN/K2AhhEa50B7Z+QaCVlEzoV/IfrGd6sLArdnKYwjLHFZ0LElUuw==", + "version": "8.3.25", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-8.3.25.tgz", + "integrity": "sha512-l7Gqy1tMrTpRmPVlovcFX8UA3mtXRlgO8kcSsbJ9MKRKNTCcxlfsWEYY5igyDBUVh6ADkgSIu0nuk31ZGTe0lw==", "dev": true, "requires": { "ajv": "6.10.2", @@ -5067,14 +5033,14 @@ } }, "browserslist": { - "version": "4.8.3", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz", - "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==", + "version": "4.8.6", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.6.tgz", + "integrity": "sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001017", - "electron-to-chromium": "^1.3.322", - "node-releases": "^1.1.44" + "caniuse-lite": "^1.0.30001023", + "electron-to-chromium": "^1.3.341", + "node-releases": "^1.1.47" } }, "browserstack": { @@ -5237,9 +5203,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001019", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001019.tgz", - "integrity": "sha512-6ljkLtF1KM5fQ+5ZN0wuyVvvebJxgJPTmScOMaFuQN2QuOzvRJnWSKfzQskQU5IOU4Gap3zasYPIinzwUjoj/g==", + "version": "1.0.30001024", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001024.tgz", + "integrity": "sha512-LubRSEPpOlKlhZw9wGlLHo8ZVj6ugGU3xGUfLPneNBledSd9lIM5cCGZ9Mz/mMCJUhEt4jZpYteZNVRdJw5FRA==", "dev": true }, "canonical-path": { @@ -10069,9 +10035,9 @@ } }, "node-releases": { - "version": "1.1.47", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.47.tgz", - "integrity": "sha512-k4xjVPx5FpwBUj0Gw7uvFOTF4Ep8Hok1I6qjwL3pLfwe7Y0REQSAqOwwv9TWBCUtMHxcXfY4PgRLRozcChvTcA==", + "version": "1.1.48", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.48.tgz", + "integrity": "sha512-Hr8BbmUl1ujAST0K0snItzEA5zkJTQup8VNTKNfT6Zw8vTJkIiagUPNfxHmgDOyfFYNfKAul40sD0UEYTvwebw==", "dev": true, "requires": { "semver": "^6.3.0" diff --git a/package.json b/package.json index db9d90e..7cb823e 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "zone.js": "~0.9.1" }, "devDependencies": { - "@angular-devkit/build-angular": "^0.803.24", + "@angular-devkit/build-angular": "^0.803.25", "@angular/cli": "~8.3.23", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index dd6bd43..1abdf78 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,7 @@ import { AvatarComponent } from './auth/profile/avatar/avatar.component'; import { NgxGaugeModule} from 'ngx-gauge'; import { MatSortModule, MatTableModule } from '@angular/material'; import { ConfigsComponent } from './configs/configs.component'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent, @@ -47,7 +48,8 @@ import { ConfigsComponent } from './configs/configs.component'; NgxGaugeModule, FlexLayoutModule, MatTableModule, - MatSortModule + MatSortModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent], diff --git a/src/app/configs/configs.component.html b/src/app/configs/configs.component.html index b16ff97..419f91a 100644 --- a/src/app/configs/configs.component.html +++ b/src/app/configs/configs.component.html @@ -2,33 +2,62 @@

Configuration

- - Certificate ID - -

Device 1

- - - Application Name - - - - Certificate ID - - - - Company - - - - Location - - - - Field - - - - Device Type + + + + {{option}} + + +
+

Device {{i + 1}}

+
+ + + + + + + + + + + + + + + + + + +
+

Tag {{j+1}}

+
+ + + + + + + + + + + + + + + + + + + CLX + Micro800 + + +
+
+
+
diff --git a/src/app/configs/configs.component.ts b/src/app/configs/configs.component.ts index ea33cd3..49c32ad 100644 --- a/src/app/configs/configs.component.ts +++ b/src/app/configs/configs.component.ts @@ -1,6 +1,8 @@ import { Component, OnInit } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; -import { Certificate } from 'crypto'; +import { FormBuilder, FormControl, FormGroup, FormArray } from '@angular/forms'; +import { Observable } from 'rxjs'; +import {map, startWith} from 'rxjs/operators'; +import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-configs', templateUrl: './configs.component.html', @@ -8,26 +10,51 @@ import { Certificate } from 'crypto'; }) export class ConfigsComponent implements OnInit { - constructor(private builder: FormBuilder) { } + constructor(private builder: FormBuilder, private http: HttpClient) { } + + get certificateIDInput() { return this.configForm.get('certificateID'); } + get devicesArray() { return this.configForm.get('devices') as FormArray; } - ngOnInit() { } - configForm = this.builder.group({ certificateID: '', - d1appname: 'hpiot', - d1certificateID: '', - d1company: '', - d1location: '', - d1field: '', - d1devicetype: '' + devices: new FormArray([]) }); - - get certificateIDInput() {return this.configForm.get('certificateID')} - get d1appnameInput() {return this.configForm.get('d1appname')} - get d1certificateIDInput() {return this.configForm.get('certificateID')} - get d1companyInput() {return this.configForm.get('d1company')} - get d1locationInput() {return this.configForm.get('d1location')} - get d1fieldInput() {return this.configForm.get('d1field')} - get d1devicetypeInput() {return this.configForm.get('d1devicetype')} - + // Setup an API call to get the list of certificate IDs from DDB to store in options + options: string[] = ['1217f08d31bbc1e9f70aabb700fb33878ccc1ec6caa38c5efb8c9f2709c7a444', + '1370cf88050a5d9bc5aeef22f2b9756224c080c89f703eefeee8c9081dc6424e', '1e1f59fb7ac397487ceddbd65ff3ecb39e021997c1926317d076b2fe1f8a9614']; + filteredOptions: Observable; + ngOnInit() { + this.filteredOptions = this.certificateIDInput.valueChanges.pipe( + startWith(''), + map(value => this._filter(value)) + ); + } + 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; + if (this.devicesArray.length < numberOfDevices) { + for (let i = this.devicesArray.length; i < numberOfDevices; i++) { + this.devicesArray.push(this.builder.group({ + appname: 'hpiot', + certificateID: '', + company: '', + location: i, + field: '', + devicetype: '', + plcdata: new FormArray([]), + modbusdata: new FormArray([]), + currentdata: new FormArray([]), + voltagedata: new FormArray([]) + })); + } + } + } }