Skip to content

Commit

Permalink
Merge pull request #1 from arc12012/shopping_cart
Browse files Browse the repository at this point in the history 
Shopping cart
  • Loading branch information
@clj13001
clj13001 committed Nov 29, 2016
2 parents 4f84080 + 5adee7c commit 9b2fc6d
Show file tree
Hide file tree
Showing 7 changed files with 429 additions and 31 deletions.
Binary file added html/imgs/ticket.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 84 additions & 8 deletions html/javascript/request.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
228 changes: 228 additions & 0 deletions html/javascript/shoppingCart.js
View file
Original file line number Diff line number Diff line change
@@ -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
}
Loading

0 comments on commit 9b2fc6d

Please sign in to comment.