alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-26 17:09:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix js linting

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2022-11-15 00:53:07 +00:00
parent 8354e561e5
commit 66dd92f0dc
6 changed files with 297 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,18 @@
// 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();
// 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 shadowEl = this.attachShadow({mode:"open"});
let articleEl = document.createElement('article');
let articleEl = document.createElement("article");
let styleEl = document.createElement('style');
styleEl.textContent = `
let styleEl = document.createElement("style");
styleEl.textContent = `
* {
font-family: sans-serif;
margin: 0;
@ -82,17 +82,17 @@ class ReviewCard extends HTMLElement {
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");
/*
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++) {
@ -103,10 +103,10 @@ class ReviewCard extends HTMLElement {
console.log(value);
// What you want to do with name and value...
}*/
});
}
});
}
/**
/**
* Called when the .data property is set on this element.
*
* For Example:
@ -125,29 +125,29 @@ class ReviewCard extends HTMLElement {
* "tags": string array
* }
*/
set data(data) {
// If nothing was passed in, return
if (!data) return;
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');
// 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
//image setup
let mealImg = document.createElement('img');
mealImg.setAttribute('id', 'a-mealImg');
mealImg.setAttribute('src',data['mealImg']);
mealImg.setAttribute('alt',data['imgAlt']);
//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'];
//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
/*
//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');
@ -167,53 +167,53 @@ class ReviewCard extends HTMLElement {
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'];
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'];
//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);
//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);
}
}
//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);
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:
@ -232,39 +232,39 @@ class ReviewCard extends HTMLElement {
* "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
//get image
let mealImg = this.shadowEl.getElementById('a-mealImg');
dataContainer['mealImg'] = mealImg.getAttribute('src');
dataContainer['imgAlt'] = mealImg.getAttribute('alt');
//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 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 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 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 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(",");
//get tags
let tagContainer = this.shadowEl.getElementById("a-tags");
dataContainer["tags"] = tagContainer.getAttribute("list").split(",");
return dataContainer;
}
return dataContainer;
}
}
customElements.define('review-card', ReviewCard);
customElements.define("review-card", ReviewCard);

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

@ -1,127 +1,125 @@
//reviewDetails.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);
window.addEventListener("DOMContentLoaded", init);
function init(){
let main = document.querySelector('main');
let reviews = getReviewsFromStorage();
setupDelete();
setupUpdate();
setupDelete();
setupUpdate();
}
function setupDelete(){
let deleteBtn = document.getElementById('delete');
let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem('current'));
deleteBtn.addEventListener('click', function(){
if(window.confirm("Are you sure you want to delete this entry?")){
//delete function
if(current){
console.log(current);
for(let i = 0; i < reviews.length; i++){
console.log(reviews[i]);
if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){
console.log("match found");
reviews.splice(i,1);
saveReviewsToStorage(reviews);
sessionStorage.removeItem('current');
window.location.assign("./index.html");
break;
}
};
}
}
});
let deleteBtn = document.getElementById("delete");
let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem("current"));
deleteBtn.addEventListener("click", function(){
if(window.confirm("Are you sure you want to delete this entry?")){
//delete function
if(current){
console.log(current);
for(let i = 0; i < reviews.length; i++){
console.log(reviews[i]);
if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
console.log("match found");
reviews.splice(i,1);
saveReviewsToStorage(reviews);
sessionStorage.removeItem("current");
window.location.assign("./index.html");
break;
}
}
}
}
});
}
function setupUpdate(){
let updateBtn = document.getElementById('update');
let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem('current'));
let form = document.getElementById('update-food-entry');
updateBtn.addEventListener('click', function(){
//update function
if(current){
console.log(current);
form.style.display = 'block';
let tagContainer = document.getElementById('tag-container-form');
console.log(document.querySelectorAll('#update-food-entry input'));
let updateBtn = document.getElementById("update");
let reviews = getReviewsFromStorage();
let current = JSON.parse(sessionStorage.getItem("current"));
let form = document.getElementById("update-food-entry");
updateBtn.addEventListener("click", function(){
//update function
if(current){
console.log(current);
form.style.display = "block";
let tagContainer = document.getElementById("tag-container-form");
console.log(document.querySelectorAll("#update-food-entry input"));
//Set value of each input element to current's values
document.getElementById('mealImg').defaultValue = current['mealImg'];
document.getElementById('imgAlt').defaultValue = current['imgAlt'];
document.getElementById('mealName').defaultValue = current['mealName'];
document.getElementById('comments').textContent = current['comments'];
document.getElementById('rating-' + `${current['rating']}`).checked = true;
document.getElementById('restaurant').defaultValue = current['restaurant'];
//Set value of each input element to current's values
document.getElementById("mealImg").defaultValue = current["mealImg"];
document.getElementById("imgAlt").defaultValue = current["imgAlt"];
document.getElementById("mealName").defaultValue = current["mealName"];
document.getElementById("comments").textContent = current["comments"];
document.getElementById("rating-" + `${current["rating"]}`).checked = true;
document.getElementById("restaurant").defaultValue = current["restaurant"];
if(current['tags']){
for (let i = 0; i < current['tags'].length; i++) {
let newTag = document.createElement('label');
newTag.setAttribute('class','tag');
newTag.innerHTML = current['tags'][i] + " ";
newTag.addEventListener('click',()=> {
tagContainer.removeChild(newTag);
});
tagContainer.append(newTag);
}
}
if(current["tags"]){
for (let i = 0; i < current["tags"].length; i++) {
let newTag = document.createElement("label");
newTag.setAttribute("class","tag");
newTag.innerHTML = current["tags"][i] + " ";
newTag.addEventListener("click",()=> {
tagContainer.removeChild(newTag);
});
tagContainer.append(newTag);
}
}
//Take formdata values as newData when submit
form.addEventListener('submit', function(){
/*
//Take formdata values as newData when submit
form.addEventListener("submit", function(){
/*
* User submits the form for their review.
* We create reviewCard and put in storage
*/
let formData = new FormData(form);
let newData = {};
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`;
}
}
newData['tags'] = [];
let formData = new FormData(form);
let newData = {};
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
if (`${key}` !== "tag-form") {
newData[`${key}`] = `${value}`;
}
}
newData["tags"] = [];
let tags = document.querySelectorAll('.tag');
for(let i = 0; i < tags.length; i ++) {
newData['tags'].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]);
}
let tags = document.querySelectorAll(".tag");
for(let i = 0; i < tags.length; i ++) {
newData["tags"].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]);
}
for(let i = 0; i < reviews.length; i++){
console.log(reviews[i]);
if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){
console.log("match found");
reviews.splice(i,1,newData);
saveReviewsToStorage(reviews);
sessionStorage.setItem('current', JSON.stringify(newData));
break;
}
};
for(let i = 0; i < reviews.length; i++){
console.log(reviews[i]);
if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
console.log("match found");
reviews.splice(i,1,newData);
saveReviewsToStorage(reviews);
sessionStorage.setItem("current", JSON.stringify(newData));
break;
}
}
form.style.display = 'none';
form.style.display = "none";
});
});
let tagAddBtn = document.getElementById('tagAdd');
tagAddBtn.addEventListener('click', ()=> {
let tagField = document.getElementById('tag-form');
if (tagField.value.length > 0) {
let tagLabel = document.createElement('label');
tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute('class','tag');
tagLabel.addEventListener('click',()=> {
tagContainer.removeChild(tagLabel);
});
let tagAddBtn = document.getElementById("tagAdd");
tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) {
let tagLabel = document.createElement("label");
tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute("class","tag");
tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel);
});
tagContainer.append(tagLabel);
tagField.value = '';
}
});
}
});
tagContainer.append(tagLabel);
tagField.value = "";
}
});
}
});
}

14
source/assets/scripts/ReviewPage.js
View File

@ -1,13 +1,13 @@
// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);
window.addEventListener("DOMContentLoaded", init);
function init() {
let result = sessionStorage.getItem('currReview')
let result = sessionStorage.getItem("currReview");
let main = document.querySelector('main');
let main = document.querySelector("main");
main.innerHTML = result
let p = document.createElement('p')
p.innerHTML = JSON.parse(result)['comments']
main.append(p)
main.innerHTML = result;
let p = document.createElement("p");
p.innerHTML = JSON.parse(result)["comments"];
main.append(p);
}

4
source/assets/scripts/localStorage.js
View File

@ -2,7 +2,7 @@
* @returns {Array<Object>} An array of reviews found in localStorage
*/
export function getReviewsFromStorage() {
let result = JSON.parse(localStorage.getItem('reviews'))
let result = JSON.parse(localStorage.getItem("reviews"));
if (result) {
return result;
}
@ -15,5 +15,5 @@ export function getReviewsFromStorage() {
* @param {Array<Object>} reviews An array of reviews
*/
export function saveReviewsToStorage(reviews) {
localStorage.setItem('reviews', JSON.stringify(reviews));
localStorage.setItem("reviews", JSON.stringify(reviews));
}

4
source/assets/scripts/localStorage.test.js
View File

@ -1,4 +1,4 @@
import {strict as assert} from "node:assert"
import {strict as assert} from "node:assert";
import {describe, it, beforeEach} from "mocha";
import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js";
@ -40,7 +40,7 @@ describe("test app localStorage interaction", () => {
"rating": i,
"tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`]
}
)
);
saveReviewsToStorage(reviews);
assert.deepEqual(getReviewsFromStorage(), reviews);
}

