Merge pull request #92 from cse110-fa22-group29/separate-tag-storage

Individual Tags in Local Storage
This commit is contained in:
rheabhutada02 2022-11-29 14:28:39 -08:00 committed by GitHub
commit eb4cb54b05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 117 additions and 35 deletions

View File

@ -3,11 +3,7 @@ import { newReviewToStorage } from "./localStorage.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
function init() { function init() {
// get next id
// creates the key
initFormHandler(); initFormHandler();
} }
function initFormHandler() { function initFormHandler() {
@ -91,19 +87,27 @@ function initFormHandler() {
}); });
let tagAddBtn = document.getElementById("tag-add-btn"); let tagAddBtn = document.getElementById("tag-add-btn");
//Set used to track tags and ensure no duplicates
let tagSet = new Set();
tagAddBtn.addEventListener("click", ()=> { tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById("tag-form"); let tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) { if (tagField.value.length > 0) {
let tagLabel = document.createElement("label"); let tagSetVal = tagField.value.toLowerCase();
tagLabel.innerHTML = tagField.value; if (!tagSet.has(tagSetVal)){
tagLabel.setAttribute("class","tag"); let tagLabel = document.createElement("label");
tagLabel.addEventListener("click",()=> { tagLabel.innerHTML = tagField.value;
tagContainer.removeChild(tagLabel); tagLabel.setAttribute("class","tag");
}); tagSet.add(tagField.value.toLowerCase());
tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel);
tagSet.delete(tagField.value.toLowerCase());
});
tagContainer.append(tagLabel); tagContainer.append(tagLabel);
} else {
window.alert("No duplicate tags allowed");
}
tagField.value = ""; tagField.value = "";
} }
}); });

View File

