diff --git a/WebContent/html/javascript/return.js b/WebContent/html/javascript/return.js index 6298caa..c3374ac 100644 --- a/WebContent/html/javascript/return.js +++ b/WebContent/html/javascript/return.js @@ -1,58 +1,104 @@ +/*<%@ page import = "database.MySQLAccess" %> +<%@ page language="java" contentType="text/html; charset=ISO-8859-1" + pageEncoding="ISO-8859-1"%>*/ + +//Code that will obtain the devices a certain user is trying to access +//<% +/*MySQLAccess myaccess = new MySQLAccess(); +Connection connect = myaccess.connectDB(); +NEED USER ID FROM COOKIE? +String userID = +RentedDevice[] mydevices = myaccess.getUserDevices(connect, userID); +int numDevices = mydevices.length; +*/ +//%> -var dev1 = { - id: 1, - name:"George", - hardware:"iphone", - checkout: new Date("11/11/2016"), -}; - -var dev2 = { - id: 2, - name:"Greyson", - hardware:"iphone", - checkout: new Date("8/10/2016"), -}; - -var dev3 = { - id: 3, - name:"Linkin Park", - hardware:"ipad", - checkout: new Date("8/20/2016"), -}; - -var dev4 = { - id: 4, - name:"Abercrombie", - hardware:"ipad", - checkout: new Date("11/3/2016"), -}; - -var dev5 = { - id: 5, - name:"Hulk", - hardware:"computerStick", - checkout: new Date("4/28/2016"), -}; - -var dev6 = { - id: 6, - name:"Captain America", - hardware:"computerStick", - checkout: new Date("10/22/2016"), -}; - -var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; //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(){ + var devices = []; + //loop constraint + /*<% + window.numDevices = <=numDevices>; + %> + //iterate all devices we retrieved + for(var i = 0; i < window.numDevices; i++){ + //get JSON text from each object + <% + window.json = "<=mydevices[i].toString()>"; + %> + //push to array! + devices.push(JSON.parse(window.json)); + }*/ + return devices; +} -populateDeviceList(null); +//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() { @@ -96,7 +142,7 @@ function filterDeviceList() function populateDeviceList(filter) //generates html and writes to 'devContainer' div in returnPage.html { - var devicesToList = getCheckedOutDevices(null,filter); + var devicesToList = devices; var htmlString=""; var i; for (i = 0; i < devicesToList.length; i++) { @@ -142,70 +188,10 @@ function populateDeviceList(filter) function returnDevice() { - var id = this.getAttribute('id'); - id = parseInt(id.replace(/[^0-9\.]/g,''), 10); - if(isUnavailable(id)) - { - var unavailable = getUnavailableIDs(); - unavailable.splice(unavailable.indexOf(id),1); - localStorage.setItem('unavailable',JSON.stringify(unavailable)); - $('#return').fadeIn(1000); - $('#return').fadeIn(1000); - $('#return').fadeOut(1000); - } - else - alert("That's already marked available. Something may have gone wrong."); - populateDeviceList(); + $('#orderInfoModal').show(); } -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) - { - if(filter!=null) - { - var checkedOutMillis = devices[j].checkout.getTime(); - if(filter[0]checkedOutMillis) - checkedDevices.push(devices[j]); - } - else - checkedDevices.push(devices[j]); - break; - } - } - } - return checkedDevices; -} - -function isUnavailable(id){ - var unavailable = getUnavailableIDs(); - if(unavailable.length == 0) - return 0; - else{ - for(var i = 0; i < unavailable.length; i++){ - if(unavailable[i] == (id)) - return 1; - } - } - return 0; -} -function getUnavailableIDs() -//Identical to the function in request.js: just reads the 'unavailable' array in local storage. -//Will need to be changed (or may be obsolete) when we get a database -{ - var unavailable = new Array; - var unavailable_str = localStorage.getItem('unavailable'); - if(unavailable_str !== "" && unavailable_str !== null){ - unavailable = JSON.parse(unavailable_str); - } - return unavailable; +//called when clicking x on the modal +function hidePopup(){ + $('#orderInfoModal').hide(); } \ No newline at end of file diff --git a/WebContent/html/webpages/returnPage.html b/WebContent/html/webpages/returnPage.html index fdcda6c..2e702d5 100644 --- a/WebContent/html/webpages/returnPage.html +++ b/WebContent/html/webpages/returnPage.html @@ -20,6 +20,7 @@ padding: 15px; background-color: #E9EAEB; display: inline-block; + cursor: pointer; } div.imgContainer{ @@ -60,6 +61,17 @@ +