cse110-fa22-group29/source/assets/scripts/main.js

160 lines
4.4 KiB
JavaScript
Raw Normal View History

2022-11-08 03:18:05 +00:00
// main.js
import {getIDsByTag, getIDsFromStorage, getReviewFromStorage, getTopIDsFromStorage} from "./localStorage.js";
2022-11-08 03:18:05 +00:00
// Run the init() function when the page has loaded
window.addEventListener("DOMContentLoaded", init);
2022-11-08 03:18:05 +00:00
function init() {
//initial population of review container
sortAndFilter(false, null);
//Add the event listeners to dropdown and search bar
initFormHandler();
2022-11-08 03:18:05 +00:00
}
2022-11-08 03:18:05 +00:00
/**
2022-11-08 23:57:02 +00:00
* @param {Array<Object>} reviews An array of reviews
2022-11-08 03:18:05 +00:00
*/
2022-11-08 23:57:02 +00:00
function addReviewsToDocument(reviews) {
2022-11-21 19:58:26 +00:00
let reviewBox = document.getElementById("review-container");
reviews.forEach(review => {
let newReview = document.createElement("review-card");
newReview.data = review;
2022-11-21 19:58:26 +00:00
reviewBox.append(newReview);
});
2022-11-08 03:18:05 +00:00
}
/**
* Adds the necessary event handlers to search-btn and sort
2022-11-08 03:18:05 +00:00
*/
function initFormHandler() {
2022-11-12 22:16:03 +00:00
//grabbing search field
let searchField = document.getElementById("search-bar");
let searchBtn = document.getElementById("search-btn");
let searchTag = null;
//adding search functionality
//TODO: Add ability to enter without refresh of search bar
//filter by selected tag when button clicked
searchBtn.addEventListener("click", function(){
searchTag = searchField.value;
sortAndFilter(searchTag);
});
2022-12-01 00:11:42 +00:00
//for clearing tag filter
let clearSearchBtn = document.getElementById("clear-search");
clearSearchBtn.addEventListener("click", function(){
searchTag = null;
searchField.value = "";
sortAndFilter(searchTag);
});
2022-12-01 00:11:42 +00:00
//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
2022-12-01 00:11:42 +00:00
loadReviews(0, reviewIDs);
}
//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");
2022-12-01 00:11:42 +00:00
// label if there are no reviews to display
if(reviewIDs.length == 0){
let emptyLabel = document.createElement("label");
emptyLabel.setAttribute("id", "empty");
emptyLabel.innerText = "No Reviews To Display";
reviewBox.append(emptyLabel);
} else {
let emptyLabel = document.getElementById("empty");
if(emptyLabel){
reviewBox.removeChild(emptyLabel);
}
}
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);
}
2022-11-11 20:07:58 +00:00
}
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
try {
await navigator.serviceWorker.register("./sw.js", {scope: "./"});
} catch (error) {
console.error(`Registration failed with ${error}`);
}
}
};
registerServiceWorker();