add online users to chatbox

chat_box/views.py

@@ -4,13 +4,12 @@ from django.http import HttpResponse, JsonResponse
 from django.core.paginator import Paginator
 from django.shortcuts import render
 from django.forms.models import model_to_dict
+from django.utils import timezone
 
 from judge.jinja2.gravatar import gravatar
-from .models import Message
+from .models import Message, Profile
 import json
     
-
-
 def format_messages(messages):
     msg_list = [{
         'time': msg.time,
@@ -46,7 +45,9 @@ class ChatView(ListView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context['title'] = self.title
-
+        last_five_minutes = timezone.now()-timezone.timedelta(minutes=5)
+        context['online_users'] = Profile.objects \
+                                        .filter(last_access__gte = last_five_minutes)
         return context
 
 def delete_message(request):

resources/chatbox.scss

@@ -1,13 +1,3 @@
-#chat-box {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    height: 20em;
-    width: 100%;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    overflow-y: scroll;
-}
-
 #loader {
     display: block;
     margin-left: auto;
@@ -26,11 +16,6 @@
     margin: 0.5em;
 }
 
-#chat-input {
-    width: 100%;
-    padding: 0.4em;
-    color: black;
-}
 
 #chat-submit {
     margin-top: 1em;
@@ -47,7 +32,7 @@
 .body-message {
     padding-left: 3em;
     padding-bottom: 1em;
-    border-bottom: 1px solid lightgray
+    border-bottom: 1px solid lightgray;
 }
 
 .user-time {
@@ -71,3 +56,82 @@
 }
 
 
+#chat-area {
+    height: 85vh;
+    display: flex !important;
+    flex-direction: column;
+}
+#chat-online {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    overflow-y: scroll;
+    max-height: 81vh;
+}
+#chat-online-content {
+}
+
+#chat-box {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    overflow-y: scroll;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    max-height: 85%;
+    height: auto;
+}
+
+#chat-input {
+    width: 100.3%;
+    padding: 0.4em;
+    color: black;
+    font-family: "Segoe UI", "Lucida Grande", Arial, sans-serif;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    height: -webkit-fill-available;
+    max-height: 8em;
+}
+
+#chat-online-content {
+    padding: 0;
+    width: 100%;
+}
+
+.dot {
+    height: 0.8em;
+    width: 0.8em;
+    background-color: #39ff14;
+    border-radius: 50%;
+    display: inline-block;
+    margin-bottom: -0.1em;
+    border: 1px lightgreen solid;   
+}
+
+
+@media (min-width: 800px) {
+    #chat-container {
+        display: flex;
+        width: 100%;
+    }
+    #chat-box {
+
+    }
+    #chat-online {
+        margin-left: auto;
+        width: 22%;
+    }
+    #chat-area {
+        width: 75%;
+    }
+    .chat-left-panel, .chat-right-panel {
+        display: block !important;
+    }
+    #content {
+        margin-top: -0.5em;
+    }
+}
+

templates/chat/chat.html

@@ -1,5 +1,9 @@
 {% extends "base.html" %}
+{% block title_row %}{% endblock %}
+{% block title_ruler %}{% endblock %}
+
 {% block js_media %}
+
 <script type="text/javascript">
     var chatSocket = new WebSocket(
         'ws://' + window.location.host +
@@ -187,21 +191,66 @@
         });
 
     });
+
+    $(document).ready(function () {
+        $('.chat-right-panel').hide();
+        $('#chat-tab').find('a').click(function (e) {
+            e.preventDefault();
+            $('#chat-tab').addClass('active');
+            $('#online-tab').removeClass('active');
+            $('.chat-left-panel').show();
+            $('.chat-right-panel').hide();
+        });
+        $('#online-tab').find('a').click(function (e) {
+            e.preventDefault();
+            $('#online-tab').addClass('active');
+            $('#chat-tab').removeClass('active');
+            $('.chat-left-panel').hide();
+            $('.chat-right-panel').show();
+        });
+    });
 </script>
 
 {% endblock js_media %}
 
 {% block body %}
     {% csrf_token %}
-    <div id="chat-area">
+    {% block before_posts %}{% endblock %}
+    <div id="mobile" class="tabs">
+        <ul>
+            <li id="chat-tab" class="tab active"><a href="#">
+                <i class="tab-icon fa fa-comments"></i> {{ _('Chat') }}
+            </a></li>
+            <li id="online-tab" class="tab"><a href="#"><i class="tab-icon fa fa-wifi"></i> {{ _('Online Users') }}</a></li>
+        </ul>
+    </div>
+    
+    <div id="chat-container">
+        <div id="chat-area" class="chat-left-panel">
             <div id="chat-box">
                 <img src="http://opengraphicdesign.com/wp-content/uploads/2009/01/loader64.gif" id="loader">
                 <ul id="chat-log">
                 </ul>
             </div>
-        {{_('Your message')}}
+            <textarea id="chat-input" placeholder="{{_('Enter your message')}}"></textarea>
-    
-        <textarea rows="6" id="chat-input"></textarea>
         </div>
-    <button id="chat-submit"> Send </button>
+        <button id="chat-submit" style="display:none;"> Send </button>
+        <div id="chat-online" class="chat-right-panel sidebox">
+            <h3>
+                {{_('Online Users')}} 
+                <i class="fa fa-wifi"></i>
+            </h3>
+            <ul id="chat-online-content">
+                {% for user in online_users %}
+                    <li>
+                        <span class="dot"></span>
+                        <span style="padding-left:0.25em">
+                            {{ link_user(user) }}
+                        </span>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+
 {% endblock body %}