added time to chat messages

website/public/js/chat.js

@@ -1,6 +1,7 @@
 var previousDate = new Date("1970-01-01 00:00:00");
+var previousTime = "00:00";
 var gettingMessages = false;
-
+var previousType = "robot";
 
 $(document).ready(function() {
     setInterval(loadMessages, 1000);
@@ -39,34 +40,51 @@ function sendMessage() {
 }
 
 function addMessages(messages) {
+    var messagesText = "";
     for(var i in messages) {
-        thisDate = new Date(messages[i].creationdate);
+        // Initialize message variables
+        var thisDate = new Date(messages[i].creationdate);
+        var thisTime = thisDate.getHours() + ":" + thisDate.getMinutes();
+        var type;
         thisDate.setHours(0,0,0,0);
+
         if (messages[i].destination == $(".destinationID").val()) {
             type = "chat-message-self";
         } else {
             type = "chat-message-other";
         }
-        if (thisDate > previousDate) {
+        if (i == 0) {
+            messagesText += '<div class="chat-message"><div class="' + type + '">';
+        } else if (type != previousType || thisTime != previousTime || thisDate > previousDate) {
+            messagesText += '<div class="chat-time">\
+                    ' + thisTime + '\
+                    </div></div></div>';
+
             previousDate = thisDate;
-            $("#chat-history").append('\
-                <div class="day-message"> \
-                    <div class="day-message-content">\
-                    ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
-                    </div> \
-                </div>\
-            ');
+            previousTime = thisTime;
+            previousType = type;
+            if (thisDate > previousDate) {
+                messagesText += '\
+                    <div class="day-message"> \
+                        <div class="day-message-content">\
+                        ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
+                        </div> \
+                    </div>';
+            }
+
+            messagesText += '<div class="chat-message"><div class="' + type + '">';
         }
-        $("#chat-history").append('\
-            <div class="chat-message"> \
-                <div class="' + type + '">\
-                ' + fancyText(messages[i].content) + '\
-                </div> \
-            </div>\
-        ');
+        messagesText += fancyText(messages[i].content) + "<br />";
     }
 
-    $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight);
+    // Close the last message
+    messagesText += '<div class="chat-time">\
+                    ' + thisTime + '\
+                    </div></div></div>';
+
+    $("#chat-history").append(messagesText);
+
+    $("#chat-history").scrollTop($("#chat-history")[0].scrollHeight - $('#chat-history')[0].clientHeight);
 }
 
 function switchUser(userID) {
@@ -80,5 +98,5 @@ function switchUser(userID) {
 }
 
 function sayEmpty() {
-    $("#chat-history").html("Begin nu met chatten!");
+    $("#chat-history").html("Probeer ook eens foto's en video's te sturen");
 }

website/public/styles/chat.css

@@ -134,4 +134,14 @@ body {
 
 .chat-message a {
     text-decoration: underline;
+}
+
+.chat-time {
+    color: #666666;
+    font-size: 12px;
+    margin-bottom: -3px;
+}
+
+.chat-message-other .chat-time {
+    text-align: right;
 }