Group message by Date or Weekdays (if last 7 days message)

it will show on top of each message per date or weekday

Author: josnin

chat/static/chat/style.css

@@ -581,3 +581,14 @@ svg {
     font-size: .93rem;
 }
 
+.date_weekday {
+    display: grid;
+    justify-self: center;
+    padding: 5px 12px 6px;
+    font-size: 0.78rem;
+    background-color: #e1f3faff;
+    border-radius: 7.5px;
+    width: fit-content;
+    box-shadow: 0 1px .5px rgba(0,0,0,.13);
+    line-height: 21px;
+}

chat/templates/chat/room.html

@@ -84,6 +84,7 @@
     <script>
 
         const roomId = '{{chatgroup.id}}'
+        var tempDaysWeekdays = [];
 
         const chatSocket = new WebSocket(
             `ws://${window.location.host}/ws/chat/${roomId}/`
@@ -181,6 +182,12 @@
                                 </div>
                             </div>`
             }
+            
+            if (msg_time) {
+                showDatesWeekDays(msg_time)
+            } else {
+                showDatesWeekDays(new Date())
+            }
 
             newDiv.innerHTML = msg1;  
 
@@ -240,6 +247,45 @@
             }));
         }
 
+
+        function showDatesWeekDays(date_created) {
+            // add the newly created element and its content into the DOM 
+            
+            dt = new Date(date_created)
+
+            if (!tempDaysWeekdays.includes(dt.toLocaleDateString())) {
+                let newDiv = document.createElement("div"); 
+                let currentDiv = document.getElementById("new-message-chat"); 
+                let parentDiv = currentDiv.parentNode;
+                let days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; 
+
+                if (dt.toDateString() == new Date().toDateString()) {
+                    // display TODAY in message
+                    date_weekday = 'TODAY';
+                } else if(dt > getDateBefore()) {
+                    // display week day in message
+                    date_weekday = days[dt.getDay()].toUpperCase()
+                } else {
+                    // display date in message
+                    date_weekday = dt.toLocaleDateString();
+                }
+
+                newDiv.style.display = "grid";
+                newDiv.innerHTML = `<div class="date_weekday">${date_weekday}</div>`
+                parentDiv.insertBefore(newDiv, currentDiv); 
+
+                tempDaysWeekdays.push(dt.toLocaleDateString())
+            }
+
+        }
+        
+        function getDateBefore(days=7) {
+            // calculate the last 7 days date
+            // 7 (days) * 24 (hours) * 60 (minutes) * 60 (seconds) * 1000 (milliseconds ) = 604800000 or 7 days in milliseconds.                
+            daysInMs= days * 24 * 60 * 60 * 1000
+            return new Date(Date.now() - daysInMs)
+        }
+
         function loadMessage() {
             fetch("{% url 'chat:history' chatgroup.id %}")
                 .then( response => response.json() )

chat/views.py

@@ -56,7 +56,7 @@ def unauthorized(request):
 async def history(request, room_id):
 
     await Tortoise.init(**settings.TORTOISE_INIT)
-    chat_message = await ChatMessage.filter(room_id=room_id).values()
+    chat_message = await ChatMessage.filter(room_id=room_id).order_by('date_created').values()
     await Tortoise.close_connections()
 
     return await sync_to_async(JsonResponse)(chat_message, safe=False)