diff --git a/html/imgs/ticket.png b/html/imgs/ticket.png
new file mode 100644
index 0000000..a0387e2
Binary files /dev/null and b/html/imgs/ticket.png differ
diff --git a/html/javascript/request.js b/html/javascript/request.js
index b27d54e..85435d3 100644
--- a/html/javascript/request.js
+++ b/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 += '
'
}
}
+ //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;
}
\ No newline at end of file
diff --git a/html/javascript/shoppingCart.js b/html/javascript/shoppingCart.js
new file mode 100644
index 0000000..c79b018
--- /dev/null
+++ b/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 += '
'; //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
+}
\ No newline at end of file
diff --git a/html/webpages/homePage.html b/html/webpages/homePage.html
index 53169bf..06d3f64 100644
--- a/html/webpages/homePage.html
+++ b/html/webpages/homePage.html
@@ -57,7 +57,7 @@
' + devices[i].name + '