Added Listing Webpage

arc12012 · Nov 16, 2016 · 0cbf9e5 · 0cbf9e5
1 parent 80d8ed1
commit 0cbf9e5
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 12 deletions.
diff --git a/html/javascript/listing.js b/html/javascript/listing.js
@@ -56,7 +56,7 @@ function show(){
 
 	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><button class = "request" type="button">Order device</button></div></div><br>'
+			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></div><br>'
 		}
 	}
 

diff --git a/html/javascript/request.js b/html/javascript/request.js
@@ -0,0 +1,64 @@
+//get all the option buttons
+var options = document.getElementsByClassName('option');
+
+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];
+
+for(var a = 0; a < options.length; a++){
+	var type = options[a].getAttribute('data-type');
+	options[a].addEventListener('click', show);
+}
+
+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><button class = "request" type="button">Order device</button></div></div><br>'
+		}
+	}
+
+	document.getElementById('devContainer').innerHTML = html;
+}
diff --git a/html/webpages/homePage.html b/html/webpages/homePage.html
@@ -56,7 +56,7 @@
             <li><a href="homePage.html">Home</a></li>
             <li><a href="requestPage.html">Request Device</a></li>
             <li><a href="#">Return Device</a></li>
-            <li><a href="#">Device Listing</a></li>
+            <li><a href="listingPage.html">Device Listing</a></li>
             <li><a href="#">User Information</a></li>
           </ul>
         </div>
@@ -66,21 +66,23 @@
     <div class = "menuBox">
       <div>
 		<a class = "divlink" href = "requestPage.html">
-        <div class = "menuOption">
-          <h2>Request</h2>
-          <p>Check out our selection of devices that YOU have the chance to check out!</p>  
-        </div>
+			<div class = "menuOption">
+			  <h2>Request</h2>
+			  <p>Check out our selection of devices that YOU have the chance to check out!</p>  
+			</div>
 		</a>
-        <div class = "menuOption">
-          <h2>Return</h2>
-          <p>All set with a device? No problem! You can return it here!</p>   
-        </div>  
+		<div class = "menuOption">
+		  <h2>Return</h2>
+		  <p>All set with a device? No problem! You can return it here!</p>   
+		</div> 
       </div>
       <div>
+		<a class = "divlink" href = "listingPage.html">
           <div class = "menuOption">
             <h2>All Items</h2>
             <p>Just curious to see what devices we have to offer? You've come to the right place.</p>   
           </div>
+		</a>
         <div class = "menuOption">
           <h2>Data</h2>
           <p>Interested in statistics related to this service? Check out this link!</p>

diff --git a/html/webpages/listingPage.html b/html/webpages/listingPage.html
@@ -0,0 +1,105 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Synchrony Financial</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>
+    <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
+    <style>
+    div.displayDevice{
+        display: inline-block; 
+        position: absolute; 
+        padding-left: 30px;
+    }
+
+    div.deviceContainer{
+      border: solid; 
+      border-width: thin; 
+      padding: 15px;
+      background-color: #E9EAEB;
+    }
+
+    div.imgContainer{
+      display: inline-block; 
+      text-align: center;
+    }
+
+    img.device{
+      display: block;
+    }
+
+    div.deviceDescp{
+      display: inline-block; 
+      width: 200px; 
+      text-align: center; 
+      vertical-align: center;
+    }
+
+    div.sidebar{
+      display: inline-block; 
+      border-right-style: solid; 
+      height: 100%; 
+      width: 200px;
+      background-color: #E9EAEB;
+    }
+
+    ul.nav{
+      padding: 0px;
+    }
+    </style>
+  </head>
+
+  <body>
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#"><img src="../imgs/synchrony-financial-logo-dlpx.png" style = "height: 100%"></a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="homePage.html">Home</a></li>
+            <li><a href="requestPage.html">Request Device</a></li>
+            <li><a href="#">Return Device</a></li>
+            <li><a href="listingPage.html">Device Listing</a></li>
+            <li><a href="#">User Information</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <div class="col-sm-3 col-md-2 sidebar">
+          <ul class="nav nav-sidebar">
+            <h4>Device Options</h4>
+            <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>
+          </ul>
+          <br>
+          <ul class="nav nav-sidebar">
+            <h4>Operating Systems</h4>
+            <li class = "option" data-type = "intel"><a href="#">Intel</a></li>
+            <li class = "option" data-type = "apple"><a href="#">Apple</a></li>
+          </ul>
+    </div>
+
+    <div class = "displayDevice">
+          <h2>Available Devices</h2>
+		  <div id = "devContainer"></div>   
+	  </div>
+
+	  <script src="../javascript/listing.js"></script>
+  </body>
+</html>
diff --git a/html/webpages/requestPage.html b/html/webpages/requestPage.html
@@ -79,7 +79,7 @@
             <li><a href="homePage.html">Home</a></li>
             <li><a href="requestPage.html">Request Device</a></li>
             <li><a href="#">Return Device</a></li>
-            <li><a href="#">Device Listing</a></li>
+            <li><a href="listingPage.html">Device Listing</a></li>
             <li><a href="#">User Information</a></li>
           </ul>
         </div>
@@ -105,6 +105,6 @@ <h2>Available Devices</h2>
 		  <div id = "devContainer"></div>   
 	  </div>
 
-	  <script src="../javascript/listing.js"></script>
+	  <script src="../javascript/request.js"></script>
   </body>
 </html>