From ee4ad6fd71c7b951c979ed991a7ff53d71e8b125 Mon Sep 17 00:00:00 2001
From: Nico Melone <n_melone@hotmail.com>
Date: Fri, 14 Feb 2020 14:42:05 -0600
Subject: [PATCH] Added additional visuals cleaned up config interface

---
 src/app/configs/configs.component.html | 71 ++++++++++++++++----------
 src/app/configs/configs.component.scss | 10 ++++
 src/app/configs/configs.component.ts   | 54 +++++++++++++-------
 3 files changed, 90 insertions(+), 45 deletions(-)

diff --git a/src/app/configs/configs.component.html b/src/app/configs/configs.component.html
index e348afe..782977c 100644
--- a/src/app/configs/configs.component.html
+++ b/src/app/configs/configs.component.html
@@ -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>
diff --git a/src/app/configs/configs.component.scss b/src/app/configs/configs.component.scss
index 96eed22..00d9fa1 100644
--- a/src/app/configs/configs.component.scss
+++ b/src/app/configs/configs.component.scss
@@ -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%;
diff --git a/src/app/configs/configs.component.ts b/src/app/configs/configs.component.ts
index 96ff11e..9c75aa8 100644
--- a/src/app/configs/configs.component.ts
+++ b/src/app/configs/configs.component.ts
@@ -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,
+          }));
+        }
       }
     }
    }