Skip to content

Commit

Permalink
the listing page filtering works, shoutouts to adam for the help
Browse files Browse the repository at this point in the history
  • Loading branch information
@jic13003
jic13003 committed Mar 6, 2017
1 parent 884e613 commit 2c43d0b
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 98 deletions.
78 changes: 46 additions & 32 deletions WebContent/html/javascript/listing.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,16 @@ String deviceString = ListedDevice.arrayToString(mydevices);
var devices = makeDeviceArray();
//get all the option buttons
var options = document.getElementsByClassName('option');
//var options = document.getElementsByClassName('checkboxes');
var hardwareOptions = document.getElementsByClassName('hw-data-type');
var softwareOptions = document.getElementsByClassName('sw-data-type');
options[0].addEventListener('click', showAll);
for(var a = 1; a < options.length; a++){
options[a].addEventListener('click', show);
//options[0].addEventListener('click', showAll);
for(var a = 0; a < hardwareOptions.length; a++){
hardwareOptions[a].addEventListener('click', show);
}
for(var a = 0; a < softwareOptions.length; a++){
softwareOptions[a].addEventListener('click', show);
}
showAll();
function showAll(){
Expand Down Expand Up @@ -56,8 +61,44 @@ function showAll(){
function show(){
var type = this.getAttribute('data-type');
var html = '';
var activeHOptions = [];
var activeSOptions = [];
for(var i = 0; i < hardwareOptions.length; i++) {
if (hardwareOptions[i].checked == true) {
activeHOptions.push(hardwareOptions[i].getAttribute("data-type"));
}
}
for(var i = 0; i < softwareOptions.length; i++) {
if (softwareOptions[i].checked == true) {
activeSOptions.push(softwareOptions[i].getAttribute("data-type"));
}
}
for(var i = 0; i < devices.length; i++){
if(type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].model) == 0){
var hardwareMatch = false;
var softwareMatch = false;
for(var j = 0; j < activeHOptions.length; j++) {
if (activeHOptions[j] == devices[i].hardware){
hardwareMatch = true;
}
}
if (activeHOptions.length == 0) {
hardwareMatch = true;
}
for(var j = 0; j < activeSOptions.length; j++) {
if (activeSOptions[j] == devices[i].manufacturer){
softwareMatch = true;
}
}
if (activeSOptions.length == 0) {
softwareMatch = true;
}
if(hardwareMatch == true && softwareMatch == true){
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + 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>'
}
}
Expand All @@ -78,33 +119,6 @@ function show(){
}
}
}
//Generates html and writes to 'devContainer' div in JSP
function populateDeviceList(){
//begin empty html
var htmlString="";
//iterate returned devices
for (var i = 0; i < devices.length; i++) {
//get device values
var id = devices[i].id;
var name = devices[i].name;
var hardware = devices[i].hardware;
var checkout = devices[i].checkout;
//HTML representation in divs
htmlString+="<div class=\"deviceContainer\" data-num=\"" + i +"\">";
htmlString+="<input class=\"deviceCheckbox\" type = \"checkbox\" data-num=\"" + i + "\">";
htmlString+="<div><div class=\"imgContainer\"><img src=\"../imgs/my-icons-collection-devices/png/";
htmlString+=hardware;
htmlString+=".png\" class=\"device\">";
htmlString+=name;
htmlString+="</div><div class=\"deviceInfo\"><p>Checked out: "
htmlString+=checkout;
htmlString+="</div></p></div></div><br><br>";
}
//Handles if no devices are returned
if(i==0) htmlString+="Couldn't find any devices to show.";
//Place html in body
document.getElementById("devContainer").innerHTML = htmlString;
}
function makeDeviceArray(){
window.json = '<%=deviceString%>';
Expand Down
77 changes: 28 additions & 49 deletions WebContent/html/javascript/request.js → WebContent/html/javascript/request.jsp
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
<%@ page import = "database.MySQLAccess,entities.ListedDevice" %>
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
MySQLAccess myaccess = new MySQLAccess();
ListedDevice[] mydevices = myaccess.getAllDevices();
//string representation of array.
String deviceString = ListedDevice.arrayToString(mydevices);
//out.println(description);
//out.println(hardware);
%>

<script type=text/javascript>
//gets variables for database data
var devices = makeDeviceArray();
//get all the option buttons
var hardwareOptions = document.getElementsByClassName('hw-data-type');
Expand Down Expand Up @@ -33,55 +58,6 @@ function ajaxFunction(){
}
}
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:"computerStick",
software:"intel",
};

