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-autocomplete>
</mat-form-field> </mat-form-field>
<div *ngFor="let device of devicesArray.controls; let i = index"> <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"> <div [formGroup]="device">
<mat-form-field> <mat-form-field>
<input matInput placeholder="Application Name" type="text" formControlName="appname" required> <input matInput placeholder="Application Name" type="text" formControlName="appname" required>
@@ -30,34 +37,44 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Device Type" type="text" formControlName="devicetype" required> <input matInput placeholder="Device Type" type="text" formControlName="devicetype" required>
</mat-form-field> </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" class="DataPoint">
<h3>Tag {{j+1}}</h3> <mat-card>
<div [formGroup]="tag"> <mat-card-header>
<mat-form-field> <mat-card-title>Tag {{j+1}}</mat-card-title>
<input matInput placeholder="PLC IP" type="text" formControlName="plcip" required> <mat-card-actions>
</mat-form-field> <button mat-button color="warn">Remove Tag {{j +1}}</button>
<mat-form-field> </mat-card-actions>
<input matInput placeholder="PLC Tag" type="text" formControlName="plctag" required> </mat-card-header>
</mat-form-field> <div [formGroup]="tag">
<mat-form-field> <mat-form-field>
<input matInput placeholder="Tag Display Name" type="text" formControlName="plcname" required> <input matInput placeholder="PLC IP" type="text" formControlName="plcip" required>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Tag Change Threshold" type="number" formControlName="plcchangethres" value=0 required> <input matInput placeholder="PLC Tag" type="text" formControlName="plctag" required>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="Tag Guaranteed Timer" type="number" formControlName="plcguaranteed" value=3600 required> <input matInput placeholder="Tag Display Name" type="text" formControlName="plcname" required>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<input matInput placeholder="PLC Type" type="text" formControlName="plctype" [matAutocomplete]="auto" required> <input matInput placeholder="Tag Change Threshold" type="number" formControlName="plcchangethres" value=0 required>
<mat-autocomplete #auto="matAutocomplete"> </mat-form-field>
<mat-option value="CLX">CLX</mat-option> <mat-form-field>
<mat-option value="Micro800">Micro800</mat-option> <input matInput placeholder="Tag Guaranteed Timer" type="number" formControlName="plcguaranteed" value=3600 required>
</mat-autocomplete> </mat-form-field>
</mat-form-field> <mat-form-field>
</div> <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>
</div> </div>
</mat-card>
</div> </div>
</form> </form>
</div> </div>

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

@@ -4,7 +4,17 @@
form { form {
width: 100%; width: 100%;
} }
mat-form-field {
padding: .25em;
}
mat-card-actions {
display: flex;
justify-self: right;
}
.DataPoint {
padding: .5em;
}
form > * { form > * {
margin-bottom: 1.5em; margin-bottom: 1.5em;
width: 100%; 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 { Observable } from 'rxjs';
import {map, startWith} from 'rxjs/operators'; import {map, startWith} from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
export interface Config {
[key: string]: any;
}
@Component({ @Component({
selector: 'app-configs', selector: 'app-configs',
templateUrl: './configs.component.html', templateUrl: './configs.component.html',
@@ -14,7 +19,7 @@ export class ConfigsComponent implements OnInit {
get certificateIDInput() { return this.configForm.get('certificateID'); } get certificateIDInput() { return this.configForm.get('certificateID'); }
get devicesArray() { return this.configForm.get('devices') as FormArray; } get devicesArray() { return this.configForm.get('devices') as FormArray; }
configDownloaded = {}; configDownloaded: Config;
configForm = this.builder.group({ configForm = this.builder.group({
certificateID: '', certificateID: '',
devices: new FormArray([]) devices: new FormArray([])
@@ -36,28 +41,41 @@ export class ConfigsComponent implements OnInit {
const filterValue = value.toLowerCase(); const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue)); return this.options.filter(option => option.toLowerCase().includes(filterValue));
} }
onSelect(e){ onSelect(e) {
// console.log(e.target.innerText.slice(1, -1)); // console.log(e.target.innerText.slice(1, -1));
this.configForm.controls.certificateID.setValue(e.target.innerText.slice(1, -1)); if (this.certificateIDInput !== e.target.innerText.slice(1, -1)) {
this.onCertificateChange(); this.configForm.controls.certificateID.setValue(e.target.innerText.slice(1, -1));
this.onCertificateChange();
}
} }
buildForms() { buildForms() {
const numberOfDevices = Object.keys(this.configDownloaded).length - 2; const numberOfDevices = Object.keys(this.configDownloaded).length - 2;
console.log(numberOfDevices); console.log(numberOfDevices);
if (this.devicesArray.length < numberOfDevices) { this.devicesArray.clear();
for (let i = this.devicesArray.length; i < numberOfDevices; i++) { for (let i = this.devicesArray.length; i < numberOfDevices; i++) {
this.devicesArray.push(this.builder.group({ this.devicesArray.push(this.builder.group({
appname: 'hpiot', appname: this.configDownloaded['device' + (i + 1).toString()].appname,
certificateID: '', certificateID: this.configDownloaded['device' + (i + 1).toString()].certificateID,
company: '', company: this.configDownloaded['device' + (i + 1).toString()].company,
location: i, location: this.configDownloaded['device' + (i + 1).toString()].locationID,
field: '', field: this.configDownloaded['device' + (i + 1).toString()].field,
devicetype: '', devicetype: this.configDownloaded['device' + (i + 1).toString()].deviceType,
plcdata: new FormArray([]), plcdata: new FormArray([]),
modbusdata: new FormArray([]), modbusdata: new FormArray([]),
currentdata: new FormArray([]), currentdata: new FormArray([]),
voltagedata: 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,
}));
}
} }
} }
} }