Implementing the request button

html/javascript/request.js

@@ -2,63 +2,139 @@
 var options = document.getElementsByClassName('option');
 
 var dev1 = {
+	id: 1,
 	name:"George",
 	description:"George is probably the coolest iPhone to exist. Ever. Point blank, period.",
 	hardware:"iphone",
-	software:"apple"
+	software:"apple",
 };
 
 var dev2 = {
+	id: 2,
 	name:"Greyson",
 	description:"Greyson is pretty cool.. I guess.",
 	hardware:"iphone",
-	software:"apple"
+	software:"apple",
 };
 
 var dev3 = {
+	id: 3,
 	name:"Linkin Park",
 	description:'"The hardest part of ending is starting again."',
 	hardware:"ipad",
-	software:"apple"
+	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"
+	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"
+	software:"intel",
 };
 
 var dev6 = {
+	id: 6,
 	name:"Captain America",
 	description:'"Make America Great Again. Wait, thats someone else.."',
 	hardware:"computerStick",
-	software:"intel"
+	software:"intel",
 };
 
 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);
 }
 
+//when an option is selected, show a new list of devices based on what the user asked for
 function show(){
+	//get the option that you selected
 	var type = this.getAttribute('data-type');
 	var html = '';
 
+	//iterate through the hardcoded device DB and select all the ones that match the selected option
 	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>'
+		if((type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0)) && !isUnavailable(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><button class = "requestbutton" id = "button' + i + '" type="button">Order device</button></div></div><br>'
 		}
 	}
 
+	//add to HTML page
 	document.getElementById('devContainer').innerHTML = html;
+
+	//now we need to add event listeners to all the request buttons
+	var requestbuttons = document.getElementsByClassName('requestbutton');
+	for(var i = 0; i < requestbuttons.length; i++){
+		requestbuttons[i].addEventListener('click',addToCart);
+	}
+}
+
+function addToCart(){
+	var id = this.getAttribute('id');
+	id = parseInt(id.replace(/[^0-9\.]/g,''),10);	//this gets just the numerical value from the id!
+	if(!inCart(id)){								//if not in the cart
+		var cart = getCartItems();					//this is an array
+		cart.push(id);								//push to bottom of cart
+		localStorage.setItem('cart', JSON.stringify(cart));
+	}
+	else
+		alert("That item is already in your cart!");
+}
+
+function inCart(id){
+	var cart = getCartItems();
+	if(cart.length == 0)	//if nothing's in the cart 
+		return 0;
+	else{ 					//something is in the cart
+		for(var i = 0; i < cart.length; i++){
+			if(cart[i] === id)
+				return 1;
+		}
+	}
+	return 0;	
+}
+
+function getCartItems(){
+	//initiate array for them
+    var cart = new Array;
+	//get them from local storage
+    var cart_str = localStorage.getItem('cart');
+	//if there is at least one object already we need to convert it from JSON to string
+    if (cart_str !== null) {
+        cart = JSON.parse(cart_str);
+    }
+    return cart;
+}
+
+function getUnavailableItems(){
+	var unavailable = new Array;
+	var unavailable_str = localStorage.getItem('unavailable');
+	if(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;
 }