cse110-fa22-group29/source/assets/scripts/ReviewCard.js

// ReviewCard.js

class ReviewCard extends HTMLElement {
	// Called once when document.createElement('review-card') is called, or
	// the element is written into the DOM directly as <review-card>
	constructor() {
		super(); 

		let shadowEl = this.attachShadow({mode:"open"});

		let articleEl = document.createElement("article");

		let styleEl = document.createElement("style");
		styleEl.textContent = `
		* {
			font-family: Century Gothic;
			margin: 0;
			padding: 0;
			overflow-wrap: anywhere;
			cursor: pointer;
		}
		
		a {
			text-decoration: none;
		}
		
		a:hover {
			text-decoration: underline;
		}
		
		article {
			align-items: center;
			border: 2px solid rgb(31, 41, 32);
			border-radius: 8px;
			height: auto;
			row-gap: 5px;
			padding: 0 16px 16px 16px;
			width: 200px;
			margin: 8px 8px 8px 8px;
		}
		
		div.rating {
			align-items: center;
			display: flex;
		}
		
		div.rating>img {
			height: auto;
			display: inline-block;
			object-fit: scale-down;
		}
		
		article>img {
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
			height: 120px;
			object-fit: cover;
			margin-left: -16px;
			margin-right: -16px;
			width: calc(100% + 32px);
		}

		.meal-name-div {
			height: 54px;
			overflow: hidden;
		}
		
		label.restaurant-name {
			color: black !important;
		}
		
		label.meal-name {
			font-size: 24px;
			height: 36px;
		}
		
		label:not(.meal-name),
		span,
		time {
			color: #70757A;
			font-size: 12px;
		}

		.tag-container-div {
			margin-top: 20px;
			height: 100px;
			overflow: hidden;
		}

		.tag-container {
			display: flex;
			flex-flow: row wrap;
			height: fit-content;
		}
		
		.a-tag {
			background-color:#94da97;
			border-radius: 6px;
			color: #94da97;
			padding: 0px 6px 2px 6px;
			margin: 2px 2px 2px 2px;
			font-weight: bold;
			overflow: hidden;
			height: 14px;
		}
    	`;
		articleEl.append(styleEl);
		shadowEl.append(articleEl);
		this.shadowEl = shadowEl;
		
		// Attach event listener to each review-card
		this.addEventListener("click", (event) => {
			console.log(event.target);
			console.log(event.target.reviewId);
			// 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");
		});
	}

	/**
	* 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;

		// 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
		this.reviewID = data["reviewID"];

		// Image setup
		let mealImg = document.createElement("img");
		mealImg.setAttribute("id", "a-meal-img");
		mealImg.setAttribute("alt","Meal Photo Corrupted");
		mealImg.setAttribute("src",data["mealImg"]);
		mealImg.addEventListener("error", function(e) {
			mealImg.setAttribute("src", "./assets/images/default_plate.png");
			e.onerror = null;
		});

		// Meal name setup
		let meallabelDiv = document.createElement("div");
		meallabelDiv.setAttribute("class", "meal-name-div");
		let mealLabel = document.createElement("label");
		mealLabel.setAttribute("id", "a-meal-name");
		mealLabel.setAttribute("class","meal-name");
		mealLabel.innerHTML = data["mealName"];
		meallabelDiv.append(mealLabel);

		// 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"];

		// Rating setup
		let ratingDiv = document.createElement("div");
		ratingDiv.setAttribute("class", "rating");
		let starsImg = document.createElement("img");
		starsImg.setAttribute("id", "a-rating");
		starsImg.setAttribute("src", "./assets/images/"+data["rating"]+"-star.svg");
		starsImg.setAttribute("alt", data["rating"] +" stars");
		starsImg.setAttribute("num", data["rating"]);
		ratingDiv.append(starsImg);

		// Tags setup
		let tagContainerDiv = document.createElement("div"); 
		tagContainerDiv.setAttribute("class", "tag-container-div");
		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");
				newTag.setAttribute("class","a-tag");
				newTag.innerHTML = data["tags"][i];
				tagContainer.append(newTag);
			}
		}
		tagContainerDiv.append(tagContainer);

		// Setting all the data to the review card
		articleEl.append(mealImg);
		articleEl.append(meallabelDiv);
		articleEl.append(restaurantLabel);
		articleEl.append(ratingDiv);
		articleEl.append(tagContainerDiv);
		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 <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
		dataContainer["reviewID"] = this.reviewID;

		//get image
		let mealImg = this.shadowEl.getElementById("a-meal-img");
		dataContainer["mealImg"] = mealImg.getAttribute("src");

		//get meal name
		let mealLabel = this.shadowEl.getElementById("a-meal-name");
		dataContainer["mealName"] = mealLabel.innerHTML;

		// Get comment section
		let comments = this.shadowEl.getElementById("a-comments");
		console.log(comments);
		dataContainer["comments"] = comments.innerText;

		// Get 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);