var dev6 = {
id: 6,
name:"Captain America",
description:'"Make America Great Again. Wait, thats someone else.."',
hardware:"computerStick",
software:"intel",
};

var devices = [dev1, dev2, dev3, dev4, dev5, dev6];
//add event listeners to the options in the left sidebar
for(var a = 0; a < options.length; a++){
Expand Down Expand Up @@ -191,3 +167,6 @@ function isUnavailable(id){
}
//this code allows a message to appear that indicates that the item was successfully placed in the shopping cart.
</script>
</body>
</html>
35 changes: 21 additions & 14 deletions WebContent/html/webpages/listingPage.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,20 +53,27 @@
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
</nav>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<h4>Device Options</h4>
<li class = "option" data-type = "all"><a href="#">Show All Devices</a></li>
<li class = "option" data-type = "iphone"><a href="#">iPhones</a></li>
<li class = "option" data-type = "ipad"><a href="#">iPad</a></li>
<li class = "option" data-type = "computerStick"><a href="#">Computer Sticks</a></li>
</ul>
<br>
<ul class="nav nav-sidebar">
<h4>Operating Systems</h4>
<li class = "option" data-type = "intel"><a href="#">Intel</a></li>
<li class = "option" data-type = "apple"><a href="#">Apple</a></li>
</ul>
</div>
<ul class="nav nav-sidebar">
<h4>Device 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"> 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>
</ul>
</ul>
<br>
<ul class="nav nav-sidebar">
<h4>Manufacturer</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>
</ul>
</div>

<div class = "displayDevice">
<h2>Device Dictionary</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/database/MySQLAccess.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ public ListedDevice[] getAllDevices() throws SQLException, ClassNotFoundExceptio

//iterate result set
while(resultSet.next()){
devices[counter] = new ListedDevice(resultSet.getString("Device_Name"),resultSet.getString("Device_ID"),resultSet.getString("Device_Description"),resultSet.getString("Hardware"), resultSet.getString("Model"),resultSet.getString("Status"));
devices[counter] = new ListedDevice(resultSet.getString("Device_Name"),resultSet.getString("Device_ID"),resultSet.getString("Device_Description"),resultSet.getString("Hardware"), resultSet.getString("Model"), resultSet.getString("Manufacturer"), resultSet.getString("Status"));
counter++;
}

Expand Down
7 changes: 5 additions & 2 deletions src/entities/ListedDevice.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ public class ListedDevice {
private String Device_Description;
private String Hardware;
private String Model;
private String Manu;
private String Status;
public ListedDevice(String name, String id, String desc, String hardware, String model, String available) {
public ListedDevice(String name, String id, String desc, String hardware, String model, String manufacturer, String available) {
Device_ID = id;
Device_Name = name;
Device_Description = desc;
Hardware = hardware;
Model = model;
Manu = manufacturer;
Status = available;
}
/**
Expand All @@ -31,7 +33,8 @@ public String toString(){
sb.append("\"description\": \"").append(Device_Description).append("\"").append(comma);
sb.append("\"hardware\": \"").append(Hardware).append("\"").append(comma);
sb.append("\"status\": \"").append(Status).append("\"").append(comma);
sb.append("\"model\": \"").append(Model).append("\"");
sb.append("\"model\": \"").append(Model).append("\"").append(comma);
sb.append("\"manufacturer\": \"").append(Manu).append("\"");
sb.append("}");
return sb.toString();
}
Expand Down

0 comments on commit 2c43d0b

Please sign in to comment.