Skip to content

Commit

Permalink
got the listed devices page to show all devices
Browse files Browse the repository at this point in the history
  • Loading branch information
@jic13003
jic13003 committed Feb 24, 2017
1 parent f72173c commit fb681c7
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 248 deletions.
232 changes: 44 additions & 188 deletions WebContent/html/javascript/listing.jsp
View file
Original file line number Diff line number Diff line change
@@ -1,178 +1,4 @@
<<<<<<< HEAD
<%@ page import = "database.MySQLAccess" %>
<%@ 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();
myaccess.connectDB();
String name = myaccess.getResult()[0][0];
String description = myaccess.getResult()[0][1];
String hardware = myaccess.getResult()[0][2];*/
//out.println(name);
//out.println(description);
//out.println(hardware);
%>

<script type=text/javascript>
//gets variables for database data
<%
/*(function(){
window.myname = "<=name>" ; --> add percents to make them work in the name box things
window.mydesc = "<=description>" ;
window.myhard = "<=hardware>" ;
})(); */
%>
//get all the option buttons
var options = document.getElementsByClassName('option');
/*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];
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/' + 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;
}
</script>
</body>
=======
<%@ page import = "database.MySQLAccess" %>
<%@ 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">
Expand All @@ -184,32 +10,29 @@ function isUnavailable(id){
<body>
<%
MySQLAccess myaccess = new MySQLAccess();
myaccess.connectDB();
String name = myaccess.getResult()[0][0];
String description = myaccess.getResult()[0][1];
String hardware = myaccess.getResult()[0][2];
System.out.println(name);
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
/*(function(){
window.myname = "<=name>" ; --> add percents to make them work in the name box things
window.mydesc = "<=description>" ;
window.myhard = "<=hardware>" ;
})(); */
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.",
Expand Down Expand Up @@ -247,6 +70,8 @@ var dev6 = {
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);
Expand Down Expand Up @@ -321,7 +146,38 @@ function isUnavailable(id){
}
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>
>>>>>>> refs/remotes/origin/master
</html>
Loading

0 comments on commit fb681c7

Please sign in to comment.