added config page posting config to AWS

Can now post modified configs to aws service
This commit is contained in:
2020-02-19 12:27:15 -06:00
parent ee4ad6fd71
commit 65117c10b3
2 changed files with 115 additions and 34 deletions

View File

@@ -8,14 +8,14 @@
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</mat-form-field>
<button mat-raised-button color="primary" (click)="saveConfig()">Save</button>
<div *ngFor="let device of devicesArray.controls; let i = index">
<mat-card>
<mat-card-header>
<mat-card-title>Device {{i + 1}}</mat-card-title>
<mat-card-actions>
<button mat-button color="warn">Remove Device {{i+1}}</button>
<button mat-button color="primary">Add New Datapoint</button>
<button mat-button color="warn" (click)="removeDevice(j)">Remove Device {{i+1}}</button>
</mat-card-actions>
</mat-card-header>
<div [formGroup]="device">
@@ -42,27 +42,27 @@
<mat-card-header>
<mat-card-title>Tag {{j+1}}</mat-card-title>
<mat-card-actions>
<button mat-button color="warn">Remove Tag {{j +1}}</button>
<button mat-button color="warn" (click)="removeDataPoint(i,j)">Remove Tag {{j +1}}</button>
</mat-card-actions>
</mat-card-header>
<div [formGroup]="tag">
<mat-form-field>
<input matInput placeholder="PLC IP" type="text" formControlName="plcip" required>
<input matInput placeholder="PLC IP" type="text" formControlName="plcIP" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="PLC Tag" type="text" formControlName="plctag" required>
<input matInput placeholder="PLC Tag" type="text" formControlName="tag" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Display Name" type="text" formControlName="plcname" required>
<input matInput placeholder="Tag Display Name" type="text" formControlName="name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Change Threshold" type="number" formControlName="plcchangethres" value=0 required>
<input matInput placeholder="Tag Change Threshold" type="number" formControlName="changeThreshold" value=0 required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Guaranteed Timer" type="number" formControlName="plcguaranteed" value=3600 required>
<input matInput placeholder="Tag Guaranteed Timer" type="number" formControlName="guaranteed" value=3600 required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="PLC Type" type="text" formControlName="plctype" [matAutocomplete]="auto" required>
<input matInput placeholder="PLC Type" type="text" formControlName="plcType" [matAutocomplete]="auto" required>
<mat-autocomplete #auto="matAutocomplete">
<mat-option value="CLX">CLX</mat-option>
<mat-option value="Micro800">Micro800</mat-option>
@@ -73,8 +73,11 @@
</mat-card>
</div>
</div>
<mat-card-actions>
<button mat-button color="primary" (click)="addDataPoint(i)">Add New Tag</button>
</mat-card-actions>
</mat-card>
</div>
<button mat-button color="primary" (click)="addDevice()">Add New Device</button>
</form>
</div>

View File

@@ -25,18 +25,37 @@ export class ConfigsComponent implements OnInit {
devices: new FormArray([])
});
// Setup an API call to get the list of certificate IDs from DDB to store in options
options: string[] = ['1217f08d31bbc1e9f70aabb700fb33878ccc1ec6caa38c5efb8c9f2709c7a444',
'1370cf88050a5d9bc5aeef22f2b9756224c080c89f703eefeee8c9081dc6424e', '1e1f59fb7ac397487ceddbd65ff3ecb39e021997c1926317d076b2fe1f8a9614'];
options: string[];
filteredOptions: Observable<string[]>;
ngOnInit() {
this.filteredOptions = this.certificateIDInput.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
this.getCertList();
}
getCertList() {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
const certList = this.http.get('https://4ax24ru9ra.execute-api.us-east-1.amazonaws.com/Gamma/HPIoTgetCertList/', httpOptions);
plcArray(i) { return this.configForm.get('devices.' + i + '.plcdata') as FormArray; }
certList.subscribe(
data => {
this.options = data as string[];
console.log(data);
this.filteredOptions = this.certificateIDInput.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
},
(err) => console.log(err)
);
}
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));
@@ -54,26 +73,26 @@ export class ConfigsComponent implements OnInit {
this.devicesArray.clear();
for (let i = this.devicesArray.length; i < numberOfDevices; i++) {
this.devicesArray.push(this.builder.group({
appname: this.configDownloaded['device' + (i + 1).toString()].appname,
certificateID: this.configDownloaded['device' + (i + 1).toString()].certificateID,
company: this.configDownloaded['device' + (i + 1).toString()].company,
location: this.configDownloaded['device' + (i + 1).toString()].locationID,
field: this.configDownloaded['device' + (i + 1).toString()].field,
devicetype: this.configDownloaded['device' + (i + 1).toString()].deviceType,
plcdata: new FormArray([]),
modbusdata: new FormArray([]),
currentdata: new FormArray([]),
voltagedata: new FormArray([])
appname: this.configDownloaded['device' + (i + 1).toString()].appname,
certificateID: this.configDownloaded['device' + (i + 1).toString()].certificateID,
company: this.configDownloaded['device' + (i + 1).toString()].company,
location: this.configDownloaded['device' + (i + 1).toString()].locationID,
field: this.configDownloaded['device' + (i + 1).toString()].field,
devicetype: this.configDownloaded['device' + (i + 1).toString()].deviceType,
PLCData: new FormArray([]),
modbusdata: new FormArray([]),
currentdata: new FormArray([]),
voltagedata: new FormArray([])
}));
if (this.configDownloaded['device' + (i + 1).toString()].PLCData !== 'empty') {
for (let j = 1; j - 1 < Object.keys(this.configDownloaded['device' + (i + 1).toString()].PLCData).length; j++ ) {
this.plcArray(i).push(this.builder.group({
plcip: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].plcIP,
plctag: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].tag,
plcname: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].name,
plcchangethres: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].changeThreshold,
plcguaranteed: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].guaranteed,
plctype: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].plcType,
plcIP: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].plcIP,
tag: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].tag,
name: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].name,
changeThreshold: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].changeThreshold,
guaranteed: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].guaranteed,
plcType: this.configDownloaded['device' + (i + 1).toString()].PLCData['tag' + j.toString()].plcType,
}));
}
}
@@ -93,4 +112,63 @@ export class ConfigsComponent implements OnInit {
(err) => console.log(err)
);
}
addDataPoint(e) {
this.plcArray(e).push(this.builder.group({
plcIP: '',
tag: '',
name: '',
changeThreshold: '',
guaranteed: '',
plcType: ''
}));
}
removeDataPoint(i, j) {
this.plcArray(i).removeAt(j);
}
addDevice() {
this.devicesArray.push(this.builder.group({
appname: '',
certificateID: '',
company: '',
location: '',
field: '',
devicetype: '',
PLCData: new FormArray([]),
modbusdata: new FormArray([]),
currentdata: new FormArray([]),
voltagedata: new FormArray([])
}));
}
removeDevice(e) {
this.devicesArray.removeAt(e);
}
saveConfig() {
const formObj = this.configForm.getRawValue();
const devices = formObj.devices;
let j = 1;
devices.forEach(device => {
let i = 1;
const plcdata = {};
device.PLCData.forEach(element => {
plcdata['tag' + i] = element;
i++;
});
device.PLCData = plcdata;
formObj['device' + j.toString()] = device;
j++;
});
delete formObj.devices;
formObj.version = this.configDownloaded.version + 1;
const serialized = JSON.stringify(formObj);
this.http.post('https://4ax24ru9ra.execute-api.us-east-1.amazonaws.com/Gamma/postConfig/', serialized)
.subscribe(
data => console.log('success!', data),
error => console.error('couldn\'t post because', error)
);
}
}