@ -10,6 +10,9 @@ function init(){
setupUpdate(); setupUpdate();
} }
/**
* Populates the relevant data to the details from local storage review
*/
function setupInfo(){ function setupInfo(){
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
let currReview = getReviewFromStorage(currID); let currReview = getReviewFromStorage(currID);
@ -51,6 +54,9 @@ function setupInfo(){
} }
} }
/**
* Sets up delete button to delete review from storage and switch to homepage
*/
function setupDelete(){ function setupDelete(){
let deleteBtn = document.getElementById("delete-btn"); let deleteBtn = document.getElementById("delete-btn");
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
@ -63,6 +69,9 @@ function setupDelete(){
}); });
} }
/**
* Sets up update button to reveal form and update info in storage and the current page
*/
function setupUpdate(){ function setupUpdate(){
let updateBtn = document.getElementById("update-btn"); let updateBtn = document.getElementById("update-btn");
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
@ -83,16 +92,22 @@ function setupUpdate(){
document.getElementById("s" + `${currReview["rating"]}`).checked = true; document.getElementById("s" + `${currReview["rating"]}`).checked = true;
document.getElementById("restaurant").defaultValue = currReview["restaurant"]; document.getElementById("restaurant").defaultValue = currReview["restaurant"];
//Set used to track tags and ensure no duplicates
let tagSet = new Set();
if(currReview["tags"]){ if(currReview["tags"]){
while (tagContainer.firstChild) { while (tagContainer.firstChild) {
tagContainer.removeChild(tagContainer.firstChild); tagContainer.removeChild(tagContainer.firstChild);
} }
let tagSetVal = currReview["tags"][i].toLowerCase()
for (let i = 0; i < currReview["tags"].length; i++) { for (let i = 0; i < currReview["tags"].length; i++) {
tagSet.add(tagSetVal);
let newTag = document.createElement("label"); let newTag = document.createElement("label");
newTag.setAttribute("class","tag"); newTag.setAttribute("class","tag");
newTag.innerHTML = currReview["tags"][i]; newTag.innerHTML = currReview["tags"][i];
newTag.addEventListener("click",()=> { newTag.addEventListener("click",()=> {
tagContainer.removeChild(newTag); tagContainer.removeChild(newTag);
tagSet.delete(tagSetVal);
}); });
tagContainer.append(newTag); tagContainer.append(newTag);
} }
@ -141,10 +156,11 @@ function setupUpdate(){
form.addEventListener("submit", function(){ form.addEventListener("submit", function(){
/* /*
* User submits the form for their review. * User submits the form for their review.
* We create reviewCard and put in storage * We create reviewCard data, replace in storage, and update tags
*/ */
let formData = new FormData(form); let formData = new FormData(form);
let newData = {}; let newData = {};
//iterate through formData and add to newData
for (let [key, value] of formData) { for (let [key, value] of formData) {
console.log(`${key}`); console.log(`${key}`);
console.log(`${value}`); console.log(`${value}`);
@ -175,18 +191,26 @@ function setupUpdate(){
}); });
//adding tag to form functionality
let tagAddBtn = document.getElementById("tag-add-btn"); let tagAddBtn = document.getElementById("tag-add-btn");
tagAddBtn.addEventListener("click", ()=> { tagAddBtn.addEventListener("click", ()=> {
let tagField = document.getElementById("tag-form"); let tagField = document.getElementById("tag-form");
if (tagField.value.length > 0) { if (tagField.value.length > 0) {
let tagLabel = document.createElement("label"); let tagSetVal = tagField.value.toLowerCase();
tagLabel.innerHTML = tagField.value; if (!tagSet.has(tagSetVal)){
tagLabel.setAttribute("class","tag"); let tagLabel = document.createElement("label");
tagLabel.addEventListener("click",()=> { tagLabel.innerHTML = tagField.value;
tagContainer.removeChild(tagLabel); tagLabel.setAttribute("class","tag");
}); tagSet.add(tagSetVal);
tagLabel.addEventListener("click",()=> {
tagContainer.removeChild(tagLabel);
tagSet.delete(tagSetVal);
});
tagContainer.append(tagLabel); tagContainer.append(tagLabel);
} else {
window.alert("No duplicate tags allowed");
}
tagField.value = ""; tagField.value = "";
} }
}); });

View File

@ -11,6 +11,9 @@ export function newReviewToStorage(review){
// set the review entry to the review object // set the review entry to the review object
localStorage.setItem(`review${nextReviewId}`, JSON.stringify(review)); localStorage.setItem(`review${nextReviewId}`, JSON.stringify(review));
// adding to the tag keys
addTagsToStorage(nextReviewId, review["tags"]);
//updating our activeIDS list //updating our activeIDS list
let tempIdArr = JSON.parse(localStorage.getItem("activeIDS")); let tempIdArr = JSON.parse(localStorage.getItem("activeIDS"));
tempIdArr.push(nextReviewId); tempIdArr.push(nextReviewId);
@ -37,6 +40,14 @@ export function getReviewFromStorage(ID){
* @param {Object} review to store * @param {Object} review to store
*/ */
export function updateReviewToStorage(ID, review){ export function updateReviewToStorage(ID, review){
let oldReview = JSON.parse(localStorage.getItem(`review${ID}`));
//Get diff of tags and update storage
let deletedTags = oldReview["tags"].filter(x => !review["tags"].includes(x));
let addedTags = review["tags"].filter(x => !oldReview["tags"].includes(x));
deleteTagsFromStorage(ID, deletedTags);
addTagsToStorage(ID, addedTags);
// set the review entry with ID to the review object // set the review entry with ID to the review object
localStorage.setItem(`review${ID}`, JSON.stringify(review)); localStorage.setItem(`review${ID}`, JSON.stringify(review));
} }
@ -52,6 +63,8 @@ export function deleteReviewFromStorage(ID){
if (activeIDS[i] == ID) { if (activeIDS[i] == ID) {
activeIDS.splice(i,1); activeIDS.splice(i,1);
localStorage.setItem("activeIDS", JSON.stringify(activeIDS)); localStorage.setItem("activeIDS", JSON.stringify(activeIDS));
let currReview = JSON.parse(localStorage.getItem(`review${ID}`));
deleteTagsFromStorage(ID, currReview["tags"]);
localStorage.removeItem(`review${ID}`); localStorage.removeItem(`review${ID}`);
return; return;
} }
@ -60,21 +73,45 @@ export function deleteReviewFromStorage(ID){
console.error(`could not find review${ID} in localStorage`); console.error(`could not find review${ID} in localStorage`);
} }
// legacy function /**
export function getAllReviewsFromStorage() { * Delete ID from the specified tags' storage
if (!(localStorage.getItem("activeIDS"))) { * @param {string} ID to delete from lists
// we wanna init the active ID array and start the nextID count * @param {string[]} deletedTags to modify storage of
localStorage.setItem("activeIDS", JSON.stringify([])); */
localStorage.setItem("nextID", JSON.stringify(0)); function deleteTagsFromStorage(ID, deletedTags) {
for(let i in deletedTags){
//get local storage of each tag and remove id from tag list
let tagName = "!"+ deletedTags[i].toLowerCase();
let tagArr = JSON.parse(localStorage.getItem(tagName));
for(let j in tagArr){
if(tagArr[j] == ID){
tagArr.splice(j,1);
break;
}
}
if(tagArr.length != 0){
localStorage.setItem(tagName, JSON.stringify(tagArr));
} else {
localStorage.removeItem(tagName);
}
} }
//iterate thru activeIDS }
let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
let reviews = []; /**
for (let i = 0; i < activeIDS.length; i++) { * Add ID from the specified tags' storage
let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`)); * @param {string} ID to add to lists
reviews.push(currReview); * @param {string[]} addedTags to modify storage of
*/
function addTagsToStorage(ID, addedTags) {
for(let i in addedTags){
let tagName = "!" + addedTags[i].toLowerCase();
let tagArr = JSON.parse(localStorage.getItem(tagName));
if(!tagArr){
tagArr = [];
}
tagArr.push(ID);
localStorage.setItem(tagName, JSON.stringify(tagArr));
} }
return reviews;
} }
/** /**
@ -94,3 +131,20 @@ export function getTopReviewsFromStorage(n) {
export function getReviewsByTag(tag) { export function getReviewsByTag(tag) {
} }
// legacy function
export function getAllReviewsFromStorage() {
if (!(localStorage.getItem("activeIDS"))) {
// we wanna init the active ID array and start the nextID count
localStorage.setItem("activeIDS", JSON.stringify([]));
localStorage.setItem("nextID", JSON.stringify(0));
}
//iterate thru activeIDS
let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
let reviews = [];
for (let i = 0; i < activeIDS.length; i++) {
let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`));
reviews.push(currReview);
}
return reviews;
}