set active css class to user boxes on click

chatto/src/main/resources/static/js/chat.js

@@ -35,6 +35,34 @@ var msgContainerSendTemplate = Handlebars.compile(source);
 
 var chatAreaNew = document.getElementById('chat_area_new');
 
+var userBoxes = document.getElementsByName('user-box');
+
+// Loop through the buttons and add the active class to the current/clicked button
+// for (var i = 0; i < btns.length; i++) {
+//     btns[i].addEventListener("click", function() {
+//       var current = document.getElementsByClassName("active");
+
+//       // If there's no active class
+//       if (current.length > 0) {
+//         current[0].className = current[0].className.replace(" active", "");
+//       }
+
+//       // Add the active class to the current/clicked button
+//       this.className += " active";
+//     });
+//   } 
+
+for (let i = 0; i < userBoxes.length; i++) {
+    userBoxes[i].addEventListener('click', function() {
+        let current = document.getElementsByClassName('user-box active');
+        if (current.length > 0) {
+            current[0].className = current[0].className.replace(" active", "");
+        }
+        // Add the active class to the current/clicked button
+        this.className += " active";
+    })
+}
+
 // var lastMessageTimeStamp;
 
 // console.log(authToken);
@@ -220,12 +248,7 @@ parent.addDelegatedListener("click", "input[type='radio']", function(event) {
                 let messageLog = [];
                 let messageLogNew = [];
                 let lastMessageTimeStamp;
-                //				console.log("Json length = " + json.length);
+
-                //				
-                //				if(json.length == 0)
-                //					{
-                //						console.log("JSON LENGTH IS 0")
-                //					}
                 if (json.length > 0) {
                     json.forEach(function(obj) {
                         // console.log(obj.toUser);

chatto/src/main/resources/templates/chat.html

@@ -72,7 +72,7 @@
                         </ui>
                         <ui class="contacts">
                             <th:block th:each="userName: ${userNames}">
-                                <li>
+                                <li name="user-box" class="user-box">
                                     <div class="d-flex bd-highlight">
                                         <div class="img_cont">
                                             <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
@@ -80,7 +80,7 @@
                                         </div>
                                         <div class="user_info">
                                             <span th:text="${userName}">Khalid</span>
-                                            <p th:text="${userName}">Kalid is online</p>
+                                            <p th:text="${userName} + ' is online'">Kalid is online</p>
                                         </div>
                                     </div>
                                 </li>