Images actually were working.

Eclipse Debugging = 💩 Also merged together two JSP files. No need to separate.
arc12012 · Feb 21, 2017 · 3b4bc36 · 3b4bc36
1 parent cced9d4
commit 3b4bc36
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 179 deletions.
diff --git a/WebContent/html/imgs/Tablet.png b/WebContent/html/imgs/Tablet.png
diff --git a/WebContent/html/imgs/computerStick.png b/WebContent/html/imgs/computerStick.png
diff --git a/...s-collection-devices/png/photo-camera.png → ...y-icons-collection-devices/png/Camera.png b/...s-collection-devices/png/photo-camera.png → ...y-icons-collection-devices/png/Camera.png
diff --git a/...y-icons-collection-devices/png/laptop.png → ...icons-collection-devices/png/Computer.png b/...y-icons-collection-devices/png/laptop.png → ...icons-collection-devices/png/Computer.png
diff --git a/...my-icons-collection-devices/png/modem.png → ...y-icons-collection-devices/png/Router.png b/...my-icons-collection-devices/png/modem.png → ...y-icons-collection-devices/png/Router.png
diff --git a/...s-collection-devices/png/music-player.png → ...ons-collection-devices/png/iPod Touch.png b/...s-collection-devices/png/music-player.png → ...ons-collection-devices/png/iPod Touch.png
diff --git a/WebContent/html/imgs/my-icons-collection-devices/png/usb.png b/WebContent/html/imgs/my-icons-collection-devices/png/usb.png
diff --git a/WebContent/html/javascript/return.jsp b/WebContent/html/javascript/return.jsp
diff --git a/WebContent/html/webpages/modem.png b/WebContent/html/webpages/modem.png
diff --git a/WebContent/html/webpages/returnPage.jsp b/WebContent/html/webpages/returnPage.jsp
@@ -1,3 +1,6 @@
+<%@ page import = "database.MySQLAccess,entities.RentedDevice" %>
+<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
+    pageEncoding="ISO-8859-1"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
@@ -93,7 +96,172 @@
   <div style = "display: inline-block">
     <h2>Return Here</h2>
   </div>
-  <%@ include file="../javascript/return.jsp" %>
+  <%
+MySQLAccess myaccess = new MySQLAccess();
+//String userID = 
+int counter = 0;
+//9 is just for testing purposes. Should be returning 4 devices at the moment.
+RentedDevice[] mydevices = myaccess.getUserDevices("9");
+String deviceString = RentedDevice.arrayToString(mydevices);
+%>
+
+<script type=text/javascript>
+
+//This array corresponds to the hardcoded inventory in request.js. The description has been replaced with a 
+//checkout date, because I imagine that is more the kind of info to pull from the database for this page.
+//IDs, names and hardware are the same.
+var devices = makeDeviceArray();
+//This will be the array of ids that are checked off
+var toReturn = []
+
+//Adds event listener to each mennu option
+var options = document.getElementsByClassName('option');
+for (var i = options.length - 1; i >= 0; i--) {
+	options[i].addEventListener('click',filterDeviceList);
+}
+
+//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);
+$('#returnbutton').click(returnDevice);
+$('#closeOrderForm').click(hidePopup);
+
+//This should make the device array of retrieved devices
+function makeDeviceArray(){
+	window.json = '<%=deviceString%>';
+	return JSON.parse(window.json);
+}
+
+//This makes a corresponding checkbox get set off, and then changes box color
+function fireCheck(){
+	//get device id
+	var id = this.getAttribute('data-num');
+	//create jquery strings
+	var query = 'input[data-num="'+id+'"]';
+	var query2 = 'div[data-num="'+id+'"]';
+	//check to see if checkbox is checked
+	var checked = $(query).prop('checked');
+	//if so...
+	if(checked === true){
+		//uncheck box
+		$(query).prop('checked',false);
+		//lighten background color
+		$(query2).css("background-color","#E9EAEB");
+		//remove from toReturn array
+		toReturn.splice(toReturn.indexOf(id),1)
+	}
+	//if box is unchecked...
+	else{
+		//check it off
+		$(query).prop('checked',true);
+		//make background darker
+		$(query2).css("background-color","#C2C3C4");
+		//add to toReturned array
+		toReturn.push(id);
+	}
+}
+
+//behaves similarly to above, minus the forced checking
+//and if statement reversed
+function selectBox(){
+	var id = this.getAttribute('data-num');
+	var query = 'input[data-num="'+id+'"]';
+	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)
+	}
+	else{
+		$(query2).css("background-color","#C2C3C4");
+		toReturn.push(id);
+	}
+}
+
+function filterDeviceList()
+{
+	var id = this.getAttribute('id');
+	month=30*24*60*60*1000;
+	var upperbound;
+	var lowerbound;
+	var filter = new Array();
+	switch(id)
+	{
+		case "all":
+		populateDeviceList(null);
+		break;
+		case "1month":
+		upperbound=new Date().getTime();
+		lowerbound=upperbound-month;
+		filter=[lowerbound, upperbound];
+		populateDeviceList(filter);
+		break;
+		case "1-3months":
+		upperbound=new Date().getTime()-month;
+		lowerbound=upperbound-2*month;
+		filter=[lowerbound, upperbound];
+		populateDeviceList(filter);
+		break;
+		case "3-5months":
+		upperbound=new Date().getTime()-3*month;
+		lowerbound=upperbound-2*month;
+		filter=[lowerbound, upperbound];
+		populateDeviceList(filter);
+		break;
+		case "5+months":
+		upperbound=new Date().getTime()-5*month;
+		lowerbound=0;
+		filter=[lowerbound, upperbound];
+		populateDeviceList(filter);
+		break;
+	}
+}
+
+function populateDeviceList(filter)
+//generates html and writes to 'devContainer' div in returnPage.html
+{
+	var devicesToList = devices;
+	var	htmlString="";
+	var i;
+	for (i = 0; i < devicesToList.length; i++) {
+		var id = devicesToList[i].id;
+		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+=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>";
+	}
+	if(i==0) htmlString+="Couldn't find any devices to return. Why not go order some?";
+	document.getElementById("devContainer").innerHTML = htmlString;
+
+	var returnbuttons = document.getElementsByClassName('returnbutton');
+	for (var i = 0; i < returnbuttons.length; i++) {
+		returnbuttons[i].addEventListener('click',returnDevice);
+	}
+}
+
+function returnDevice()
+{
+	$('#orderInfoModal').show();
+}
+
+//called when clicking x on the modal
+function hidePopup(){
+	$('#orderInfoModal').hide();
+}
+</script>
   <script src = "../javascript/navbar.js"></script>
   <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->
 </body>