Skip to content
Permalink
faf025cfc2
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

2017-CSE-Senior-Project-Team-2/WebContent/html/webpages/administration/adminDeviceSettings.jsp

Go to file
 
 
Cannot retrieve contributors at this time
544 lines (506 sloc) 22.6 KB
Raw Blame
<%@ page import = "database.*,entities.Device" %>
<%@ 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 lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Innovation Hub</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../../css/stylesheet.css">
<link rel = "shortcut icon" href = "../../imgs/synchrony-financial-logo-dlpx_1.ico">
<style>
/* Elements inside forms */
.form-control{
margin: auto;
text-align: center;
}
tr.entry{
cursor: pointer;
}
.table{
background-color: #E9EAEB;
}
tbody{
text-align: left;
}
.column{
width: 10px;
}
body{
overflow: visible;
}
div.sidebar{
position: relative;
}
div.displayDevice{
padding-right: 30px;
}
div.modal-content{
max-height: 100%;
width: 100%;
}
div.form-group{
display: inline-block;
vertical-align: top;
}
</style>
<!-- Header -->
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
<%@ include file="../components/adminnavbar.jsp"%>
</nav>
</head>
<body>
<!-- Side bar -->
<div class="col-sm-3 col-md-2 sidebar">
<%@ include file = "../components/adminsidebar.jsp" %>
</div>
<!-- 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 = "../redirect/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="addPos">Locker Position</label>
<input style = "width: 150px;" name = "locker" class="form-control" id="addPos" placeholder="Locker Position">
</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="addcomment">Admin Comments</label>
<textarea style = "width: 200px;" name = "admincomments" class="form-control" rows = "5" id="addcomment" placeholder="Comments"></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="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="addOS">Operating System</label>
<input style = "width: 150px;" name = "OS" class="form-control" id="addOS" placeholder="OS">
</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="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="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" id="addNFC" placeholder="ID">
</div><br>
<button type = "submit" name = "add" value = "Add" class="btn btn-primary">Add</button>
</form>
</div>
</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 = "../redirect/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="modifyPos">Locker Position</label>
<input style = "width: 150px;" name = "locker" class="form-control" id="modifyPos" placeholder="Locker Position">
</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="modifycomment">Admin Comments</label>
<textarea style = "width: 200px;" name = "admincomments" class="form-control" rows = "5" id="modifycomment" placeholder="Comments"></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="modifyOS">Operating System</label>
<input style = "width: 150px;" name = "OS" class="form-control" id="modifyOS" placeholder="OS">
</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" 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 Hub</h2>
<form onsubmit="return false;" class="form-inline">
<input id = "fuzzysearchbar" 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" data-toggle="table" data-sort-name="name" data-sort-order="asc">
<thead>
<tr>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="locker" data-sortable="true">Locker Position</th>
<th class = "column" data-field="description" data-sortable="true">Description</th>
<th class = "column" data-field="admin" data-sortable="true">Admin Comments</th>
<th data-field="avail" data-sortable="true">Availability</th>
<th data-field="mac" data-sortable="true">MAC Address</th>
<th data-field="manu" data-sortable="true">Manufacturer</th>
<th data-field="hard" data-sortable="true">Hardware Type</th>
<th data-field="os" data-sortable="true">Operating System</th>
<th data-field="model" data-sortable="true">Model Name</th>
<th data-field="serial" data-sortable="true">Serial Number</th>
<th data-field="nfc" data-sortable="true">NFC ID</th>
</tr>
</thead>
<tbody id="tablebodymain">
</tbody>
</table>
</div>
<%
//database query
Device[] devices = DeviceQueries.getAllDevices();
//string representation of array.
String deviceString = Device.arrayToString(devices);
deviceString = deviceString.replace("'","\\'");
%>
<script type=text/javascript>
//JSON representation of array.
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() {
if($("#fuzzysearchbar").val().localeCompare("")==0){
populateDevices(devices);
$("tr.entry").click(modifyModal);
}
else{
populateDevices(fuzzyFilter(makeDeviceArray()));
//adds event listeners to all table records
$("tr.entry").click(modifyModal);
}
}
//Populate locations into table!
populateDevices(devices);
//Exits modal when x is clicked.
$("#closeModifyForm").click(closeModifyModal);
//Open the add modal
$("#add").click(addModal);
//Event listener exits modal when x is clicked.
$("#closeAddForm").click(closeAddModal);
//Event listener exits modal when esc key pressed.
window.onkeydown = function(e){if (e.keyCode == 27){closeAddModal();closeModifyModal();}}
//Event listener exits modal when click outside modal.
window.onclick = function(e){var add = document.getElementById('addModal'); var modify = document.getElementById('modifyModal'); if(e.target == add || e.target == modify) {closeAddModal();closeModifyModal();}}
//set up options in modals
var manuHTML = '<option value="" disabled selected>Choose Manufacturer</option>';
var hardwareHTML = '<option value="" disabled selected>Choose Hardware</option>';
var availabilityHTML = '<option value="" disable selected>Choose Availability</option>';
manufacturers.sort();
for(var i = 0; i < manufacturers.length; i++)
manuHTML += '<option value="' + manufacturers[i] + '">' + manufacturers[i] + '</option>';
hardwares.sort();
for(var i = 0; i < hardwares.length; i++)
hardwareHTML += '<option value="' + hardwares[i] + '">' + hardwares[i] + '</option>';
availabilities.sort();
for(var i = 0; i < availabilities.length; i++)
availabilityHTML += '<option value="' + availabilities[i] + '">' + availabilities[i] + '</option>';
document.getElementById('addManu').innerHTML = manuHTML;
document.getElementById('addHardware').innerHTML = hardwareHTML;
document.getElementById('addAvailability').innerHTML = availabilityHTML;
document.getElementById('modifyManu').innerHTML = manuHTML;
document.getElementById('modifyHardware').innerHTML = hardwareHTML;
document.getElementById('modifyAvailability').innerHTML = availabilityHTML;
$('#tabledisplay').bootstrapTable({onClickRow: function(row,$element)
{
var id = $element[0].getAttribute('id');
for(var i = 0; i < devices.length; i++){
if(id == devices[i].id)
break;
}
//autofill modal
$("#modifyName").val(devices[i].name.replace(/&quot;/g,"\""));
$("#modifyDesc").val(devices[i].description.replace(/&quot;/g,"\""));
$("#modifyAvailability").val(devices[i].status);
$("#modifyMAC").val(devices[i].mac);
$("#modifyManu").val(devices[i].manufacturer.replace(/&quot;/g,"\""));
$("#modifyHardware").val(devices[i].hardware.replace(/&quot;/g,"\""));
$("#modifyModel").val(devices[i].model.replace(/&quot;/g,"\""));
$("#modifySerial").val(devices[i].serial);
$("#modifyNFC").val(devices[i].nfc);
$("#modifyOS").val(devices[i].os);
$("#modifycomment").val(devices[i].admincomment);
$("#modifyPos").val(devices[i].locker);
$("#modifyID").val(devices[i].id);
$("#modifyModal").show();
}
});
//Places all locations from query into page
function populateDevices(deviceArray){
var html = "";
for(var i = 0; i < deviceArray.length; i++){
html += "<tr class = 'entry' id = '" + deviceArray[i].id + "'><td>" + deviceArray[i].name + "</td><td>" + deviceArray[i].locker + "</td><td>" + deviceArray[i].description + "</td><td>" + deviceArray[i].admincomment + "</td><td>" + deviceArray[i].status + "</td><td>" + deviceArray[i].mac + "</td><td>" + deviceArray[i].manufacturer + "</td><td>" + deviceArray[i].hardware + "</td><td>" + deviceArray[i].os + "</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(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;
////// First pass: filter by device name
var options = {
pre: "<span style='color: red; font-size: 115%'><b>",
post: '</b></span>',
extract: function(arg) {return arg.name;}
}
var nameFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = nameFilterResults.length - 1; i >= 0; i--) {
nameFilterResults[i].original.name=nameFilterResults[i].string;
}
////// Second pass: filter by MAC address
options.extract = function(arg) {return arg.mac;};
options.pre = "<span style='color: darkorange; font-size: 115%'><b>"
var macFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = macFilterResults.length - 1; i >= 0; i--) {
macFilterResults[i].original.mac=macFilterResults[i].string;
}
////// Third pass: filter by Manufacture
options.extract = function(arg) {return arg.manufacturer;};
options.pre = "<span style='color: gold; font-size: 115%'><b>"
var manufacturerFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = manufacturerFilterResults.length - 1; i >= 0; i--) {
manufacturerFilterResults[i].original.manufacturer=manufacturerFilterResults[i].string;
}
////// Fourth pass: filter by Hardware
options.extract = function(arg) {return arg.hardware;};
options.pre = "<span style='color: green; font-size: 115%'><b>"
var hardwareFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = hardwareFilterResults.length - 1; i >= 0; i--) {
hardwareFilterResults[i].original.hardware=hardwareFilterResults[i].string;
}
////// Fifth pass: filter by Model
options.extract = function(arg) {return arg.model;};
options.pre = "<span style='color: blue; font-size: 115%'><b>"
var modelFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = modelFilterResults.length - 1; i >= 0; i--) {
modelFilterResults[i].original.model=modelFilterResults[i].string;
}
////// Sixth pass: filter by Serial
options.extract = function(arg) {return arg.serial;};
options.pre = "<span style='color: deepviolet; font-size: 115%'><b>"
var serialFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = serialFilterResults.length - 1; i >= 0; i--) {
serialFilterResults[i].original.serial=serialFilterResults[i].string;
}
////// Seventh pass: filter by Locker Position
options.extract = function(arg) {return arg.locker;};
var lockerFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = lockerFilterResults.length - 1; i >= 0; i--) {
lockerFilterResults[i].original.locker=lockerFilterResults[i].string;
}
////// Ninth pass: filter by OS
options.extract = function(arg) {return arg.os;};
var osFilterResults = fuzzy.filter(searchText, deviceArray, options);
// replace releveant field with bolded string
for (var i = osFilterResults.length - 1; i >= 0; i--) {
osFilterResults[i].original.os=osFilterResults[i].string;
}
var filteredResults = union([nameFilterResults,macFilterResults,manufacturerFilterResults,hardwareFilterResults,modelFilterResults,serialFilterResults,lockerFilterResults,osFilterResults]);
// 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 finalResults = new Array(filteredResults.length);
for (var i = 0; i < filteredResults.length; i++) {
finalResults[i] = {
id:filteredResults[i].original.id,
name:filteredResults[i].original.name,
description:filteredResults[i].original.description,
status:filteredResults[i].original.status,
mac:filteredResults[i].original.mac,
manufacturer:filteredResults[i].original.manufacturer,
hardware:filteredResults[i].original.hardware,
model:filteredResults[i].original.model,
serial:filteredResults[i].original.serial,
nfc:filteredResults[i].original.nfc,
locker:filteredResults[i].original.locker,
admincomment:filteredResults[i].original.admincomment,
os:filteredResults[i].original.os
};
}
return finalResults;
}
// returns the union of an arary of arrays, without duplicates
// in linear time!
// yay recursion :)
// Both arrays must contain objects with index attributes and must be sorted. (arrays returned by fuzzy.js are both of these things)
function union(arrays) {
if(arrays.length == 2)
return(unionBaseCase(arrays[0],arrays[1]))
if(arrays.length == 1)
return(arrays[0])
else{
var pivot = Math.floor(arrays.length/2);
var arrayA=arrays.slice(0,pivot);
var arrayB=arrays.slice(pivot);
return union([union(arrayA),union(arrayB)]);
}
}
function unionBaseCase(array1,array2) {
var results = new Array();
while(array1.length>0 && array2.length>0) {
if(array1[0].index == array2[0].index){
array1.splice(0,1);
}
else
results.push((array1[0].index > array2[0].index ? array2.splice(0,1)[0] : array1.splice(0,1)[0]))
}
results = results.concat(array1);
results = results.concat(array2);
return results;
}
//Make JSON from Java of retrieved devices.
function makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
//open addModal
function addModal(){
$("#addModal").show();
}
//close addModal
function closeAddModal(){
$("#addModal").hide();
}
//open modifyModal
function modifyModal(){
var id = this.getAttribute('id');
for(var i = 0; i < devices.length; i++){
if(id == devices[i].id)
break;
}
//autofill modal
$("#modifyName").val(devices[i].name.replace(/&quot;/g,"\""));
$("#modifyDesc").val(devices[i].description.replace(/&quot;/g,"\""));
$("#modifyAvailability").val(devices[i].status);
$("#modifyMAC").val(devices[i].mac);
$("#modifyManu").val(devices[i].manufacturer.replace(/&quot;/g,"\""));
$("#modifyHardware").val(devices[i].hardware.replace(/&quot;/g,"\""));
$("#modifyModel").val(devices[i].model.replace(/&quot;/g,"\""));
$("#modifySerial").val(devices[i].serial);
$("#modifyNFC").val(devices[i].nfc);
$("#modifyOS").val(devices[i].os);
$("#modifycomment").val(devices[i].admincomment);
$("#modifyPos").val(devices[i].locker);
$("#modifyID").val(devices[i].id);
$("#modifyModal").show();
}
//close modify modal
function closeModifyModal(){
$("#modifyModal").hide();
}
//find if a string is in the array
function findInArray(string,array){
if (array.length == 0)
return false
for(var i = 0; i < array.length; i++){
if(string.localeCompare(array[i]) == 0)
return true;
}
return false;
}
</script>
<script src="../../javascript/lib/fuzzy.js"></script>
</body>
</html>