Skip to content

Commit

Permalink
Shop.jsp can now communicate with the dataabase! Yay!
Browse files Browse the repository at this point in the history 
Submitting the form does not do everything it needs to do with tables yet. There is a good deal of polishing and refactoring to now too.
  • Loading branch information
@arc12012
arc12012 committed Feb 23, 2017
1 parent c5330f3 commit 8448e1c
Show file tree
Hide file tree
Showing 8 changed files with 701 additions and 18 deletions.
79 changes: 69 additions & 10 deletions WebContent/html/javascript/shop.jsp
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
<%@ page import = "database.MySQLAccess" %>
<%@ page import = "entities.User" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
</head>
<body>
<script type="text/javascript">
//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();
Expand All @@ -29,8 +30,18 @@ window.onclick = function(event) {
var orderForm = document.getElementById('orderInfoModal');
var orderFormCloseButton = document.getElementById('closeOrderForm');
orderFormCloseButton.addEventListener('click',hidePopup);
// done applying event listeners
var employee = {
id:"",
location:"",
name:"",
phone:""
}
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
Expand Down Expand Up @@ -118,11 +129,56 @@ This function takes all the devices we selected and simulates an order on them.
**/
function showPopup(){
orderForm.style.display = "block";
autoFillFields();
}
function hidePopup(){
orderForm.style.display = "none";
}
function autoFillFields() {
<%
MySQLAccess access = new MySQLAccess();
User employee = access.getEmployeeByID(9); //replace with real ID
int location = employee.getLocation();
String name = employee.getName();
int phone = employee.getPhone();
%>
employee.location = "<%=location%>";
employee.name = "<%=name%>";
employee.phone = "<%=phone%>";
document.orderForm.name.value=employee.name;
document.orderForm.location.value=employee.location;
document.orderForm.phone.value=employee.phone;
}
function submitOrderForm() {
// This is called just before order form is submitted. In order for any database activity to occur,
// we must first append the employees ID as well as the ids of whatever devices are selected.
// First, employee id
userID=getUserID();
document.orderForm.append('<input type="hidden" name="userID" value="'+userID+'">');
// Now selected devices. I have no idea how to send anything other than strings,
// so I'm pulling the same trick Connor did here and representing the array of
// selected devices as a string "[dev1]:[dev2]:[dev3]:..." where [devn] is a device ID
var deviceIDs=collectSelectedDevices();
for(var i = 0; i < checked.length; i++){ //iterate all the checked off devices
deviceIDs[i] = 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 id's
cart.splice(j,1); //remove from the cart
}
}
var selectedDeviceString="";
for (var i = deviceIDs.length - 1; i >= 0; i--) {
selectedDeviceString+=deviceIDs[i];
if (i!=0) {selectedDeviceString+=":";}
}
alert(selectedDeviceString);
document.orderForm.append('<input type="hidden" name="deviceIDs" value="'+selectedDeviceString+'">');
return true;
}
function orderSelected(){
var response = confirm("Are you sure you'd like to order the selected items?");
if(response == true){ //if they confirm
Expand Down Expand Up @@ -208,4 +264,7 @@ function getRequestedItems(){
}
return requested; //return value is an array
}
//here are all the hardcoded devices
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion WebContent/html/javascript/shoppingCart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ function show(){
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
html += '<div> < put 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
}
}
Expand Down
23 changes: 23 additions & 0 deletions WebContent/html/webpages/orderFormHandler.jsp
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<%@ page import = "database.MySQLAccess" %>
<%@ page import = "entities.User" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<!-- The purpose of this file is to capture order form submissions and forward them to MySQLAccess -->

<!DOCTYPE html>
<html>
<body>
<%
//First update employee
String userName = request.getParameter("name");
int phone = Integer.valueOf(request.getParameter("phone"));
int location = Integer.valueOf(request.getParameter("location"));
MySQLAccess access = new MySQLAccess();
access.updateEmployee(1, userName, phone, location); //TODO get ID somehow
// And now for the ticket
// TODO
%>
</body>
</html>
11 changes: 8 additions & 3 deletions WebContent/html/webpages/shoppingCart.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
<%@ include file="navbar.html"%>
</nav>
<div id="orderInfoModal" class="modal">
<div class="modal-content">
Expand All @@ -52,11 +53,15 @@
<h4>Please provide additional order information</h4>
</div>
<div class="modal-body">
<form>
<form name="orderForm" onsubmit="return submitOrderForm()">
<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="phone">Phone Number</label><br/>
<input type="text" class="form-control" name="phone" placeholder="No need to format it nicely (maybe we will implement a nicer phone# field soon)">
</div>
<div class="form-group">
<label for="location">Place to ship to</label><br/>
<input type="text" class="form-control" name="location" placeholder="Address" />
Expand Down Expand Up @@ -88,9 +93,9 @@
</div>

<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/navbar.js"></script> -->
<script src = "../javascript/nhpup_1.1.js"></script>
<script src="../javascript/shop.jsp" ></script>
<%@include file="../javascript/shop.jsp"%>
</body>

</html>
Loading

0 comments on commit 8448e1c

Please sign in to comment.