From 8e8baf327b73e66ec0625122a3ae448a4e65ba78 Mon Sep 17 00:00:00 2001
From: Adam R Claxton <adam.claxton@uconn.edu>
Date: Wed, 5 Apr 2017 17:52:27 -0400
Subject: [PATCH] Search feature introduced to adimin device edit
 page-currently searches only by name

Hopefully soon it will include more fields in its search
---
 .../html/webpages/adminDeviceSettings.jsp     | 285 ++++++++++--------
 1 file changed, 165 insertions(+), 120 deletions(-)
diff --git a/WebContent/html/webpages/adminDeviceSettings.jsp b/WebContent/html/webpages/adminDeviceSettings.jsp
index 35a010d..44b1bbf 100644
--- a/WebContent/html/webpages/adminDeviceSettings.jsp
+++ b/WebContent/html/webpages/adminDeviceSettings.jsp
@@ -1,6 +1,6 @@
 <%@ page import = "database.*,entities.Device" %>
 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
-    pageEncoding="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 lang="en">
 <head>
@@ -84,121 +84,127 @@
 
   <!-- Modal for adding new device. -->
   <div id="addModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-head">
-                <span id="closeAddForm" class="close">&times;</span>
-                <h4>Add a New Device Below</h4>
-            </div><br>
-            <div class="modal-body">
-              <!-- Where new information is added. -->
-              <form ACTION = "deviceRedirect.jsp" METHOD = "POST">
-                <div class = "form-group">
-                    <label for="addName">Device Name *</label>
-                    <input style = "width: 150px;" name = "name" class="form-control" id="addName" placeholder="Device Name" required = "true">
-                </div>
-                <div class = "form-group">
-                    <label for="addDesc">Description</label>
-                    <textarea style = "width: 200px;" name = "description" class="form-control" rows = "5" id="addDesc" placeholder="Description"></textarea>
-                </div>
-                <div class = "form-group">
-                	<label for="addAvailability">Availability *</label>
-                	<select required style = "width 190px;" name = "status" class="form-control" id="addAvailability">
-                	</select>
-                </div>
-                <div class = "form-group">
-                    <label for="addMAC">MAC Address</label>
-                    <input style = "width: 150px;" name = "MAC" class="form-control" id="addMAC" placeholder="MAC Address">
-                </div>
-                <div class = "form-group">
-                    <label for="addManu">Manufacturer *</label>
-                    <select required style = "width: 190px;" name = "manu" class="form-control" id="addManu">
-                    </select>
-                </div>
-                <div class = "form-group">
-                    <label for="addHardware">Hardware Type *</label>
-                    <select required style = "width: 160px;" name = "hardware" class="form-control" id="addHardware">
-                    </select>
-                </div>
-                <div class = "form-group">
-                    <label for="addModel">Model Name *</label>
-                    <input style = "width: 150px;" name = "model" class="form-control" id="addModel" placeholder="Model Name" required = "true">
-                </div>
-                <div class = "form-group">
-                    <label for="addSerial">Serial Number</label>
-                    <input style = "width: 150px;" name = "serial" class="form-control" id="addSerial" placeholder="Serial Number">
-                </div>
-                <div class = "form-group">
-                    <label for="addNFC">NFC ID</label>
-                    <input style = "width: 75px;" name = "NFC" class="form-control" type = "number" id="addNFC" placeholder="ID">
-                </div><br>
-                <button type = "submit" name = "add" value = "Add" class="btn btn-primary">Add</button>
-              </form>
-            </div>
+    <div class="modal-content">
+      <div class="modal-head">
+        <span id="closeAddForm" class="close">&times;</span>
+        <h4>Add a New Device Below</h4>
+      </div><br>
+      <div class="modal-body">
+        <!-- Where new information is added. -->
+        <form ACTION = "deviceRedirect.jsp" METHOD = "POST">
+          <div class = "form-group">
+            <label for="addName">Device Name *</label>
+            <input style = "width: 150px;" name = "name" class="form-control" id="addName" placeholder="Device Name" required = "true">
+          </div>
+          <div class = "form-group">
+            <label for="addDesc">Description</label>
+            <textarea style = "width: 200px;" name = "description" class="form-control" rows = "5" id="addDesc" placeholder="Description"></textarea>
+          </div>
+          <div class = "form-group">
+           <label for="addAvailability">Availability *</label>
+           <select required style = "width 190px;" name = "status" class="form-control" id="addAvailability">
+           </select>
+         </div>
+         <div class = "form-group">
+          <label for="addMAC">MAC Address</label>
+          <input style = "width: 150px;" name = "MAC" class="form-control" id="addMAC" placeholder="MAC Address">
         </div>
