alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-26 17:09:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

documentation

Browse Source
This commit is contained in:
rheabhutada02 2022-11-29 15:59:57 -08:00
parent 5405cbfd7c
commit ea41495e49
2 changed files with 58 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
source/assets/scripts/ReviewCard.js
View File

@ -102,24 +102,15 @@ class ReviewCard extends HTMLElement {
articleEl.append(styleEl);
shadowEl.append(articleEl);
this.shadowEl = shadowEl;
//attach event listener to each recipe-card
// Attach event listener to each review-card
this.addEventListener("click", (event) => {
console.log(event.target);
console.log(event.target.reviewId);
//Option 1: sending current data to second html page using localStorage (could also just store index)
// Saves the ID for corresponding review on new page (for data retrieval)
sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID));
// Goes to the new page for the review
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...
}*/
});
}
@ -133,11 +124,12 @@ class ReviewCard extends HTMLElement {
* @param {Object} data - The data to pass into the <review-card>, must be of the
* following format:
* {
* "mealImg": "string",
* "mealName": "string",
* "comments": "string",
* "mealImg": string,
* "mealName": string,
* "comments": string,
* "rating": number,
* "restaurant": "string",
* "restaurant": string,
* "reviewID": number,
* "tags": string array
* }
*/
@ -148,10 +140,10 @@ class ReviewCard extends HTMLElement {
// Select the <article> we added to the Shadow DOM in the constructor
let articleEl = this.shadowEl.querySelector("article");
// setting the article elements for the review card
// Setting the article elements for the review card
this.reviewID = data["reviewID"];
//image setup
// Image setup
let mealImg = document.createElement("img");
mealImg.setAttribute("id", "a-mealImg");
mealImg.setAttribute("alt","Meal Photo Corrupted");
@ -161,25 +153,25 @@ class ReviewCard extends HTMLElement {
e.onerror = null;
});
//meal name setup
// 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
// 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)
// 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
// Rating setup
let ratingDiv = document.createElement("div");
ratingDiv.setAttribute("class", "rating");
let starsImg = document.createElement("img");
@ -189,11 +181,13 @@ class ReviewCard extends HTMLElement {
starsImg.setAttribute("num", data["rating"]);
ratingDiv.append(starsImg);
//added tags
// Tags setup
let tagContainer = document.createElement("div");
tagContainer.setAttribute("class", "tag-container");
tagContainer.setAttribute("id", "a-tags");
tagContainer.setAttribute("list", data["tags"]);
// Checks if user gave tags, if so added to review card
if(data["tags"]){
for (let i = 0; i < data["tags"].length; i++) {
let newTag = document.createElement("label");
@ -203,8 +197,7 @@ class ReviewCard extends HTMLElement {
}
}
//adding final ID to data!
// Setting all the data to the review card
articleEl.append(mealImg);
articleEl.append(mealLabel);
articleEl.append(restaurantLabel);
@ -225,11 +218,12 @@ class ReviewCard extends HTMLElement {
* @return {Object} data - The data from the <review-card>, of the
* following format:
* {
* "mealImg": "string",
* "mealName": "string",
* "comments": "string",
* "mealImg": string,
* "mealName": string,
* "comments": string,
* "rating": number,
* "restaurant": "string",
* "restaurant": string,
* "reviewID": number,
* "tags": string array
* }
*/
@ -237,31 +231,31 @@ class ReviewCard extends HTMLElement {
let dataContainer = {};
// getting the article elements for the review card
// Getting the article elements for the review card
dataContainer["reviewID"] = this.reviewID;
//get image
// Get image
let mealImg = this.shadowEl.getElementById("a-mealImg");
dataContainer["mealImg"] = mealImg.getAttribute("src");
//get meal name
// Get meal name
let mealLabel = this.shadowEl.getElementById("a-mealName");
dataContainer["mealName"] = mealLabel.innerHTML;
//get comment section
// Get comment section
let comments = this.shadowEl.getElementById("a-comments");
console.log(comments);
dataContainer["comments"] = comments.innerText;
//get other info: rating
// Get rating
let starsImg = this.shadowEl.getElementById("a-rating");
dataContainer["rating"] = starsImg.getAttribute("num");
//get restaurant name
//Get restaurant name
let restaurantLabel = this.shadowEl.getElementById("a-restaurant");
dataContainer["restaurant"] = restaurantLabel.innerHTML;
//get tags
// Get tags
let tagContainer = this.shadowEl.getElementById("a-tags");
dataContainer["tags"] = tagContainer.getAttribute("list").split(",");