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

@@ -60,6 +60,7 @@ div.modal-body{
 }
 
 input[type=text]{
+    margin: 0 auto;
     width: 60%;
 }
 

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 += '<p>Tickets have been generated below based on your desired selections.</p><br>'
+		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 += '<div> <input class = "deviceCheckbox" type = "checkbox" id = "' + id + '"> </input><a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + devices[j].hardware + '<br><br>' + devices[j].description + part2 + '"><div id = "ticket' + id +'" class = "ticket"><p class = "tickettext">' + devices[j].name + '</p></div></a></div>';	//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

WebContent/html/webpages/shoppingCart.html → WebContent/html/webpages/shoppingCart.jsp

@@ -16,6 +16,9 @@
     <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
 
     <style>
+        input{
+            text-align: center;
+        }
         div.ticket{
             background-image: url('../imgs/ticket.png');
             display: inline-block;
@@ -50,17 +53,19 @@ <h4>Please provide additional order information</h4>
             </div>
             <div class="modal-body">
                 <form>
-                    <label for="name">Your name</label><br/>
-                    <input type="text" name="name" />
-                    <br/><br/>
-                    <label for="location">Place to ship to</label><br/>
-                    <input type="text" name="location" />
-                    <br/><br/>
-                    <label for="timeNeeded">How many weeks do you think you'll need it?</label><br/>
-                    <input type="text" name="timeNeeded" />
-                    <br/><br/>
-
-                    <input type="submit" name="Submit">
+                    <div class="form-group">
+                        <label for="name">Your name</label><br/>
+                        <input type="text" class="form-control" name="name" placeholder="Name" />
+                    </div>
+                    <div class="form-group">
+                        <label for="location">Place to ship to</label><br/>
+                        <input type="text" class="form-control" name="location" placeholder="Address" />
+                    </div>
+                    <div class="form-group">
+                        <label for="timeNeeded">How many weeks do you think you'll need it?</label><br/>
+                        <input type="text" class="form-control" name="timeNeeded" placeholder="Just estimate the number of weeks" />
+                    </div>
+                    <button type="submit" class="btn btn-primary" name="Submit">Submit</button>
                 </form>
 
             </div>
@@ -82,9 +87,10 @@ <h2>Welcome to your shopping cart!</h2>
     </div>
 </div>
 
-<script src="../javascript/shoppingCart.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src = "../javascript/navbar.js"></script>
 <script src = "../javascript/nhpup_1.1.js"></script>
+<script src="../javascript/shop.jsp" ></script>  
 </body>
 
 </html>