alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2025-10-30 19:46:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into sprint-3

Browse Source
This commit is contained in:
Arthur Lu
2022-12-01 17:06:37 -08:00
committed by GitHub
parent b07c99f805 b61ea4e54d
commit f863f35de7
25 changed files with 529 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,31 +2,36 @@ import { newReviewToStorage } from "./localStorage.js";
window.addEventListener("DOMContentLoaded", init);
/**
* Delegates the functionality for creating review cards.
*/
function init() {
initFormHandler();
}
/**
* Creates a form and associates a new ID with the new review card.
*/
function initFormHandler() {
//accessing form components
// Accesses form components
let tagContainer = document.getElementById("tag-container-form");
let form = document.querySelector("form");
/*
* change the input source of the image between local file and URL
* depending on user's selection
*/
// Event listener for reading form data
let select = document.getElementById("select");
select.addEventListener("change", function() {
const input = document.getElementById("source");
// Select a photo with HTML file selector
if (select.value == "file") {
input.innerHTML = `
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
`;
}
//TODO: change to photo taking for sprint 3
// Upload text URL input
else {
input.innerHTML = `
Source:
@@ -35,28 +40,28 @@ function initFormHandler() {
}
});
//addressing sourcing image from local file
// Addresses sourcing image from local file
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() {
const reader = new FileReader();
//store image data URL after successful image load
// Store image data URL after successful image load
reader.addEventListener("load", ()=>{
imgDataURL = reader.result;
}, false);
//convert image file into data URL for local storage
// Convert image file into data URL for local storage
reader.readAsDataURL(document.getElementById("mealImg").files[0]);
});
form.addEventListener("submit", function(e){
/*
* User submits the form for their review.
* We create reviewCard and put in storage
*/
// Create reviewObject and put in storage
e.preventDefault();
let formData = new FormData(form);
let reviewObject = {};
// Adds data to the reviewObject from form data
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
@@ -67,30 +72,42 @@ function initFormHandler() {
reviewObject["mealImg"] = imgDataURL;
}
}
// Makes sure that ratings is filled
if(reviewObject["rating"] != null){
//Adds rags separately as an array
reviewObject["tags"] = [];
// Grabs tags
let tags = document.querySelectorAll(".tag");
for(let i = 0; i < tags.length; i ++) {
reviewObject["tags"].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]);
}
// Assigns the new review with a new ID
let nextReviewId = newReviewToStorage(reviewObject);
sessionStorage.setItem("currID", JSON.stringify(nextReviewId));
// Redirects to a page that shows the newly created review
window.location.assign("./ReviewDetails.html");
} else{
}
// Does not let user proceed if rating is not complete
else{
window.alert("NO! FILL IN STARS");
}
});
// Event listener for tag functionality
let tagAddBtn = document.getElementById("tag-add-btn");
//Set used to track tags and ensure no duplicates
let tagSet = new Set();
tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById("tag-form");
// If there is a tag, it'll display the tag
if (tagField.value.length > 0) {
let tagSetVal = tagField.value.toLowerCase();
if (!tagSet.has(tagSetVal)){

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

@@ -107,45 +107,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;
@@ -153,10 +145,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-meal-img");
mealImg.setAttribute("alt","Meal Photo Corrupted");
@@ -166,7 +158,7 @@ class ReviewCard extends HTMLElement {
e.onerror = null;
});
//meal name setup
// Meal name setup
let meallabelDiv = document.createElement("div");
meallabelDiv.setAttribute("class", "meal-name-div");
let mealLabel = document.createElement("label");
@@ -175,19 +167,19 @@ class ReviewCard extends HTMLElement {
mealLabel.innerHTML = data["mealName"];
meallabelDiv.append(mealLabel);
//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");
@@ -197,13 +189,15 @@ class ReviewCard extends HTMLElement {
starsImg.setAttribute("num", data["rating"]);
ratingDiv.append(starsImg);
//added tags
// 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");
@@ -214,8 +208,7 @@ class ReviewCard extends HTMLElement {
}
tagContainerDiv.append(tagContainer);
//adding final ID to data!
// Setting all the data to the review card
articleEl.append(mealImg);
articleEl.append(meallabelDiv);
articleEl.append(restaurantLabel);
@@ -227,28 +220,29 @@ 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
@@ -259,20 +253,20 @@ class ReviewCard extends HTMLElement {
let mealLabel = this.shadowEl.getElementById("a-meal-name");
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(",");

11
source/assets/scripts/ReviewDetails.js
View File

@@ -4,6 +4,9 @@ import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} fr
// Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init);
/**
* Populates the relevant data to the details from local storage review.
*/
function init(){
setupInfo();
setupDelete();
@@ -55,7 +58,7 @@ function setupInfo(){
}
/**
* Sets up delete button to delete review from storage and switch to homepage
* Sets up delete button to delete reveiw from storage and switch to homepage.
*/
function setupDelete(){
let deleteBtn = document.getElementById("delete-btn");
@@ -70,7 +73,7 @@ function setupDelete(){
}
/**
* Sets up update button to reveal form and update info in storage and the current page
* Sets up update button to reveal form and update info in storage and the current page.
*/
function setupUpdate(){
let updateBtn = document.getElementById("update-btn");
@@ -169,7 +172,7 @@ function setupUpdate(){
if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`;
}
//Account for the case where image is not updated
// Account for the case where image is not updated
if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") {
newData["mealImg"] = currReview["mealImg"];
}
@@ -193,7 +196,7 @@ function setupUpdate(){
});
//adding tag to form functionality
// Adding tag to form functionality
let tagAddBtn = document.getElementById("tag-add-btn");
tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById("tag-form");