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

259 lines
7.7 KiB
JavaScript
Raw Normal View History

2022-11-08 23:57:02 +00:00
// 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();
2022-11-08 23:57:02 +00:00
let shadowEl = this.attachShadow({mode:"open"});
2022-11-08 23:57:02 +00:00
let articleEl = document.createElement("article");
2022-11-08 23:57:02 +00:00
let styleEl = document.createElement("style");
styleEl.textContent = `
2022-11-08 23:57:02 +00:00
* {
font-family: Century Gothic;
2022-11-08 23:57:02 +00:00
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
article {
align-items: center;
border: 2px solid rgb(31, 41, 32);
2022-11-08 23:57:02 +00:00
border-radius: 8px;
display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px;
height: auto;
row-gap: 5px;
padding: 0 16px 16px 16px;
width: 178px;
margin: 8px 8px 8px 8px;
2022-11-08 23:57:02 +00:00
}
div.rating {
align-items: center;
column-gap: 5px;
display: flex;
}
div.rating>img {
height: auto;
display: inline-block;
object-fit: scale-down;
width: 78px;
}
article>img {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
height: 119px;
2022-11-08 23:57:02 +00:00
object-fit: cover;
margin-left: -16px;
width: calc(100% + 32px);
}
2022-11-11 08:03:56 +00:00
label.restaurant-name {
2022-11-08 23:57:02 +00:00
color: black !important;
}
2022-11-11 08:03:56 +00:00
label.meal-name {
2022-11-08 23:57:02 +00:00
display: -webkit-box;
font-size: 16px;
height: 36px;
line-height: 18px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
2022-11-11 08:03:56 +00:00
label:not(.meal-name),
2022-11-08 23:57:02 +00:00
span,
time {
color: #70757A;
font-size: 12px;
}
`;
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.reviewId);
//Option 1: sending current data to second html page using localStorage (could also just store index)
sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID));
window.location.assign("./ReviewDetails.html");
/*
2022-11-12 22:16:03 +00:00
//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...
}*/
});
}
2022-11-08 23:57:02 +00:00
/**
2022-11-08 23:57:02 +00:00
* 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:
* {
2022-11-12 22:16:03 +00:00
* "mealImg": "string",
2022-11-08 23:57:02 +00:00
* "imgAlt": "string",
* "mealName": "string",
2022-11-12 18:33:30 +00:00
* "comments": "string",
2022-11-12 22:16:03 +00:00
* "rating": number,
2022-11-08 23:57:02 +00:00
* "restaurant": "string",
2022-11-10 21:22:32 +00:00
* "tags": string array
2022-11-08 23:57:02 +00:00
* }
*/
set data(data) {
// If nothing was passed in, return
if (!data) return;
2022-11-08 23:57:02 +00:00
// Select the <article> we added to the Shadow DOM in the constructor
let articleEl = this.shadowEl.querySelector("article");
2022-11-08 23:57:02 +00:00
// setting the article elements for the review card
2022-11-18 07:56:07 +00:00
this.reviewID = data["reviewID"];
2022-11-08 23:57:02 +00:00
//image setup
let mealImg = document.createElement("img");
mealImg.setAttribute("id", "a-mealImg");
mealImg.setAttribute("alt",data["imgAlt"]);
2022-11-18 07:56:07 +00:00
if(data["mealImg"] != ""){
mealImg.setAttribute("src",data["mealImg"]);
}
else{
mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png");
}
2022-11-08 23:57:02 +00:00
//meal name setup
let mealLabel = document.createElement("label");
mealLabel.setAttribute("id", "a-mealName");
mealLabel.setAttribute("class","meal-name");
mealLabel.innerHTML = data["mealName"];
2022-11-08 23:57:02 +00:00
//restaurant name setup
let restaurantLabel = document.createElement("label");
restaurantLabel.setAttribute("id", "a-restaurant");
restaurantLabel.setAttribute("class","restaurant-name");
restaurantLabel.innerHTML = data["restaurant"];
2022-11-08 23:57:02 +00:00
//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"];
2022-11-12 22:16:03 +00:00
//other info: rating
let ratingDiv = document.createElement("div");
ratingDiv.setAttribute("class", "rating");
let starsImg = document.createElement("img");
starsImg.setAttribute("id", "a-rating");
2022-11-15 02:07:33 +00:00
starsImg.setAttribute("src", "./assets/images/icons/"+data["rating"]+"-star.svg");
starsImg.setAttribute("alt", data["rating"] +" stars");
starsImg.setAttribute("num", data["rating"]);
ratingDiv.append(starsImg);
2022-11-08 23:57:02 +00:00
//added tags
let tagContainer = document.createElement("div");
tagContainer.setAttribute("class", "tag-container");
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);
}
}
2022-11-10 21:22:32 +00:00
2022-11-18 07:56:07 +00:00
//adding final ID to data!
articleEl.append(mealImg);
articleEl.append(mealLabel);
articleEl.append(restaurantLabel);
articleEl.append(ratingDiv);
articleEl.append(tagContainer);
articleEl.append(comments);
2022-11-12 22:16:03 +00:00
}
2022-11-12 22:16:03 +00:00
/**
2022-11-12 22:16:03 +00:00
* 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",
2022-11-12 22:20:25 +00:00
* "imgAlt": "string",
2022-11-12 22:16:03 +00:00
* "mealName": "string",
2022-11-12 22:20:25 +00:00
* "comments": "string",
2022-11-12 22:16:03 +00:00
* "rating": number,
2022-11-12 22:20:25 +00:00
* "restaurant": "string",
2022-11-12 22:16:03 +00:00
* "tags": string array
* }
*/
get data() {
2022-11-12 22:16:03 +00:00
let dataContainer = {};
2022-11-12 22:16:03 +00:00
// getting the article elements for the review card
2022-11-18 07:56:07 +00:00
dataContainer["reviewID"] = this.reviewID;
2022-11-12 22:16:03 +00:00
//get image
let mealImg = this.shadowEl.getElementById("a-mealImg");
dataContainer["mealImg"] = mealImg.getAttribute("src");
dataContainer["imgAlt"] = mealImg.getAttribute("alt");
2022-11-12 22:16:03 +00:00
//get meal name
let mealLabel = this.shadowEl.getElementById("a-mealName");
dataContainer["mealName"] = mealLabel.innerHTML;
2022-11-12 22:16:03 +00:00
//get comment section
let comments = this.shadowEl.getElementById("a-comments");
console.log(comments);
dataContainer["comments"] = comments.innerText;
2022-11-12 22:16:03 +00:00
//get other info: rating
let starsImg = this.shadowEl.getElementById("a-rating");
dataContainer["rating"] = starsImg.getAttribute("num");
2022-11-12 22:16:03 +00:00
//get restaurant name
let restaurantLabel = this.shadowEl.getElementById("a-restaurant");
dataContainer["restaurant"] = restaurantLabel.innerHTML;
2022-11-08 23:57:02 +00:00
//get tags
let tagContainer = this.shadowEl.getElementById("a-tags");
dataContainer["tags"] = tagContainer.getAttribute("list").split(",");
return dataContainer;
}
2022-11-08 23:57:02 +00:00
}
customElements.define("review-card", ReviewCard);