Skip to content

Commit

Permalink
availability done, most local code removed
Browse files Browse the repository at this point in the history
  • Loading branch information
@jic13003
jic13003 committed Mar 3, 2017
1 parent 44bb506 commit 884e613
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 184 deletions.
296 changes: 114 additions & 182 deletions WebContent/html/javascript/listing.jsp
View file
Original file line number Diff line number Diff line change
@@ -1,183 +1,115 @@
<%@ page import = "database.MySQLAccess,entities.ListedDevice" %>
<%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
MySQLAccess myaccess = new MySQLAccess();
ListedDevice[] mydevices = myaccess.getAllDevices();
//string representation of array.
String deviceString = ListedDevice.arrayToString(mydevices);
//out.println(description);
//out.println(hardware);
%>

<script type=text/javascript>
//gets variables for database data
var devices = makeDeviceArray();
//get all the option buttons
var options = document.getElementsByClassName('option');
/*local devices */
/*var dev7 = {
name: window.myname,
description: window.mydesc,
hardware: window.myhard,
software:"intel"
};
var dev1 = {
name:"George",
description:"George is probably the coolest iPhone to exist. Ever. Point blank, period.",
hardware:"iphone",
software:"apple"
};
var dev2 = {
name:"Greyson",
description:"Greyson is pretty cool.. I guess.",
hardware:"iphone",
software:"apple"
};
var dev3 = {
name:"Linkin Park",
description:'"The hardest part of ending is starting again."',
hardware:"ipad",
software:"apple"
};
var dev4 = {
name:"Abercrombie",
description:"To all the people that hated me in high school, I have the prettiest clothes you all wear now!!",
hardware:"ipad",
software:"apple"
};
var dev5 = {
name:"Hulk",
description:"Go ahead and HULK SMASH! this awesome computer stick into your USB.",
hardware:"computerStick",
software:"intel"
};
var dev6 = {
name:"Captain America",
description:'"Make America Great Again. Wait, thats someone else.."',
hardware:"computerStick",
software:"intel"
};
var devices = [dev1, dev2, dev3, dev4, dev5, dev6, dev7];
*/
options[0].addEventListener('click', showAll);
for(var a = 1; a < options.length; a++){
options[a].addEventListener('click', show);
}
showAll();
function showAll(){
var html = '';
for(var i = 0; i < devices.length; i++){
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i+1) + '"></div></div></div><br><br>';
}
document.getElementById('devContainer').innerHTML = html;
var unavailable = getUnavailableItems();
var anchors = document.getElementsByClassName('availableAnchor');
for(var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
var id = anchor.getAttribute('id');
if(isUnavailable(id)){
document.getElementById(id).innerHTML = 'Unavailable';
id = '#' + id;
$(id).css({'background-color':'#ff3535'});
}
else{
document.getElementById(id).innerHTML = 'Available';
id = '#' + id;
$(id).css({'background-color':'#1fe07f'});
}
}
}
function show(){
var type = this.getAttribute('data-type');
var html = '';
for(var i = 0; i < devices.length; i++){
if(type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0){
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i+1) + '"></div></div></div><br><br>'
}
}
document.getElementById('devContainer').innerHTML = html;
var unavailable = getUnavailableItems();
var anchors = document.getElementsByClassName('availableAnchor');
for(var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
var id = anchor.getAttribute('id');
if(isUnavailable(id)){
document.getElementById(id).innerHTML = 'Unavailable';
id = '#' + id;
$(id).css({'background-color':'#ff3535'});
}
else{
document.getElementById(id).innerHTML = 'Available';
id = '#' + id;
$(id).css({'background-color':'#1fe07f'});
}
}
}
function getUnavailableItems(){
var unavailable = new Array;
var unavailable_str = localStorage.getItem('unavailable');
if(unavailable_str !== "" && unavailable_str !== null){
unavailable = JSON.parse(unavailable_str);
}
return unavailable;
}
function isUnavailable(id){
var unavailable = getUnavailableItems();
if(unavailable.length == 0)
return 0;
else{
for(var i = 0; i < unavailable.length; i++){
if(unavailable[i] == (id))
return 1;
}
}
return 0;
}
//Generates html and writes to 'devContainer' div in JSP
function populateDeviceList(){
//begin empty html
var htmlString="";
//iterate returned devices
for (var i = 0; i < devices.length; i++) {
//get device values
var id = devices[i].id;
var name = devices[i].name;
var hardware = devices[i].hardware;
var checkout = devices[i].checkout;
//HTML representation in divs
htmlString+="<div class=\"deviceContainer\" data-num=\"" + i +"\">";
htmlString+="<input class=\"deviceCheckbox\" type = \"checkbox\" data-num=\"" + i + "\">";
htmlString+="<div><div class=\"imgContainer\"><img src=\"../imgs/my-icons-collection-devices/png/";
htmlString+=hardware;
htmlString+=".png\" class=\"device\">";
htmlString+=name;
htmlString+="</div><div class=\"deviceInfo\"><p>Checked out: "
htmlString+=checkout;
htmlString+="</div></p></div></div><br><br>";
}
//Handles if no devices are returned
if(i==0) htmlString+="Couldn't find any devices to show.";
//Place html in body
document.getElementById("devContainer").innerHTML = htmlString;
}
function makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
</script>
</body>
<%@ page import = "database.MySQLAccess,entities.ListedDevice" %>
<%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
MySQLAccess myaccess = new MySQLAccess();
ListedDevice[] mydevices = myaccess.getAllDevices();
//string representation of array.
String deviceString = ListedDevice.arrayToString(mydevices);
//out.println(description);
//out.println(hardware);
%>