+        <div class = "form-group">
+          <label for="addManu">Manufacturer *</label>
+          <select required style = "width: 190px;" name = "manu" class="form-control" id="addManu">
+          </select>
+        </div>
+        <div class = "form-group">
+          <label for="addHardware">Hardware Type *</label>
+          <select required style = "width: 160px;" name = "hardware" class="form-control" id="addHardware">
+          </select>
+        </div>
+        <div class = "form-group">
+          <label for="addModel">Model Name *</label>
+          <input style = "width: 150px;" name = "model" class="form-control" id="addModel" placeholder="Model Name" required = "true">
+        </div>
+        <div class = "form-group">
+          <label for="addSerial">Serial Number</label>
+          <input style = "width: 150px;" name = "serial" class="form-control" id="addSerial" placeholder="Serial Number">
+        </div>
+        <div class = "form-group">
+          <label for="addNFC">NFC ID</label>
+          <input style = "width: 75px;" name = "NFC" class="form-control" type = "number" id="addNFC" placeholder="ID">
+        </div><br>
+        <button type = "submit" name = "add" value = "Add" class="btn btn-primary">Add</button>
+      </form>
+    </div>
   </div>
-   
-  <!-- Modal for modifying device. -->
-  <div id="modifyModal" class="modal">
-        <div class="modal-content">
-            <div class="modal-head">
-                <span id="closeModifyForm" class="close">&times;</span>
-                <h4>Modify Device Below</h4>
-            </div><br>
-            <div class="modal-body">
-              <!-- Where information is modified. -->
-              <form ACTION = "deviceRedirect.jsp" METHOD = "POST">
-                <div class = "form-group">
-                    <label for="modifyName">Device Name *</label>
-                    <input style = "width: 150px;" name = "name" class="form-control" id="modifyName" placeholder="Device Name" required = "true">
-                </div>
-                <div class = "form-group">
-                    <label for="modifyDesc">Description</label>
-                    <textarea style = "width: 200px;" name = "description" class="form-control" rows = "5" id="modifyDesc" placeholder="Description"></textarea>
-                </div>
-                <div class = "form-group">
-                	<label for="modifyAvailability">Availability *</label>
-                	<select required style = "width 190px;" name = "status" class="form-control" id="modifyAvailability">
-                	</select>
-                </div>
-                <div class = "form-group">
-                    <label for="modifyMAC">MAC Address</label>
-                    <input style = "width: 150px;" name = "MAC" class="form-control" id="modifyMAC" placeholder="MAC Address">
-                </div>
-                <div class = "form-group">
-                    <label for="modifyManu">Manufacturer *</label>
-                    <select required style = "width: 190px;" name = "manu" class="form-control" id="modifyManu">
-                    </select>
-                </div>
-                <div class = "form-group">
-                    <label for="modifyHardware">Hardware Type *</label>
-                    <select required style = "width: 160px;" name = "hardware" class="form-control" id="modifyHardware">
-                    </select>
-                </div>
-                <div class = "form-group">
-                    <label for="modifyModel">Model Name *</label>
-                    <input style = "width: 150px;" name = "model" class="form-control" id="modifyModel" placeholder="Model Name" required = "true">
-                </div>
-                <div class = "form-group">
-                    <label for="modifySerial">Serial Number</label>
-                    <input style = "width: 150px;" name = "serial" class="form-control" id="modifySerial" placeholder="Serial Number">
-                </div>
-                <div class = "form-group">
-                    <label for="modifyNFC">NFC ID</label>
-                    <input style = "width: 75px;" name = "NFC" class="form-control" type = "number" id="modifyNFC" placeholder="ID">
-                </div><br>
-                <button type = "submit" name = "modify" value = "Save Changes" class="btn btn-primary">Save Changes</button>
-                <button style = "display: inline-block;" type = "submit" name = "delete" value = "Delete Entry" class="btn btn-primary">Delete</button>
-                <input type = "text" id = "modifyID" name = "id" style = "display: none;">
-              </form>
-            </div>
+</div>
+
+<!-- Modal for modifying device. -->
+<div id="modifyModal" class="modal">
+  <div class="modal-content">
+    <div class="modal-head">
+      <span id="closeModifyForm" class="close">&times;</span>
+      <h4>Modify Device Below</h4>
+    </div><br>
+    <div class="modal-body">
+      <!-- Where information is modified. -->
+      <form ACTION = "deviceRedirect.jsp" METHOD = "POST">
+        <div class = "form-group">
+          <label for="modifyName">Device Name *</label>
+          <input style = "width: 150px;" name = "name" class="form-control" id="modifyName" placeholder="Device Name" required = "true">
+        </div>
+        <div class = "form-group">
+          <label for="modifyDesc">Description</label>
+          <textarea style = "width: 200px;" name = "description" class="form-control" rows = "5" id="modifyDesc" placeholder="Description"></textarea>
         </div>
