From 580244e5cf8fcbae7febd4f89d788c22b7fc3b3b Mon Sep 17 00:00:00 2001 From: Adam R Claxton Date: Tue, 4 Apr 2017 14:34:06 -0400 Subject: [PATCH] Listing page internal filtering reorganized somewhat in preperation for search function Added fuzzy.js search library and empty search bar --- WebContent/html/javascript/lib/fuzzy.js | 143 +++++++++++++++++++++ WebContent/html/javascript/listing.jsp | 92 ++++++++------ WebContent/html/webpages/listingPage.jsp | 155 ++++++++++++----------- 3 files changed, 275 insertions(+), 115 deletions(-) create mode 100644 WebContent/html/javascript/lib/fuzzy.js diff --git a/WebContent/html/javascript/lib/fuzzy.js b/WebContent/html/javascript/lib/fuzzy.js new file mode 100644 index 0000000..d2131cb --- /dev/null +++ b/WebContent/html/javascript/lib/fuzzy.js @@ -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: '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: '' +// +// // string to put after matching character +// , post: '' +// +// // 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; + }); +}; + + +}()); \ No newline at end of file diff --git a/WebContent/html/javascript/listing.jsp b/WebContent/html/javascript/listing.jsp index cdf42d7..2aaff0b 100644 --- a/WebContent/html/javascript/listing.jsp +++ b/WebContent/html/javascript/listing.jsp @@ -3,24 +3,24 @@ - -Insert title here + + Insert title here -<% -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); -%> + %> - \ No newline at end of file diff --git a/WebContent/html/webpages/listingPage.jsp b/WebContent/html/webpages/listingPage.jsp index 4415d9c..3086dba 100644 --- a/WebContent/html/webpages/listingPage.jsp +++ b/WebContent/html/webpages/listingPage.jsp @@ -1,86 +1,91 @@ - - - - - - - + + + + + + + - Synchrony Financial + Synchrony Financial - - - - - - - + div.availableAnchor{ + width: 50%; + margin: auto; + border: solid; + border-width: thin; + } + + - - -
-
    -

    Device Type

    -
    • -
    • -
    • -
    • -
    • -
    • -
- -
-
    -

    Manufacturer

    -
    • -
    • -
    • -
    • -
    • -
    • -
-
+ + +
+
    +

    Device Type

    +
    • +
    • +
    • +
    • +
    • +
    • +
+ +
+
    +

    Manufacturer

    +
    • +
    • +
    • +
    • +
    • +
    • +
+
-
-

Device Dictionary

-
-
- - <%@ include file="../javascript/listing.jsp" %> - + +
+

Device Dictionary +
+ +
+

+
+
+ +<%@ include file="../javascript/listing.jsp" %> + \ No newline at end of file