<script type=text/javascript>
//gets variables for database data
var devices = makeDeviceArray();
//get all the option buttons
var options = document.getElementsByClassName('option');
options[0].addEventListener('click', showAll);
for(var a = 1; a < options.length; a++){
options[a].addEventListener('click', show);
}
showAll();
function showAll(){
var html = '';
for(var i = 0; i < devices.length; i++){
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div><br><br>';
}
document.getElementById('devContainer').innerHTML = html;
var anchors = document.getElementsByClassName('availableAnchor');
for(var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
var id = anchor.getAttribute('id');
if(devices[id].status != "Available"){
document.getElementById(id).innerHTML = 'Unavailable';
id = '#' + id;
$(id).css({'background-color':'#ff3535'});
}
else{
document.getElementById(id).innerHTML = 'Available';
id = '#' + id;
$(id).css({'background-color':'#1fe07f'});
}
}
}
function show(){
var type = this.getAttribute('data-type');
var html = '';
for(var i = 0; i < devices.length; i++){
if(type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].model) == 0){
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><div class = "availableAnchor" id = "' + (i) + '"></div></div></div><br><br>'
}
}
document.getElementById('devContainer').innerHTML = html;
var anchors = document.getElementsByClassName('availableAnchor');
for(var i = 0; i < anchors.length; i++){
var anchor = anchors[i];
var id = anchor.getAttribute('id');
if(devices[id].status != "Available"){
document.getElementById(id).innerHTML = 'Unavailable';
id = '#' + id;
$(id).css({'background-color':'#ff3535'});
}
else{
document.getElementById(id).innerHTML = 'Available';
id = '#' + id;
$(id).css({'background-color':'#1fe07f'});
}
}
}
//Generates html and writes to 'devContainer' div in JSP
function populateDeviceList(){
//begin empty html
var htmlString="";
//iterate returned devices
for (var i = 0; i < devices.length; i++) {
//get device values
var id = devices[i].id;
var name = devices[i].name;
var hardware = devices[i].hardware;
var checkout = devices[i].checkout;
//HTML representation in divs
htmlString+="<div class=\"deviceContainer\" data-num=\"" + i +"\">";
htmlString+="<input class=\"deviceCheckbox\" type = \"checkbox\" data-num=\"" + i + "\">";
htmlString+="<div><div class=\"imgContainer\"><img src=\"../imgs/my-icons-collection-devices/png/";
htmlString+=hardware;
htmlString+=".png\" class=\"device\">";
htmlString+=name;
htmlString+="</div><div class=\"deviceInfo\"><p>Checked out: "
htmlString+=checkout;
htmlString+="</div></p></div></div><br><br>";
}
//Handles if no devices are returned
if(i==0) htmlString+="Couldn't find any devices to show.";
//Place html in body
document.getElementById("devContainer").innerHTML = htmlString;
}
function makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion src/database/MySQLAccess.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ public ListedDevice[] getAllDevices() throws SQLException, ClassNotFoundExceptio

//iterate result set
while(resultSet.next()){
devices[counter] = new ListedDevice(resultSet.getString("Device_Name"),resultSet.getString("Device_Description"),resultSet.getString("Hardware"),resultSet.getString("Model"));
devices[counter] = new ListedDevice(resultSet.getString("Device_Name"),resultSet.getString("Device_ID"),resultSet.getString("Device_Description"),resultSet.getString("Hardware"), resultSet.getString("Model"),resultSet.getString("Status"));
counter++;
}

Expand Down
8 changes: 7 additions & 1 deletion src/entities/ListedDevice.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,18 @@
*/
public class ListedDevice {
private String Device_Name;
private String Device_ID;
private String Device_Description;
private String Hardware;
private String Model;
public ListedDevice(String name, String desc, String hardware, String model) {
private String Status;
public ListedDevice(String name, String id, String desc, String hardware, String model, String available) {
Device_ID = id;
Device_Name = name;
Device_Description = desc;
Hardware = hardware;
Model = model;
Status = available;
}
/**
* Formatting the device to fit a JSON object.
Expand All @@ -23,8 +27,10 @@ public String toString(){
StringBuilder sb = new StringBuilder();
String comma = ", ";
sb.append("{\"name\": \"").append(Device_Name).append("\"").append(comma);
sb.append("\"id\": \"").append(Device_ID).append("\"").append(comma);
sb.append("\"description\": \"").append(Device_Description).append("\"").append(comma);
sb.append("\"hardware\": \"").append(Hardware).append("\"").append(comma);
sb.append("\"status\": \"").append(Status).append("\"").append(comma);
sb.append("\"model\": \"").append(Model).append("\"");
sb.append("}");
return sb.toString();
Expand Down

0 comments on commit 884e613

Please sign in to comment.