added different filtering methods + load more btn

This commit is contained in:
Kara Hoagland 2022-11-30 02:49:49 -08:00
parent a65b65d748
commit 5621139dd7
3 changed files with 144 additions and 35 deletions

View File

@ -169,6 +169,7 @@ function addTagsToStorage(ID, addedTags) {
* @param {number} n number of reviews to return * @param {number} n number of reviews to return
* @returns {Array} list of n reviews that are the top rated * @returns {Array} list of n reviews that are the top rated
*/ */
//legacy
export function getTopReviewsFromStorage(n) { export function getTopReviewsFromStorage(n) {
let resultArr = []; let resultArr = [];
for(let i = 5; i > 0; i--){ for(let i = 5; i > 0; i--){
@ -195,6 +196,7 @@ export function getTopReviewsFromStorage(n) {
* @param {string} tag to filter by * @param {string} tag to filter by
* @returns {Object} list of reviews that all contain the specified tag * @returns {Object} list of reviews that all contain the specified tag
*/ */
//legacy
export function getReviewsByTag(tag) { export function getReviewsByTag(tag) {
let reviewArr = []; let reviewArr = [];
let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase())); let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase()));
@ -214,9 +216,49 @@ export function getAllReviewsFromStorage() {
//iterate thru activeIDS //iterate thru activeIDS
let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
let reviews = []; let reviews = [];
for (let i = activeIDS.length - 1; i >= 0; i--) { for (let i = 0; i < activeIDS.length; i++) {
let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`)); let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`));
reviews.push(currReview); reviews.push(currReview);
} }
return reviews; return reviews;
}
/**
* Get all IDs of active reviews
* @returns {number[]} list of all active IDs
*/
export function getIDsFromStorage() {
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));
}
let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
return activeIDS;
}
/**
* Returns all review IDs which contain the same tag specified.
* @param {string} tag to filter by
* @returns {number[]} list of IDs of reviews that all contain the specified tag
*/
export function getIDsByTag(tag) {
let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase()));
return tagArr;
}
/**
* Returns the top rated review IDs in order.
* @returns {number[]} list of IDs of reviews in order of top rating (most recent if equal rating)
*/
export function getTopIDsFromStorage() {
let resultArr = [];
for(let i = 5; i > 0; i--){
let starArr = JSON.parse(localStorage.getItem(`star${i}`));
if(!starArr){
continue;
}
resultArr = resultArr.concat(starArr.reverse());
}
return resultArr;
} }

View File

