From 4e90a82829730f52b2b96e91b4444ba3b7116ade Mon Sep 17 00:00:00 2001
From: Johnny Sit <johnny.sit@uconn.edu>
Date: Wed, 25 Mar 2020 17:45:11 -0400
Subject: [PATCH 1/5] Added dropdown menu

---
 .../main-center/main-center.component.html    |  2 +-
 src/app/main/tree/tree.component.html         | 32 +++++++++++++++----
 src/app/main/tree/tree.component.ts           |  6 ++++
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/app/main/main-center/main-center.component.html b/src/app/main/main-center/main-center.component.html
index 3d7c2a9..e012abe 100644
--- a/src/app/main/main-center/main-center.component.html
+++ b/src/app/main/main-center/main-center.component.html
@@ -13,4 +13,4 @@
 
 <ng-template #noPdf>
     <h1 class="ml-4 mt-4 text-danger">PDF not found</h1>
-</ng-template>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/main/tree/tree.component.html b/src/app/main/tree/tree.component.html
index 1246370..367c3f6 100644
--- a/src/app/main/tree/tree.component.html
+++ b/src/app/main/tree/tree.component.html
@@ -1,7 +1,25 @@
-<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
-    <ng-template let-node pTemplate="default">
-        <div class="tree">
-            <div class="flex-fill">{{ node.label }}</div>
-        </div>
-    </ng-template>
-</p-tree>
\ No newline at end of file
+<h2 class="ml-2">Select XA: </h2>
+
+<ng-container *ngIf="selectedXA == ''">
+    <h4 class="ml-2">Please select a model</h4>
+</ng-container>
+
+<select class="ml-2" ng-model="selectedXA" (change)="selectOptionHandler($event)">
+    <option value="">none</option>
+    <option value="uconn">UConn</option>
+    <option value="test">Test</option>
+</select>
+
+<ng-container *ngIf="selectedXA == 'test'">
+    <p class="ml-2">No information is available for selected model</p>
+</ng-container>
+
+<ng-container *ngIf="selectedXA == 'uconn'">
+    <p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
+        <ng-template let-node pTemplate="default">
+            <div class="tree">
+                <div class="flex-fill">{{ node.label }}</div>
+            </div>
+        </ng-template>
+    </p-tree>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/main/tree/tree.component.ts b/src/app/main/tree/tree.component.ts
index aaf8bf6..90d4b97 100644
--- a/src/app/main/tree/tree.component.ts
+++ b/src/app/main/tree/tree.component.ts
@@ -12,6 +12,12 @@ export class TreeComponent implements OnInit {
 
   filesTree: TreeNode[];
 
+  selectedXA = '';
+
+  selectOptionHandler(event: any) {
+    this.selectedXA = event.target.value;
+  }
+
   constructor(
     private treeService: TreeService,
     private nodeService: NodeService

From 8286cb8be04bd300f46050966b0b2788775f1d04 Mon Sep 17 00:00:00 2001
From: Johnny Sit <johnny.sit@uconn.edu>
Date: Thu, 26 Mar 2020 16:41:39 -0400
Subject: [PATCH 2/5] added dropdown component and service. not functional yet

---
 src/app/services/XAService.service.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/app/services/XAService.service.ts

diff --git a/src/app/services/XAService.service.ts b/src/app/services/XAService.service.ts
new file mode 100644
index 0000000..a4194cc
--- /dev/null
+++ b/src/app/services/XAService.service.ts
@@ -0,0 +1,17 @@
+import { BehaviorSubject } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class XAService {
+
+    // private selectedXA = new BehaviorSubject<string>(null);
+    // xa$ = this.selectedXA.asObservable();
+
+    selectedXA: string;
+
+    changeXA(xa: string) {
+        this.selectedXA = xa;
+    }
+}

From 78a62f3415e0ae7b34ef674cee245e4b59558d43 Mon Sep 17 00:00:00 2001
From: Johnny Sit <johnny.sit@uconn.edu>
Date: Thu, 26 Mar 2020 17:33:06 -0400
Subject: [PATCH 3/5] XAService functionality

---
 src/app/services/XAService.service.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/services/XAService.service.ts b/src/app/services/XAService.service.ts
index a4194cc..990841c 100644
--- a/src/app/services/XAService.service.ts
+++ b/src/app/services/XAService.service.ts
@@ -6,12 +6,10 @@ import { Injectable } from '@angular/core';
 })
 export class XAService {
 
-    // private selectedXA = new BehaviorSubject<string>(null);
-    // xa$ = this.selectedXA.asObservable();
+    private selectedXA = new BehaviorSubject<string>(null);
+    xa$ = this.selectedXA.asObservable();
 
-    selectedXA: string;
-
-    changeXA(xa: string) {
-        this.selectedXA = xa;
+    changeXA(newXA: string) {
+        this.selectedXA.next(newXA);
     }
 }

From c88fb1a75863e0549ecbc29188362fe963ef5606 Mon Sep 17 00:00:00 2001
From: Johnny Sit <johnny.sit@uconn.edu>
Date: Thu, 26 Mar 2020 17:37:43 -0400
Subject: [PATCH 4/5] some files weren't committed/pushed

---
 src/app/app.module.ts                         |  3 ++-
 src/app/main/dropdown/dropdown.component.css  |  0
 src/app/main/dropdown/dropdown.component.html | 13 ++++++++++
 .../main/dropdown/dropdown.component.spec.ts  | 25 +++++++++++++++++++
 src/app/main/dropdown/dropdown.component.ts   | 23 +++++++++++++++++
 src/app/main/main.component.html              |  2 ++
 src/app/main/main.component.ts                |  1 -
 src/app/main/tree/tree.component.html         | 24 +++++-------------
 src/app/main/tree/tree.component.ts           | 24 +++++++++++-------
 9 files changed, 86 insertions(+), 29 deletions(-)
 create mode 100644 src/app/main/dropdown/dropdown.component.css
 create mode 100644 src/app/main/dropdown/dropdown.component.html
 create mode 100644 src/app/main/dropdown/dropdown.component.spec.ts
 create mode 100644 src/app/main/dropdown/dropdown.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0f35882..f9f0165 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,9 +8,10 @@ import { TreeModule } from 'primeng/tree';
 import { MainComponent } from './main/main.component';
 import { MainCenterComponent } from './main/main-center/main-center.component';
 import { TreeComponent } from './main/tree/tree.component';
+import { DropdownComponent } from './main/dropdown/dropdown.component';
 
 @NgModule({
-  declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent],
+  declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent, DropdownComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
diff --git a/src/app/main/dropdown/dropdown.component.css b/src/app/main/dropdown/dropdown.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/main/dropdown/dropdown.component.html b/src/app/main/dropdown/dropdown.component.html
new file mode 100644
index 0000000..f46e699
--- /dev/null
+++ b/src/app/main/dropdown/dropdown.component.html
@@ -0,0 +1,13 @@
+<h3 class="ml-2">Please select a model: </h3>
+
+<ng-container *ngIf="selectedXA == ''">
+    <p class="ml-2"></p>
+</ng-container>
+
+<select class="ml-2" ng-model="selectedXA" (change)="selectOptionHandler($event)">
+    <option *ngFor="let model of xaList" ngValue="model.value">{{model.name}}</option>
+</select>
+
+<ng-container *ngIf="selectedXA == 'Test'">
+    <p class="ml-2">No information is available for selected model</p>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/main/dropdown/dropdown.component.spec.ts b/src/app/main/dropdown/dropdown.component.spec.ts
new file mode 100644
index 0000000..e0edf7a
--- /dev/null
+++ b/src/app/main/dropdown/dropdown.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DropdownComponent } from './dropdown.component';
+
+describe('DropdownComponent', () => {
+  let component: DropdownComponent;
+  let fixture: ComponentFixture<DropdownComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropdownComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/main/dropdown/dropdown.component.ts b/src/app/main/dropdown/dropdown.component.ts
new file mode 100644
index 0000000..04dbe4d
--- /dev/null
+++ b/src/app/main/dropdown/dropdown.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { XAService } from 'src/app/services/XAService.service';
+
+@Component({
+  selector: 'app-dropdown',
+  templateUrl: './dropdown.component.html',
+  styleUrls: ['./dropdown.component.css']
+})
+export class DropdownComponent implements OnInit {
+  constructor(private xaService: XAService) { }
+
+  xaList = [{ name: null, value: null }, { name: 'UConn', value: 1 }, { name: 'Test', value: 2 }];
+
+  selectedXA = '';
+
+  selectOptionHandler(event: any) {
+    this.selectedXA = event.target.value;
+    this.xaService.changeXA(this.selectedXA);
+  }
+
+  ngOnInit() {
+  }
+}
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index 425ed99..a8ac724 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,3 +1,5 @@
+<app-dropdown></app-dropdown>
+<p></p>
 <div class="d-flex h-100 w-100">
     <app-tree></app-tree>
     <app-main-center class="w-100"></app-main-center>
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 355d203..8334f84 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -6,7 +6,6 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
-
   constructor() { }
 
   ngOnInit() {
diff --git a/src/app/main/tree/tree.component.html b/src/app/main/tree/tree.component.html
index 367c3f6..e752daa 100644
--- a/src/app/main/tree/tree.component.html
+++ b/src/app/main/tree/tree.component.html
@@ -1,20 +1,4 @@
-<h2 class="ml-2">Select XA: </h2>
-
-<ng-container *ngIf="selectedXA == ''">
-    <h4 class="ml-2">Please select a model</h4>
-</ng-container>
-
-<select class="ml-2" ng-model="selectedXA" (change)="selectOptionHandler($event)">
-    <option value="">none</option>
-    <option value="uconn">UConn</option>
-    <option value="test">Test</option>
-</select>
-
-<ng-container *ngIf="selectedXA == 'test'">
-    <p class="ml-2">No information is available for selected model</p>
-</ng-container>
-
-<ng-container *ngIf="selectedXA == 'uconn'">
+<ng-container *ngIf="currentXA != null; else noXA">
     <p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
         <ng-template let-node pTemplate="default">
             <div class="tree">
@@ -22,4 +6,8 @@
             </div>
         </ng-template>
     </p-tree>
-</ng-container>
\ No newline at end of file
+</ng-container>
+
+<ng-template #noXA>
+    <p class="ml-2">No XA selected</p>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/main/tree/tree.component.ts b/src/app/main/tree/tree.component.ts
index 90d4b97..e84b413 100644
--- a/src/app/main/tree/tree.component.ts
+++ b/src/app/main/tree/tree.component.ts
@@ -1,29 +1,31 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { TreeNode } from 'primeng/api';
+import { Subscription } from 'rxjs';
 import { NodeService } from 'src/app/services/node.service';
 import { TreeService } from 'src/app/services/tree.service';
+import { XAService } from 'src/app/services/XAService.service';
 
 @Component({
   selector: 'app-tree',
   templateUrl: './tree.component.html',
   styleUrls: ['./tree.component.css']
 })
-export class TreeComponent implements OnInit {
+export class TreeComponent implements OnInit, OnDestroy {
 
+  private dropdownSubscription: Subscription;
+  currentXA: string;
   filesTree: TreeNode[];
 
-  selectedXA = '';
-
-  selectOptionHandler(event: any) {
-    this.selectedXA = event.target.value;
-  }
-
   constructor(
     private treeService: TreeService,
-    private nodeService: NodeService
+    private nodeService: NodeService,
+    private xaService: XAService
   ) { }
 
   ngOnInit() {
+    this.dropdownSubscription = this.xaService.xa$.subscribe(async (xa) => {
+      this.currentXA = xa;
+    });
     this.nodeService.getFiles().then(files => (this.filesTree = files));
   }
 
@@ -31,4 +33,8 @@ export class TreeComponent implements OnInit {
     this.treeService.changeNode(event.node);
   }
 
+  ngOnDestroy() {
+    this.dropdownSubscription.unsubscribe();
+  }
+
 }

From 2cc82dc3d9ec65064aaf85cee20468078ebae9cc Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Thu, 26 Mar 2020 20:19:50 -0400
Subject: [PATCH 5/5] Improvements to the dropdown feature.

---
 src/app/app.module.ts                         |  6 +++++
 src/app/main/dropdown/dropdown.component.html | 17 +++---------
 src/app/main/dropdown/dropdown.component.ts   | 26 ++++++++++++-------
 src/app/main/main.component.html              |  7 ++---
 src/app/main/main.component.ts                |  6 ++++-
 src/app/main/tree/tree.component.html         | 20 +++++---------
 src/app/main/tree/tree.component.ts           | 11 ++++----
 src/app/services/XAService.service.ts         | 15 -----------
 src/app/services/enditem.service.ts           | 16 ++++++++++++
 9 files changed, 63 insertions(+), 61 deletions(-)
 delete mode 100644 src/app/services/XAService.service.ts
 create mode 100644 src/app/services/enditem.service.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f9f0165..8919f61 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,21 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 import { TreeModule } from 'primeng/tree';
+import { DropdownModule } from 'primeng/dropdown';
 import { MainComponent } from './main/main.component';
 import { MainCenterComponent } from './main/main-center/main-center.component';
 import { TreeComponent } from './main/tree/tree.component';
 import { DropdownComponent } from './main/dropdown/dropdown.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [AppComponent, TreeComponent, MainComponent, MainCenterComponent, DropdownComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
+    FormsModule,
+    BrowserAnimationsModule,
     TreeModule,
+    DropdownModule,
     HttpClientModule
   ],
   providers: [],
diff --git a/src/app/main/dropdown/dropdown.component.html b/src/app/main/dropdown/dropdown.component.html
index f46e699..a18b36a 100644
--- a/src/app/main/dropdown/dropdown.component.html
+++ b/src/app/main/dropdown/dropdown.component.html
@@ -1,13 +1,4 @@
-<h3 class="ml-2">Please select a model: </h3>
-
-<ng-container *ngIf="selectedXA == ''">
-    <p class="ml-2"></p>
-</ng-container>
-
-<select class="ml-2" ng-model="selectedXA" (change)="selectOptionHandler($event)">
-    <option *ngFor="let model of xaList" ngValue="model.value">{{model.name}}</option>
-</select>
-
-<ng-container *ngIf="selectedXA == 'Test'">
-    <p class="ml-2">No information is available for selected model</p>
-</ng-container>
\ No newline at end of file
+<div class="d-flex align-items-center p-2">
+    <h3 class="mr-2">End Item: </h3>
+    <p-dropdown [options]="xaList" [(ngModel)]="selectedEndItem" (onChange)="onChange($event)"></p-dropdown>
+</div>
\ No newline at end of file
diff --git a/src/app/main/dropdown/dropdown.component.ts b/src/app/main/dropdown/dropdown.component.ts
index 04dbe4d..35db625 100644
--- a/src/app/main/dropdown/dropdown.component.ts
+++ b/src/app/main/dropdown/dropdown.component.ts
@@ -1,23 +1,29 @@
 import { Component, OnInit } from '@angular/core';
-import { XAService } from 'src/app/services/XAService.service';
+import { EndItemService } from 'src/app/services/enditem.service';
+import { SelectItem } from 'primeng/api';
 
 @Component({
   selector: 'app-dropdown',
   templateUrl: './dropdown.component.html',
   styleUrls: ['./dropdown.component.css']
 })
-export class DropdownComponent implements OnInit {
-  constructor(private xaService: XAService) { }
+export class DropdownComponent {
 
-  xaList = [{ name: null, value: null }, { name: 'UConn', value: 1 }, { name: 'Test', value: 2 }];
+  constructor(
+    private endItemService: EndItemService
+  ) {}
 
-  selectedXA = '';
+  // TODO replace with backend.
+  xaList: SelectItem[] = [
+    { label: 'None selected', value: null },
+    { label: 'UConn', value: 'Uconn' },
+    { label: 'Test', value: 'Test' }
+  ];
 
-  selectOptionHandler(event: any) {
-    this.selectedXA = event.target.value;
-    this.xaService.changeXA(this.selectedXA);
-  }
+  selectedEndItem = '';
 
-  ngOnInit() {
+  onChange(event: any) {
+    this.endItemService.setEndItem(this.selectedEndItem);
   }
+
 }
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
index a8ac724..9f15d2c 100644
--- a/src/app/main/main.component.html
+++ b/src/app/main/main.component.html
@@ -1,6 +1,7 @@
-<app-dropdown></app-dropdown>
-<p></p>
-<div class="d-flex h-100 w-100">
+<div class="bg-secondary">
+    <app-dropdown></app-dropdown>
+</div>
+<div *ngIf="endItemService.endItem$ | async" class="d-flex h-100 w-100" >
     <app-tree></app-tree>
     <app-main-center class="w-100"></app-main-center>
 </div>
\ No newline at end of file
diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
index 8334f84..daeb522 100644
--- a/src/app/main/main.component.ts
+++ b/src/app/main/main.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { EndItemService } from '../services/enditem.service';
 
 @Component({
   selector: 'app-main',
@@ -6,7 +7,10 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
-  constructor() { }
+
+  constructor(
+    private endItemService: EndItemService
+  ) { }
 
   ngOnInit() {
   }
diff --git a/src/app/main/tree/tree.component.html b/src/app/main/tree/tree.component.html
index e752daa..1246370 100644
--- a/src/app/main/tree/tree.component.html
+++ b/src/app/main/tree/tree.component.html
@@ -1,13 +1,7 @@
-<ng-container *ngIf="currentXA != null; else noXA">
-    <p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
-        <ng-template let-node pTemplate="default">
-            <div class="tree">
-                <div class="flex-fill">{{ node.label }}</div>
-            </div>
-        </ng-template>
-    </p-tree>
-</ng-container>
-
-<ng-template #noXA>
-    <p class="ml-2">No XA selected</p>
-</ng-template>
\ No newline at end of file
+<p-tree [value]="filesTree" selectionMode="single" (onNodeSelect)="nodeSelect($event)">
+    <ng-template let-node pTemplate="default">
+        <div class="tree">
+            <div class="flex-fill">{{ node.label }}</div>
+        </div>
+    </ng-template>
+</p-tree>
\ No newline at end of file
diff --git a/src/app/main/tree/tree.component.ts b/src/app/main/tree/tree.component.ts
index e84b413..5419316 100644
--- a/src/app/main/tree/tree.component.ts
+++ b/src/app/main/tree/tree.component.ts
@@ -3,7 +3,7 @@ import { TreeNode } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import { NodeService } from 'src/app/services/node.service';
 import { TreeService } from 'src/app/services/tree.service';
-import { XAService } from 'src/app/services/XAService.service';
+import { EndItemService } from 'src/app/services/enditem.service';
 
 @Component({
   selector: 'app-tree',
@@ -13,19 +13,18 @@ import { XAService } from 'src/app/services/XAService.service';
 export class TreeComponent implements OnInit, OnDestroy {
 
   private dropdownSubscription: Subscription;
-  currentXA: string;
+
+  selectedEndItem: string;
   filesTree: TreeNode[];
 
   constructor(
     private treeService: TreeService,
     private nodeService: NodeService,
-    private xaService: XAService
+    private endItemService: EndItemService
   ) { }
 
   ngOnInit() {
-    this.dropdownSubscription = this.xaService.xa$.subscribe(async (xa) => {
-      this.currentXA = xa;
-    });
+    this.dropdownSubscription = this.endItemService.endItem$.subscribe(xa =>  this.selectedEndItem = xa);
     this.nodeService.getFiles().then(files => (this.filesTree = files));
   }
 
diff --git a/src/app/services/XAService.service.ts b/src/app/services/XAService.service.ts
deleted file mode 100644
index 990841c..0000000
--- a/src/app/services/XAService.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { BehaviorSubject } from 'rxjs';
-import { Injectable } from '@angular/core';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class XAService {
-
-    private selectedXA = new BehaviorSubject<string>(null);
-    xa$ = this.selectedXA.asObservable();
-
-    changeXA(newXA: string) {
-        this.selectedXA.next(newXA);
-    }
-}
diff --git a/src/app/services/enditem.service.ts b/src/app/services/enditem.service.ts
new file mode 100644
index 0000000..bead0cf
--- /dev/null
+++ b/src/app/services/enditem.service.ts
@@ -0,0 +1,16 @@
+import { BehaviorSubject } from 'rxjs';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class EndItemService {
+
+    private selectedEndItem = new BehaviorSubject<string>(null);
+    endItem$ = this.selectedEndItem.asObservable();
+
+    setEndItem(endItem: string) {
+        this.selectedEndItem.next(endItem);
+    }
+
+}