Add and track pending state for messages.

clientapp/helpers/xmppEventHandlers.js

@@ -248,6 +248,7 @@ module.exports = function (client, app) {
                 });
             }
 
+            message.acked = true;
             contact.addMessage(message, true);
             contact.lockedResource = msg.from.full;
         }
@@ -262,6 +263,7 @@ module.exports = function (client, app) {
             }
 
             var message = new Message(msg);
+            message.acked = true;
             contact.addMessage(message, true);
         }
     });
@@ -317,4 +319,16 @@ module.exports = function (client, app) {
             discoCapsQueue.push(pres);
         }
     });
+
+    client.on('stanza:acked', function (stanza) {
+        if (stanza.body) {
+            var contact = me.getContact(stanza.to, stanza.from);
+            if (contact) {
+                var msg = contact.messages.get(stanza.id);
+                if (msg) {
+                    msg.acked = true;
+                }
+            }
+        }
+    });
 };

clientapp/models/contact.js

@@ -221,6 +221,7 @@ module.exports = HumanModel.define({
 
                     var message = new Message(msg);
                     message.archivedId = result.mam.id;
+                    message.acked = true;
 
                     self.addMessage(message, false);
                 });

clientapp/models/message.js

@@ -45,6 +45,7 @@ module.exports = HumanModel.define({
             deps: ['created'],
             fn: function () {
                 if (this.created) {
+                    console.log(this.created);
                     var month = this.created.getMonth();
                     var day = this.created.getDate();
                     var hour = this.created.getHours();
@@ -59,6 +60,12 @@ module.exports = HumanModel.define({
                 }
                 return undefined;
             }
+        },
+        pending: {
+            deps: ['acked'],
+            fn: function () {
+                return !this.acked;
+            }
         }
     },
     session: {

clientapp/models/messages.js

@@ -6,14 +6,5 @@ var Message = require('./message');
 
 module.exports = BaseCollection.extend({
     type: 'messages',
-    model: Message,
+    model: Message
-    comparator: function (msg1, msg2) {
-        if (msg1.created < msg2.created) {
-            return -1;
-        }
-        if (msg1.created > msg2.created) {
-            return 1;
-        }
-        return 0;
-    }
 });

clientapp/views/message.js

@@ -14,7 +14,7 @@ module.exports = HumanView.extend({
     classBindings: {
         mine: '.message',
         receiptReceived: '.message',
-        acked: '.message',
+        pending: '.message',
         delayed: '.message',
         edited: '.message'
     },

public/css/app/chat.styl

@@ -108,6 +108,9 @@
       .timestamp:before
         content: 'edited '
 
+    &.pending
+      background-color: red
+
     .body
       display: inline
       word-break: break-word

public/css/otalk.css

@@ -723,6 +723,9 @@ h4 {
 .messages .message.edited .timestamp:before {
   content: 'edited ';
 }
+.messages .message.pending {
+  background-color: #f00;
+}
 .messages .message .body {
   display: inline;
   word-break: break-word;