alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-11-10 05:34:44 +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

2
source/assets/scripts/CreatePage.js
View File

@ -117,7 +117,7 @@ function initFormHandler() {
tagLabel.addEventListener("click",()=> { tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel); tagContainer.removeChild(tagLabel);
}); });
// Adds the tag // Adds the tag
tagContainer.append(tagLabel); tagContainer.append(tagLabel);
tagField.value = ""; tagField.value = "";

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

@ -102,45 +102,37 @@ class ReviewCard extends HTMLElement {
articleEl.append(styleEl); articleEl.append(styleEl);
shadowEl.append(articleEl); shadowEl.append(articleEl);
this.shadowEl = shadowEl; this.shadowEl = shadowEl;
//attach event listener to each recipe-card
// Attach event listener to each review-card
this.addEventListener("click", (event) => { this.addEventListener("click", (event) => {
console.log(event.target); console.log(event.target);
console.log(event.target.reviewId); 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)); sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID));
// Goes to the new page for the review
window.location.assign("./ReviewDetails.html"); 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. * Called when the .data property is set on this element.
* *
* For Example: * For Example:
* let reviewCard = document.createElement('review-card'); * let reviewCard = document.createElement('review-card');
* reviewCard.data = { foo: 'bar' } * reviewCard.data = { foo: 'bar' }
* *
* @param {Object} data - The data to pass into the <review-card>, must be of the * @param {Object} data - The data to pass into the <review-card>, must be of the
* following format: * following format:
* { * {
* "mealImg": "string", * "mealImg": string,
* "mealName": "string", * "mealName": string,
* "comments": "string", * "comments": string,
* "rating": number, * "rating": number,
* "restaurant": "string", * "restaurant": string,
* "tags": string array * "reviewID": number,
* } * "tags": string array
*/ * }
*/
set data(data) { set data(data) {
// If nothing was passed in, return // If nothing was passed in, return
if (!data) return; if (!data) return;
@ -148,10 +140,10 @@ class ReviewCard extends HTMLElement {
// Select the <article> we added to the Shadow DOM in the constructor // Select the <article> we added to the Shadow DOM in the constructor
let articleEl = this.shadowEl.querySelector("article"); 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"]; this.reviewID = data["reviewID"];
//image setup // Image setup
let mealImg = document.createElement("img"); let mealImg = document.createElement("img");
mealImg.setAttribute("id", "a-mealImg"); mealImg.setAttribute("id", "a-mealImg");
mealImg.setAttribute("alt","Meal Photo Corrupted"); mealImg.setAttribute("alt","Meal Photo Corrupted");
@ -161,25 +153,25 @@ class ReviewCard extends HTMLElement {
e.onerror = null; e.onerror = null;
}); });
//meal name setup // Meal name setup
let mealLabel = document.createElement("label"); let mealLabel = document.createElement("label");
mealLabel.setAttribute("id", "a-mealName"); mealLabel.setAttribute("id", "a-mealName");
mealLabel.setAttribute("class","meal-name"); mealLabel.setAttribute("class","meal-name");
mealLabel.innerHTML = data["mealName"]; mealLabel.innerHTML = data["mealName"];
//restaurant name setup // Restaurant name setup
let restaurantLabel = document.createElement("label"); let restaurantLabel = document.createElement("label");
restaurantLabel.setAttribute("id", "a-restaurant"); restaurantLabel.setAttribute("id", "a-restaurant");
restaurantLabel.setAttribute("class","restaurant-name"); restaurantLabel.setAttribute("class","restaurant-name");
restaurantLabel.innerHTML = data["restaurant"]; restaurantLabel.innerHTML = data["restaurant"];
//comment section setup (display set to none) // Comment section setup (display set to none)
let comments = document.createElement("p"); let comments = document.createElement("p");
comments.setAttribute("id", "a-comments"); comments.setAttribute("id", "a-comments");
comments.style.display = "none"; comments.style.display = "none";
comments.innerText = data["comments"]; comments.innerText = data["comments"];
//other info: rating // Rating setup
let ratingDiv = document.createElement("div"); let ratingDiv = document.createElement("div");
ratingDiv.setAttribute("class", "rating"); ratingDiv.setAttribute("class", "rating");
let starsImg = document.createElement("img"); let starsImg = document.createElement("img");
@ -189,11 +181,13 @@ class ReviewCard extends HTMLElement {
starsImg.setAttribute("num", data["rating"]); starsImg.setAttribute("num", data["rating"]);
ratingDiv.append(starsImg); ratingDiv.append(starsImg);
//added tags // Tags setup
let tagContainer = document.createElement("div"); let tagContainer = document.createElement("div");
tagContainer.setAttribute("class", "tag-container"); tagContainer.setAttribute("class", "tag-container");
tagContainer.setAttribute("id", "a-tags"); tagContainer.setAttribute("id", "a-tags");
tagContainer.setAttribute("list", data["tags"]); tagContainer.setAttribute("list", data["tags"]);
// Checks if user gave tags, if so added to review card
if(data["tags"]){ if(data["tags"]){
for (let i = 0; i < data["tags"].length; i++) { for (let i = 0; i < data["tags"].length; i++) {
let newTag = document.createElement("label"); 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(mealImg);
articleEl.append(mealLabel); articleEl.append(mealLabel);
articleEl.append(restaurantLabel); articleEl.append(restaurantLabel);
@ -216,52 +209,53 @@ class ReviewCard extends HTMLElement {
} }
/** /**
* Called when getting the .data property of this element. * Called when getting the .data property of this element.
* *
* For Example: * For Example:
* let reviewCard = document.createElement('review-card'); * let reviewCard = document.createElement('review-card');
* reviewCard.data = { foo: 'bar' } * reviewCard.data = { foo: 'bar' }
* *
* @return {Object} data - The data from the <review-card>, of the * @return {Object} data - The data from the <review-card>, of the
* following format: * following format:
* { * {
* "mealImg": "string", * "mealImg": string,
* "mealName": "string", * "mealName": string,
* "comments": "string", * "comments": string,
* "rating": number, * "rating": number,
* "restaurant": "string", * "restaurant": string,
* "tags": string array * "reviewID": number,
* } * "tags": string array
*/ * }
*/
get data() { get data() {
let dataContainer = {}; let dataContainer = {};
// getting the article elements for the review card // Getting the article elements for the review card
dataContainer["reviewID"] = this.reviewID; dataContainer["reviewID"] = this.reviewID;
//get image // Get image
let mealImg = this.shadowEl.getElementById("a-mealImg"); let mealImg = this.shadowEl.getElementById("a-mealImg");
dataContainer["mealImg"] = mealImg.getAttribute("src"); dataContainer["mealImg"] = mealImg.getAttribute("src");
//get meal name // Get meal name
let mealLabel = this.shadowEl.getElementById("a-mealName"); let mealLabel = this.shadowEl.getElementById("a-mealName");
dataContainer["mealName"] = mealLabel.innerHTML; dataContainer["mealName"] = mealLabel.innerHTML;
//get comment section // Get comment section
let comments = this.shadowEl.getElementById("a-comments"); let comments = this.shadowEl.getElementById("a-comments");
console.log(comments); console.log(comments);
dataContainer["comments"] = comments.innerText; dataContainer["comments"] = comments.innerText;
//get other info: rating // Get rating
let starsImg = this.shadowEl.getElementById("a-rating"); let starsImg = this.shadowEl.getElementById("a-rating");
dataContainer["rating"] = starsImg.getAttribute("num"); dataContainer["rating"] = starsImg.getAttribute("num");
//get restaurant name //Get restaurant name
let restaurantLabel = this.shadowEl.getElementById("a-restaurant"); let restaurantLabel = this.shadowEl.getElementById("a-restaurant");
dataContainer["restaurant"] = restaurantLabel.innerHTML; dataContainer["restaurant"] = restaurantLabel.innerHTML;
//get tags // Get tags
let tagContainer = this.shadowEl.getElementById("a-tags"); let tagContainer = this.shadowEl.getElementById("a-tags");
dataContainer["tags"] = tagContainer.getAttribute("list").split(","); dataContainer["tags"] = tagContainer.getAttribute("list").split(",");