Add a filter dropdown (option B in code). Works, but the client throw…

…s errors and no feedback is recieved after folder is created.

Add a start for a bed dropdown, has an issue where all of the bed names appear as empty strings

issue(s) :
#2
#4

client/src/app/admin/upload-photo.component.html

@@ -7,29 +7,67 @@ <h2>Upload Photo</h2>
 -->
 
 
-<div class="dropdown">
-    <a href="#" data-toggle="dropdown" class="dropdown-toggle"> {{ dropDownName }} <b class="caret"></b></a>
-    <ul class="dropdown-menu">
-        <li *ngFor="let plant of plantListService.getFilteredPlants()" (click)="setFlower(plant.cultivar)">
-        <a>
-            <h4>{{ plant.commonName }}</h4>
-            {{ plant.cultivar}}
-        </a>
-        </li>
-            <!--(click)="onSelectFlower(currentFlower)"> {{currentFlower}} </li>-->
-    </ul>
-</div>
 
 
 
-<div *ngIf="filename!==undefined"> Your file was successfully uploaded as data set {{this.filename}}.
+<div *ngIf="filename!==undefined"> Your file was successfully uploaded as data set {{thop.filename}}.
 </div>
-<div *ngIf="filename === undefined && uploadAttempted === true">File upload failed.</div>
+<div *ngIf="filename === undefined && uploadAttempted === true">File upload failed - Please Name Photo.</div>
+<div *ngIf="flowerName === undefined && uploadAttempted === true">File upload failed - Please Select A Flower.</div>
 
 <br>
 
 <input #nameInput type="text" placeholder="Name For Your Photo" (input)="newFileName = $event.target.value">
 
+<div class="flowerFilter">
+
+    <!--Dropdown for beds, needs to be worked on-->
+
+    <!--<div class="dropdown">-->
+        <!--<a href="#" data-toggle="dropdown" class="dropdown-toggle"> {{ bedDropDownName }} <b class="caret"></b></a>-->
+        <!--<ul class="dropdown-menu">-->
+            <!--<li *ngFor="let bed of bedListService.getBedNames()" (click)="setBed(bed.bedName)">-->
+                <!--<a>-->
+                    <!--<h4>{{ bed.bedName }}</h4>-->
+                <!--</a>-->
+            <!--</li>-->
+        <!--</ul>-->
+    <!--</div>-->
+
+
+    <br>
+
+    <!--Option A, display a dropdown with no search filter-->
+
+
+    <div class="dropdown">
+        <a href="#" data-toggle="dropdown" class="dropdown-toggle"> {{ flowerDropDownName }} <b class="caret"></b></a>
+        <ul class="dropdown-menu">
+            <li *ngFor="let plant of plantListService.getFilteredPlants()" (click)="setFlower(plant.cultivar)">
+                <a>
+                    <h4>{{ plant.commonName }}</h4>
+                    {{ plant.cultivar}}
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <!--Option B, dropdown with search filter, works, but errors are thrown and no feedback is recieved-->
+
+    <!--<label>-->
+        <!--{{ flowerDropDownName }}-->
+        <!--<input id="flowerInput" list="flowerOptions" (input)="flowerName = $event.target.value">-->
+        <!--<datalist id="flowerOptions">-->
+            <!--<li *ngFor="let plant of plantListService.getFilteredPlants()">-->
+                <!--<option>-->
+                    <!--<h4>{{ plant.cultivar }}</h4>-->
+                <!--</option>-->
+            <!--</li>-->
+        <!--</datalist>-->
+    <!--</label>-->
+
+</div>
+
 <br>
 <br>
 

client/src/app/admin/upload-photo.component.ts

@@ -5,6 +5,7 @@ import {PlantListComponent} from "../../app/garden/components/plant_list/src/pla
 import {Plant} from "../../app/garden/components/plant_list/src/plant";
 import {PlantListService} from "../../app/garden/components/plant_list/src/plant-list.service";
 import { Observable } from "rxjs";
+import {BedListService} from "../../app/garden/components/bed_list/src/bed-list.service";
 
 @Component({
     selector: 'upload-photo-component',
@@ -14,19 +15,21 @@ import { Observable } from "rxjs";
 
 export class UploadPhotoComponent implements OnInit {
 
-    constructor(private plantListService: PlantListService){ }
+    constructor(private plantListService: PlantListService, private bedListService: BedListService){ }
 
     @ViewChild('iu') iu;
     @ViewChild('nameInput') nameInput: ElementRef;
 
     ListOfAllPlants: Observable<Plant[]>;
+    FilteredList: Observable<Plant[]>;
 
     newFileName: string;
     flowerName: string;
     filename:string;
     uploadAttempted:boolean = false;
     public currentFlower: string;
-    dropDownName:string = "Flower Name";
+    flowerDropDownName:string = "Cultivar Name";
+    bedDropDownName:string = "Bed Name";
 
 
     handleUpload() {
@@ -44,14 +47,19 @@ export class UploadPhotoComponent implements OnInit {
     }
 
     setFlower(cultiVar) {
-        this.dropDownName = cultiVar;
+        this.flowerDropDownName = cultiVar;
         this.flowerName = cultiVar;
     }
 
-    retrievePlantNames() {
-        this.ListOfAllPlants = this.plantListService.getPlantsFromServer()
+    setBed(Namebed) {
+        this.bedDropDownName = Namebed;
+        //this.plantListService.setBedFilter(Namebed);
     }
 
+    // retrievePlantNames() {
+    //     this.ListOfAllPlants = this.plantListService.getPlantsFromServer()
+    // }
+
 
     ngOnInit(): void {