Yay!

arc12012 · Feb 23, 2017 · b872a75 · b872a75
1 parent 3b4bc36
commit b872a75
Showing 1 changed file with 52 additions and 14 deletions.
diff --git a/WebContent/html/webpages/returnPage.jsp b/WebContent/html/webpages/returnPage.jsp
@@ -13,6 +13,7 @@
 
   <title>Synchrony Financial</title>
 
+  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
@@ -26,6 +27,7 @@
       background-color: #E9EAEB;
       display: inline-block;
       cursor: pointer;
+      position: relative;
     }
 
     div.imgContainer{
@@ -61,6 +63,16 @@
       padding-left: 20px;
       width: 200px; 
     }
+    tbody{
+      text-align: left;
+    }
+    input.deviceCheckbox{
+    	position: absolute;
+    	left: 0px;
+    	bottom: 0px;
+    	height: 20px;
+    	width: 20px;
+    }
   </style>
   <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
   </nav>
@@ -71,12 +83,35 @@
             <div class="modal-head">
                 <span id="closeOrderForm" class="close">&times;</span>
                 <h4>Please Review Your Return Choices</h4>
-            </div>
+            </div><br>
             <div class="modal-body">
+            	<table class="table table-bordered table-hover" id = "tabledisplay">
+            		<thread>
+            			<tr>
+            				<th>Device Name</th>
+            				<th>Model</th>
+            				<th>Hardware</th>
+            			</tr>
+            		</thread>
+            		<tbody id = "tablebody">
+            			<tr>
+            				<td>Bobby</td>
+            				<td>iPhone 6s</td>
+            				<td>Smartphone</td>
+            			</tr>
+            			<tr>
+            				<td>Bobby</td>
+            				<td>iPhone 6s</td>
+            				<td>Smartphone</td>
+            			</tr>
+            		</tbody>
+            	</table><br>
             <button>Continue</button>
             </div>
         </div>
     </div>
+  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
+  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
   <div class="col-sm-3 col-md-2 sidebar">
     <ul class="nav nav-sidebar">
       <h4>Filter by Time Ordered</h4>
@@ -123,12 +158,14 @@ for (var i = options.length - 1; i >= 0; i--) {
 //This calls on the filter function, which by default displays ALL DEVICES! You can later filter by take out period!
 populateDeviceList(null);
 
-//Test data
-$('div[data-num="1"]').click(fireCheck);
-$('input[data-num="1"]').click(selectBox);
+//Place event listeners on all device containers after they're displayed.
+$('div.deviceContainer').click(fireCheck);
+$('input.deviceCheckbox').click(selectBox);
 $('#returnbutton').click(returnDevice);
 $('#closeOrderForm').click(hidePopup);
 
+$(function(){$('#tabledisplay').DataTable();})
+
 //This should make the device array of retrieved devices
 function makeDeviceArray(){
 	window.json = '<%=deviceString%>';
@@ -172,12 +209,10 @@ function selectBox(){
 	var query2 = 'div[data-num="'+id+'"]';
 	var checked = $(query).prop('checked');
 	if(checked === false){
-		$(query2).css("background-color","#E9EAEB");
-		toReturn.splice(toReturn.indexOf(id),1)
+		$(query).prop('checked',true);
 	}
 	else{
-		$(query2).css("background-color","#C2C3C4");
-		toReturn.push(id);
+		$(query).prop('checked',false);
 	}
 }
 
@@ -231,17 +266,15 @@ function populateDeviceList(filter)
 		var name = devicesToList[i].name;
 		var hardware = devicesToList[i].model;
 		var checkout = devicesToList[i].checkout;
-		htmlString+="<div class=\"deviceContainer\"><div><div class=\"imgContainer\"><img src=\"../imgs/my-icons-collection-devices/png/";
+		htmlString+="<div class=\"deviceContainer\" data-num=\"" + i +"\">";
+		htmlString+="<input class=\"deviceCheckbox\" type = \"checkbox\" data-num=\"" + i + "\">";
+		htmlString+="<div><div class=\"imgContainer\"><img src=\"../imgs/my-icons-collection-devices/png/";
 		htmlString+=hardware;
 		htmlString+=".png\" class=\"device\">";
 		htmlString+=name;
 		htmlString+="</div><div class=\"deviceInfo\"><p>Checked out: "
 		htmlString+=checkout;
-		htmlString+="</div><div class=\"returnButtonContainer\"><button class=\"returnbutton\" id=\"button ";
-		htmlString+=(id);
-		htmlString+="\" type=\"button\">Return ";
-		htmlString+=name;
-		htmlString+="</button></div></p></div></div><br><br>";
+		htmlString+="</div></p></div></div><br><br>";
 	}
 	if(i==0) htmlString+="Couldn't find any devices to return. Why not go order some?";
 	document.getElementById("devContainer").innerHTML = htmlString;
@@ -254,6 +287,11 @@ function populateDeviceList(filter)
 
 function returnDevice()
 {
+	var html = "";
+	for(var i = 0; i < toReturn.length; i++){
+		html+= "<tr><td>" + devices[toReturn[i]].name + "</td><td>" + devices[toReturn[i]].hardware + "</td><td>" + devices[toReturn[i]].model + "</td></tr>";
+	}
+	document.getElementById("tablebody").innerHTML = html;
 	$('#orderInfoModal').show();
 }