mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-11-12 22:16:16 +00:00
fix js linting
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
parent
8354e561e5
commit
66dd92f0dc
@ -7,11 +7,11 @@ class ReviewCard extends HTMLElement {
|
||||
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');
|
||||
let styleEl = document.createElement("style");
|
||||
styleEl.textContent = `
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
@ -86,11 +86,11 @@ class ReviewCard extends HTMLElement {
|
||||
shadowEl.append(articleEl);
|
||||
this.shadowEl = shadowEl;
|
||||
//attach event listener to each recipe-card
|
||||
this.addEventListener('click', (event) => {
|
||||
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));
|
||||
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)
|
||||
@ -130,24 +130,24 @@ class ReviewCard extends HTMLElement {
|
||||
if (!data) return;
|
||||
|
||||
// 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
|
||||
|
||||
//image setup
|
||||
let mealImg = document.createElement('img');
|
||||
mealImg.setAttribute('id', 'a-mealImg');
|
||||
mealImg.setAttribute('src',data['mealImg']);
|
||||
mealImg.setAttribute('alt',data['imgAlt']);
|
||||
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'];
|
||||
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');
|
||||
@ -167,37 +167,37 @@ 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'];
|
||||
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']);
|
||||
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] + " ";
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -239,32 +239,32 @@ class ReviewCard extends HTMLElement {
|
||||
// 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');
|
||||
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;
|
||||
let mealLabel = this.shadowEl.getElementById("a-mealName");
|
||||
dataContainer["mealName"] = mealLabel.innerHTML;
|
||||
|
||||
//get comment section
|
||||
let comments = this.shadowEl.getElementById('a-comments');
|
||||
let comments = this.shadowEl.getElementById("a-comments");
|
||||
console.log(comments);
|
||||
dataContainer['comments'] = comments.innerText;
|
||||
dataContainer["comments"] = comments.innerText;
|
||||
|
||||
//get other info: rating
|
||||
let starsImg = this.shadowEl.getElementById('a-rating');
|
||||
dataContainer['rating'] = starsImg.getAttribute('num');
|
||||
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;
|
||||
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(",");
|
||||
let tagContainer = this.shadowEl.getElementById("a-tags");
|
||||
dataContainer["tags"] = tagContainer.getAttribute("list").split(",");
|
||||
|
||||
return dataContainer;
|
||||
}
|
||||
}
|
||||
customElements.define('review-card', ReviewCard);
|
||||
customElements.define("review-card", ReviewCard);
|
||||
|
||||
@ -1,68 +1,66 @@
|
||||
//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();
|
||||
}
|
||||
|
||||
function setupDelete(){
|
||||
let deleteBtn = document.getElementById('delete');
|
||||
let deleteBtn = document.getElementById("delete");
|
||||
let reviews = getReviewsFromStorage();
|
||||
let current = JSON.parse(sessionStorage.getItem('current'));
|
||||
deleteBtn.addEventListener('click', function(){
|
||||
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']){
|
||||
if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){
|
||||
console.log("match found");
|
||||
reviews.splice(i,1);
|
||||
saveReviewsToStorage(reviews);
|
||||
sessionStorage.removeItem('current');
|
||||
sessionStorage.removeItem("current");
|
||||
window.location.assign("./index.html");
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setupUpdate(){
|
||||
let updateBtn = document.getElementById('update');
|
||||
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(){
|
||||
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'));
|
||||
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'];
|
||||
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',()=> {
|
||||
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);
|
||||
@ -70,7 +68,7 @@ function setupUpdate(){
|
||||
}
|
||||
|
||||
//Take formdata values as newData when submit
|
||||
form.addEventListener('submit', function(){
|
||||
form.addEventListener("submit", function(){
|
||||
/*
|
||||
* User submits the form for their review.
|
||||
* We create reviewCard and put in storage
|
||||
@ -84,42 +82,42 @@ function setupUpdate(){
|
||||
newData[`${key}`] = `${value}`;
|
||||
}
|
||||
}
|
||||
newData['tags'] = [];
|
||||
newData["tags"] = [];
|
||||
|
||||
let tags = document.querySelectorAll('.tag');
|
||||
let tags = document.querySelectorAll(".tag");
|
||||
for(let i = 0; i < tags.length; i ++) {
|
||||
newData['tags'].push(tags[i].innerHTML);
|
||||
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']){
|
||||
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));
|
||||
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');
|
||||
let tagAddBtn = document.getElementById("tagAdd");
|
||||
tagAddBtn.addEventListener("click", ()=> {
|
||||
let tagField = document.getElementById("tag-form");
|
||||
if (tagField.value.length > 0) {
|
||||
let tagLabel = document.createElement('label');
|
||||
let tagLabel = document.createElement("label");
|
||||
tagLabel.innerHTML = tagField.value;
|
||||
tagLabel.setAttribute('class','tag');
|
||||
tagLabel.addEventListener('click',()=> {
|
||||
tagLabel.setAttribute("class","tag");
|
||||
tagLabel.addEventListener("click",()=> {
|
||||
tagContainer.removeChild(tagLabel);
|
||||
});
|
||||
|
||||
tagContainer.append(tagLabel);
|
||||
tagField.value = '';
|
||||
tagField.value = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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));
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
// 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
|
||||
@ -17,9 +17,9 @@ function init() {
|
||||
* @param {Array<Object>} reviews An array of reviews
|
||||
*/
|
||||
function addReviewsToDocument(reviews) {
|
||||
let mainEl = document.querySelector('main');
|
||||
let mainEl = document.querySelector("main");
|
||||
reviews.forEach(review => {
|
||||
let newReview = document.createElement('review-card');
|
||||
let newReview = document.createElement("review-card");
|
||||
newReview.data = review;
|
||||
//TODO: want to append it to whatever the box is in layout
|
||||
mainEl.append(newReview);
|
||||
@ -34,16 +34,16 @@ 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');
|
||||
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');
|
||||
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
|
||||
@ -57,20 +57,20 @@ function initFormHandler() {
|
||||
reviewObject[`${key}`] = `${value}`;
|
||||
}
|
||||
}
|
||||
reviewObject['tags'] = [];
|
||||
reviewObject["tags"] = [];
|
||||
|
||||
let tags = document.querySelectorAll('.tag');
|
||||
let tags = document.querySelectorAll(".tag");
|
||||
for(let i = 0; i < tags.length; i ++) {
|
||||
reviewObject['tags'].push(tags[i].innerHTML);
|
||||
reviewObject["tags"].push(tags[i].innerHTML);
|
||||
tagContainer.removeChild(tags[i]);
|
||||
}
|
||||
|
||||
|
||||
let newReview = document.createElement('review-card');
|
||||
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');
|
||||
let mainEl = document.querySelector("main");
|
||||
mainEl.append(newReview);
|
||||
|
||||
let storedReviews = getReviewsFromStorage();
|
||||
@ -80,14 +80,14 @@ function initFormHandler() {
|
||||
});
|
||||
|
||||
// DEV-MODE: for testing purposes
|
||||
let clearBtn = document.querySelector('.danger');
|
||||
clearBtn.addEventListener('click', function() {
|
||||
let clearBtn = document.querySelector(".danger");
|
||||
clearBtn.addEventListener("click", function() {
|
||||
localStorage.clear();
|
||||
let mainEl = document.querySelector('main');
|
||||
let mainEl = document.querySelector("main");
|
||||
while (mainEl.firstChild) {
|
||||
mainEl.removeChild(mainEl.firstChild);
|
||||
}
|
||||
let deleteTags = document.querySelectorAll('.tag');
|
||||
let deleteTags = document.querySelectorAll(".tag");
|
||||
for(let i = 0; i < deleteTags.length; i ++) {
|
||||
tagContainer.removeChild(deleteTags[i]);
|
||||
}
|
||||
@ -98,19 +98,19 @@ function initFormHandler() {
|
||||
|
||||
});
|
||||
|
||||
let tagAddBtn = document.getElementById('tagAdd');
|
||||
tagAddBtn.addEventListener('click', ()=> {
|
||||
let tagField = document.getElementById('tag-form');
|
||||
let tagAddBtn = document.getElementById("tagAdd");
|
||||
tagAddBtn.addEventListener("click", ()=> {
|
||||
let tagField = document.getElementById("tag-form");
|
||||
if (tagField.value.length > 0) {
|
||||
let tagLabel = document.createElement('label');
|
||||
let tagLabel = document.createElement("label");
|
||||
tagLabel.innerHTML = tagField.value;
|
||||
tagLabel.setAttribute('class','tag');
|
||||
tagLabel.addEventListener('click',()=> {
|
||||
tagLabel.setAttribute("class","tag");
|
||||
tagLabel.addEventListener("click",()=> {
|
||||
tagContainer.removeChild(tagLabel);
|
||||
});
|
||||
|
||||
tagContainer.append(tagLabel);
|
||||
tagField.value = '';
|
||||
tagField.value = "";
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user