Skip to content

Restructuring the sidebar filter a bit. #19

Merged
merged 1 commit into from
Feb 3, 2017
+63 −49
Merged

Restructuring the sidebar filter a bit. #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions WebContent/html/javascript/request.js
View file
Open in desktop
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
Open in desktop
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>