From 17bea4c21ce6140c674a24f7f54aeda8c626e1a6 Mon Sep 17 00:00:00 2001 From: Kara Hoagland Date: Sat, 12 Nov 2022 14:16:03 -0800 Subject: [PATCH] reviewDetails+Update+Delete --- CreatePage.html | 87 +++++++++++++++++ ReviewDetails.html | 89 +++++++++++++++++ index.html | 15 +-- source/assets/scripts/ReviewCard.js | 109 +++++++++++++++++++-- source/assets/scripts/ReviewDetails.js | 127 +++++++++++++++++++++++++ source/assets/scripts/main.js | 13 ++- 6 files changed, 419 insertions(+), 21 deletions(-) create mode 100644 CreatePage.html create mode 100644 ReviewDetails.html create mode 100644 source/assets/scripts/ReviewDetails.js diff --git a/CreatePage.html b/CreatePage.html new file mode 100644 index 0000000..cd28dc7 --- /dev/null +++ b/CreatePage.html @@ -0,0 +1,87 @@ + + + + + + + + Food Journal + + + + + + + + + + + + + +
+
+ Pic: + + +
+
+ + Meal: + + +
+
+ Rating + + + + + + + +
+
+ Other Info: + + + +
+ + +
+ + diff --git a/ReviewDetails.html b/ReviewDetails.html new file mode 100644 index 0000000..6ea0ca6 --- /dev/null +++ b/ReviewDetails.html @@ -0,0 +1,89 @@ + + + + + + + Food Journal + + + + + + + + + + + + + +
+ + +
+ + + diff --git a/index.html b/index.html index bd60c9b..e399699 100644 --- a/index.html +++ b/index.html @@ -22,12 +22,13 @@
-
+ +
- Photo: -
- + -
+ diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 6082ecb..e420338 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -85,6 +85,25 @@ class ReviewCard extends HTMLElement { articleEl.append(styleEl); shadowEl.append(articleEl); this.shadowEl = shadowEl; + //attach event listener to each recipe-card + this.addEventListener('click', (event) => { + console.log(event.target); + console.log(event.target.data); + //Option 1: sending current data to second html page using localStorage (could also just store index) + sessionStorage.setItem('current', JSON.stringify(event.target.data)); + window.location.assign("./ReviewDetails.html"); + /* + //Option 2: sending current data to second html page using string query w/ url (currently not storing value) + let reviewFields = window.location.search.slice(1).split("&"); + for(let i = 0; i < reviewFields.length; i++) { + let kv = reviewFields[i].split("="); + let key = kv[0]; + let value = kv[1]; + console.log(key); + console.log(value); + // What you want to do with name and value... + }*/ + }); } /** @@ -97,11 +116,12 @@ class ReviewCard extends HTMLElement { * @param {Object} data - The data to pass into the , must be of the * following format: * { - * "imgSrc": "string", + * "comments": "string", * "imgAlt": "string", + * "mealImg": "string", * "mealName": "string", * "restaurant": "string", - * "rating": number + * "rating": number, * "tags": string array * } */ @@ -116,34 +136,50 @@ class ReviewCard extends HTMLElement { //image setup let mealImg = document.createElement('img'); - mealImg.setAttribute('src',data['imgSrc']); + mealImg.setAttribute('id', 'a-mealImg'); + mealImg.setAttribute('src',data['mealImg']); mealImg.setAttribute('alt',data['imgAlt']); //meal name setup let mealLabel = document.createElement('label'); + mealLabel.setAttribute('id', 'a-mealName'); mealLabel.setAttribute('class','meal-name'); mealLabel.innerHTML = data['mealName']; + //restaurant name setup let restaurantLabel = document.createElement('label'); + restaurantLabel.setAttribute('id', 'a-restaurant'); restaurantLabel.setAttribute('class','restaurant-name'); restaurantLabel.innerHTML = data['restaurant']; + //comment section setup (display set to none) + let comments = document.createElement('p'); + comments.setAttribute('id', 'a-comments'); + comments.style.display = 'none'; + comments.innerText = data['comments']; + //other info: rating let ratingDiv = document.createElement('div'); ratingDiv.setAttribute('class', 'rating'); let starsImg = document.createElement('img'); + starsImg.setAttribute('id', 'a-rating'); starsImg.setAttribute('src', './source/assets/images/icons/'+data['rating']+'-star.svg'); starsImg.setAttribute('alt', data['rating'] +' stars'); + starsImg.setAttribute('num', data['rating']); ratingDiv.append(starsImg); //added tags - let tagContainer = document.createElement('div') + let tagContainer = document.createElement('div'); tagContainer.setAttribute('class', 'tag-container'); - for (let i = 0; i < data['tags'].length; i++) { - let newTag = document.createElement('label'); - newTag.setAttribute('class','tag'); - newTag.innerHTML = data['tags'][i] + " "; - tagContainer.append(newTag); + tagContainer.setAttribute('id', 'a-tags'); + tagContainer.setAttribute('list', data['tags']); + if(data['tags']){ + for (let i = 0; i < data['tags'].length; i++) { + let newTag = document.createElement('label'); + newTag.setAttribute('class','tag'); + newTag.innerHTML = data['tags'][i] + " "; + tagContainer.append(newTag); + } } articleEl.append(mealImg); @@ -151,8 +187,63 @@ class ReviewCard extends HTMLElement { articleEl.append(restaurantLabel); articleEl.append(ratingDiv); articleEl.append(tagContainer); + articleEl.append(comments); + } + + /** + * Called when getting the .data property of this element. + * + * For Example: + * let reviewCard = document.createElement('review-card'); + * reviewCard.data = { foo: 'bar' } + * + * @return {Object} data - The data from the , of the + * following format: + * { + * "comments": "string", + * "imgAlt": "string", + * "mealImg": "string", + * "mealName": "string", + * "restaurant": "string", + * "rating": number, + * "tags": string array + * } + */ + get data() { + + let dataContainer = {}; + + // getting the article elements for the review card + + //get image + let mealImg = this.shadowEl.getElementById('a-mealImg'); + dataContainer['mealImg'] = mealImg.getAttribute('src'); + dataContainer['imgAlt'] = mealImg.getAttribute('alt'); + + //get meal name + let mealLabel = this.shadowEl.getElementById('a-mealName'); + dataContainer['mealName'] = mealLabel.innerHTML; + + //get comment section + let comments = this.shadowEl.getElementById('a-comments'); + console.log(comments); + dataContainer['comments'] = comments.innerText; + + //get other info: rating + let starsImg = this.shadowEl.getElementById('a-rating'); + dataContainer['rating'] = starsImg.getAttribute('num'); + + //get restaurant name + let restaurantLabel = this.shadowEl.getElementById('a-restaurant'); + dataContainer['restaurant'] = restaurantLabel.innerHTML; + + //get tags + let tagContainer = this.shadowEl.getElementById('a-tags'); + dataContainer['tags'] = tagContainer.getAttribute('list').split(","); + + return dataContainer; } } customElements.define('review-card', ReviewCard); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js new file mode 100644 index 0000000..a072e9f --- /dev/null +++ b/source/assets/scripts/ReviewDetails.js @@ -0,0 +1,127 @@ +//reviewDetails.js +import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js'; + +// Run the init() function when the page has loaded +window.addEventListener('DOMContentLoaded', init); + +function init(){ + let main = document.querySelector('main'); + let reviews = getReviewsFromStorage(); + setupDelete(); + setupUpdate(); +} + +function setupDelete(){ + let deleteBtn = document.getElementById('delete'); + let reviews = getReviewsFromStorage(); + let current = JSON.parse(sessionStorage.getItem('current')); + 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; + } + }; + } + } + }); +} + +function setupUpdate(){ + let updateBtn = document.getElementById('update'); + let reviews = getReviewsFromStorage(); + let current = JSON.parse(sessionStorage.getItem('current')); + let form = document.getElementById('update-food-entry'); + updateBtn.addEventListener('click', function(){ + //update function + if(current){ + console.log(current); + 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']; + + if(current['tags']){ + for (let i = 0; i < current['tags'].length; i++) { + let newTag = document.createElement('label'); + newTag.setAttribute('class','tag'); + newTag.innerHTML = current['tags'][i] + " "; + newTag.addEventListener('click',()=> { + tagContainer.removeChild(newTag); + }); + tagContainer.append(newTag); + } + } + + //Take formdata values as newData when submit + form.addEventListener('submit', function(){ + /* + * User submits the form for their review. + * We create reviewCard and put in storage + */ + let formData = new FormData(form); + let newData = {}; + for (let [key, value] of formData) { + console.log(`${key}`); + console.log(`${value}`); + if (`${key}` !== "tag-form") { + newData[`${key}`] = `${value}`; + } + } + newData['tags'] = []; + + let tags = document.querySelectorAll('.tag'); + for(let i = 0; i < tags.length; i ++) { + newData['tags'].push(tags[i].innerHTML); + 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; + } + }; + + form.style.display = 'none'; + + }); + + 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/main.js b/source/assets/scripts/main.js index 7c150c2..e7f81f2 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -18,13 +18,9 @@ function init() { */ function addReviewsToDocument(reviews) { let mainEl = document.querySelector('main'); - reviews.forEach(review=> { + reviews.forEach(review => { let newReview = document.createElement('review-card'); newReview.data = review; - newReview.addEventListener('click', function(){ - //TODO: create a separate file for specs - frontend - var newWin = window.open('about:blank','_self'); - }); //TODO: want to append it to whatever the box is in layout mainEl.append(newReview); }); @@ -36,6 +32,13 @@ function addReviewsToDocument(reviews) { *