@ -1,15 +1,13 @@
// main.js // main.js
import {getAllReviewsFromStorage, getTopReviewsFromStorage, getReviewsByTag} from "./localStorage.js"; import {getAllReviewsFromStorage, getTopReviewsFromStorage, getReviewsByTag, getIDsByTag, getIDsFromStorage, getReviewFromStorage, getTopIDsFromStorage} from "./localStorage.js";
// Run the init() function when the page has loaded // Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
function init() { function init() {
// Get the reviews from localStorage //initial population of review container
let reviews = getAllReviewsFromStorage(); sortAndFilter(false, null);
// Add each reviews to the <main> element //Add the event listeners to dropdown and search bar
addReviewsToDocument(reviews);
// Add the event listeners to the form elements
initFormHandler(); initFormHandler();
} }
@ -28,40 +26,104 @@ function addReviewsToDocument(reviews) {
} }
/** /**
* Adds the necessary event handlers to <form> and the clear storage * Adds the necessary event handlers to search-btn and sort
* <button>.
*/ */
function initFormHandler() { function initFormHandler() {
//btn to create form (could be its own function?)
let createBtn = document.getElementById("create-btn");
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 //grabbing search field
let searchField = document.getElementById("search-bar"); let searchField = document.getElementById("search-bar");
let searchBtn = document.getElementById("search-btn"); let searchBtn = document.getElementById("search-btn");
let searchTag = null;
//adding search functionality //adding search functionality
searchBtn.addEventListener('click', function(){ //TODO: Add ability to enter without refresh of search bar
let reviewBox = document.getElementById("review-container"); //filter by selected tag when button clicked
//clearing after a search searchBtn.addEventListener("click", function(){
while(reviewBox.firstChild){ searchTag = searchField.value;
reviewBox.removeChild(reviewBox.firstChild); sortAndFilter(searchTag);
} });
let reviewArr = getReviewsByTag(searchField.value);
addReviewsToDocument(reviewArr); //sort by selected method
}) let sortMethod = document.getElementById("sort");
sortMethod.addEventListener("input", function(){
sortAndFilter(searchTag);
});
} }
/**
* Deciphers sort and filter to populate the review-container
* @param {string} searchTag tag name to filter by
*/
function sortAndFilter(searchTag){
let reviewBox = document.getElementById("review-container");
let sortMethod = document.getElementById("sort");
//clear review container
while(reviewBox.firstChild){
reviewBox.removeChild(reviewBox.firstChild);
}
let reviewIDs = [];
//sort method: most recent
if(sortMethod.value == "recent"){
//tag filtered most recent
if(searchTag){
reviewIDs = getIDsByTag(searchTag);
}
//most recent
else {
reviewIDs = getIDsFromStorage();
}
//reversed for recency
loadReviews(0, reviewIDs.reverse());
}
//sort method: top rated
else if (sortMethod.value == "top"){
//tag filtered top rated
if(searchTag){
//intersection of top ids list and ids by tag in top ids order
reviewIDs = getTopIDsFromStorage().filter(x => getIDsByTag(searchTag).includes(x));
}
//top rated
else {
reviewIDs = getTopIDsFromStorage();
}
loadReviews(0, reviewIDs);
}
}
/**
* Populate review-container with 9 more reviews
* @param {number} index review index to begin with
* @param {number[]} reviewIDs ordered array of reviews
*/
function loadReviews(index, reviewIDs){
let reviewBox = document.getElementById("review-container");
let moreBtn = document.getElementById("more-btn");
//delete load more button if exists
if(moreBtn){
reviewBox.removeChild(moreBtn);
}
let reviewArr = [];
//check if there are more than 9 reviews left
if(index + 9 > reviewIDs.length - 1){
//add remaining reviews to review container
for(let i = index; i < reviewIDs.length; i++){
reviewArr.push(getReviewFromStorage(reviewIDs[i]));
}
addReviewsToDocument(reviewArr);
} else {
//add 9 more reviews to container
for(let i = index; i < index + 9; i++){
reviewArr.push(getReviewFromStorage(reviewIDs[i]));
}
addReviewsToDocument(reviewArr);
//create and add load more button
moreBtn = document.createElement("button");
moreBtn.setAttribute("id", "more-btn");
moreBtn.innerText = "Load More";
//if load more clicked, load 9 more
moreBtn.addEventListener("click", function(){loadReviews(index + 9, reviewIDs)});
reviewBox.append(moreBtn);
}
}

View File

@ -46,7 +46,12 @@
<img src ="./assets/images/Grouppink.png" alt="CREATE" style="opacity: 100%;" id="create-btn" title="Add an entry!" onclick="window.location.assign('./CreatePage.html')"/> <img src ="./assets/images/Grouppink.png" alt="CREATE" style="opacity: 100%;" id="create-btn" title="Add an entry!" onclick="window.location.assign('./CreatePage.html')"/>
<h2 id="recent-reviews-text"> Recent Reviews </h2> <h2 id="recent-reviews-text"> Recent Reviews </h2>
<img src ="./assets/images/Grouppink.png" style="opacity:0;"/> <img src ="./assets/images/Grouppink.png" style="opacity:0;"/>
<button id="rating-btn">Sort By Top Rating</button> <!--<button id="rating-btn">Sort By Top Rating</button>-->
<label for="sort">Filtering Method:</label>
<select id="sort">
<option value="recent">Most Recent</option>
<option value="top">Top Rated</option>
</select>
</div> </div>
<div class="review-container" id="review-container"></div> <div class="review-container" id="review-container"></div>