diff --git a/source/assets/images/search_button.png b/source/assets/images/search_button.png new file mode 100644 index 0000000..66a1a85 Binary files /dev/null and b/source/assets/images/search_button.png differ diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 3d4c97c..eda7c15 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -17,6 +17,7 @@ class ReviewCard extends HTMLElement { margin: 0; padding: 0; overflow-wrap: anywhere; + cursor: pointer; } a { diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index c9e05a0..fceadc1 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -99,8 +99,9 @@ function setupUpdate(){ while (tagContainer.firstChild) { tagContainer.removeChild(tagContainer.firstChild); } - let tagSetVal = currReview["tags"][i].toLowerCase() + let tagSetVal; for (let i = 0; i < currReview["tags"].length; i++) { + tagSetVal = currReview["tags"][i].toLowerCase() tagSet.add(tagSetVal); let newTag = document.createElement("label"); newTag.setAttribute("class","tag"); diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js index d0278e3..6fb7265 100644 --- a/source/assets/scripts/localStorage.js +++ b/source/assets/scripts/localStorage.js @@ -13,6 +13,14 @@ export function newReviewToStorage(review){ // adding to the tag keys addTagsToStorage(nextReviewId, review["tags"]); + + //adding to the star storage + let starArr = JSON.parse(localStorage.getItem(`star${review["rating"]}`)); + if(!starArr){ + starArr = []; + } + starArr.push(nextReviewId); + localStorage.setItem(`star${review["rating"]}`, JSON.stringify(starArr)); //updating our activeIDS list let tempIdArr = JSON.parse(localStorage.getItem("activeIDS")); @@ -42,6 +50,31 @@ export function getReviewFromStorage(ID){ export function updateReviewToStorage(ID, review){ let oldReview = JSON.parse(localStorage.getItem(`review${ID}`)); + //star local storage update + if(oldReview["rating"] !== review["rating"]){ + //first delete from previous rating array in storage + let oldStarArr = JSON.parse(localStorage.getItem(`star${oldReview["rating"]}`)); + for (let i in oldStarArr) { + if (oldStarArr[i] == ID) { + //removing from corresponding rating array and updating local Storage + oldStarArr.splice(i,1); + break; + } + } + if(oldStarArr.length != 0){ + localStorage.setItem(`star${oldReview["rating"]}`, JSON.stringify(oldStarArr)); + } else { + localStorage.removeItem(`star${oldReview["rating"]}`); + } + //then add ID to array corresponding to new review rating + let newStarArr = JSON.parse(localStorage.getItem(`star${review["rating"]}`)); + if(!newStarArr){ + newStarArr = []; + } + newStarArr.push(ID); + localStorage.setItem(`star${review["rating"]}`, JSON.stringify(newStarArr)); + } + //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)); @@ -57,12 +90,29 @@ export function updateReviewToStorage(ID, review){ * @param {string} ID of the review to delete */ export function deleteReviewFromStorage(ID){ + //removing id number from activeIDS and star{rating} let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); - + let reviewRating = JSON.parse(localStorage.getItem(`review${ID}`))["rating"]; + let starArr = JSON.parse(localStorage.getItem(`star${reviewRating}`)); + + for (let i in starArr) { + if (starArr[i] == ID) { + //removing from corresponding rating array and updating local Storage + starArr.splice(i,1); + break; + } + } + if(starArr.length != 0){ + localStorage.setItem(`star${reviewRating}`, JSON.stringify(starArr)); + } else { + localStorage.removeItem(`star${reviewRating}`); + } + for (let i in activeIDS) { if (activeIDS[i] == ID) { activeIDS.splice(i,1); localStorage.setItem("activeIDS", JSON.stringify(activeIDS)); + let currReview = JSON.parse(localStorage.getItem(`review${ID}`)); deleteTagsFromStorage(ID, currReview["tags"]); localStorage.removeItem(`review${ID}`); @@ -117,10 +167,27 @@ function addTagsToStorage(ID, addedTags) { /** * Returns the top n reviews by ID. If there are less than n reviews, returns the most possible. * @param {number} n number of reviews to return - * @returns {Object} list of n reviews that are the top rated + * @returns {Array} list of n reviews that are the top rated */ export function getTopReviewsFromStorage(n) { - + let resultArr = []; + for(let i = 5; i > 0; i--){ + let starArr = JSON.parse(localStorage.getItem(`star${i}`)); + if(!starArr){ + continue; + } + for(let j = starArr.length - 1; j >= 0; j--) { + let review = JSON.parse(localStorage.getItem(`review${starArr[j]}`)) + resultArr.push(review); + if(resultArr.length == n) { + break; + } + } + if(resultArr.length == n) { + break; + } + } + return resultArr; } /** @@ -129,7 +196,12 @@ export function getTopReviewsFromStorage(n) { * @returns {Object} list of reviews that all contain the specified tag */ export function getReviewsByTag(tag) { - + let reviewArr = []; + let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase())); + for (let i in tagArr){ + reviewArr.push(JSON.parse(localStorage.getItem(`review${tagArr[i]}`))); + } + return reviewArr; } // legacy function @@ -142,7 +214,7 @@ export function getAllReviewsFromStorage() { //iterate thru activeIDS let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); let reviews = []; - for (let i = 0; i < activeIDS.length; i++) { + for (let i = activeIDS.length - 1; i >= 0; i--) { let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`)); reviews.push(currReview); } diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index f012cb9..8b8323b 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -1,5 +1,5 @@ // main.js -import {getAllReviewsFromStorage} from "./localStorage.js"; +import {getAllReviewsFromStorage, getTopReviewsFromStorage, getReviewsByTag} from "./localStorage.js"; // Run the init() function when the page has loaded window.addEventListener("DOMContentLoaded", init); @@ -22,7 +22,6 @@ function addReviewsToDocument(reviews) { reviews.forEach(review => { let newReview = document.createElement("review-card"); newReview.data = review; - //TODO: want to append it to whatever the box is in layout reviewBox.append(newReview); }); @@ -39,4 +38,30 @@ function initFormHandler() { createBtn.addEventListener("click", function(){ window.location.assign("./CreatePage.html"); }); + + let ratingBtn = document.getElementById("rating-btn"); + ratingBtn.addEventListener("click", function() { + let reviewBox = document.getElementById("review-container"); + while(reviewBox.firstChild){ + reviewBox.removeChild(reviewBox.firstChild); + } + let reviewArr = getTopReviewsFromStorage(12); + addReviewsToDocument(reviewArr); + }); + + //grabbing search field + let searchField = document.getElementById("search-bar"); + let searchBtn = document.getElementById("search-btn"); + //adding search functionality + searchBtn.addEventListener('click', function(){ + let reviewBox = document.getElementById("review-container"); + //clearing after a search + while(reviewBox.firstChild){ + reviewBox.removeChild(reviewBox.firstChild); + } + let reviewArr = getReviewsByTag(searchField.value); + addReviewsToDocument(reviewArr); + }) + + } diff --git a/source/index.html b/source/index.html index d1f5cd2..8af8c99 100644 --- a/source/index.html +++ b/source/index.html @@ -32,18 +32,21 @@
- - + +
+ SEARCH BTN
CREATE

Recent Reviews

- +
diff --git a/source/static/homepage.css b/source/static/homepage.css index ff575b4..460b2ff 100644 --- a/source/static/homepage.css +++ b/source/static/homepage.css @@ -57,13 +57,21 @@ body { .search-bar > form { float: right; padding: 6px 10px; - margin-top: 8px; + /* + margin-top: 8px; margin-right: 16px; + */ background: rgb(239 183 183); font-size: 17px; border: none; border-radius: 12px; - cursor: pointer; +} + +#search-btn { + position: relative; + align-self: center; + width: 30px; + height: 30px; } #recent-reviews-text { @@ -78,6 +86,7 @@ img#create-btn { align-self: center; padding-left: 2.5%; padding-right: 2.5%; + cursor: pointer; } .review-container {