diff --git a/source/CreatePage.html b/source/CreatePage.html index 64dfe78..bc37e7a 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -14,12 +14,13 @@ - - + + +
Pic: @@ -69,8 +70,7 @@
- - +
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 74b6365..c790b4e 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -19,6 +19,7 @@
+
diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js new file mode 100644 index 0000000..f334be6 --- /dev/null +++ b/source/assets/scripts/CreatePage.js @@ -0,0 +1,78 @@ +window.addEventListener("DOMContentLoaded", init); + +function init() { + // get next id + + // creates the key + initFormHandler(); + +} + +function initFormHandler() { + + //accessing form components + let tagContainer = document.getElementById("tag-container-form"); + let form = document.querySelector("form"); + + form.addEventListener("submit", function(e){ + /* + * User submits the form for their review. + * We create reviewCard and put in storage + */ + e.preventDefault(); + let formData = new FormData(form); + let reviewObject = {}; + for (let [key, value] of formData) { + console.log(`${key}`); + console.log(`${value}`); + if (`${key}` !== "tag-form") { + reviewObject[`${key}`] = `${value}`; + } + } + reviewObject["tags"] = []; + + let tags = document.querySelectorAll(".tag"); + for(let i = 0; i < tags.length; i ++) { + reviewObject["tags"].push(tags[i].innerHTML); + tagContainer.removeChild(tags[i]); + } + + //grabbing the nextID, and putting our review object in storage associated with the ID + let nextReviewId = JSON.parse(localStorage.getItem("nextID")); + reviewObject["reviewID"] = nextReviewId; + + localStorage.setItem("review"+nextReviewId, JSON.stringify(reviewObject)); + sessionStorage.setItem("currID", JSON.stringify(nextReviewId)); + + //updating our activeIDS list + let tempIdArr = JSON.parse(localStorage.getItem("activeIDS")); + tempIdArr.push(nextReviewId); + localStorage.setItem("activeIDS", JSON.stringify(tempIdArr)); + + + //increment nextID for next review creation + nextReviewId++; + localStorage.setItem("nextID", JSON.stringify(nextReviewId)); + + window.location.assign('./ReviewDetails.html'); + + }); + + let tagAddBtn = document.getElementById("tagAdd"); + tagAddBtn.addEventListener("click", ()=> { + let tagField = document.getElementById("tag-form"); + if (tagField.value.length > 0) { + let tagLabel = document.createElement("label"); + tagLabel.innerHTML = tagField.value; + tagLabel.setAttribute("class","tag"); + tagLabel.addEventListener("click",()=> { + tagContainer.removeChild(tagLabel); + }); + + tagContainer.append(tagLabel); + tagField.value = ""; + + } + }); + +} diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 07df6a6..d7bd1ce 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -6,7 +6,6 @@ class ReviewCard extends HTMLElement { constructor() { super(); - let shadowEl = this.attachShadow({mode:"open"}); let articleEl = document.createElement("article"); @@ -88,9 +87,9 @@ class ReviewCard extends HTMLElement { //attach event listener to each recipe-card this.addEventListener("click", (event) => { console.log(event.target); - console.log(event.target.data); + console.log(event.target.reviewId); //Option 1: sending current data to second html page using localStorage (could also just store index) - sessionStorage.setItem("current", JSON.stringify(event.target.data)); + sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID)); window.location.assign("./ReviewDetails.html"); /* //Option 2: sending current data to second html page using string query w/ url (currently not storing value) @@ -133,12 +132,18 @@ class ReviewCard extends HTMLElement { let articleEl = this.shadowEl.querySelector("article"); // setting the article elements for the review card + this.reviewID = data["reviewID"]; //image setup let mealImg = document.createElement("img"); mealImg.setAttribute("id", "a-mealImg"); - mealImg.setAttribute("src",data["mealImg"]); mealImg.setAttribute("alt",data["imgAlt"]); + if(data["mealImg"] != ""){ + mealImg.setAttribute("src",data["mealImg"]); + } + else{ + mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); + } //meal name setup let mealLabel = document.createElement("label"); @@ -147,26 +152,6 @@ class ReviewCard extends HTMLElement { mealLabel.innerHTML = data["mealName"]; //restaurant name setup - /* - //review page link - //giving it functionality to save the review card's info to session storage for loading the review page - let reviewLink = document.createElement('a'); - reviewLink.setAttribute('href','./review.html') - reviewLink.innerHTML = 'review page' - reviewLink.addEventListener('click', () => { - sessionStorage.clear(); - let currReview = { - "imgSrc": data['imgSrc'], - "imgAlt": data['imgAlt'], - "mealName": data['mealName'], - "restaurant": data['restaurant'], - "comments": data['comments'], - "rating": data['rating'], - "tags": data['tags'] - } - sessionStorage.setItem('currReview', JSON.stringify(currReview)); - }); -*/ let restaurantLabel = document.createElement("label"); restaurantLabel.setAttribute("id", "a-restaurant"); restaurantLabel.setAttribute("class","restaurant-name"); @@ -197,14 +182,15 @@ class ReviewCard extends HTMLElement { for (let i = 0; i < data["tags"].length; i++) { let newTag = document.createElement("label"); newTag.setAttribute("class","tag"); - newTag.innerHTML = data["tags"][i] + " "; + newTag.innerHTML = data["tags"][i]; tagContainer.append(newTag); } } + //adding final ID to data! + articleEl.append(mealImg); articleEl.append(mealLabel); - //articleEl.append(reviewLink) articleEl.append(restaurantLabel); articleEl.append(ratingDiv); articleEl.append(tagContainer); @@ -237,6 +223,7 @@ class ReviewCard extends HTMLElement { let dataContainer = {}; // getting the article elements for the review card + dataContainer["reviewID"] = this.reviewID; //get image let mealImg = this.shadowEl.getElementById("a-mealImg"); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index 8447ebe..70a0b2d 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -11,23 +11,18 @@ function init(){ function setupDelete(){ let deleteBtn = document.getElementById("delete-btn"); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem("current")); + let currID = JSON.parse(sessionStorage.getItem("currID")); + let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); deleteBtn.addEventListener("click", function(){ if(window.confirm("Are you sure you want to delete this entry?")){ - //delete function - if(current){ - console.log(current); - for(let i = 0; i < reviews.length; i++){ - console.log(reviews[i]); - if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){ - console.log("match found"); - reviews.splice(i,1); - saveReviewsToStorage(reviews); - sessionStorage.removeItem("current"); - window.location.assign("./index.html"); - break; - } + for (let i in activeIDS) { + if (activeIDS[i] == currID) { + activeIDS.splice(i,1); + localStorage.setItem('activeIDS', JSON.stringify(activeIDS)); + sessionStorage.removeItem('currID'); + localStorage.removeItem(`review${currID}`); + window.location.assign("./index.html"); + break; } } } @@ -36,30 +31,31 @@ function setupDelete(){ function setupUpdate(){ let updateBtn = document.getElementById("update-btn"); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem("current")); + let currID = JSON.parse(sessionStorage.getItem("currID")); + let currReview = JSON.parse(localStorage.getItem(`review${currID}`)); let form = document.getElementById("update-food-entry"); updateBtn.addEventListener("click", function(){ //update function - if(current){ - console.log(current); + if(currReview){ form.style.display = "block"; let tagContainer = document.getElementById("tag-container-form"); - console.log(document.querySelectorAll("#update-food-entry input")); //Set value of each input element to current's values - document.getElementById("mealImg").defaultValue = current["mealImg"]; - document.getElementById("imgAlt").defaultValue = current["imgAlt"]; - document.getElementById("mealName").defaultValue = current["mealName"]; - document.getElementById("comments").textContent = current["comments"]; - document.getElementById("rating-" + `${current["rating"]}`).checked = true; - document.getElementById("restaurant").defaultValue = current["restaurant"]; + document.getElementById("mealImg").defaultValue = currReview["mealImg"]; + document.getElementById("imgAlt").defaultValue = currReview["imgAlt"]; + document.getElementById("mealName").defaultValue = currReview["mealName"]; + document.getElementById("comments").textContent = currReview["comments"]; + document.getElementById("s" + `${currReview["rating"]}`).checked = true; + document.getElementById("restaurant").defaultValue = currReview["restaurant"]; - if(current["tags"]){ - for (let i = 0; i < current["tags"].length; i++) { + if(currReview["tags"]){ + while (tagContainer.firstChild) { + tagContainer.removeChild(tagContainer.firstChild); + } + for (let i = 0; i < currReview["tags"].length; i++) { let newTag = document.createElement("label"); newTag.setAttribute("class","tag"); - newTag.innerHTML = current["tags"][i] + " "; + newTag.innerHTML = currReview["tags"][i]; newTag.addEventListener("click",()=> { tagContainer.removeChild(newTag); }); @@ -89,16 +85,10 @@ function setupUpdate(){ tagContainer.removeChild(tags[i]); } - for(let i = 0; i < reviews.length; i++){ - console.log(reviews[i]); - if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){ - console.log("match found"); - reviews.splice(i,1,newData); - saveReviewsToStorage(reviews); - sessionStorage.setItem("current", JSON.stringify(newData)); - break; - } - } + newData["reviewID"] = currID; + + + localStorage.setItem("review"+currID, JSON.stringify(newData)); form.style.display = "none"; diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js index 48fc891..f160d1d 100644 --- a/source/assets/scripts/localStorage.js +++ b/source/assets/scripts/localStorage.js @@ -2,11 +2,19 @@ * @returns {Array} An array of reviews found in localStorage */ export function getReviewsFromStorage() { - let result = JSON.parse(localStorage.getItem("reviews")); - if (result) { - return result; + if (!(localStorage.getItem("activeIDS"))) { + // we wanna init the active ID array and start the nextID count + localStorage.setItem("activeIDS", JSON.stringify([])); + localStorage.setItem("nextID", JSON.stringify(0)); } - return new Array(0); + //iterate thru activeIDS + let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); + let reviews = [] + for (let i = 0; i < activeIDS.length; i++) { + let currReview = JSON.parse(localStorage.getItem('review'+activeIDS[i])); + reviews.push(currReview); + } + return reviews; } /** @@ -15,5 +23,5 @@ export function getReviewsFromStorage() { * @param {Array} reviews An array of reviews */ export function saveReviewsToStorage(reviews) { - localStorage.setItem("reviews", JSON.stringify(reviews)); + localStorage.setItem(`review${reviewId}`, JSON.stringify(reviews)); } diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index 9d37c44..0c76db4 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -13,6 +13,7 @@ function init() { initFormHandler(); } + /** * @param {Array} reviews An array of reviews */ @@ -33,14 +34,14 @@ function addReviewsToDocument(reviews) { */ function initFormHandler() { - /* //btn to create form (could be its own function?) - let createBtn = document.getElementById("create"); + let createBtn = document.getElementById("create-btn"); createBtn.addEventListener("click", function(){ window.location.assign("./CreatePage.html"); - });*/ - + }); + //accessing form components + /* let tagContainer = document.getElementById("tag-container-form"); let form = document.querySelector("form"); @@ -48,7 +49,6 @@ function initFormHandler() { /* * User submits the form for their review. * We create reviewCard and put in storage - */ let formData = new FormData(form); let reviewObject = {}; for (let [key, value] of formData) { @@ -74,6 +74,9 @@ function initFormHandler() { let mainEl = document.querySelector("main"); mainEl.append(newReview); + // TODO: assign an ID to be used for referencing this object form the activeIDs array and the tag arrays + let ID = localStorage.nextID; + let storedReviews = getReviewsFromStorage(); storedReviews.push(reviewObject); saveReviewsToStorage(storedReviews); @@ -115,5 +118,6 @@ function initFormHandler() { } }); + */ } diff --git a/source/index.html b/source/index.html index 4418ea0..c83fe94 100644 --- a/source/index.html +++ b/source/index.html @@ -22,8 +22,8 @@
- -
+ + +
-->