add icons and chatbox

templates/chat/chat.html

@@ -1,3 +1,4 @@
+{% if request.user.is_authenticated %}
 {% extends "base.html" %}
 
 {% block js_media %}
@@ -9,34 +10,127 @@
 <script type="text/javascript">
     $(function() {
         chatSocket.onmessage = function(e) {
-            var data = JSON.parse(e.data);
-            var message = data['message'];
-            $('#chat-log').append(message + '\n');
+            let data = JSON.parse(e.data)
+            data = data['message']
+            console.log(data)
+            loadMessage(data['content'], 
+                        data['sender'], 
+                        data['time'], 
+                        data['image'])
         };
+
+        function loadMessage(content, user, time, image) {
+            li = `<li> 
+                    <img src="${image}" class="profile-pic">
+                    <div class="body-message">
+                        <div class="user-time">
+                            <a href="#" class="user">
+                                ${user}
+                            </a>
+                            <span class="time">${time}</span>
+                        </div>
+                        <span class="message">
+                            <span>${content}</span>
+                        </span>
+                    </div>
+                    <div class="clear"></div>
+                </li>`
+            ul = $('#chat-log')
+            ul.append(li)
+            $('#chat-log').scrollTop($('#chat-log')[0].scrollHeight);
+        }
+
+
+        $("#chat-submit").click(function() {
+            if ($("#chat-input").val().trim()) {
+                let content = $('#chat-input').val().trim();
+                let img = '{{ gravatar(request.user, 32) }}'
+                
+                message = {
+                    'content': content,
+                    'image': img,
+                    'time': calcTime(6), // HCM City
+                    'sender': '{{ request.user }}'
+                }
+
+                chatSocket.send(JSON.stringify({
+                    'message': message,
+                }))
+                // $.post('/chat/send', message)
+
+                $('#chat-input').val('').focus();
+            }
+        });
+
+        function calcTime(offset) {
+            utc = new Date().getTime()
+            nd = new Date(utc + (3600000*offset));
+            return nd.toLocaleString();
+        }
+
         chatSocket.onclose = function(e) {
             console.error('Chat socket closed unexpectedly');
         };
-        $('#chat-message-input').focus();
-        $('#chat-message-input').keyup(function(e) {
-            if (e.keyCode === 13) {  // enter, return
-                $('#chat-message-submit').click();
+
+        $("#chat-log").change(function() {
+            $('#chat-log').scrollTop($('#chat-log')[0].scrollHeight);
+        });
+        
+        $('#chat-input').focus();
+
+        $('#chat-input').keydown(function(e) {
+            if (e.keyCode === 13) {
+                if (e.ctrlKey || e.shiftKey) {
+                    var val = this.value;
+                    if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
+                        var start = this.selectionStart;
+                        this.value = val.slice(0, start) + "\n" + val.slice(this.selectionEnd);
+                        this.selectionStart = this.selectionEnd = start + 1;
+                    } else if (document.selection && document.selection.createRange) {
+                        this.focus();
+                        var range = document.selection.createRange();
+                        range.text = "\r\n";
+                        range.collapse(false);
+                        range.select();
+                    }
+                }
+                else {
+                    e.preventDefault();
+                    $('#chat-submit').click();
+                }
+                return false
             }
+            return true
         });
-        $("#chat-message-submit").click(function() {
-            var message = "{{ request.user }}: " + $('input#chat-message-input').val();
-            chatSocket.send(JSON.stringify({
-                'message': message,
-            }));
-            $('input#chat-message-input').val('');
-        });
+
     });
 </script>
 {% endblock js_media %}
 
 {% block body %}
-    <div>
-        <textarea disabled id="chat-log" rows="20" style="width: 100%"></textarea><br/>
-        <input id="chat-message-input" type="text" style="width: 100%"/><br/>
+    {% csrf_token %}
+    <div id="chat-area">
+        <ul id="chat-log">
+            <li>
+                <img src="https://via.placeholder.com/150" class="profile-pic">
+                <div class="body-message">
+                    <div class="user-time">
+                        <a href="#" class="user">
+                            cuom1999
+                        </a>
+                        <span class="time">12:00:00</span>
+                    </div>
+                    <span class="message">
+                        <span>It’s possible that a request can come in via POST with an empty POST dictionary – if, say, a form is requested via the POST HTTP method but does not include form data. Therefore, you shouldn’t use if request.POST to check for use of the POST method; instead, use if request.method == "POST" (see HttpRequest.method).</span>
+                    </span>
+                </div>
+                <div class="clear"></div>
+            </li>
+        </ul>    
+        {{_('Your message')}}
+    
+        <textarea rows="6" id="chat-input"></textarea>
     </div>
-    <button id="chat-message-submit" style="margin-top: 1em"> Send </button>
+    <button id="chat-submit"> Send </button>
 {% endblock body %}
+{% endif %}