Skip to content

Commit

Permalink
Merge pull request #19 from arc12012/Client
Browse files Browse the repository at this point in the history 
Restructuring the sidebar filter a bit.
  • Loading branch information
@arc12012
arc12012 committed Feb 3, 2017
2 parents 989fb84 + 36139ae commit 43f844a
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 49 deletions.
22 changes: 18 additions & 4 deletions WebContent/html/javascript/request.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
//get all the option buttons
var options = document.getElementsByClassName('option');

var hardwareOptions = document.getElementsByClassName('hw-data-type');
var softwareOptions = document.getElementsByClassName('sw-data-type');


function ajaxFunction(){
var request;
Expand Down Expand Up @@ -87,13 +90,17 @@ for(var a = 0; a < options.length; a++){

//when an option is selected, show a new list of devices based on what the user asked for
function show(){
//get the option that you selected
var type = this.getAttribute('data-type');

currentFilter = readFilter();
selectedDevices = getDevices(currentFilter); //when connor is done with the database library getDevices should be redirected there



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((type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0) && !isUnavailable(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>'
}
}
Expand All @@ -111,6 +118,13 @@ function show(){
}
}

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!
Expand Down
90 changes: 45 additions & 45 deletions WebContent/html/webpages/requestPage.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<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="">
<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>
<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>
<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;
Expand Down Expand Up @@ -57,41 +57,41 @@
border-color: #3B3C43;
border-radius: 5px;
}
</style>
</head>
</style>
</head>

<body>
<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 = "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>
<body>
<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>Hardware Type</h4>
<li><label><input type="checkbox" class="hw-data-type" data-type = "iPhones"> iPhones</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "iPad"> iPad</label></li>
<li><label><input type="checkbox" class="hw-data-type" data-type = "computerStick"> Computer Sticks</label></li>
</ul>
<br>
<ul class="nav nav-sidebar">
<h4>Manufacture/Operating System</h4>
<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 = "apple"> Apple</label></li>
</ul>
</div>

<div class = "displayDevice">
<h2>Available Devices</h2>
<div id = "devContainer"><p>Choose an option to the left to begin requesting!</p></div>
</div>
<div class = "displayDevice">
<h2>Available Devices</h2>
<div id = "devContainer"><p>Choose an option to the left to begin requesting!</p></div>
</div>

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

<div class = "cartConfirm" id = "already">
<div class = "cartConfirm" id = "already">
<p>Already in Cart</p>
</div>
<script src="../javascript/request.js"></script>
<script src = "../javascript/navbar.js"></script>
</body>
</div>

<script src="../javascript/request.js"></script>
<script src = "../javascript/navbar.js"></script>
</body>
</html>

0 comments on commit 43f844a

Please sign in to comment.