From c5330f3f6c78c2a076655ae8193dad02da52a4f6 Mon Sep 17 00:00:00 2001 From: Adam R Claxton Date: Tue, 14 Feb 2017 01:50:42 -0500 Subject: [PATCH 01/13] Imporoved the look of the order info popup It also now closes when pressing escape or clicking outside of it. Made shoppingCart.html and shoppingCart.js into shoppnigCart.jsp and shop.jsp respetively; getting ready for database stuff --- WebContent/html/css/stylesheet.css | 1 + WebContent/html/javascript/navbar.js | 2 +- WebContent/html/javascript/shop.jsp | 211 ++++++++++++++++++ .../{shoppingCart.html => shoppingCart.jsp} | 30 ++- 4 files changed, 231 insertions(+), 13 deletions(-) create mode 100644 WebContent/html/javascript/shop.jsp rename WebContent/html/webpages/{shoppingCart.html => shoppingCart.jsp} (70%) diff --git a/WebContent/html/css/stylesheet.css b/WebContent/html/css/stylesheet.css index 8a50290..360b370 100644 --- a/WebContent/html/css/stylesheet.css +++ b/WebContent/html/css/stylesheet.css @@ -60,6 +60,7 @@ div.modal-body{ } input[type=text]{ + margin: 0 auto; width: 60%; } diff --git a/WebContent/html/javascript/navbar.js b/WebContent/html/javascript/navbar.js index e9c421e..b77c810 100644 --- a/WebContent/html/javascript/navbar.js +++ b/WebContent/html/javascript/navbar.js @@ -1 +1 @@ -document.getElementById('navbaruniversal').innerHTML = '
' +document.getElementById('navbaruniversal').innerHTML = '
' diff --git a/WebContent/html/javascript/shop.jsp b/WebContent/html/javascript/shop.jsp new file mode 100644 index 0000000..5a543d7 --- /dev/null +++ b/WebContent/html/javascript/shop.jsp @@ -0,0 +1,211 @@ + +//adding event listeners to all the options, such as ordering and deleting +document.getElementById('os').addEventListener('click',showPopup); +document.getElementById('ds').addEventListener('click',deleteSelected); +document.getElementById('oa').addEventListener('click',showPopup); +document.getElementById('da').addEventListener('click',deleteAll); + +// document.getElementById('orderInfoModal').addEventListener('keypress',escapeModal); +// function escap() { + // if() +// } +// window.onkeypress(function(e) { + // if (e.keyCode == 27) { + // hidePopup(); + // } +// }); +document.onkeydown = function(e) { + if (e.keyCode == 27) { + hidePopup(); + } + +} + +window.onclick = function(event) { + var modal = document.getElementById('orderInfoModal'); + if(event.target == modal) modal.style.display = "none"; +} +// Shipping form popup--------------------- +var orderForm = document.getElementById('orderInfoModal'); +var orderFormCloseButton = document.getElementById('closeOrderForm'); +orderFormCloseButton.addEventListener('click',hidePopup); +show(); //on load, we want to show everything + +function getCartItems(){ + var cart = new Array; //initiate array for them + var cart_str = localStorage.getItem('cart'); //get them from local storage + if (cart_str !== null) { //if there is at least one object already we need to convert it from JSON to string + cart = JSON.parse(cart_str); + } + return cart; //return value is an array +} + +/** +This function displays a list of devices that a user has currently in their shopping cart. +**/ +function show(){ + var cart = getCartItems(); //get all the cart items you want to show + var html = ''; //html string initially empty + var part1 = "nhpup.popup('"; + var part2 = "');" + if(cart.length !== 0){ //only continue if there are cart items + html += '

Tickets have been generated below based on your desired selections.


' + for(var i = 0; i < cart.length; i++){ //iterate cart + var id = cart[i]; //this gets the id value from the cart + for(var j = 0; j < devices.length; j++){ //iterate device list + if(devices[j].id === id){ //match the id's "nhpup.popup(' ');" + html += '

' + devices[j].name + '

