filters work (except for the all filter)

html/javascript/return.js

@@ -46,12 +46,59 @@ var devices = [dev1, dev2, dev3, dev4, dev5, dev6];
 //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.
 
-populateDeviceList();
+var options = document.getElementsByClassName('option');
+for (var i = options.length - 1; i >= 0; i--) {
+	options[i].addEventListener('click',filterDeviceList);
+}
+
+
+populateDeviceList(null);
+
+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()
+function populateDeviceList(filter)
 //generates html and writes to 'devContainer' div in returnPage.html
 {
-	var devicesToList = getCheckedOutDevices(null);
+	if(filter!=null) window.alert("populating list with parameters "+filter[0]+" and "+filter[1]);
+	else window.alert("populating list with parameters null filter");
+	var devicesToList = getCheckedOutDevices(null,filter);
 	var	htmlString="";
 	for (var i = 0; i < devicesToList.length; i++) {
 		var id = devicesToList[i].id;
@@ -101,17 +148,27 @@ function returnDevice()
 	populateDeviceList();
 }
 
-function getCheckedOutDevices(user)
+function getCheckedOutDevices(user, filter)
 //Eventually this will return information about all devices checked out by *user*
 //Right now there is only one user, and the function just returns IDs of all checked out devicess.
+//'Filter' is passed as a two-element array representing a range of milliseconds.
+//If the checkout date for a device falls within that range, then it will be included in the results.
+//The filter may be null. If so, all checked out devices will be returned.
 {
 	var unavailable = getUnavailableIDs();
 	var checkedDevices = new Array();
 	for (var i = 0; i < unavailable.length; i++) {
 		for (var j = 0; j < devices.length; j++) {
 			if(unavailable[i] == devices[j].id)
 			{
-				checkedDevices.push(devices[j]);
+				if(filter!=null)
+				{
+					var checkedOutMillis = devices[j].checkout.getTime();
+					if(filter[0]<checkedOutMillis && filter[1]>checkedOutMillis)
+						checkedDevices.push(devices[j]);
+				}
+				else
+					checkedDevices.push(devices[j]);
 				break;
 			}
 		}

html/webpages/returnPage.html

@@ -53,11 +53,11 @@
   <div class="col-sm-3 col-md-2 sidebar">
     <ul class="nav nav-sidebar">
       <h4>Filter by Time Ordered</h4>
-      <li clsas = "option"><a href="#">All devices</a></li>
-      <li class = "option"><a href="#">Past month</a></li>
-      <li class = "option"><a href="#">1-3 months ago</a></li>
-      <li class = "option"><a href="#">3-5 months ago</a></li>
-      <li class = "option"><a href="#">5+ months ago</a></li>
+      <li clsas = "option" id = "all"><a href="#">All devices</a></li>
+      <li class = "option" id = "1month"><a href="#">Past month</a></li>
+      <li class = "option" id = "1-3months"><a href="#">1-3 months ago</a></li>
+      <li class = "option" id = "3-5months"><a href="#">3-5 months ago</a></li>
+      <li class = "option" id = "5+months"n><a href="#">5+ months ago</a></li>
     </ul>
   </div>
   <div class="displayDevice">