mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-12-26 17:09:09 +00:00
documentation
This commit is contained in:
rheabhutada02
parent
5405cbfd7c
commit
ea41495e49
@ -102,45 +102,37 @@ 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...
|
||||
}*/
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when the .data property is set on this element.
|
||||
*
|
||||
* For Example:
|
||||
* let reviewCard = document.createElement('review-card');
|
||||
* reviewCard.data = { foo: 'bar' }
|
||||
*
|
||||
* @param {Object} data - The data to pass into the <review-card>, must be of the
|
||||
* following format:
|
||||
* {
|
||||
* "mealImg": "string",
|
||||
* "mealName": "string",
|
||||
* "comments": "string",
|
||||
* "rating": number,
|
||||
* "restaurant": "string",
|
||||
* "tags": string array
|
||||
* }
|
||||
*/
|
||||
* Called when the .data property is set on this element.
|
||||
*
|
||||
* For Example:
|
||||
* let reviewCard = document.createElement('review-card');
|
||||
* reviewCard.data = { foo: 'bar' }
|
||||
*
|
||||
* @param {Object} data - The data to pass into the <review-card>, must be of the
|
||||
* following format:
|
||||
* {
|
||||
* "mealImg": string,
|
||||
* "mealName": string,
|
||||
* "comments": string,
|
||||
* "rating": number,
|
||||
* "restaurant": string,
|
||||
* "reviewID": number,
|
||||
* "tags": string array
|
||||
* }
|
||||
*/
|
||||
set data(data) {
|
||||
// If nothing was passed in, return
|
||||
if (!data) return;
|
||||
@ -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);
|
||||
@ -216,52 +209,53 @@ class ReviewCard extends HTMLElement {
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 <review-card>, of the
|
||||
* following format:
|
||||
* {
|
||||
* "mealImg": "string",
|
||||
* "mealName": "string",
|
||||
* "comments": "string",
|
||||
* "rating": number,
|
||||
* "restaurant": "string",
|
||||
* "tags": string array
|
||||
* }
|
||||
*/
|
||||
* 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 <review-card>, of the
|
||||
* following format:
|
||||
* {
|
||||
* "mealImg": string,
|
||||
* "mealName": string,
|
||||
* "comments": string,
|
||||
* "rating": number,
|
||||
* "restaurant": string,
|
||||
* "reviewID": number,
|
||||
* "tags": string array
|
||||
* }
|
||||
*/
|
||||
get data() {
|
||||
|
||||
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(",");
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user