Skip to content

Commit

Permalink
request page done, localstorage issue fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@jic13003
jic13003 committed Mar 23, 2017
1 parent 2c43d0b commit cf6a423
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 64 deletions.
5 changes: 2 additions & 3 deletions WebContent/html/javascript/listing.jsp
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<%@ page import = "database.MySQLAccess,entities.ListedDevice" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ 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>
Expand Down Expand Up @@ -99,7 +98,7 @@ function show(){
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>'
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>'
}
}
document.getElementById('devContainer').innerHTML = html;
Expand Down
2 changes: 1 addition & 1 deletion WebContent/html/javascript/navbar.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

115 changes: 69 additions & 46 deletions WebContent/html/javascript/request.jsp
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<%@ page import = "database.MySQLAccess,entities.ListedDevice" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ 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>
Expand Down Expand Up @@ -60,53 +59,95 @@ function ajaxFunction(){
}
//add event listeners to the options in the left sidebar
for(var a = 0; a < options.length; a++){
options[a].addEventListener('click', show);
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);
}
//when an option is selected, show a new list of devices based on what the user asked for
function show(){
currentFilter = readFilter();
selectedDevices = getDevices(currentFilter); //when connor is done with the database library getDevices should be redirected there
//currentFilter = readFilter();
//selectedDevices = getDevices(currentFilter); //when connor is done with the database library getDevices should be redirected there
var type = this.getAttribute('data-type');
var html = '';
//iterate through the hardcoded device DB and select all the ones that match the selected option
for(var i = 0; i < devices.length; i++){
if((hw_type.localeCompare(devices[i].hardware) == 0 && sw_type.localeCompare(devices[i].software) == 0) && !isUnavailable(i)){
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><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br><br>'
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"));
}
}
if(activeHOptions.length == 0 && activeSOptions.length == 0){
document.getElementById('devContainer').innerHTML = "<p>Choose an option to the left to begin requesting!</p>";
}
else{
//iterate through the hardcoded device DB and select all the ones that match the selected option
for(var i = 0; i < devices.length; i++){
var hardwareMatch = false;
var softwareMatch = false;
if(html.localeCompare("")==0)
html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
//add to HTML page
document.getElementById('devContainer').innerHTML = html;
//now we need to add event listeners to all the request buttons
var requestbuttons = document.getElementsByClassName('requestbutton');
for(var i = 0; i < requestbuttons.length; i++){
requestbuttons[i].addEventListener('click',addToCart);
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){
//if((hw_type.localeCompare(devices[i].hardware) == 0 && sw_type.localeCompare(devices[i].software) == 0) && !isUnavailable(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><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br><br>'
}
}
if(html.localeCompare("")==0)
html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
//add to HTML page
document.getElementById('devContainer').innerHTML = html;
//now we need to add event listeners to all the request buttons
var requestbuttons = document.getElementsByClassName('requestbutton');
for(var i = 0; i < requestbuttons.length; i++){
requestbuttons[i].addEventListener('click',addToCart);
}
}
}
function readFilter() {
//Constrcts a filter object for use in the database library that corresponds to the checked optionsin the sidebar
var hw_type;
var sw_type;
}
function addToCart(){
var id = this.getAttribute('id');
id = parseInt(id.replace(/[^0-9\.]/g,''),10); //this gets just the numerical value from the id!
if(!inCart(id)){ //if not in the cart
var cart = getCartItems(); //this is an array
cart.push(id); //push to bottom of cart
cart.push(devices[id - 1]); //push to bottom of cart
localStorage.setItem('cart', JSON.stringify(cart));
$('#added').fadeIn(1000);
$('#added').fadeIn(1000);
Expand Down Expand Up @@ -144,28 +185,10 @@ function getCartItems(){
return cart;
}
function getUnavailableItems(){
var unavailable = new Array;
var unavailable_str = localStorage.getItem('unavailable');
if(unavailable_str !== "" && unavailable_str !== null){
unavailable = JSON.parse(unavailable_str);
}
return unavailable;
}
function isUnavailable(id){
var unavailable = getUnavailableItems();
if(unavailable.length == 0)
return 0;
else{
for(var i = 0; i < unavailable.length; i++){
if(unavailable[i] == (id+1))
return 1;
}
}
return 0;
function makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
//this code allows a message to appear that indicates that the item was successfully placed in the shopping cart.
</script>
</body>
Expand Down
2 changes: 1 addition & 1 deletion WebContent/html/webpages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@

<div class = "menuBox">
<div>
<a class = "divlink" href = "requestPage.html">
<a class = "divlink" href = "requestPage.jsp">
<div class = "menuOption">
<h2>Request</h2>
<p>Check out our selection of devices that YOU have the chance to check out!</p>
Expand Down
26 changes: 13 additions & 13 deletions WebContent/html/webpages/requestPage.html → WebContent/html/webpages/requestPage.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,22 +66,22 @@
<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 = "amazon"> Amazon</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "apple"> Apple</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "intel"> Intel</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "samsung"> Samsung</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "microsoft"> Microsoft</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "other"> Other</label></li>
<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> <!-- same -->
</ul>
<br>
<ul class="nav nav-sidebar">
<h4>Manufacture</h4>
<li><label><input type="checkbox" class="sw-data-type" data-type = "computers"> Computers</label></li>
<li><label><input type="checkbox" class="sw-data-type" data-type = "cameras"> 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>
<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>

Expand All @@ -98,7 +98,7 @@ <h2>Available Devices</h2>
<p>Already in Cart</p>
</div>

<script src="../javascript/request.js"></script>
<%@ include file="../javascript/request.jsp" %>
<script src = "../javascript/navbar.js"></script>
</body>
</html>

0 comments on commit cf6a423

Please sign in to comment.