add tag search

add top rating sort
add star localstorage
This commit is contained in:
Kara Hoagland 2022-11-29 20:51:45 -08:00
parent eb4cb54b05
commit a65b65d748
7 changed files with 124 additions and 13 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@ -17,6 +17,7 @@ class ReviewCard extends HTMLElement {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-wrap: anywhere; overflow-wrap: anywhere;
cursor: pointer;
} }
a { a {

View File

@ -99,8 +99,9 @@ function setupUpdate(){
while (tagContainer.firstChild) { while (tagContainer.firstChild) {
tagContainer.removeChild(tagContainer.firstChild); tagContainer.removeChild(tagContainer.firstChild);
} }
let tagSetVal = currReview["tags"][i].toLowerCase() let tagSetVal;
for (let i = 0; i < currReview["tags"].length; i++) { for (let i = 0; i < currReview["tags"].length; i++) {
tagSetVal = currReview["tags"][i].toLowerCase()
tagSet.add(tagSetVal); tagSet.add(tagSetVal);
let newTag = document.createElement("label"); let newTag = document.createElement("label");
newTag.setAttribute("class","tag"); newTag.setAttribute("class","tag");

View File

@ -13,6 +13,14 @@ export function newReviewToStorage(review){
// adding to the tag keys // adding to the tag keys
addTagsToStorage(nextReviewId, review["tags"]); 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 //updating our activeIDS list
let tempIdArr = JSON.parse(localStorage.getItem("activeIDS")); let tempIdArr = JSON.parse(localStorage.getItem("activeIDS"));
@ -42,6 +50,31 @@ export function getReviewFromStorage(ID){
export function updateReviewToStorage(ID, review){ export function updateReviewToStorage(ID, review){
let oldReview = JSON.parse(localStorage.getItem(`review${ID}`)); 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 //Get diff of tags and update storage
let deletedTags = oldReview["tags"].filter(x => !review["tags"].includes(x)); let deletedTags = oldReview["tags"].filter(x => !review["tags"].includes(x));
let addedTags = review["tags"].filter(x => !oldReview["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 * @param {string} ID of the review to delete
*/ */
export function deleteReviewFromStorage(ID){ export function deleteReviewFromStorage(ID){
//removing id number from activeIDS and star{rating}
let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); 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) { for (let i in activeIDS) {
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}`)); let currReview = JSON.parse(localStorage.getItem(`review${ID}`));
deleteTagsFromStorage(ID, currReview["tags"]); deleteTagsFromStorage(ID, currReview["tags"]);
localStorage.removeItem(`review${ID}`); 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. * 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 * @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) { 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 * @returns {Object} list of reviews that all contain the specified tag
*/ */
export function getReviewsByTag(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 // legacy function
@ -142,7 +214,7 @@ 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 = 0; i < activeIDS.length; i++) { for (let i = activeIDS.length - 1; i >= 0; 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);
} }

View File

@ -1,5 +1,5 @@
// main.js // main.js
import {getAllReviewsFromStorage} from "./localStorage.js"; import {getAllReviewsFromStorage, getTopReviewsFromStorage, getReviewsByTag} 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);
@ -22,7 +22,6 @@ function addReviewsToDocument(reviews) {
reviews.forEach(review => { reviews.forEach(review => {
let newReview = document.createElement("review-card"); let newReview = document.createElement("review-card");
newReview.data = review; newReview.data = review;
//TODO: want to append it to whatever the box is in layout
reviewBox.append(newReview); reviewBox.append(newReview);
}); });
@ -39,4 +38,30 @@ function initFormHandler() {
createBtn.addEventListener("click", function(){ createBtn.addEventListener("click", function(){
window.location.assign("./CreatePage.html"); 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);
})
} }

View File

@ -32,18 +32,21 @@
<div style="width: 60%;"> <div style="width: 60%;">
<div class="search-bar"> <div class="search-bar">
<form id="form"> <form id="form">
<input type="search" id="searching" name="searchBar" placeholder="Search journal..."> <input type="search" id="search-bar" name="searchBar" placeholder="Search tags...">
<button class="click" type="search"> Search </button> <!---
<button class="click" type="search"> Search </button>
--->
<div class="Filter-box"> <div class="Filter-box">
</div> </div>
</form> </form>
<img src ="./assets/images/search_button.png" alt="SEARCH BTN" id="search-btn"/>
</div> </div>
<div class="center-display"> <div class="center-display">
<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>
</div> </div>
<div class="review-container" id="review-container"></div> <div class="review-container" id="review-container"></div>

View File

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