Bugs

WebContent/html/javascript/request.jsp

@@ -11,6 +11,7 @@
 Device[] mydevices = DeviceQueries.getAvailableDevices();
 //string representation of array.
 String deviceString = Device.arrayToString(mydevices);
+deviceString = deviceString.replace("'","\\'");
 //out.println(description);
 //out.println(hardware);
 %>

WebContent/html/webpages/administration/adminApprove.jsp

@@ -11,13 +11,18 @@ pageEncoding="ISO-8859-1"%>
     <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">
-    <link rel = "stylesheet" type = "text/css" href = "../../css/stylesheet.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <link rel = "shortcut icon" href = "../../imgs/synchrony-financial-logo-dlpx_1.ico">
+  <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>
     .form-control{
       margin: auto;
@@ -40,6 +45,15 @@ pageEncoding="ISO-8859-1"%>
 	.btn{
 		margin-top: 15px;
 	}
+	
+	body{
+		overflow: visible;
+	}
+	
+	div.displayDevice{
+		padding-right: 30px;
+		padding-bottom: 30px;
+	}
     </style>
   </head>
 
@@ -93,16 +107,16 @@ pageEncoding="ISO-8859-1"%>
   	  <form onsubmit="return false;" class="form-inline">
     	<input type="search" class="form-control" name="searchBar" placeholder=" search tickets" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;"  />
       </form> 
-	  <table class="table table-bordered table-hover">
+	  <table id = "tabledisplay" class="table table-bordered table-hover" data-toggle="table" data-sort-name="id" data-sort-order="asc">
         <thead>
             <tr>
-                <th>Ticket ID</th>
-                <th>Requestor Name</th>
-                <th>Location Name</th>
-                <th>Device Name</th>
-                <th>Status</th>
-                <th>Permanent?</th>
-                <th>Return Date</th>
+                <th data-name = "id" data-sortable = "true">Ticket ID</th>
+                <th data-name = "renter" data-sortable = "true">Requestor Name</th>
+                <th data-name = "loc" data-sortable = "true">Location Name</th>
+                <th data-name = "dev" data-sortable = "true">Device Name</th>
+                <th data-name = "status" data-sortable = "true">Status</th>
+                <th data-name = "perm" data-sortable = "true">Permanent?</th>
+                <th data-name = "return" data-sortable = "true">Return Date</th>
             </tr>
         </thead>
         <tbody id="tablebodymain">
@@ -133,8 +147,6 @@ String ticketStr = Ticket.arrayToString(tickets);
   /*
   	Managing the event listeners on the page.
   */
-  // Adds event listeners to all table records, so you can approve/reject it.
-  $("tr.entry").click(ticketAction);
   
   // Exits modal when x is clicked.
   $("#closeForm").click(closeModal);
@@ -147,6 +159,18 @@ String ticketStr = Ticket.arrayToString(tickets);
   var searchbar = document.getElementsByName('searchBar');
   searchbar[0].onkeyup = refresh;
 
+  // Set up table record event listeners
+  $('#tabledisplay').bootstrapTable({onClickRow: function(row,$element){
+	  var id = $element[0].getAttribute('id');
+      var html = "<tr><td>" + ticks[id].id + "</td><td>" + ticks[id].username + "</td><td>" + ticks[id].locationname + "</td><td>" + ticks[id].devicename + "</td><td>" + ticks[id].status + "</td><td>" + ticks[id].permanent + "</td><td>" + ticks[id].return + "</td></tr>";
+	  document.getElementById("tablemodal").innerHTML = html;
+	  $("#ticketIDfield").val(ticks[id].id);
+	  $("#deviceIDfield").val(ticks[id].deviceID);
+	  $("#locationIDfield").val(ticks[id].location);
+	  $("#permField").val(ticks[id].permanent);
+	  $("#Modal").show();
+  }});
+
   /*
   	Params: tickets - array of objects, formatted as tickets.
   	This function will display tickets in a table on the webpage.

WebContent/html/webpages/administration/adminLocation.jsp

@@ -15,11 +15,17 @@
   <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">
   <script async defer
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCndOcexx4GAOGkRKBeK1E43u_sB9gjcaU">
     </script>
-  <link rel = "stylesheet" type = "text/css" href = "../../css/stylesheet.css">
-  <link rel = "shortcut icon" href = "../../imgs/synchrony-financial-logo-dlpx_1.ico">
   <style>
 
     .form-control{
@@ -39,6 +45,15 @@
     tbody{
       text-align: left;
     }
+    
+    body{
+		overflow: visible;
+	}
+	
+	div.displayDevice{
+		padding-right: 30px;
+		padding-bottom: 30px;
+	}
   </style>
   <!-- Header -->
   <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
@@ -251,19 +266,19 @@
 <!-- Body where locations are displayed -->
 <div class = "displayDevice">
   <h2>Location Listing</h2>
-  <table class="table table-bordered table-hover" id = "tabledisplay">
-    <thread>
-      <tr>
-        <th>Name</th>
-        <th>Address</th>
-        <th>Town</th>
-        <th>State</th>
-        <th>Zip Code</th>
-      </tr>
-    </thread>
-    <!-- Location information placed here. -->
-    <tbody id="tablebodymain">
-    </tbody>
+	  <table id = "tabledisplay" class="table table-bordered table-hover" data-toggle="table" data-sort-name="name" data-sort-order="asc">
+        <thead>
+            <tr>
+                <th data-name = "name" data-sortable = "true">Name</th>
+                <th data-name = "add" data-sortable = "true">Address</th>
+                <th data-name = "town" data-sortable = "true">Town</th>
+                <th data-name = "st" data-sortable = "true">State</th>
+                <th data-name = "zip" data-sortable = "true">Zip Code</th>
+            </tr>
+        </thead>
+        <tbody id="tablebodymain">
+        </tbody>
+        </table>
   </table>
   <button id ="add" class="btn btn-primary">Add Location</button>
 </div>
@@ -281,22 +296,57 @@ var locations = makeLocationArray();
 //Populate locations into table!
 populateLocations();
 
-//geocode listeners
+// geocode listeners
 $("#addZip").keyup(geocodeTown);
 $("#modifyZip").keyup(geocodeTown);
-//adds event listeners to all table records
+// adds event listeners to all table records
 $("tr.entry").click(modifyModal);
-//Exits modal when x is clicked.
+// Exits modal when x is clicked.
 $("#closeModifyForm").click(closeModifyModal);
-//Open the add modal
+// Open the add modal
 $("#add").click(addModal);
-//Event listener exits modal when x is clicked.
+// Event listener exits modal when x is clicked.
 $("#closeAddForm").click(closeAddModal);
-//Event listener exits modal when esc key pressed.
+// 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.
+// 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();}}
 
+// Event listener for table records.	
+$('#tabledisplay').bootstrapTable({onClickRow: function(row,$element){
+  var id = $element[0].getAttribute('id');
+  for(var i = 0; i < locations.length; i++){
+  if(id == locations[i].id)
+    break;
+  }
+  //autofill all information from what you clicked on into modal
+  $("#modifyName").val(locations[i].name.replace(/&quot;/g,"\""));
+  $("#modifyAddress").val(locations[i].address.replace(/&quot;/g,"\""));
+  $("#modifyTown").val(locations[i].town.replace(/&quot;/g,"\""));
+  $("#modifyState").val(locations[i].state);
+  $("#modifyZip").val(locations[i].zip);
+  $("#modifyID").val(locations[i].id);
+  
+  var geocoder =  new google.maps.Geocoder();
+  //this function assumes that you are using a proper zip code...
+  geocoder.geocode({'address':locations[i].zip}, function(results,status)
+  	{if (status == google.maps.GeocoderStatus.OK)
+		{$("#modifylat").val(results[0].geometry.location.lat());
+		 $("#modifylng").val(results[0].geometry.location.lng());}
+	});
+  
+  //if the location has a foreign key constraint, then the delete button should be restricted
+  if(locations[i].numDevices > 0 || locations[i].numEmployees > 0){
+  $('#thedeletebutton').attr('disabled',true);
+  $('#thedeletebutton').attr('title','Cannot delete because devices and/or employees are at this location!');
+  }
+  else{
+  $('#thedeletebutton').removeAttr('disabled');
+  $('#thedeletebutton').removeAttr('title');
+  }
+  $("#modifyModal").show();
+}});
+
 //Places all locations from query into page
 function populateLocations(){
   var html = "";

WebContent/html/webpages/administration/allTickets.jsp

@@ -29,10 +29,6 @@ pageEncoding="ISO-8859-1"%>
       text-align: center;
     }
 
-    tr.entry{
-      cursor: pointer;
-    }
-
     .table{
       width: auto;
       background-color: #E9EAEB;
@@ -42,13 +38,15 @@ pageEncoding="ISO-8859-1"%>
       text-align: left;
     }
 	
-	.btn{
-		margin-top: 15px;
-	}
-	
 	body{
       overflow: visible;
     }
+
+	div.displayDevice{
+		padding-right: 30px;
+		padding-bottom: 30px;
+	}
+
     </style>
   </head>
 
@@ -69,7 +67,8 @@ pageEncoding="ISO-8859-1"%>
       <!-- Search Bar -->
   	  <form onsubmit="return false;" class="form-inline">
     	<input type="search" class="form-control" name="searchBar" placeholder=" search tickets" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;"  />
-      </form> 
+      </form>
+      <div style = "width: 100%">
 	  <table class="table table-bordered table-hover" data-toggle="table" data-sort-name="id" data-sort-order="asc">
         <thead>
             <tr>
@@ -85,6 +84,7 @@ pageEncoding="ISO-8859-1"%>
         <tbody id="tablebodymain">
         </tbody>
         </table>
+        </div>
 	  </div>
 
 <%