Skip to content

Commit

Permalink
Merge remote-tracking branch 'refs/remotes/origin/master' into Jcoona…
Browse files Browse the repository at this point in the history
…Branch
  • Loading branch information
clj13001 committed Apr 5, 2017
2 parents f397ee9 + a588daa commit 0e5d59b
Show file tree
Hide file tree
Showing 5 changed files with 457 additions and 185 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;
});
};


}());
144 changes: 100 additions & 44 deletions WebContent/html/javascript/listing.jsp
Original file line number Diff line number Diff line change
@@ -1,38 +1,37 @@
<%@ page import = "database.MySQLAccess,entities.Device,database.DeviceQueries" %>
<%@ page import = "database.*,entities.ListedDevice" %>
<%@ 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>
<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>
<%
Device[] mydevices = DeviceQueries.getAllDevices();
<%
ListedDevice[] mydevices = DeviceQueries.getAllDevices();
//string representation of array.
String deviceString = Device.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);
}
// searchbar listener
var searchbar = document.getElementsByName('searchBar');
searchbar[0].onkeyup = refresh;
showAll();
function showAll(){
var html = '';
Expand All @@ -56,9 +55,35 @@ function showAll(){
}
}
}
function show(){
var type = this.getAttribute('data-type');
function refresh() {
var filteredDevices = fuzzyFilter(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 @@ -74,54 +99,85 @@ function show(){
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;
}
// 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 (activeHOptions.length == 0) {
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(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(othermatch) 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 fuzzyFilter(deviceList) {
var searchText = document.getElementsByName('searchBar')[0].value;
var options = {
pre: '<b>',
post: '</b>',
extract: function(arg) {return arg.name;}
}
var fuzzyResults = fuzzy.filter(searchText, deviceList, 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 makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
</script>
<script src="../javascript/lib/fuzzy.js"></script>
</body>
</html>
Loading

0 comments on commit 0e5d59b

Please sign in to comment.