cse110-fa22-group29/source/assets/scripts/ReviewDetails.js
2022-11-12 14:16:03 -08:00

128 lines
5.1 KiB
JavaScript

//reviewDetails.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';
// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);
function init(){
let main = document.querySelector('main');
let reviews = getReviewsFromStorage();
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;
}
};
}
}
});
}
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'));
//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);
}
}
//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 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;
}
};
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);
});
tagContainer.append(tagLabel);
tagField.value = '';
}
});
}
});
}