nmelone/HPIoTWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added additional visuals cleaned up config interface

Browse Source
This commit is contained in:
Nico Melone
2020-02-14 14:42:05 -06:00
parent 6e4bacaadc
commit ee4ad6fd71
3 changed files with 90 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/configs/configs.component.html
View File

@@ -10,7 +10,14 @@
</mat-autocomplete>
</mat-form-field>
<div *ngFor="let device of devicesArray.controls; let i = index">
<h2>Device {{i + 1}}</h2>
<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>
</mat-card-actions>
</mat-card-header>
<div [formGroup]="device">
<mat-form-field>
<input matInput placeholder="Application Name" type="text" formControlName="appname" required>
@@ -30,34 +37,44 @@
<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">
<h3>Tag {{j+1}}</h3>
<div [formGroup]="tag">
<mat-form-field>
<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>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Display Name" type="text" formControlName="plcname" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Change Threshold" type="number" formControlName="plcchangethres" value=0 required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Guaranteed Timer" type="number" formControlName="plcguaranteed" value=3600 required>
</mat-form-field>
<mat-form-field>
<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>
</mat-autocomplete>
</mat-form-field>
</div>
<div *ngFor="let tag of plcArray(i).controls; let j = index" class="DataPoint">
<mat-card>
<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>
</mat-card-actions>
</mat-card-header>
<div [formGroup]="tag">
<mat-form-field>
<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>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Display Name" type="text" formControlName="plcname" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Change Threshold" type="number" formControlName="plcchangethres" value=0 required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Tag Guaranteed Timer" type="number" formControlName="plcguaranteed" value=3600 required>
</mat-form-field>
<mat-form-field>
<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>
</mat-autocomplete>
</mat-form-field>
</div>
</mat-card>
</div>
</div>
</mat-card>
</div>
</form>
</div>

10
src/app/configs/configs.component.scss
View File

@@ -4,7 +4,17 @@
form {
width: 100%;
}
mat-form-field {
padding: .25em;
}
mat-card-actions {
display: flex;
justify-self: right;
}
.DataPoint {
padding: .5em;
}
form > * {
margin-bottom: 1.5em;
width: 100%;

54
src/app/configs/configs.component.ts
View File

@@ -3,6 +3,11 @@ import { FormBuilder, FormControl, FormGroup, FormArray } from '@angular/forms';
import { Observable } from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
export interface Config {
[key: string]: any;
}
@Component({
selector: 'app-configs',
templateUrl: './configs.component.html',
@@ -14,7 +19,7 @@ export class ConfigsComponent implements OnInit {
get certificateIDInput() { return this.configForm.get('certificateID'); }
get devicesArray() { return this.configForm.get('devices') as FormArray; }
configDownloaded = {};
configDownloaded: Config;
configForm = this.builder.group({
certificateID: '',
devices: new FormArray([])
@@ -36,28 +41,41 @@ export class ConfigsComponent implements OnInit {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
onSelect(e){
onSelect(e) {
// console.log(e.target.innerText.slice(1, -1));
this.configForm.controls.certificateID.setValue(e.target.innerText.slice(1, -1));
this.onCertificateChange();
if (this.certificateIDInput !== 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({
appname: 'hpiot',
certificateID: '',
company: '',
location: i,
field: '',
devicetype: '',
plcdata: new FormArray([]),
modbusdata: new FormArray([]),
currentdata: new FormArray([]),
voltagedata: new FormArray([])
}));
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([])
}));
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,
}));
}
}
}
}