mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-11-14 14:56:18 +00:00
271 lines
8.4 KiB
JavaScript
271 lines
8.4 KiB
JavaScript
// 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: sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
article {
|
|
align-items: center;
|
|
border: 1px solid rgb(223, 225, 229);
|
|
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;
|
|
}
|
|
|
|
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: 8px;
|
|
border-top-right-radius: 8px;
|
|
height: 118px;
|
|
object-fit: cover;
|
|
margin-left: -16px;
|
|
width: calc(100% + 32px);
|
|
}
|
|
|
|
label.restaurant-name {
|
|
color: black !important;
|
|
}
|
|
|
|
label.meal-name {
|
|
display: -webkit-box;
|
|
font-size: 16px;
|
|
height: 36px;
|
|
line-height: 18px;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
label:not(.meal-name),
|
|
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.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...
|
|
}*/
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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",
|
|
* "imgAlt": "string",
|
|
* "mealName": "string",
|
|
* "comments": "string",
|
|
* "rating": number,
|
|
* "restaurant": "string",
|
|
* "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
|
|
|
|
//image setup
|
|
let mealImg = document.createElement('img');
|
|
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
|
|
/*
|
|
//review page link
|
|
//giving it functionality to save the review card's info to session storage for loading the review page
|
|
let reviewLink = document.createElement('a');
|
|
reviewLink.setAttribute('href','./review.html')
|
|
reviewLink.innerHTML = 'review page'
|
|
reviewLink.addEventListener('click', () => {
|
|
sessionStorage.clear();
|
|
let currReview = {
|
|
"imgSrc": data['imgSrc'],
|
|
"imgAlt": data['imgAlt'],
|
|
"mealName": data['mealName'],
|
|
"restaurant": data['restaurant'],
|
|
"comments": data['comments'],
|
|
"rating": data['rating'],
|
|
"tags": data['tags']
|
|
}
|
|
sessionStorage.setItem('currReview', JSON.stringify(currReview));
|
|
});
|
|
*/
|
|
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');
|
|
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);
|
|
}
|
|
}
|
|
|
|
articleEl.append(mealImg);
|
|
articleEl.append(mealLabel);
|
|
//articleEl.append(reviewLink)
|
|
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 <review-card>, of the
|
|
* following format:
|
|
* {
|
|
* "mealImg": "string",
|
|
* "imgAlt": "string",
|
|
* "mealName": "string",
|
|
* "comments": "string",
|
|
* "rating": number,
|
|
* "restaurant": "string",
|
|
* "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);
|