From a6f9552270c54dd5be1e56f47e66cd44bbc0c919 Mon Sep 17 00:00:00 2001 From: Adam R Claxton Date: Wed, 25 Jan 2017 23:25:10 -0500 Subject: [PATCH] Order form for the shopping cart page Doesn't do anything with the data right now. Also doesn't actually complete order when pressing submit! Will add that tomorrow. It's fine if we want to use different field; that's easy to change. --- WebContent/html/css/stylesheet.css | 48 ++++++++ WebContent/html/javascript/shoppingCart.js | 15 ++- WebContent/html/webpages/shoppingCart.html | 128 ++++++++++++--------- 3 files changed, 137 insertions(+), 54 deletions(-) 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 b2d3f17..ff47c6a 100644 --- a/WebContent/html/javascript/shoppingCart.js +++ b/WebContent/html/javascript/shoppingCart.js @@ -52,11 +52,15 @@ var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; //put them all into 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('os').addEventListener('click',showPopup); document.getElementById('ds').addEventListener('click',deleteSelected); -document.getElementById('oa').addEventListener('click',orderAll); +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(){ @@ -144,6 +148,13 @@ function changeStatus(){ /** 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 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 - - - - - + + + + + - - - - - + -
- -
+ + +