added whatsapp theme send and recive messages

core/static/core/chat_whatsapp.css

@@ -0,0 +1,158 @@
+
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+::-webkit-scrollbar-track {
+	background: none;
+}
+
+::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.2);
+}
+::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.3);
+}
+
+#main-container {
+	width: 100vw;
+	height: 100vh;
+}
+
+#navbar {
+	/* background: #009688; */
+	background:#EDEDED
+}
+
+.dropdown-toggle::after {
+	display: none;
+}
+
+.chat-list-item {
+	background: white;
+	cursor: pointer;
+}
+
+.chat-list-item:hover {
+	background: hsl(0, 0%, 95%);
+}
+
+.chat-list-item:active {
+	background: hsl(0, 0%, 85%);
+}
+
+.chat-list-item.active {
+	background: hsl(0, 0%, 90%);
+}
+
+.chat-list-item .chat-details {
+	width: 60%;
+}
+
+.chat-list-item.unread .name,
+.chat-list-item.unread .last-message {
+	font-weight: bold;
+}
+
+.chat-list-item .last-message,
+#message-area #navbar #details {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#message-area {
+	border-left: 1px solid white;
+}
+
+#message-area .overlay {
+	/*background: hsl(0, 0%, 80%);    */
+    background: #f8f9fa;    
+}
+
+#message-area .intro {
+	background: url("/static/core/img/intro_back.jpg") no-repeat center;
+	height: 100%;	
+}
+
+#input-area {
+	background: hsl(0, 0%, 95%);
+}
+
+#input-area #input {
+	outline: none;
+}
+
+.message-item {
+	position:relative;
+	max-width: 75%;
+	word-break: break-word;
+}
+.message-item.self {
+	background: #dcf8c6!important;
+}
+.message-item .number {
+	color: #1f7aec !important;
+}
+.message-item .options {
+	position: absolute;
+	top: 0;
+	right: -3px;
+	opacity: 0;
+	transition: all .2s ease-in-out;
+	-moz-transition: all .2s ease-in-out;
+	-webkit-transition: all .2s ease-in-out;
+}
+.message-item:hover .options {
+	opacity: 1;
+	right: 0;
+}
+
+#messages {
+	flex: 1!important;
+	/*
+	background: hsl(0, 0%, 80%);
+	background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
+	*/
+	background: #efe7dd url("/static/core/img/back.jpg") repeat;
+	overflow: auto;
+}
+
+#chat-list{
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+#profile-settings {
+	position: absolute;
+	top: 0;
+	left: -110%;
+	background: hsl(0, 0%, 95%);
+	transition: all 0.2s ease-in;
+	-moz-transition: all .2s ease-in-out;
+	-webkit-transition: all .2s ease-in-out;
+}
+
+#profile-pic {
+	cursor: pointer;
+	position: relative;
+	width: 200px;
+}
+
+.profile-input {
+	border-bottom: 2px solid transparent  !important;
+	outline: none;
+}
+
+.profile-input:focus {
+	border-bottom-color: hsl(0, 0%, 50%) !important;
+}
+
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 99;
+}
+
+

core/static/core/chat_whatsapp.js

