Skip to content

Commit

Permalink
Search feature introduced to request page
Browse files Browse the repository at this point in the history 
Also applied 'other' bugfix to request page
  • Loading branch information
@arc12012
arc12012 committed Apr 4, 2017
1 parent 991fb38 commit a588daa
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 53 deletions.
148 changes: 98 additions & 50 deletions WebContent/html/javascript/request.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,20 +59,44 @@ function ajaxFunction(){
//add event listeners to the options in the left sidebar
for(var a = 0; a < hardwareOptions.length; a++){
hardwareOptions[a].addEventListener('click', show);
hardwareOptions[a].addEventListener('click', refresh);
}
for(var a = 0; a < softwareOptions.length; a++){
softwareOptions[a].addEventListener('click', show);
softwareOptions[a].addEventListener('click', refresh);
}
// searchbar listener
var searchbar = document.getElementsByName('searchBar');
searchbar[0].onkeyup = refresh;
//when an option is selected, show a new list of devices based on what the user asked for
function show(){
function refresh() {
show(fuzzyFilter(filter(devices)));
}
//currentFilter = readFilter();
//selectedDevices = getDevices(currentFilter); //when connor is done with the database library getDevices should be redirected there
//when an option is selected, show a new list of devices based on what the user asked for
function show(deviceArray){
var type = this.getAttribute('data-type');
// var type = this.getAttribute('data-type');
var html = '';
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><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 filter(deviceArray) {
var filteredArray = new Array();
var activeHOptions = [];
var activeSOptions = [];
for(var i = 0; i < hardwareOptions.length; i++) {
Expand All @@ -85,60 +109,83 @@ function show(){
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;
for(var j = 0; j < activeHOptions.length; j++) {
if (activeHOptions[j] == devices[i].hardware){
hardwareMatch = true;
}
}
if (activeHOptions.length == 0) {
//iterate through the hardcoded device DB and select all the ones that match the selected option
for(var i = 0; i < deviceArray.length; i++){
var hardwareMatch = false;
var softwareMatch = false;
for(var j = 0; j < activeHOptions.length; j++) {
if (activeHOptions[j] == deviceArray[i].hardware){
hardwareMatch = true;
}
for(var j = 0; j < activeSOptions.length; j++) {
if (activeSOptions[j] == devices[i].manufacturer){
softwareMatch = true;
// now we must handle the 'other' case
// there is no 'other' catagory, so if that is the option selected we must make sure
// that the device in question is not one of the categories we DO have options for
if(activeHOptions[j] === 'Other')
{
var othermatch = true;
for (var k = 0; k < hardwareOptions.length; k++) {
if(devices[i].hardware == hardwareOptions[k].getAttribute('data-type'))
othermatch = false;
}
if(othermatch) hardwareMatch = true;
}
if (activeSOptions.length == 0) {
softwareMatch = true;
}
if (activeHOptions.length == 0) {
hardwareMatch = true;
}
// now we must handle the 'other' case
// there is no 'other' catagory, so if that is the option selected we must make sure
// that the device in question is not one of the categories we DO have options for
if(activeSOptions[j] === 'Other')
{
var othermatch = true;
for (var k = 0; k < softwareOptions.length; k++) {
if(devices[i].manufacturer == softwareOptions[k].getAttribute('data-type'))
othermatch = false;
}
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(othermatch) softwareMatch = true;
}
for(var j = 0; j < activeSOptions.length; j++) {
if (activeSOptions[j] == deviceArray[i].manufacturer){
softwareMatch = true;
}
}
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);
if (activeSOptions.length == 0) {
softwareMatch = true;
}
if(hardwareMatch == true && softwareMatch == true)
filteredArray.push(deviceArray[i]);
}
return filteredArray;
}
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 fuzzyFilter(deviceArray) {
var searchText = document.getElementsByName('searchBar')[0].value;
var options = {
pre: '<b>',
post: '</b>',
extract: function(arg) {return arg.name;}
}
var fuzzyResults = fuzzy.filter(searchText, deviceArray, options);
// this returns a filtered array of objects with attributes 'index', 'original', 'score', and 'string'
// I am interested in the 'original' attribute, which is the relevant object exactly as it was submitted,
// and the 'string' attribute, which is the attribute that was compared against with matching characters conveniantly bolded
var results = new Array(fuzzyResults.length);
// so I'm going to rebuild a filtered device array in the same format as we've been using,
// substituting the 'name' attribute with the 'string' attribute returned by fuzzy
for (var i = 0; i < fuzzyResults.length; i++) {
results[i] = {
name:fuzzyResults[i].string, //This one is being replaced
id:fuzzyResults[i].original.id,
description:fuzzyResults[i].original.description,
hardware:fuzzyResults[i].original.hardware,
status:fuzzyResults[i].original.status,
model:fuzzyResults[i].original.model,
manufacturer:fuzzyResults[i].original.manufacturer,
};
}
return results;
}
function addToCart(){
Expand Down Expand Up @@ -190,5 +237,6 @@ function makeDeviceArray(){
}
//this code allows a message to appear that indicates that the item was successfully placed in the shopping cart.
</script>
<script src="../javascript/lib/fuzzy.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion WebContent/html/webpages/listingPage.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
<h2>Device Dictionary
<!-- 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. -->
<form onsubmit="return false;">
<input type="search" class="form-control" name="searchBar" placeholder=" search for matches in device name, device type, description, etc." style="width: 50%; text-align: left; margin: 1%;" />
<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>
</h2>
<div id = "devContainer"></div>
Expand Down
9 changes: 7 additions & 2 deletions WebContent/html/webpages/requestPage.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,13 @@
</div>

<div class = "displayDevice">
<h2>Available Devices</h2>
<div id = "devContainer"><p>Choose an option to the left to begin requesting!</p></div>
<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. -->
<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>
</h2>
<div id = "devContainer"><p>Or choose an option to the left to begin requesting!</p></div>
</div>

<div class = "cartConfirm" id = "added">
Expand Down

0 comments on commit a588daa

Please sign in to comment.