+        <div class = "form-group">
+         <label for="modifyAvailability">Availability *</label>
+         <select required style = "width 190px;" name = "status" class="form-control" id="modifyAvailability">
+         </select>
+       </div>
+       <div class = "form-group">
+        <label for="modifyMAC">MAC Address</label>
+        <input style = "width: 150px;" name = "MAC" class="form-control" id="modifyMAC" placeholder="MAC Address">
+      </div>
+      <div class = "form-group">
+        <label for="modifyManu">Manufacturer *</label>
+        <select required style = "width: 190px;" name = "manu" class="form-control" id="modifyManu">
+        </select>
+      </div>
+      <div class = "form-group">
+        <label for="modifyHardware">Hardware Type *</label>
+        <select required style = "width: 160px;" name = "hardware" class="form-control" id="modifyHardware">
+        </select>
+      </div>
+      <div class = "form-group">
+        <label for="modifyModel">Model Name *</label>
+        <input style = "width: 150px;" name = "model" class="form-control" id="modifyModel" placeholder="Model Name" required = "true">
+      </div>
+      <div class = "form-group">
+        <label for="modifySerial">Serial Number</label>
+        <input style = "width: 150px;" name = "serial" class="form-control" id="modifySerial" placeholder="Serial Number">
+      </div>
+      <div class = "form-group">
+        <label for="modifyNFC">NFC ID</label>
+        <input style = "width: 75px;" name = "NFC" class="form-control" type = "number" id="modifyNFC" placeholder="ID">
+      </div><br>
+      <button type = "submit" name = "modify" value = "Save Changes" class="btn btn-primary">Save Changes</button>
+      <button style = "display: inline-block;" type = "submit" name = "delete" value = "Delete Entry" class="btn btn-primary">Delete</button>
+      <input type = "text" id = "modifyID" name = "id" style = "display: none;">
+    </form>
   </div>
+</div>
+</div>
 <div class = "displayDevice">
   <!-- Main body! -->
   <h2>Device Listing</h2>
+
+  <form onsubmit="return false;" class="form-inline">
+    <input type="search" class="form-control" name="searchBar" placeholder=" search for devices" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;"  />
+    <button id ="add" class="btn btn-primary">Add Device</button>
+  </form>
+  
   <!-- Location information placed here. -->
   <table class="table table-bordered table-hover" id = "tabledisplay">
-    <thread>
+    <thead>
       <tr>
         <th>Name</th>
         <th class = "column">Description</th>
@@ -210,11 +216,10 @@
         <th>Serial Number</th>
         <th>NFC ID</th>
       </tr>
-    </thread>
+    </thead>
     <tbody id="tablebodymain">
     </tbody>
   </table>