@@ -0,0 +1,158 @@
+let currentRecipient = '';
+let chatInput = $('#input');
+// let chatButton = $('#btn-send');
+let userList = $('#chat-list');
+let messageList = $('#messages');
+
+
+// this will be used to store the date of the last message
+// in the message area
+let lastDate = "";
+
+
+function updateUserList() {
+    $.getJSON('/api/v1/user/', function (data) {
+        userList.children('.user').remove();
+        for (let i = 0; i < data.length; i++) {
+            const userItem = `
+                <div class="chat-list-item d-flex flex-row w-100 p-2 border-bottom" onclick="getConversation(this, '${data[i]['username']}')">
+                    <img src="${static_url}/img/profilepic.png" alt="Profile Photo" class="img-fluid rounded-circle mr-2" style="height:50px;">
+                    <div class="w-50">
+                        <div class="name">${data[i]['username']}</div>
+                        <div class="small last-message">I am new</div>
+                    </div>
+                    <div class="flex-grow-1 text-right">
+                        <div class="small time">14:10</div>
+                    </div>
+                </div>`;
+            $(userItem).appendTo('#chat-list');
+        }
+
+    });
+}
+
+
+
+const mDate = (dateString) => {
+
+    let date = dateString ? new Date(dateString) : new Date();
+
+    let dualize = (x) => x < 10 ? "0" + x : x;
+    let getTime = () => dualize(date.getHours()) + ":" + dualize(date.getMinutes());
+    let getDate = () => dualize(date.getDate()) + "/" + dualize(date.getMonth()) + "/" + dualize(date.getFullYear());
+
+    return {
+        subtract: (otherDateString) => {
+            return date - new Date(otherDateString);
+        },
+        lastSeenFormat: () => {
+            let dateDiff = Math.round(new Date() - date) / (1000 * 60 * 60 * 24);
+            let value = (dateDiff === 0) ? "today" : (dateDiff === 1) ? "yesterday" : getDate();
+            return value + " at " + getTime();
+        },
+        chatListFormat: () => {
+            let dateDiff = Math.round((new Date() - date) / (1000 * 60 * 60 * 24));
+            if (dateDiff === 0) {
+                return getTime();
+            } else if (dateDiff === 1) {
+                return "Yesterday";
+            } else {
+                return getDate();
+            }
+        },
+        getDate: () => {
+            return getDate();
+        },
+        getTime: () => {
+            return getTime();
+        },
+        toString:() => {
+            return date.toString().substr(4, 20);
+        },
+    };
+};
+
+
+function drawMessage(message) {
+    let msgDate = mDate(message.timestamp).getDate();
+    let messageItem = '';
+    if (lastDate != msgDate) {
+        messageItem += `<div class="mx-auto my-2 bg-info text-white small py-1 px-2 rounded">
+            ${msgDate}
+        </div>`;
+        lastDate = msgDate;
+    }
+    // alert(message.user === currentUser);
+    const date = new Date(message.timestamp);
+    messageItem += `
+    <div class="align-self-${message.user === currentUser ? "end self" : "start"} p-1 my-1 mx-3 rounded bg-white shadow-sm message-item">
+        <div class="options">
+            <a href="#"><i class="fas fa-angle-down text-muted px-2"></i></a>
+        </div>
+        <div class="d-flex flex-row">
+            <div class="body m-1 mr-2">${message.body}</div>
+            <div class="time ml-auto small text-right flex-shrink-0 align-self-end text-muted" style="width:75px;">
+                ${mDate(message.timestamp).getTime()}
+            </div>
+        </div>
+    </div>`;
+    // alert(messageItem)
+    $(messageItem).appendTo('#messages');
+}
+
+function getConversation(elem,recipient) {
+    currentRecipient = recipient;
+    $.getJSON(`/api/v1/message/?target=${recipient}`, function (data) {
+        messageList.empty(); // .children('.message-item').remove();
+        $(".overlay").addClass("d-none");
+        $("#input-area").removeClass("d-none").addClass("d-flex");
+
+        $(".chat-list-item").removeClass("active");
+        $(elem).addClass("active");
+        lastDate = "";
+        for (let i = data['results'].length - 1; i >= 0; i--) {
+            drawMessage(data['results'][i]);
+        }
+        messageList.animate({scrollTop: messageList.prop('scrollHeight')});
+    });
+}
+
+function getMessageById(message) {
+    id = JSON.parse(message).message
+    $.getJSON(`/api/v1/message/${id}/`, function (data) {
+        if (data.user === currentRecipient ||
+            (data.recipient === currentRecipient && data.user == currentUser)) {
+            drawMessage(data);
+        }
+        messageList.animate({scrollTop: messageList.prop('scrollHeight')});
+    });
+}
+
+
+function sendMessage(recipient, body) {
+    $.post('/api/v1/message/', {
+        recipient: recipient,
+        body: body
+    }).fail(function () {
+        alert('Error! Check console!');
+    });
+}
+
+$(document).ready(function () {
+    updateUserList();
+    // let socket = new WebSocket(`ws://127.0.0.1:8000/?session_key=${sessionKey}`);
+    var socket = new WebSocket('ws://' + window.location.host + `/ws?session_key=${sessionKey}`)
+
+    chatInput.keypress(function (e) {
+        if (e.keyCode == 13) {
+            if (chatInput.val().length > 0) {
+                sendMessage(currentRecipient, chatInput.val());
+                chatInput.val('');
+            }
+        }
+    });
+
+    socket.onmessage = function (e) {
+        getMessageById(e.data);
+    };
+});

core/static/whatsapp/README.md

@@ -0,0 +1 @@
+This folder is not used by django. just a static site.

core/static/whatsapp/style.css

@@ -71,7 +71,7 @@
 }
 
 #message-area .intro {
-	background: url("/static/whatsapp/images/intro_back.jpg") no-repeat center;
+	background: url("images/intro_back.jpg") no-repeat center;
 	height: 100%;	
 }
 
@@ -114,7 +114,7 @@
 	background: hsl(0, 0%, 80%);
 	background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
 	*/
-	background: #efe7dd url("/static/whatsapp/images/back.jpg") repeat;
+	background: #efe7dd url("images/back.jpg") repeat;
 	overflow: auto;
 }
 

core/templates/base.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Django Whatsapp{% endblock %}</title>
-    <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}">
+    <link rel="icon" href="{% static 'core/img/favicon.png' %}">
     <link rel="stylesheet" href="{% static 'bootstrap/bootstrap.min.css' %}">    
     {% block extracss %}
     {% endblock %}
@@ -16,7 +16,7 @@
     {% block main %}
     {% endblock %}
 
-    <script src="{% static 'jquery-3.3.1.min.js' %}"></script>
+    <script src="{% static 'jquery.min.js' %}"></script>
     {% block extrajs %}
     {% endblock %}
   </body>

core/templates/core/chat.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block extracss %}
-    <link rel="stylesheet" href="{% static 'chat.css' %}"/>
+    <link rel="stylesheet" href="{% static 'core/chat.css' %}"/>
 {% endblock %}
 
 {% block main %}
@@ -43,5 +43,5 @@ <h4 class="list-group-item-heading">{{ user.username }} - logout</h4>
     let sessionKey = '{{ request.session.session_key }}';
     let currentUser = '{{ request.user.username }}';
 </script>
-<script src="{% static 'chat.js' %}"></script>
+<script src="{% static 'core/chat.js' %}"></script>
 {% endblock %}