From b371e2af8f2aa59bbb7eaa8ab8214195a0bacff9 Mon Sep 17 00:00:00 2001
From: Connor L Jackson <connor.jackson@uconn.edu>
Date: Sat, 3 Dec 2016 17:54:41 -0500
Subject: [PATCH] More polishing.

Done for the night! Success!
---
 html/css/stylesheet.css        |  1 +
 html/javascript/listing.js     | 34 +++++++++++++++++++++++++++++++---
 html/javascript/request.js     |  4 +++-
 html/webpages/listingPage.html |  3 ++-
 html/webpages/requestPage.html |  2 +-
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/html/css/stylesheet.css b/html/css/stylesheet.css
index 022a40a..c6e2cb0 100644
--- a/html/css/stylesheet.css
+++ b/html/css/stylesheet.css
@@ -2,6 +2,7 @@ body{
 	background-color: #94969A;
 	padding-top: 50px;
 	height: 100vh;
+    overflow-x: hidden;
 }
 
 a.divlink{
diff --git a/html/javascript/listing.js b/html/javascript/listing.js
index 7fd2d55..5d1c0bc 100644
--- a/html/javascript/listing.js
+++ b/html/javascript/listing.js
@@ -44,12 +44,40 @@ var dev6 = {
 };
 
 var devices = [dev1, dev2, dev3, dev4, dev5, dev6];
-
-for(var a = 0; a < options.length; a++){
-	var type = options[a].getAttribute('data-type');
+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 = '';
diff --git a/html/javascript/request.js b/html/javascript/request.js
index 4efcdf7..6279c41 100644
--- a/html/javascript/request.js
+++ b/html/javascript/request.js
@@ -53,7 +53,6 @@ var devices = [dev1, dev2, dev3, dev4, dev5, dev6];
 
 //add event listeners to the options in the left sidebar
 for(var a = 0; a < options.length; a++){
-	var type = options[a].getAttribute('data-type');
 	options[a].addEventListener('click', show);
 }
 
@@ -70,6 +69,9 @@ function show(){
 		}
 	}
 	
+	if(html.localeCompare("")==0)
+		html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
+
 	//add to HTML page
 	document.getElementById('devContainer').innerHTML = html;
 
diff --git a/html/webpages/listingPage.html b/html/webpages/listingPage.html
index 45d2e60..4a86942 100644
--- a/html/webpages/listingPage.html
+++ b/html/webpages/listingPage.html
@@ -54,6 +54,7 @@
     <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
             <h4>Device Options</h4>
+            <li class = "option" data-type = "all"><a href="#">Show All Devices</a></li>
             <li class = "option" data-type = "iphone"><a href="#">iPhones</a></li>
             <li class = "option" data-type = "ipad"><a href="#">iPad</a></li>
             <li class = "option" data-type = "computerStick"><a href="#">Computer Sticks</a></li>
@@ -67,7 +68,7 @@ <h4>Operating Systems</h4>
     </div>
 
     <div class = "displayDevice">
-          <h2>Available Devices</h2>
+          <h2>Device Dictionary</h2>
 		  <div id = "devContainer"></div>   
 	  </div>
 	
diff --git a/html/webpages/requestPage.html b/html/webpages/requestPage.html
index 3326433..e5c4d54 100644
--- a/html/webpages/requestPage.html
+++ b/html/webpages/requestPage.html
@@ -80,7 +80,7 @@ <h4>Operating Systems</h4>
 
     <div class = "displayDevice">
       <h2>Available Devices</h2>
-		  <div id = "devContainer"></div>   
+		  <div id = "devContainer"><p>Choose an option to the left to begin requesting!</p></div>   
 	  </div>
 
     <div class = "cartConfirm" id = "added">