Simple admin page added

WebContent/html/javascript/admin.js

@@ -0,0 +1,126 @@
+var dev1 = {
+	id: 1,
+	name:"George",
+	description:"George is probably the coolest iPhone to exist. Ever. Point blank, period.",
+	hardware:"iphone",
+	software:"apple",
+};
+
+var dev2 = {
+	id: 2,
+	name:"Greyson",
+	description:"Greyson is pretty cool.. I guess.",
+	hardware:"iphone",
+	software:"apple",
+};
+
+var dev3 = {
+	id: 3,
+	name:"Linkin Park",
+	description:'"The hardest part of ending is starting again."',
+	hardware:"ipad",
+	software:"apple",
+};
+
+var dev4 = {
+	id: 4,
+	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 = {
+	id: 5,
+	name:"Hulk",
+	description:"Go ahead and HULK SMASH! this awesome computer stick into your USB.",
+	hardware:"computerStick",
+	software:"intel",
+};
+
+var dev6 = {
+	id: 6,
+	name:"Captain America",
+	description:'"Make America Great Again. Wait, thats someone else.."',
+	hardware:"computerStick",
+	software:"intel",
+};
+
+var devices = [dev1, dev2, dev3, dev4, dev5, dev6];
+
+show();
+
+/**
+This displays all the requested items on the screen.
+**/
+function show(){
+	//get the option that you selected
+	var requested = getRequestedItems();
+	var html = '<p>Please review the device requests below.</p>';
+
+	//iterate through the hardcoded device DB and select all the ones that match the selected option
+	for(var i = 0; i < requested.length; i++){
+		for(var j = 0; j < devices.length; j++){
+			if(requested[i] === devices[j].id){
+				html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + devices[j].hardware + '.png" class = "device">' + devices[j].name + '</div><div class = "deviceDescp"><p>' + devices[j].description + '</p><button class = "approvebutton" id = "button' + (j+1) + '" type="button">Approve Request</button></div></div><br><br>'
+				break;
+			}
+		}
+	}
+
+	if(html.localeCompare("")==0)
+		html = "<p>There are no requests to approve</p>";
+
+	//add to HTML page
+	document.getElementById('devContainer').innerHTML = html;
+
+	//now we need to add event listeners to all the request buttons
+	var approvebuttons = document.getElementsByClassName('approvebutton');
+	for(var i = 0; i < approvebuttons.length; i++){
+		approvebuttons[i].addEventListener('click',approveRequest);
+	}
+}
+
+/**
+This function gets requested items from local storage.
+**/
+function getRequestedItems(){
+	var requested = new Array;									//make new array
+	var requested_str = localStorage.getItem('requested');		//get the string from local storage
+	if(requested_str !== '' && requested_str !== null){			//as long as its not null
+		requested = JSON.parse(requested_str);					//make into array
+	}
+	return requested;											//return value is an array
+}
+
+/**
+This function approves a request!
+**/
+function approveRequest(){
+	var id = this.getAttribute('id');
+	id = parseInt(id.replace(/[^0-9\.]/g,''),10);						//this gets just the numerical value from the id!
+	var unavailable = getUnavailableItems();							//this is an array
+	var requested = getRequestedItems();
+	unavailable.push(id);												//push to bottom of cart
+	localStorage.setItem('unavailable', JSON.stringify(unavailable));
+	for(var j = 0; j < requested.length; j++){							//iterate cart
+		if(requested[j] == id){											//match ids
+			requested.splice(j,1);										//remove from the cart
+			break;
+		}
+	}
+	localStorage.setItem('requested', JSON.stringify(requested));		//update local storage
+	show();
+	$('#approved').fadeIn(1000);
+	$('#approved').fadeIn(1000);
+    $('#approved').fadeOut(1000);
+}
+
+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;
+}

WebContent/html/javascript/shoppingCart.js

