Shopping cart

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+1) + '" 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+1))
+				return 1;
+		}
+	}
+	return 0;
 }

html/javascript/shoppingCart.js

@@ -0,0 +1,228 @@
+//here are all the hardcoded devices
+
+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];										//put them all into an array
+var checked = new Array;																//this is the array that will indicate whether a shopping cart item is checked off or not
+
+//adding event listeners to all the options, such as ordering and deleting
+document.getElementById('os').addEventListener('click',orderSelected);
+document.getElementById('ds').addEventListener('click',deleteSelected);
+document.getElementById('oa').addEventListener('click',orderAll);
+document.getElementById('da').addEventListener('click',deleteAll);
+
+show();																					//on load, we want to show everything
+
+function getCartItems(){
+    var cart = new Array;							//initiate array for them
+    var cart_str = localStorage.getItem('cart');	//get them from local storage
+    if (cart_str !== null) {						//if there is at least one object already we need to convert it from JSON to string
+        cart = JSON.parse(cart_str); 
+    }
+    return cart;									//return value is an array
+}
+
+/**
+This function displays a list of devices that a user has currently in their shopping cart.
+**/
+function show(){
+	var cart = getCartItems();												//get all the cart items you want to show
+	var html = '';															//html string initially empty
+	if(cart.length !== 0){													//only continue if there are cart items
+		for(var i = 0; i < cart.length; i++){								//iterate cart
+			var id = cart[i];												//this gets the id value from the cart
+			for(var j = 0; j < devices.length; j++){						//iterate device list
+				if(devices[j].id === id){									//match the id's
+					html += '<div> <input class = "deviceCheckbox" type = "checkbox" id = "' + id + '"> </input><a class = "divlink" href = "#"><div id = "ticket' + id +'" class = "ticket"><p class = "tickettext">' + devices[j].name + '</p></div></a></div>';	//create listing of all the devices
+					break;													//break out of loop when we match
+				}
+			}
+		}
+	}
+	else{																	//no point in doing all that computing if the list is empty
+		html += 'Shopping cart is empty.';									//so give a nice error message.
+	}
+
+	document.getElementById('shoppingContainer').innerHTML = html;			//adds what we just generated to the webpage
+
+	var checkboxes = document.getElementsByClassName('deviceCheckbox');		//get all the checkboxes we just placed!
+	for(var i = 0; i < checkboxes.length; i++){								//iterate them
+		checkboxes[i].addEventListener('click',changeStatus);				//when we click on a checkbox, it should add/remove the id from the selected array
+	}
+
+	var tickets = document.getElementsByClassName('ticket');
+	for(var i = 0; i < tickets.length; i++){
+		tickets[i].addEventListener('click',clickTicket);
+	}
+}
+
+/**
+This allows a ticket click to do the same thing as clicking on the checkbox.
+**/
+function clickTicket(){
+	var checkboxes = document.getElementsByClassName('deviceCheckbox');
+	var id = this.getAttribute('id');
+	id = parseInt(id.replace(/[^0-9\.]/g,''),10);
+	if(document.getElementById(id).checked == true){
+		document.getElementById(id).checked = false;
+		for(var i = 0; i < checked.length; i++){							//iterate checked array
+			if(id == checked[i])											//find the right checkbox
+				checked.splice(i,1);										//remove from the array
+		}
+	}
+	else{
+		document.getElementById(id).checked = true;
+		checked.push(id);
+	}
+}
+
+/**
+When a checkbox is clicked, either a device needs to be checked or unchecked in the shopping cart. This function handles JUST that.
+**/
+function changeStatus(){
+	var id = this.getAttribute('id');										//get the checkbox's id
+	if(this.checked == true){												//we just checked it off
+		checked.push(id);													//add item to the selected list
+	}
+	else{																	//we just unchecked it
+		for(var i = 0; i < checked.length; i++){							//iterate checked array
+			if(id == checked[i])											//find the right checkbox
+				checked.splice(i,1);										//remove from the array
+		}
+	}
+}
+
+/**
+This function takes all the devices we selected and simulates an order on them.
+**/
+function orderSelected(){
+	var response = confirm("Are you sure you'd like to order the selected items?");
+	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 cart = getCartItems();											//get the cart
+			unavailable.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('cart', JSON.stringify(cart));					//update local storage
+		}
+		checked = new Array;													//reset the checked off array
+		show();																	//reload the container
+	}
+}
+
+/**
+This function takes all the devices we selected and removes them from the shopping cart.
+**/
+function deleteSelected(){
+	var response = confirm("Are you sure you'd like to remove the selected items from the cart?");
+	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 cart = getCartItems();								//get the cart
+			for(var j = 0; j < cart.length; j++){					//iterate cart
+				if(cart[j] == id){									//match ids
+					cart.splice(j,1);								//remove from the cart
+				}
+			}
+			localStorage.setItem('cart', JSON.stringify(cart));		//update local storage
+		}
+		checked = new Array;										//reset the checked array
+		show();														//reload the container
+	}
+}
+
+/**
+This function takes all devices in the shopping cart and orders them.
+**/
+function orderAll(){
+	var response = confirm("Are you sure you'd like to order the selected items?");
+	if(response == true){														//if they confirm
+		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
+		}
+		checked = new Array;													//reset the checked off array
+		cart = new Array;														//cart should now be empty, so reset also
+		localStorage.setItem('cart',JSON.stringify(cart));						//update local storage
+		show();																	//reload container
+	}
+}
+
+/**
+This function takes all devices in the shopping cart and deletes them.
+**/
+function deleteAll(){
+	var response = confirm("Are you sure you'd like to order the selected items?");
+	if(response == true){										//if they confirm
+		cart = new Array;										//empty cart
+		localStorage.setItem('cart',JSON.stringify(cart));		//update local storage
+		checked = new Array;									//reset the checked off array
+		show();													//reload container
+	}													
+}
+
+/**
+This function gets unavailable 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 !== null){								//as long as its not null
+		unavailable = JSON.parse(unavailable_str);				//make into array
+	}
+	return unavailable;											//return value is an array
+}