Skip to content

Commit

Permalink
Modified return, request, and listing to support mouseover
Browse files Browse the repository at this point in the history
  • Loading branch information
jic13003 committed Apr 17, 2017
1 parent 1d04f5a commit 467eeaf
Show file tree
Hide file tree
Showing 5 changed files with 144 additions and 114 deletions.
10 changes: 7 additions & 3 deletions WebContent/html/javascript/listing.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
//out.println(description);
//out.println(hardware);
%>

<script src = "../javascript/nhpup_1.1.js"></script>
<script type=text/javascript>
//gets variables for database data
var devices = makeDeviceArray();
Expand All @@ -35,8 +35,10 @@ searchbar[0].onkeyup = refresh;
showAll();
function showAll(){
var html = '';
var part1 = "nhpup.popup('";
var part2 = "');"
for(var i = 0; i < devices.length; i++){
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div><br><br>';
html += '<a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + devices[i].hardware + '<br><br>' + 'Manufacturer: ' + devices[i].manufacturer + part2 + '"><div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div></a><br><br>';
}
document.getElementById('devContainer').innerHTML = html;
var anchors = document.getElementsByClassName('availableAnchor');
Expand All @@ -61,9 +63,11 @@ function refresh() {
}
function show(deviceArray){
var html = '';
var part1 = "nhpup.popup('";
var part2 = "');"
for (var i = 0; i < deviceArray.length; i++)
{
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><div class = "availableAnchor" id = "' + (deviceArray[i].id) + '"></div></div></div><br><br>'
html += '<div class = "deviceContainer"><a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + devices[i].hardware + '<br><br>' + 'Manufacturer: ' + devices[i].manufacturer + part2 + '"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><div class = "availableAnchor" id = "' + (deviceArray[i].id) + '"></div></div></a></div><br><br>'
}
document.getElementById('devContainer').innerHTML = html;
var anchors = document.getElementsByClassName('availableAnchor');
Expand Down
6 changes: 4 additions & 2 deletions WebContent/html/javascript/request.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ String deviceString = Device.arrayToString(mydevices);
//out.println(description);
//out.println(hardware);
%>

<script src = "../javascript/nhpup_1.1.js"></script>
<script type=text/javascript>
//gets variables for database data
var devices = makeDeviceArray();
Expand All @@ -38,8 +38,10 @@ function refresh() {
function show(deviceArray){
// var type = this.getAttribute('data-type');
var html = '';
var part1 = "nhpup.popup('";
var part2 = "');"
for (var i = 0; i < deviceArray.length; i++) {
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><button class = "requestbutton" id = "button' + (deviceArray[i].id) + '" type="button">Order device</button></div></div><br><br>'
html += '<a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + deviceArray[i].hardware + '<br><br>' + 'Manufacturer: ' + deviceArray[i].manufacturer + part2 + '"><div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" onerror="this.src=\'../imgs/synchrony-financial-logo-dlpx_1.png\';" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><button class = "requestbutton" id = "button' + (deviceArray[i].id) + '" type="button">Order device</button></div></div></a><br><br>'
}
if(html.localeCompare("")==0)
Expand Down
7 changes: 7 additions & 0 deletions WebContent/html/webpages/listingPage.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,13 @@
border: solid;
border-width: thin;
}
#pup{
background-color: #E9EAEB;
border: solid;
text-align: center;
padding: 10px;
}
</style>
</head>

Expand Down
222 changes: 114 additions & 108 deletions WebContent/html/webpages/requestPage.jsp
Original file line number Diff line number Diff line change
@@ -1,109 +1,115 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>Synchrony Financial</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
<link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
<style>
div.deviceContainer{
border: solid;
border-width: thin;
padding: 15px;
background-color: #E9EAEB;
display: inline-block;
}
div.imgContainer{
display: inline-block;
text-align: center;
}
img.device{
display: block;
}
div.deviceDescp{
display: inline-block;
width: 200px;
text-align: center;
}
button.requestbutton{
display: block;
margin: auto;
}
div.cartConfirm{
display: none;
top: 50%;
left: 50%;
position: fixed;
width: 155px;
height: 85px;
line-height: 85px;
text-align: center;
background-color: #FBC600;
border: solid;
border-color: #3B3C43;
border-radius: 5px;
}
</style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
<%@ include file="navbar.jsp"%>
</nav>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<h4>Hardware Type</h4>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Computer"> Computers</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Camera"> Cameras</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Smartphone"> Smartphone</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Storage Device"> Storage Devices</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Tablet"> Tablet</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Other"> Other</label></li> <!-- same -->
</ul>
<br>
<ul class="nav nav-sidebar">
<h4>Manufacture</h4>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Amazon"> Amazon</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Apple"> Apple</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Intel"> Intel</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Samsung"> Samsung</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Microsoft"> Microsoft</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Other"> Other</label></li> <!-- will modify later -->
</ul>
</div>

<div class = "displayDevice">
<h2>Available Devices
<!-- I'm only using a form to leverage bootstrap's styling. The onsubmit function just returns false because the form is never meant to be submitted anywhere. -->
</h2>
<form onsubmit="return false;">
<input type="search" class="form-control" name="searchBar" placeholder=" search for devices by name" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;" />
</form>
<div id = "devContainer"><p>Or choose an option to the left to begin requesting!</p></div>
</div>

<div class = "cartConfirm" id = "added">
<p>Added to Cart</p>
</div>

<div class = "cartConfirm" id = "already">
<p>Already in Cart</p>
</div>

<%@ include file="../javascript/request.jsp" %>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>Synchrony Financial</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
<link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
<style>
div.deviceContainer{
border: solid;
border-width: thin;
padding: 15px;
background-color: #E9EAEB;
display: inline-block;
}
div.imgContainer{
display: inline-block;
text-align: center;
}
img.device{
display: block;
}
div.deviceDescp{
display: inline-block;
width: 200px;
text-align: center;
}
button.requestbutton{
display: block;
margin: auto;
}
div.cartConfirm{
display: none;
top: 50%;
left: 50%;
position: fixed;
width: 155px;
height: 85px;
line-height: 85px;
text-align: center;
background-color: #FBC600;
border: solid;
border-color: #3B3C43;
border-radius: 5px;
}
#pup{
background-color: #E9EAEB;
border: solid;
text-align: center;
padding: 10px;
}
</style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
<%@ include file="navbar.jsp"%>
</nav>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<h4>Hardware Type</h4>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Computer"> Computers</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Camera"> Cameras</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Smartphone"> Smartphone</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Storage Device"> Storage Devices</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Tablet"> Tablet</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "Other"> Other</label></li> <!-- same -->
</ul>
<br>
<ul class="nav nav-sidebar">
<h4>Manufacture</h4>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Amazon"> Amazon</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Apple"> Apple</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Intel"> Intel</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Samsung"> Samsung</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Microsoft"> Microsoft</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "Other"> Other</label></li> <!-- will modify later -->
</ul>
</div>

<div class = "displayDevice">
<h2>Available Devices
<!-- I'm only using a form to leverage bootstrap's styling. The onsubmit function just returns false because the form is never meant to be submitted anywhere. -->
</h2>
<form onsubmit="return false;">
<input type="search" class="form-control" name="searchBar" placeholder=" search for devices by name" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;" />
</form>
<div id = "devContainer"><p>Or choose an option to the left to begin requesting!</p></div>
</div>

<div class = "cartConfirm" id = "added">
<p>Added to Cart</p>
</div>

<div class = "cartConfirm" id = "already">
<p>Already in Cart</p>
</div>

<%@ include file="../javascript/request.jsp" %>
</body>
</html>
13 changes: 12 additions & 1 deletion WebContent/html/webpages/returnPage.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,12 @@
height: 20px;
width: 20px;
}
#pup{
background-color: #E9EAEB;
border: solid;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -124,7 +130,7 @@ Device[] mydevices = DeviceQueries.getUserDevices(navsso);
//string representation of array.
String deviceString = Device.arrayToString(mydevices);
%>

<script src = "../javascript/nhpup_1.1.js"></script>
<script type=text/javascript>
//JSON representation of array.
Expand Down Expand Up @@ -212,7 +218,12 @@ function populateDeviceList(){
var name = devices[i].name;
var hardware = devices[i].hardware;
var checkout = devices[i].checkout;
var manufacturer = devices[i].manufacturer;
var part1 = "nhpup.popup('";
var part2 = "');"
//HTML representation in divs
htmlString+='<a class = "divlink" href = "#" onmouseover = "'+ part1 + 'Hardware type: ' + hardware + '<br><br>' + 'Manufacturer: ' + manufacturer + part2 + '">';
htmlString+="<div class=\"deviceContainer\" data-num=\"" + i +"\">";
htmlString+="<input class=\"deviceCheckbox\" type = \"checkbox\" data-num=\"" + i + "\">";
htmlString+="<div><div class=\"imgContainer\"><img onerror=\"this.src='../imgs/synchrony-financial-logo-dlpx_1.png';\" src=\"../imgs/my-icons-collection-devices/png/";
Expand Down

0 comments on commit 467eeaf

Please sign in to comment.