FindByShipAndRank working

Author: mswatosh

src/main/webapp/index.html

@@ -91,16 +91,17 @@ <h2>Congrats on your shiny, new Open Liberty sample app!</h2>
 				<div id="findByShipSizeAndRank" class="flexBox vFlexContainer queryContainer">
 					<strong id="createCrewMember" class="flexSelfCenter">Crew Members by Ship Size and Rank<br>CrewMembers.findByShipSizeAndRank()</strong>
 					<div id="findByShipSizeAndRankSelectors" class="hFlexContainer">
-						<select id="shipSizeSelector">
+						<select id="shipSizeSelector" onchange="refreshDisplay()">
 							<option>small</option>
 							<option>large</option>
 						</select>
-						<select id="rankSelector">
+						<select id="rankSelector" onchange="refreshDisplay()">
 							<option>Captain</option>
 							<option>Officer</option>
 							<option>Engineer</option>
 						</select>
 					</div>
+					<div id="shipAndRankBoxes" class="flexBox hFlexContainer"></div>
 				</div>
 			</div>
         </section>

src/main/webapp/js/app.js

@@ -76,7 +76,7 @@ async function refreshDisplay() {
 }
 
 function clearDisplay(){
-	var elements = ["userBoxes", "Captain", "Engineer", "Officer"];
+	var elements = ["userBoxes", "Captain", "Engineer", "Officer", "shipAndRankBoxes"]; //TODO this should use a .class
 	for (let i = 0; i < elements.length; i++) {
 		var usersDiv = document.getElementById(elements[i]);
 		while (usersDiv.firstChild) {

src/main/webapp/js/find-by-ship-size-and-rank.js

@@ -12,4 +12,21 @@
 async function refreshFindByShipSizeAndRank(shipSize, rank) {
     response = await fetch("db/crew/shipSize/" +shipSize+"/rank/" +rank);
 
+    if (response.ok) {
+		const doc = await response.json();
+		doc.forEach(addToCrewMembersFindByShipSizeAndRank);
+	}
+}
+
+function addToCrewMembersFindByShipSizeAndRank(entry){
+	var userHtml =	"<div>Name: " + entry.Name + "</div>" +
+					"<div>ID: " + entry.CrewID + "</div>" +
+                    "<div>Ship: " + entry.Ship + "</div>";
+					
+	var userDiv = document.createElement("div");
+	userDiv.setAttribute("class","user flexbox");
+	userDiv.setAttribute("id",entry.CrewID);
+	userDiv.setAttribute("onclick","remove('"+entry.CrewID+"')");
+	userDiv.innerHTML=userHtml;
+	document.getElementById("shipAndRankBoxes").appendChild(userDiv);
 }