add time format for chat box

chat_box/consumers.py

@@ -1,6 +1,7 @@
 import json
 from channels.generic.websocket import AsyncWebsocketConsumer
 from .models import Message
+from .views import format_time
 
 from judge.models.profile import Profile
 
@@ -60,5 +61,3 @@ def save_data_and_get_time(message):
     return new_message.time
 
 
-def format_time(time):
-    return time.strftime('%H:%M %p  %d-%m-%Y')

chat_box/views.py

@@ -4,14 +4,22 @@ from django.views.generic import ListView
 from .models import Message
 
 
+def format_time(time):
+    return time.strftime('%H:%M %p  %d-%m-%Y')
+
+
 class ChatView(ListView):
     model = Message
     context_object_name = 'message'
     template_name = 'chat/chat.html'
     title = _('Chat Box')
-    paginate_by = 10
+    paginate_by = 50
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['title'] = self.title
+
+        for msg in context['message']: 
+            msg.time = format_time(msg.time)
+
         return context

resources/chatbox.scss

@@ -1,5 +1,4 @@
-#chat-log {
-    padding: 0;
+#chat-box {
     border: 1px solid #ccc;
     border-radius: 4px;
     height: 20em;
@@ -8,6 +7,17 @@
     overflow-wrap: break-word;
     overflow-y: scroll;
 }
+#loader {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 4%;
+}
+
+#chat-log {
+    padding: 0;
+    width: 100%;
+}
 
 #chat-log li {
     list-style-type: none;

templates/chat/chat.html

@@ -1,7 +1,5 @@
 {% extends "base.html" %}
 {% block js_media %}
-<script src="{{ static('libs/jquery.waypoints.min.js')}}"></script>
-<script src="{{ static('libs/infinite.min.js') }}"></script>
 <script type="text/javascript">
     var chatSocket = new WebSocket(
         'ws://' + window.location.host +
@@ -9,6 +7,8 @@
 </script>
 <script type="text/javascript">
     $(function() {
+        $('#loader').hide();
+
         chatSocket.onmessage = function(e) {
             let data = JSON.parse(e.data)
             data = data['message']
@@ -36,25 +36,31 @@
                 </li>`
             ul = $('#chat-log')
             ul.append(li)
-            $('#chat-log').scrollTop($('#chat-log')[0].scrollHeight);
+            $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
         }
 
         (function init_chatlog() {
             ul = $('#chat-log')
             {% for msg in message|reverse %}
-                loadMessage('{{msg.body}}', '{{msg.author}}', '12:00:00', '{{gravatar(msg.author, 32)}}')
+                loadMessage('{{msg.body}}', '{{msg.author}}', '{{msg.time}}', '{{gravatar(msg.author, 32)}}')
             {% endfor %}
         })()
 
-        var infinite = new Waypoint.Infinite({
-            element: $('.infinite-container')[0],
-            onBeforePageLoad: function () {
-                $('.loading').show();
-            },
-            onAfterPageLoad: function ($items) {
-                $('.loading').hide();
+        $('#chat-box').scroll(function() {
+            if ($('#chat-box').scrollTop() == 0) {
+                console.log('Hi')
+                $('#loader').show()
             }
-        });
+        })
+        // var infinite = new Waypoint.Infinite({
+        //     element: $('.infinite-container')[0],
+        //     onBeforePageLoad: function () {
+        //         $('.loading').show();
+        //     },
+        //     onAfterPageLoad: function ($items) {
+        //         $('.loading').hide();
+        //     }
+        // });
 
         $("#chat-submit").click(function() {
             if ($("#chat-input").val().trim()) {
@@ -118,14 +124,14 @@
 
 {% block body %}
     <div id="chat-area">
-        <ul id="chat-log" class="infinite-container">
-        </ul>    
+        <div id="chat-box">
+            <img src="http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif" id="loader">
+            <ul id="chat-log" class="infinite-container waypoint">
+            </ul>
+        </div>
         {{_('Your message')}}
     
         <textarea rows="6" id="chat-input"></textarea>
     </div>
     <button id="chat-submit"> Send </button>
-    {% if page_obj.has_next %}
-        <a href="{{ request.path }}?page={{ message.next_page_number }}">next</a>
-    {% endif %}
 {% endblock body %}