@@ -149,14 +149,14 @@ function orderSelected(){
 	if(response == true){														//if they confirm
 		for(var i = 0; i < checked.length; i++){								//iterate all the checked off devices
 			var id = checked[i];												//get the id of each device
-			var unavailable = getUnavailableItems();							//get the unavailable items
+			var requested = getRequestedItems();								//get the unavailable items
 			var cart = getCartItems();											//get the cart
-			unavailable.push(id);												//add to unavailable list
+			requested.push(id);													//add to unavailable list
 			for(var j = 0; j < cart.length; j++){								//iterate cart
 				if(cart[j] == id)												//match id's
 					cart.splice(j,1);											//remove from the cart
 			}
-			localStorage.setItem('unavailable', JSON.stringify(unavailable));	//update local storage
+			localStorage.setItem('requested', JSON.stringify(requested));		//update local storage
 			localStorage.setItem('cart', JSON.stringify(cart));					//update local storage
 		}
 		checked = new Array;													//reset the checked off array
@@ -194,9 +194,9 @@ function orderAll(){
 		var cart = getCartItems();												//get the cart
 		for(var i = 0; i < cart.length; i++){									//iterate the cart
 			var id = cart[i];													//get the id of each device
-			var unavailable = getUnavailableItems();							//get the unavailable items
-			unavailable.push(id);												//add to unavailable list
-			localStorage.setItem('unavailable', JSON.stringify(unavailable));	//update local storage
+			var requested = getRequestedItems();								//get the unavailable items
+			requested.push(id);													//add to unavailable list
+			localStorage.setItem('requested', JSON.stringify(requested));		//update local storage
 		}
 		checked = new Array;													//reset the checked off array
 		cart = new Array;														//cart should now be empty, so reset also
@@ -219,13 +219,13 @@ function deleteAll(){
 }
 
 /**
-This function gets unavailable items from local storage.
+This function gets requested items from local storage.
 **/
-function getUnavailableItems(){
-	var unavailable = new Array;								//make new array
-	var unavailable_str = localStorage.getItem('unavailable');	//get the string from local storage
-	if(unavailable_str !== '' && unavailable_str !== null){								//as long as its not null
-		unavailable = JSON.parse(unavailable_str);				//make into array
+function getRequestedItems(){
+	var requested = new Array;									//make new array
+	var requested_str = localStorage.getItem('requested');		//get the string from local storage
+	if(requested_str !== '' && requested_str !== null){			//as long as its not null
+		requested = JSON.parse(requested_str);					//make into array
 	}
-	return unavailable;											//return value is an array
+	return requested;											//return value is an array
 }

WebContent/html/webpages/admin.html

@@ -0,0 +1,83 @@
+<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/3.1.1/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">
+    <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
+    <style>
+    div.deviceContainer{
+      border: solid; 
+      border-width: thin; 
+      padding: 15px;
+      background-color: #E9EAEB;
+      display: inline-block;
+    }
+
+    div.imgContainer{
+      display: inline-block; 
+      text-align: center;
+    }
+
+    img.device{
+      display: block;
+    }
+
+    div.deviceDescp{
+      display: inline-block; 
+      width: 200px; 
+      text-align: center; 
+    }
+
+    button.approvebutton{
+      display: block; 
+      margin: auto;
+    }
+
+    div.approveConfirm{
+      display: none;
+      top: 50%;
+      left: 50%;
+      position: fixed;
+      width: 155px;
+      height: 85px;
+      line-height: 85px;
+      text-align: center;
+      background-color: #FBC600;
+      border: solid;
+      border-color: #3B3C43;
+      border-radius: 5px;
+    }
+
+    div.displayDevice{
+      left: 0px;
+    }
+    </style>
+  </head>
+
+  <body>
+    <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
+    </nav>
+
+    <div class = "displayDevice">
+      <h2>Admin View Approvals</h2>
+		  <div id = "devContainer"></div>   
+	  </div>
+
+    <div class = "approveConfirm" id = "approved">
+    <p>Approved!</p>
+    </div>
+
+	  <script src="../javascript/admin.js"></script>
+    <script src = "../javascript/navbar.js"></script>
+  </body>
+</html>