Skip to content

Commit

Permalink
Bootstrap Tables. Boostrap Tables Everywhere.
Browse files Browse the repository at this point in the history
  • Loading branch information
@clj13001
clj13001 committed Apr 24, 2017
1 parent 2cb1955 commit 4fe48e2
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 40 deletions.
56 changes: 41 additions & 15 deletions WebContent/html/webpages/administration/adminApprove.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>

Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -147,6 +161,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.
Expand Down
80 changes: 65 additions & 15 deletions WebContent/html/webpages/administration/adminLocation.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand All @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -297,6 +312,41 @@ window.onkeydown = function(e){if (e.keyCode == 27){closeAddModal();closeModifyM
//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').attr('disabled',false);
$('#thedeletebutton').removeAttr('title');
}
$("#modifyModal").show();
}});
//Places all locations from query into page
function populateLocations(){
var html = "";
Expand Down
14 changes: 9 additions & 5 deletions WebContent/html/webpages/administration/allTickets.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ pageEncoding="ISO-8859-1"%>
text-align: center;
}
tr.entry{
cursor: pointer;
}
.table{
width: auto;
background-color: #E9EAEB;
Expand All @@ -45,6 +41,12 @@ pageEncoding="ISO-8859-1"%>
body{
overflow: visible;
}
div.displayDevice{
padding-right: 30px;
padding-bottom: 30px;
}
</style>
</head>

Expand All @@ -65,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>
Expand All @@ -81,6 +84,7 @@ pageEncoding="ISO-8859-1"%>
<tbody id="tablebodymain">
</tbody>
</table>
</div>
</div>

<%
Expand Down
7 changes: 2 additions & 5 deletions WebContent/html/webpages/mytickets.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ pageEncoding="ISO-8859-1"%>
width: 50%;
}
tr.entry{
cursor: pointer;
}
.table{
background-color: #E9EAEB;
}
Expand All @@ -43,10 +39,11 @@ pageEncoding="ISO-8859-1"%>
}
div.displayDevice{
overflow: visible;
padding-right: 30px;
margin-bottom: 30px;
overflow: hidden;
height: auto;
width: auto;
}
</style>
</head>
Expand Down

0 comments on commit 4fe48e2

Please sign in to comment.