-  <button id ="add" class="btn btn-primary">Add Device</button>
 </div>
 <%
 //database query
@@ -231,8 +236,16 @@ var devices = makeDeviceArray();
 var manufacturers = new Array;
 var hardwares = new Array;
 var availabilities = new Array;
+
+// searchbar listener
+var searchbar = document.getElementsByName('searchBar');
+searchbar[0].onkeyup = refresh;
+function refresh() {
+  populateDevices(fuzzyFilter(devices));
+}
+
 //Populate locations into table!
-populateDevices();
+populateDevices(devices);
 
 //adds event listeners to all table records
 $("tr.entry").click(modifyModal);
@@ -264,21 +277,53 @@ document.getElementById('modifyHardware').innerHTML = hardwareHTML;
 document.getElementById('modifyAvailability').innerHTML = availabilityHTML;
 
 //Places all locations from query into page
-function populateDevices(){
+function populateDevices(deviceArray){
   var html = "";
-  for(var i = 0; i < devices.length; i++){
-    html += "<tr class = 'entry' id = '" + devices[i].id + "'><td>" + devices[i].name + "</td><td>" + devices[i].description + "</td><td>" + devices[i].status + "</td><td>" + devices[i].mac + "</td><td>" + devices[i].manufacturer + "</td><td>" + devices[i].hardware + "</td><td>" + devices[i].model + "</td><td>" + devices[i].serial + "</td><td>" + devices[i].nfc + "</td></tr>";
-    if(findInArray(devices[i].manufacturer,manufacturers) == false){
-      manufacturers.push(devices[i].manufacturer);
+  for(var i = 0; i < deviceArray.length; i++){
+    html += "<tr class = 'entry' id = '" + deviceArray[i].id + "'><td>" + deviceArray[i].name + "</td><td>" + deviceArray[i].description + "</td><td>" + deviceArray[i].status + "</td><td>" + deviceArray[i].mac + "</td><td>" + deviceArray[i].manufacturer + "</td><td>" + deviceArray[i].hardware + "</td><td>" + deviceArray[i].model + "</td><td>" + deviceArray[i].serial + "</td><td>" + deviceArray[i].nfc + "</td></tr>";
+    if(findInArray(deviceArray[i].manufacturer,manufacturers) == false){
+      manufacturers.push(deviceArray[i].manufacturer);
     }
-    if(findInArray(devices[i].hardware,hardwares) == false)
-      hardwares.push(devices[i].hardware);
-    if(findInArray(devices[i].status,availabilities) == false)
-      availabilities.push(devices[i].status);
+    if(findInArray(deviceArray[i].hardware,hardwares) == false)
+      hardwares.push(deviceArray[i].hardware);
+    if(findInArray(deviceArray[i].status,availabilities) == false)
+      availabilities.push(deviceArray[i].status);
   }
   document.getElementById("tablebodymain").innerHTML = html;
 }
 
+// returns subset of deviceArray, by fuzzy-matching the string in the search bar against each field of a device object
+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);
+
+  for (var i = 0; i < fuzzyResults.length; i++) {
+    results[i] = {
+      id:fuzzyResults[i].original.id,
+      name:fuzzyResults[i].string,  //this is the one being replaced
+      description:fuzzyResults[i].original.description,
+      status:fuzzyResults[i].original.status,
+      mac:fuzzyResults[i].original.mac,
+      manufacturer:fuzzyResults[i].original.manufacturer,
+      hardware:fuzzyResults[i].original.hardware,
+      model:fuzzyResults[i].original.model,
+      serial:fuzzyResults[i].original.serial,
+      nfc:fuzzyResults[i].original.nfc,
+    };
+  }
+  return results;
+}
+
 //Make JSON from Java of retrieved devices.
 function makeDeviceArray(){
   window.json = '<%=deviceString%>';
@@ -330,6 +375,6 @@ function findInArray(string,array){
 }
 
 </script>
-  <!-- Navbar generation. -->
+<script src="../javascript/lib/fuzzy.js"></script>
 </body>
 </html>
\ No newline at end of file
