Skip to content

Commit

Permalink
Listing page internal filtering reorganized somewhat in preperation f…
Browse files Browse the repository at this point in the history
…or search function

Added fuzzy.js search library and empty search bar
  • Loading branch information
arc12012 committed Apr 4, 2017
1 parent 4ac508d commit 580244e
Show file tree
Hide file tree
Showing 3 changed files with 275 additions and 115 deletions.
143 changes: 143 additions & 0 deletions WebContent/html/javascript/lib/fuzzy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/*
* Fuzzy
* https://github.com/myork/fuzzy
*
* Copyright (c) 2012 Matt York
* Licensed under the MIT license.
*/

(function() {

var root = this;

var fuzzy = {};

// Use in node or in browser
if (typeof exports !== 'undefined') {
module.exports = fuzzy;
} else {
root.fuzzy = fuzzy;
}

// Return all elements of `array` that have a fuzzy
// match against `pattern`.
fuzzy.simpleFilter = function(pattern, array) {
return array.filter(function(str) {
return fuzzy.test(pattern, str);
});
};

// Does `pattern` fuzzy match `str`?
fuzzy.test = function(pattern, str) {
return fuzzy.match(pattern, str) !== null;
};

// If `pattern` matches `str`, wrap each matching character
// in `opts.pre` and `opts.post`. If no match, return null
fuzzy.match = function(pattern, str, opts) {
opts = opts || {};
var patternIdx = 0
, result = []
, len = str.length
, totalScore = 0
, currScore = 0
// prefix
, pre = opts.pre || ''
// suffix
, post = opts.post || ''
// String to compare against. This might be a lowercase version of the
// raw string
, compareString = opts.caseSensitive && str || str.toLowerCase()
, ch;

pattern = opts.caseSensitive && pattern || pattern.toLowerCase();

// For each character in the string, either add it to the result
// or wrap in template if it's the next string in the pattern
for(var idx = 0; idx < len; idx++) {
ch = str[idx];
if(compareString[idx] === pattern[patternIdx]) {
ch = pre + ch + post;
patternIdx += 1;

// consecutive characters should increase the score more than linearly
currScore += 1 + currScore;
} else {
currScore = 0;
}
totalScore += currScore;
result[result.length] = ch;
}

// return rendered string if we have a match for every char
if(patternIdx === pattern.length) {
// if the string is an exact match with pattern, totalScore should be maxed
totalScore = (compareString === pattern) ? Infinity : totalScore;
return {rendered: result.join(''), score: totalScore};
}

return null;
};

// The normal entry point. Filters `arr` for matches against `pattern`.
// It returns an array with matching values of the type:
//
// [{
// string: '<b>lah' // The rendered string
// , index: 2 // The index of the element in `arr`
// , original: 'blah' // The original element in `arr`
// }]
//
// `opts` is an optional argument bag. Details:
//
// opts = {
// // string to put before a matching character
// pre: '<b>'
//
// // string to put after matching character
// , post: '</b>'
//
// // Optional function. Input is an entry in the given arr`,
// // output should be the string to test `pattern` against.
// // In this example, if `arr = [{crying: 'koala'}]` we would return
// // 'koala'.
// , extract: function(arg) { return arg.crying; }
// }
fuzzy.filter = function(pattern, arr, opts) {
if(!arr || arr.length === 0) {
return [];
}
if (typeof pattern !== 'string') {
return arr;
}
opts = opts || {};
return arr
.reduce(function(prev, element, idx, arr) {
var str = element;
if(opts.extract) {
str = opts.extract(element);
}
var rendered = fuzzy.match(pattern, str, opts);
if(rendered != null) {
prev[prev.length] = {
string: rendered.rendered
, score: rendered.score
, index: idx
, original: element
};
}
return prev;
}, [])

// Sort by score. Browsers are inconsistent wrt stable/unstable
// sorting, so force stable by using the index in the case of tie.
// See http://ofb.net/~sethml/is-sort-stable.html
.sort(function(a,b) {
var compare = b.score - a.score;
if(compare) return compare;
return a.index - b.index;
});
};


}());
92 changes: 52 additions & 40 deletions WebContent/html/javascript/listing.jsp
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,35 @@
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
ListedDevice[] mydevices = DeviceQueries.getAllDevices();
<%
ListedDevice[] mydevices = DeviceQueries.getAllDevices();
//string representation of array.
String deviceString = ListedDevice.arrayToString(mydevices);
String deviceString = ListedDevice.arrayToString(mydevices);
//out.println(description);
//out.println(hardware);
%>
%>

<script type=text/javascript>
<script type=text/javascript>
//gets variables for database data
var devices = makeDeviceArray();
//get all the option buttons
//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 = 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);
}
showAll();
function showAll(){
Expand All @@ -56,9 +56,37 @@ function showAll(){
}
}
}
function show(){
var type = this.getAttribute('data-type');
function refresh() {
var filteredDevices = applyFilter();
show(filteredDevices);
}
function show(deviceArray){
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><div class = "availableAnchor" id = "' + (deviceArray[i].id) + '"></div></div></div><br><br>'
}
document.getElementById('devContainer').innerHTML = html;
var anchors = document.getElementsByClassName('availableAnchor');
for(var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
var id = anchor.getAttribute('id');
if(devices[id-1].status != "Available"){
document.getElementById(id).innerHTML = 'Unavailable';
id = '#' + id;
$(id).css({'background-color':'#ff3535'});
}
else{
document.getElementById(id).innerHTML = 'Available';
id = '#' + id;
$(id).css({'background-color':'#1fe07f'});
}
}
}
function applyFilter() {
var filteredDevices = new Array();
var activeHOptions = [];
var activeSOptions = [];
for(var i = 0; i < hardwareOptions.length; i++) {
Expand All @@ -80,48 +108,32 @@ function show(){
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/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;
var anchors = document.getElementsByClassName('availableAnchor');
for(var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
var id = anchor.getAttribute('id');
if(devices[id].status != "Available"){
document.getElementById(id).innerHTML = 'Unavailable';
id = '#' + id;
$(id).css({'background-color':'#ff3535'});
}
else{
document.getElementById(id).innerHTML = 'Available';
id = '#' + id;
$(id).css({'background-color':'#1fe07f'});
if(hardwareMatch && softwareMatch)
{
filteredDevices.push(devices[i]);
}
}
return filteredDevices;
}
function makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
function makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
</script>
</body>
</html>
Loading

0 comments on commit 580244e

Please sign in to comment.