From a65b65d748e8507b2427eb01d37a64c8633ac9d8 Mon Sep 17 00:00:00 2001 From: Kara Hoagland Date: Tue, 29 Nov 2022 20:51:45 -0800 Subject: [PATCH] add tag search add top rating sort add star localstorage --- source/assets/images/search_button.png | Bin 0 -> 3283 bytes source/assets/scripts/ReviewCard.js | 1 + source/assets/scripts/ReviewDetails.js | 3 +- source/assets/scripts/localStorage.js | 82 +++++++++++++++++++++++-- source/assets/scripts/main.js | 29 ++++++++- source/index.html | 9 ++- source/static/homepage.css | 13 +++- 7 files changed, 124 insertions(+), 13 deletions(-) create mode 100644 source/assets/images/search_button.png diff --git a/source/assets/images/search_button.png b/source/assets/images/search_button.png new file mode 100644 index 0000000000000000000000000000000000000000..66a1a853a3f07d8fe2b7d10fc55c242721f19d17 GIT binary patch literal 3283 zcma)9i8~bB_aDYSmWmh*Wnae{CQD_BktKU53}Z>i*vFDR#=ff%*}|(BOR}XYV;7QT z>=SwkWh^n?8T_W_`TYUk^E~IC=X378pL3r3+~=HoQ!LDlIM@W(0001oG2Fn4W(WT& z3lnX8Yu`{xGYmm`#x^W8iDGfb&@d|s?hph3fVlrE9iXTL3;?i)7#rx?pi6!&g{KRL z2o3BVx7>Z-YWFG)n`oD5RX$vYC@=YO0sp8#>_QG+j0k;J#8PB`d~E5c}P**ee!f{S7XJ? zGkP`_^FIlXBQz8+IRQqnDZOnBroYc=4Y1>q_WAFu3xY0hlxJFI14qh8>!wx;J*R`P z?j%d#r+UuIo(jtwI|EATgc*dHXS@z~pXFW>FBQPvL|sGipjebdQ0&{W16cPHF(tlD z4oJeFXDG7*Lm{A;&F+km3LwZe=JD~5spIa&Nny$umQ}96_#$^N4)wVc?;xOiisaU6 z!FFMS#KJ#0vc>d^m=Az~9$bs84(^NnMjTu=51Uq-Oy&!A_7Fo!bymXZLw3TST;5Y8 zT6jQ7eh6QtKT;B*O6m<4DDfG#ya=c1>Z*Y3LrH`p(JR|ur-6}o{|G}?Ny;n&cISOD znteaenNKnLejtqO5ZbQ0|KeaJhZoC7(mtVzo^!Mdz=R1oJGuTUN`fX^UQKkL-XLAr zO~<93y)C@}PVQlrA;4om89w@t{v0oipYmgTKWYZ(#jMRGgJH$Jbq^EK;f!M4WC_0{ zMqq;pp)otZ<&WvP^-B}+-&jX0Ptsm9w=)vNe90-M5?#tAF^H@bD>v&{KJPQ-t)!lq zdRtSbhKdshKqFum1nFXERwP|1>bmu~SE0>rI%UbSDEu%2SUjvK5eS>{m>XT|yI7tu z_B9Uot*SBW9WLNgW#I$UfqwAh0~RM-xcmEwI`|gOp{lX?F~XBnD`EXDb`~B+Cl5H{ zyb_4&%8Ne2-9eO*L`--k^P)w*`4Jw5+NSp|n@vtl*FS7Vj{F3aiiIN^2bj3(w`?Z= z1Vb6x(k?VsO)zQS+BbCOh?3Upz8$25jbHzBtaRio#;B3Jp3wy%BhnF|M|XYAA}1rd zr46yG8r%ztvc{DPpPX$xg0x(PE*oz(^TE^&u_~SBJ5QB=f;{CiFv;pE>q0^!u|lGF zS&pe#it$YLR>h(5H`}wTM+(x6dk(p3L`@RGg(_|eI)RepU zmMisAodvK|d=45@Bb`$?BA%-=IcB7|V_9;mdEwMJ;In-7TrU&PHQm~>fA;;Mdc}=DqB8DX1$!4q zC?a3f{?hp2CB-veo8zAPd6;HHUkf9zPmZ4j2dO5-OwsZPA~;mJ+f zxClDLOy?_X1nds}T}L?s`$kysb626>dk4rZQYtSQq*kF=tqj$oOkj~R8!(G{fi(YD zs3(K3hSAJ(iH*ts7~-K&4@}C~TKuxk@bjyP71iVCMKo@FWXZsX7d|`*`D(hn*Rw#H zsx|`qZG9#khRSdU?y79-n(A^r1xt%~xTUl%{l495>HnXC4_bw|H2r}OeXk1q!!M8Y zZdQ`GBm$J%7IJ6pk&#ks<#)J<);PJ(NYxs@#U$qwe@LIDnZ?obvYP$7U&5K8MTqJ(dJcPMupF_hK=PNK`$sA zJ;N?wIb3SJtB`D|dZ(6QtVc969r@)!`%)}_IFo2^QA!L~%gP2n+}1DQT-EnxI_)~2 zf?XDZUA1r~oWJ{KS?Ze-bCookKr7$W!wgcJE@cj^m;~yUT#y^0WE`5|-oTaZ^t4Et zJxTU)g{w&uaT%$R^X@V;V*Iz~TqfxvVqIWazW_ZYNO`w0{JDOxR@-*P`a=zB8QC#2 z=A=gaJv6lDsP#72{1=_)TBMr?&Vn-ivhA!fT8j`V{G)l$IrFv#J*AJeWr|bOL6G4T zQGjfN?`Y4`BdBqdHZ|}=4!VPOyy{0jeL>s8wHH{a7-ULz-s-wf5l=6$Gn>8 zAj^zcsXCsaybbuwgOw<*-_w{$d+1xm&m9-D+PGVQJEGN}bBg4U@Vjf%B09S^WoP^E zV6MZrkg*%^8Pvw#iuBT`S+mp#Zy7YV=qm2h?M$?`6!kMJ6A3>R21{7+e=QLA!E@l0 zX-;Sh){-P166u`}uP$%G(dVkIKYG(;pQHgi58I-Qh;8OAJ`JWj%USxQ16A!!zK=Fq zE2~~`ah4)^qE^?Io{*MeBxun7#LoTaiiT**-7IkVr_|lp`$G zRs9JwPDfNX?dF*UvdiB?fLi|Xlt*#=+}a6k&A9vh!JVU_uP$ftG0B-Kgv;pE;E+Fn zX{xSF>&T$u_5ViLh}`Ao(iM3m|6z@G?UeJ#%}awn*2^Hk5x@MP8(+nJ1tR7n99Vq$ zv>$nIvVE2`ig8H!A}8Bhl&gv29O^K;kBvHD7fXx&WY`h7Q+zEbTzEm(kgY1|*O)LxZ@i-W>95*AWfU8h>u57?2E8+4T7zg|`FC~2 zK+*ezU#UFB9#q4wf2u}|Af`0|hrUV@J$3}Yk2J{~13`q&lelVbO7~pm`pVcyTqE%2 z_{lC@Pi^P6(!Yw)8tRSGUs_M>6a||G9Q~#pZ>bTD@E_ql(|qG`gy%*(XuX0C+*w93 z+^sIhH*2st0W5hrk_eDw9hn4kT<MMAnLEw6)jP6_y-YDQS{ z*Wr2s`{ontk{W{vrbRs}NXjpe-DaSzuLEdr9UHWz=z|UWXKey$W8&SbuA2FT&Lans z@D7+vztZQ~ExB~~>cu37Hp?g-r>-0|$@Xw#STl431`UK918UsFCc*`>oZe9AzA@$d z6;s1p2AKHy4o|~wkfhsG)2>;pGt?oi`P}@E`DL#Q%rTkdn=*vH)(qMer&vfQTlfmv@-aC%}G}zmDK_Yn&dvx_9)GHq{x$k!O{=GoB zYlhg#MqB~Jia)txJ)4(1aJ$e6c=k3f6)cfq^zLd`17$iynjF89N8q YSLRhRiv1d({Yn7Fx6KV2^bqm?2a~@xDgXcg literal 0 HcmV?d00001 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 {