diff --git a/WebContent/html/css/stylesheet.css b/WebContent/html/css/stylesheet.css index c6e2cb0..8a50290 100644 --- a/WebContent/html/css/stylesheet.css +++ b/WebContent/html/css/stylesheet.css @@ -28,6 +28,54 @@ div.displayDevice{ left: 300px; } +div.modal{ + display:none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.4); +} + +div.modal-content{ + position: relative; + background-color: #fefefe; + margin: 5% auto; + padding: 10px; + border: 1px solid #888; + width: 80%; + max-height: 80%; + text-align: center; + vertical-align: center; + align-items: center; +} + +div.modal-body{ + padding: 10px; + overflow: auto; +} + +input[type=text]{ + width: 60%; +} + + +span.close{ + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} +span.close:hover, +span.close:focus{ + color: black; + text-decoration: none; + cursor: pointer; +} ul.nav{ padding: 0px; } diff --git a/WebContent/html/javascript/shoppingCart.js b/WebContent/html/javascript/shoppingCart.js index 673f79d..5e5fed6 100644 --- a/WebContent/html/javascript/shoppingCart.js +++ b/WebContent/html/javascript/shoppingCart.js @@ -1,231 +1,475 @@ -//here are all the hardcoded devices - -var dev1 = { - id: 1, - name:"George", - description:"George is probably the coolest iPhone to exist. Ever. Point blank, period.", - hardware:"iPhone", - software:"apple", -}; - -var dev2 = { - id: 2, - name:"Greyson", - description:"Greyson is pretty cool.. I guess.", - hardware:"iPhone", - software:"apple", -}; - -var dev3 = { - id: 3, - name:"Linkin Park", - description:'"The hardest part of ending is starting again."', - hardware:"iPad", - software:"apple", -}; - -var dev4 = { - id: 4, - name:"Abercrombie", - description:"To all the people that hated me in high school, I have the prettiest clothes you all wear now!!", - hardware:"iPad", - software:"apple", -}; - -var dev5 = { - id: 5, - name:"Hulk", - description:"Go ahead and HULK SMASH! this awesome computer stick into your USB.", - hardware:"Computer Stick", - software:"intel", -}; - -var dev6 = { - id: 6, - name:"Captain America", - description:""Make America Great Again." Wait, thats someone else..", - hardware:"Computer Stick", - software:"intel", -}; - -var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; //put them all into an array -var checked = new Array; //this is the array that will indicate whether a shopping cart item is checked off or not - -//adding event listeners to all the options, such as ordering and deleting -document.getElementById('os').addEventListener('click',orderSelected); -document.getElementById('ds').addEventListener('click',deleteSelected); -document.getElementById('oa').addEventListener('click',orderAll); -document.getElementById('da').addEventListener('click',deleteAll); - -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 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 +<<<<<<< HEAD +//here are all the hardcoded devices + +var dev1 = { + id: 1, + name:"George", + description:"George is probably the coolest iPhone to exist. Ever. Point blank, period.", + hardware:"iPhone", + software:"apple", +}; + +var dev2 = { + id: 2, + name:"Greyson", + description:"Greyson is pretty cool.. I guess.", + hardware:"iPhone", + software:"apple", +}; + +var dev3 = { + id: 3, + name:"Linkin Park", + description:'"The hardest part of ending is starting again."', + hardware:"iPad", + software:"apple", +}; + +var dev4 = { + id: 4, + name:"Abercrombie", + description:"To all the people that hated me in high school, I have the prettiest clothes you all wear now!!", + hardware:"iPad", + software:"apple", +}; + +var dev5 = { + id: 5, + name:"Hulk", + description:"Go ahead and HULK SMASH! this awesome computer stick into your USB.", + hardware:"Computer Stick", + software:"intel", +}; + +var dev6 = { + id: 6, + name:"Captain America", + description:""Make America Great Again." Wait, thats someone else..", + hardware:"Computer Stick", + software:"intel", +}; + +var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; //put them all into an array +var checked = new Array; //this is the array that will indicate whether a shopping cart item is checked off or not + +//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); + +// 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 + +var dev1 = { + id: 1, + name:"George", + description:"George is probably the coolest iPhone to exist. Ever. Point blank, period.", + hardware:"iPhone", + software:"apple", +}; + +var dev2 = { + id: 2, + name:"Greyson", + description:"Greyson is pretty cool.. I guess.", + hardware:"iPhone", + software:"apple", +}; + +var dev3 = { + id: 3, + name:"Linkin Park", + description:'"The hardest part of ending is starting again."', + hardware:"iPad", + software:"apple", +}; + +var dev4 = { + id: 4, + name:"Abercrombie", + description:"To all the people that hated me in high school, I have the prettiest clothes you all wear now!!", + hardware:"iPad", + software:"apple", +}; + +var dev5 = { + id: 5, + name:"Hulk", + description:"Go ahead and HULK SMASH! this awesome computer stick into your USB.", + hardware:"Computer Stick", + software:"intel", +}; + +var dev6 = { + id: 6, + name:"Captain America", + description:""Make America Great Again." Wait, thats someone else..", + hardware:"Computer Stick", + software:"intel", +}; + +var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; //put them all into an array +var checked = new Array; //this is the array that will indicate whether a shopping cart item is checked off or not + +//adding event listeners to all the options, such as ordering and deleting +document.getElementById('os').addEventListener('click',orderSelected); +document.getElementById('ds').addEventListener('click',deleteSelected); +document.getElementById('oa').addEventListener('click',orderAll); +document.getElementById('da').addEventListener('click',deleteAll); + +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 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 +>>>>>>> 39f4bed8802865d25cdd499e07d0269f6846eb9c } \ No newline at end of file diff --git a/WebContent/html/webpages/shoppingCart.html b/WebContent/html/webpages/shoppingCart.html index 07dfc6c..a2768b4 100644 --- a/WebContent/html/webpages/shoppingCart.html +++ b/WebContent/html/webpages/shoppingCart.html @@ -1,66 +1,90 @@ - - - - - - - + + + + + + + - Synchrony Financial + Synchrony Financial - - - - - + + + + + - - - - - + - + + +