Skip to content

John's super fun branch #32

Merged
merged 4 commits into from
Mar 23, 2017
Merged

John's super fun branch #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
884e613
availability done, most local code removed
jic13003 Mar 3, 2017
2c43d0b
the listing page filtering works, shoutouts to adam for the help
jic13003 Mar 6, 2017
cf6a423
request page done, localstorage issue fixed
jic13003 Mar 23, 2017
74a2129
merge conflict fixed
jic13003 Mar 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
309 changes: 127 additions & 182 deletions WebContent/html/javascript/listing.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,183 +1,128 @@
<%@ 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('checkboxes');
var hardwareOptions = document.getElementsByClassName('hw-data-type');
var softwareOptions = document.getElementsByClassName('sw-data-type');
//options[0].addEventListener('click', showAll);
for(var a = 0; a < hardwareOptions.length; a++){
hardwareOptions[a].addEventListener('click', show);
}
for(var a = 0; a < softwareOptions.length; a++){
softwareOptions[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 = '';
var activeHOptions = [];
var activeSOptions = [];
for(var i = 0; i < hardwareOptions.length; i++) {
if (hardwareOptions[i].checked == true) {
activeHOptions.push(hardwareOptions[i].getAttribute("data-type"));
}
}
for(var i = 0; i < softwareOptions.length; i++) {
if (softwareOptions[i].checked == true) {
activeSOptions.push(softwareOptions[i].getAttribute("data-type"));
}
}
for(var i = 0; i < devices.length; i++){
var hardwareMatch = false;
var softwareMatch = false;
for(var j = 0; j < activeHOptions.length; j++) {
if (activeHOptions[j] == devices[i].hardware){
hardwareMatch = true;
}
}
if (activeHOptions.length == 0) {
hardwareMatch = true;
}
for(var j = 0; j < activeSOptions.length; j++) {
if (activeSOptions[j] == devices[i].manufacturer){
softwareMatch = true;
}
}
if (activeSOptions.length == 0) {
softwareMatch = true;
}
if(hardwareMatch == true && softwareMatch == true){
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 makeDeviceArray(){
window.json = '<%=deviceString%>';
return JSON.parse(window.json);
}
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion WebContent/html/javascript/navbar.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading