Skip to content

Commit

Permalink
Search feature introduced to adimin device edit page-currently search…
Browse files Browse the repository at this point in the history 
…es only by name

Hopefully soon it will include more fields in its search
  • Loading branch information
@arc12012
arc12012 committed Apr 5, 2017
1 parent d112d8c commit 8e8baf3
Showing 1 changed file with 165 additions and 120 deletions.
285 changes: 165 additions & 120 deletions WebContent/html/webpages/adminDeviceSettings.jsp
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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
Expand All @@ -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);
Expand Down Expand Up @@ -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%>';
Expand Down Expand Up @@ -330,6 +375,6 @@ function findInArray(string,array){
}
</script>
<!-- Navbar generation. -->
<script src="../javascript/lib/fuzzy.js"></script>
</body>
</html>

0 comments on commit 8e8baf3

Please sign in to comment.