diff --git a/html/javascript/request.js b/html/javascript/request.js
index f0a7022..85435d3 100644
--- a/html/javascript/request.js
+++ b/html/javascript/request.js
@@ -65,8 +65,8 @@ function show(){
//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)) && !isUnavailable(i){
- html += '
'
}
}
@@ -132,7 +132,7 @@ function isUnavailable(id){
return 0;
else{
for(var i = 0; i < unavailable.length; i++){
- if(unavailable[i] === id)
+ if(unavailable[i] == (id+1))
return 1;
}
}
diff --git a/html/javascript/shoppingCart.js b/html/javascript/shoppingCart.js
index 75f631e..990feb4 100644
--- a/html/javascript/shoppingCart.js
+++ b/html/javascript/shoppingCart.js
@@ -1,3 +1,8 @@
+//here are all the hardcoded devices
+
+var array = new Array;
+localStorage.setItem('unavailable',JSON.stringify(array));
+
var dev1 = {
id: 1,
name:"George",
@@ -46,43 +51,156 @@ var dev6 = {
software:"intel",
};
-var devices = [dev1, dev2, dev3, dev4, dev5, dev6];
+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(){
- //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) {
+ 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 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();
- var html = '';
- if(cart.length !== 0){
- for(var i = 0; i < cart.length; i++){
- var id = cart[i]; //this gets the id value from the cart
- for(int j = 0; j < devices.length; j++){ //iterate device list
- if(devices[j].id === id){ //match the id's
+ 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 += '
' + devices[j].name + '
'; //create listing of all the devices
- break; //break out of loop when we match
+ break; //break out of loop when we match
}
}
}
}
- else{
- html += 'Shopping cart is empty.';
+ 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
+ }
+}
+
+/**
+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
}
+}
- document.getElementById('shoppingContainer').innerHTML = html; //adds what we just generated to the webpage
+/**
+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
+ }
+}
- var checkboxes = document.getElementsByClassName('deviceCheckbox'); //get all the checkboxes we just placed!
- for(int i = 0; i < checkboxes.length; i++){
- checkboxes[i].addEventListener('click',addToSelected); //when we click on a checkbox, it should add that item to the selected local storage
+/**
+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/shoppingCart.html b/html/webpages/shoppingCart.html
index 3a627de..be49018 100644
--- a/html/webpages/shoppingCart.html
+++ b/html/webpages/shoppingCart.html
@@ -26,6 +26,12 @@
ul.nav{
padding: 0px;
}
+
+ div.displayDevice{
+ display: inline-block;
+ position: absolute;
+ padding-left: 30px;
+ }
@@ -64,8 +70,11 @@
' + devices[i].name + '