'; //create listing of all the devices + break; //break out of loop when we match + } + } + } + } + else{ //no point in doing all that computing if the list is empty + html += 'Shopping cart is empty.'; //so give a nice error message. + } + + document.getElementById('shoppingContainer').innerHTML = html; //adds what we just generated to the webpage + + var checkboxes = document.getElementsByClassName('deviceCheckbox'); //get all the checkboxes we just placed! + for(var i = 0; i < checkboxes.length; i++){ //iterate them + checkboxes[i].addEventListener('click',changeStatus); //when we click on a checkbox, it should add/remove the id from the selected array + } + + var tickets = document.getElementsByClassName('ticket'); + for(var i = 0; i < tickets.length; i++){ + tickets[i].addEventListener('click',clickTicket); + } +} + +/** +This allows a ticket click to do the same thing as clicking on the checkbox. +**/ +function clickTicket(){ + var checkboxes = document.getElementsByClassName('deviceCheckbox'); + var id = this.getAttribute('id'); + id = parseInt(id.replace(/[^0-9\.]/g,''),10); + if(document.getElementById(id).checked == true){ + document.getElementById(id).checked = false; + for(var i = 0; i < checked.length; i++){ //iterate checked array + if(id == checked[i]) //find the right checkbox + checked.splice(i,1); //remove from the array + } + } + else{ + document.getElementById(id).checked = true; + checked.push(id); + } +} + +/** +When a checkbox is clicked, either a device needs to be checked or unchecked in the shopping cart. This function handles JUST that. +**/ +function changeStatus(){ + var id = this.getAttribute('id'); //get the checkbox's id + if(this.checked == true){ //we just checked it off + checked.push(id); //add item to the selected list + } + else{ //we just unchecked it + for(var i = 0; i < checked.length; i++){ //iterate checked array + if(id == checked[i]) //find the right checkbox + checked.splice(i,1); //remove from the array + } + } +} + +/** +This function takes all the devices we selected and simulates an order on them. +**/ +function showPopup(){ + orderForm.style.display = "block"; +} +function hidePopup(){ + orderForm.style.display = "none"; +} + +function orderSelected(){ + var response = confirm("Are you sure you'd like to order the selected items?"); + if(response == true){ //if they confirm + for(var i = 0; i < checked.length; i++){ //iterate all the checked off devices + var id = checked[i]; //get the id of each device + var requested = getRequestedItems(); //get the unavailable items + var cart = getCartItems(); //get the cart + requested.push(id); //add to unavailable list + for(var j = 0; j < cart.length; j++){ //iterate cart + if(cart[j] == id) //match id's + cart.splice(j,1); //remove from the cart + } + localStorage.setItem('requested', JSON.stringify(requested)); //update local storage + localStorage.setItem('cart', JSON.stringify(cart)); //update local storage + } + checked = new Array; //reset the checked off array + show(); //reload the container + } +} + +/** +This function takes all the devices we selected and removes them from the shopping cart. +**/ +function deleteSelected(){ + var response = confirm("Are you sure you'd like to remove the selected items from the cart?"); + if(response == true){ //if they confirm + for(var i = 0; i < checked.length; i++){ //iterate all the checked off devices + var id = checked[i]; //get the id of each device + var cart = getCartItems(); //get the cart + for(var j = 0; j < cart.length; j++){ //iterate cart + if(cart[j] == id){ //match ids + cart.splice(j,1); //remove from the cart + } + } + localStorage.setItem('cart', JSON.stringify(cart)); //update local storage + } + checked = new Array; //reset the checked array + show(); //reload the container + } +} + +/** +This function takes all devices in the shopping cart and orders them. +**/ +function orderAll(){ + var response = confirm("Are you sure you'd like to order the selected items?"); + if(response == true){ //if they confirm + var cart = getCartItems(); //get the cart + for(var i = 0; i < cart.length; i++){ //iterate the cart + var id = cart[i]; //get the id of each device + var requested = getRequestedItems(); //get the unavailable items + requested.push(id); //add to unavailable list + localStorage.setItem('requested', JSON.stringify(requested)); //update local storage + } + checked = new Array; //reset the checked off array + cart = new Array; //cart should now be empty, so reset also + localStorage.setItem('cart',JSON.stringify(cart)); //update local storage + show(); //reload container + } +} + +/** +This function takes all devices in the shopping cart and deletes them. +**/ +function deleteAll(){ + var response = confirm("Are you sure you'd like to order the selected items?"); + if(response == true){ //if they confirm + cart = new Array; //empty cart + localStorage.setItem('cart',JSON.stringify(cart)); //update local storage + checked = new Array; //reset the checked off array + show(); //reload container + } +} + +/** +This function gets requested items from local storage. +**/ +function getRequestedItems(){ + var requested = new Array; //make new array + var requested_str = localStorage.getItem('requested'); //get the string from local storage + if(requested_str !== '' && requested_str !== null){ //as long as its not null + requested = JSON.parse(requested_str); //make into array + } + return requested; //return value is an array +} +//here are all the hardcoded devices \ No newline at end of file diff --git a/WebContent/html/webpages/shoppingCart.html b/WebContent/html/webpages/shoppingCart.jsp similarity index 70% rename from WebContent/html/webpages/shoppingCart.html rename to WebContent/html/webpages/shoppingCart.jsp index a2768b4..679f0a4 100644 --- a/WebContent/html/webpages/shoppingCart.html +++ b/WebContent/html/webpages/shoppingCart.jsp @@ -16,6 +16,9 @@ -<% -MySQLAccess myaccess = new MySQLAccess(); -myaccess.connectDB(); -String name = myaccess.getResult()[0][0]; -String description = myaccess.getResult()[0][1]; -String hardware = myaccess.getResult()[0][2]; -out.println(name); -out.println(description); -out.println(hardware); -%> - + + diff --git a/WebContent/html/webpages/shoppingCart.jsp b/WebContent/html/webpages/shoppingCart.jsp index dc2838b..3200c63 100644 --- a/WebContent/html/webpages/shoppingCart.jsp +++ b/WebContent/html/webpages/shoppingCart.jsp @@ -58,18 +58,47 @@ pageEncoding="ISO-8859-1"%>

Please provide additional order information