158
source/assets/scripts/main.js
View File

@ -1,29 +1,29 @@
// main.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js";
// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);
window.addEventListener("DOMContentLoaded", init);
function init() {
// Get the reviews from localStorage
let reviews = getReviewsFromStorage();
// Add each reviews to the <main> element
addReviewsToDocument(reviews);
// Add the event listeners to the form elements
initFormHandler();
// Get the reviews from localStorage
let reviews = getReviewsFromStorage();
// Add each reviews to the <main> element
addReviewsToDocument(reviews);
// Add the event listeners to the form elements
initFormHandler();
}
/**
* @param {Array<Object>} reviews An array of reviews
*/
function addReviewsToDocument(reviews) {
let mainEl = document.querySelector('main');
reviews.forEach(review => {
let newReview = document.createElement('review-card');
newReview.data = review;
//TODO: want to append it to whatever the box is in layout
mainEl.append(newReview);
});
let mainEl = document.querySelector("main");
reviews.forEach(review => {
let newReview = document.createElement("review-card");
newReview.data = review;
//TODO: want to append it to whatever the box is in layout
mainEl.append(newReview);
});
}
@ -33,86 +33,86 @@ function addReviewsToDocument(reviews) {
*/
function initFormHandler() {
//btn to create form (could be its own function?)
let createBtn = document.getElementById('create');
createBtn.addEventListener('click', function(){
window.location.assign('./CreatePage.html');
});
//btn to create form (could be its own function?)
let createBtn = document.getElementById("create");
createBtn.addEventListener("click", function(){
window.location.assign("./CreatePage.html");
});
//accessing form components
let tagContainer = document.getElementById('tag-container-form');
let form = document.querySelector('form');
//accessing form components
let tagContainer = document.getElementById("tag-container-form");
let form = document.querySelector("form");
form.addEventListener('submit', function(){
/*
form.addEventListener("submit", function(){
/*
* User submits the form for their review.
* We create reviewCard and put in storage
*/
let formData = new FormData(form);
let reviewObject = {};
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`;
}
}
reviewObject['tags'] = [];
let formData = new FormData(form);
let reviewObject = {};
for (let [key, value] of formData) {
console.log(`${key}`);
console.log(`${value}`);
if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`;
}
}
reviewObject["tags"] = [];
let tags = document.querySelectorAll('.tag');
for(let i = 0; i < tags.length; i ++) {
reviewObject['tags'].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]);
}
let tags = document.querySelectorAll(".tag");
for(let i = 0; i < tags.length; i ++) {
reviewObject["tags"].push(tags[i].innerHTML);
tagContainer.removeChild(tags[i]);
}
let newReview = document.createElement('review-card');
newReview.data = reviewObject;
let newReview = document.createElement("review-card");
newReview.data = reviewObject;
//TODO: want to append it to whatever the box is in layout
let mainEl = document.querySelector('main');
mainEl.append(newReview);
//TODO: want to append it to whatever the box is in layout
let mainEl = document.querySelector("main");
mainEl.append(newReview);
let storedReviews = getReviewsFromStorage();
storedReviews.push(reviewObject);
saveReviewsToStorage(storedReviews);
document.getElementById("new-food-entry").reset();
});
let storedReviews = getReviewsFromStorage();
storedReviews.push(reviewObject);
saveReviewsToStorage(storedReviews);
document.getElementById("new-food-entry").reset();
});
// DEV-MODE: for testing purposes
let clearBtn = document.querySelector('.danger');
clearBtn.addEventListener('click', function() {
localStorage.clear();
let mainEl = document.querySelector('main');
while (mainEl.firstChild) {
mainEl.removeChild(mainEl.firstChild);
}
let deleteTags = document.querySelectorAll('.tag');
for(let i = 0; i < deleteTags.length; i ++) {
tagContainer.removeChild(deleteTags[i]);
}
// DEV-MODE: for testing purposes
let clearBtn = document.querySelector(".danger");
clearBtn.addEventListener("click", function() {
localStorage.clear();
let mainEl = document.querySelector("main");
while (mainEl.firstChild) {
mainEl.removeChild(mainEl.firstChild);
}
let deleteTags = document.querySelectorAll(".tag");
for(let i = 0; i < deleteTags.length; i ++) {
tagContainer.removeChild(deleteTags[i]);
}
//clears reviews AS WELL as resets form
document.getElementById("new-food-entry").reset();
//clears reviews AS WELL as resets form
document.getElementById("new-food-entry").reset();
});
});
let tagAddBtn = document.getElementById('tagAdd');
tagAddBtn.addEventListener('click', ()=> {
let tagField = document.getElementById('tag-form');
if (tagField.value.length > 0) {
let tagLabel = document.createElement('label');
tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute('class','tag');
tagLabel.addEventListener('click',()=> {
tagContainer.removeChild(tagLabel);
});
let tagAddBtn = document.getElementById("tagAdd");
tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) {
let tagLabel = document.createElement("label");
tagLabel.innerHTML = tagField.value;
tagLabel.setAttribute("class","tag");
tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel);
});
tagContainer.append(tagLabel);
tagField.value = '';
tagContainer.append(tagLabel);
tagField.value = "";
}
});
}
});
}