Added tokelist to user profile.

src/controllers/profileController.js

@@ -37,6 +37,7 @@ module.exports.get = async function(req, res){
                     user: userDB.user,
                     date: userDB.date,
                     tokes: userDB.tokes,
+                    tokeCount: userDB.getTokeCount(),
                     img: userDB.img,
                     signature: userDB.signature,
                     bio: userDB.bio

src/schemas/userSchema.js

@@ -283,6 +283,20 @@ userSchema.methods.setFlair = async function(flair){
     return flairDB;
 }
 
+userSchema.methods.getTokeCount = function(){
+    //Set tokeCount to 0
+    var tokeCount = 0;
+
+    //For each toke command the user has used
+    this.tokes.forEach((commandCount) => {
+        //Add the count for that specific command to the total
+        tokeCount += commandCount;
+    });
+
+    //Return the amount of tokes recorded
+    return tokeCount;
+}
+
 //note: if you gotta call this from a request authenticated by it's user, make sure to kill that session first!
 userSchema.methods.killAllSessions = async function(reason = "A full log-out from all devices was requested for your account."){
     //get authenticated sessions

src/views/profile.ejs

@@ -34,8 +34,15 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
                 <% if(selfProfile){ %> 
                     <p class="profile-item-edit">(<a class="profile-item-edit" id="profile-img-edit" href="javascript:">edit</a>)</p>
                 <% } %>
-                <p class="profile-item" id="profile-tokes">tokes: <%- profile.tokes %> (Not yet implemented)</p>
+                <span class="profile-item profile-toke-count">
-
+                    <p class="profile-item profile-toke-count">tokes: <%- profile.tokeCount %> </p>
+                    <i class="profile-item bi-caret-left-fill profile-toke-count" id="toggle-toke-list"></i>
+                </span>
+                <div class="profile-item dynamic-container" id="profile-tokes">
+                    <% profile.tokes.forEach((count, toke) => { %>
+                        <p class="profile-item profile-toke" id='profile-tokes<%-toke%>'>!<%- toke %>: <%- count %></p>
+                    <% }); %>
+                </div>
                 <span class="profile-item" id="profile-signature">
                 <p class="profile-item profile-item-label" id="profile-signature-label">Signature: <span class="profile-content" id="profile-signature-content"><%- profile.signature %></span></p> 
                 <% if(selfProfile){ %> 

www/css/profile.css

@@ -40,4 +40,32 @@ input.account-settings-password-reset{
 
 a#account-settings-delete-button{
     font-weight: bold;
+}
+
+span.profile-toke-count{
+    display: flex;
+    flex-direction: row;
+    width: fit-content;
+}
+
+p.profile-toke-count{
+    margin: 0;
+}
+
+#profile-tokes{
+    resize: vertical;
+    max-width: fit-content;
+    height: fit-content;
+    min-height: 1.5em;
+    max-height: 5.8em;
+    display: none;
+}
+
+/*Little hacky but this keeps initial max-height from fucking up resizing*/
+#profile-tokes[style*="height"]{
+    max-height: 40vh;
+}
+
+.profile-toke{
+    margin: 0.2em 1em;
 }

www/css/theme/movie-night.css

@@ -77,7 +77,7 @@ a:hover, i:hover{
 
 a:active, i:active{
     color: var(--focus0-alt1);
-    box-shadow: var(--focus-glow0-alt0);
+    text-shadow: var(--focus-glow0-alt0);
 }
 
 select{
@@ -196,10 +196,6 @@ div.channel-guide-entry{
     box-shadow: 0.2em 0.2em 0.1em var(--bg1-alt0) inset;
 }
 
-a.channel-guide-entry-item{
-    color: var(--accent1);
-}
-
 span.channel-guide-entry-item{
     background-color: var(--bg1-alt0);
     box-shadow: 0.2em 0.2em 0.1em black inset;

www/js/profile.js

@@ -155,6 +155,31 @@ class passwordResetPrompt{
     }
 }
 
+class tokeList{
+    constructor(){
+        this.tokeList = document.querySelector('#profile-tokes');
+        this.tokeListLabel = document.querySelector('.profile-toke-count');
+        this.tokeListToggleIcon = document.querySelector('#toggle-toke-list');
+        console.log(this.tokeList)
+
+        this.setupInput();
+    }
+
+    setupInput(){
+        this.tokeListLabel.addEventListener('click', this.toggleTokeList.bind(this));
+    }
+
+    toggleTokeList(){
+        if(this.tokeList.checkVisibility()){
+            this.tokeList.style.display = "none";
+            this.tokeListToggleIcon.classList.replace("bi-caret-down-fill","bi-caret-left-fill");
+        }else{
+            this.tokeList.style.display = "block";
+            this.tokeListToggleIcon.classList.replace("bi-caret-left-fill","bi-caret-down-fill");
+        }
+    }
+}
+
 class deleteAccountButton{
     constructor(){
         this.deleteLink = document.querySelector('#account-settings-delete-button');
@@ -197,5 +222,6 @@ class deleteAccountPopup{
 new profileTextEditPrompt("signature");
 new profileTextEditPrompt("bio", true);
 new profileImgEditPrompt();
+new tokeList();
 new passwordResetPrompt();
 new deleteAccountButton();