Basic message receive/send feature

Note: the tab directive is not needed anymore because the ngClick directive
already calls preventDefault()

5 files changed, 97 insertions, 15 deletions

diff --git a/alias-angular/app/css/app.less b/alias-angular/app/css/app.less
index 12d5588..e66177a 100644
--- a/alias-angular/app/css/app.less
+++ b/alias-angular/app/css/app.less
@@ -58,6 +58,7 @@ html, body{
             }
         }
     }
+
 }
 
 #rostersearch{
@@ -79,3 +80,27 @@ html, body{
 ul.nav-tabs li a{
     outline: 0;
 }
+
+ul.chat-area{
+    list-style: none;
+
+    li{
+        font-size:110%;
+    }
+
+    .name{
+        display:block;
+        float:left;
+        text-align:right;
+        width: 10em;
+        margin-right:1em;
+
+        &:before{
+            content: '<';
+        }
+
+        &:after{
+            content: '>';
+        }
+    }
+}
diff --git a/alias-angular/app/index.html b/alias-angular/app/index.html
index 2f9ab62..279018b 100644
--- a/alias-angular/app/index.html
+++ b/alias-angular/app/index.html
@@ -54,12 +54,20 @@
   </div>
   <div id="main" ng-controller="MsgCtl">
     <ul class="nav nav-tabs">
-      <li ng-repeat="conversation in conversations" ng-class="isActive(conversation)" ng-click="activate(conversation)">
-        <a href="#repeat">{{conversation}} <i class="icon-remove" ng-click="delete(conversation)"></i></a>
+      <li ng-repeat="(jid,value) in conversations" ng-class="isActive(jid)" ng-click="activate(jid)">
+        <a href="#repeat">{{jid}} <i class="icon-remove" ng-click="delete(jid)"></i></a>
       </li>
     </ul>
     <div class="tab-content">
-      <div class="tab-pane" ng-class="isActive(conversation)" ng-repeat="conversation in conversations">{{conversation}}</div>
+      <div class="tab-pane" ng-class="isActive(jid)" ng-repeat="(jid,value) in conversations">
+        <ul class="chat-area">
+          <li ng-repeat="message in value"><span class="name">{{message.from}}</span>{{message.body}}</li>
+        </ul>
+        <form class="form-inline" ng-submit="sendMessage(msg,jid)">
+          <input type="text" ng-model="msg" class="input-large" />
+          <button class="btn" type="submit" ng-disabled="!msg">Send</button>
+        </form>
+      </div>
     </div>
   </div>
   <script src="lib/jquery-1.7.2.min.js"></script>
diff --git a/alias-angular/app/js/controllers.js b/alias-angular/app/js/controllers.js
index 7e68e41..979a4aa 100644
--- a/alias-angular/app/js/controllers.js
+++ b/alias-angular/app/js/controllers.js
@@ -105,26 +105,73 @@ function RosterCtl($scope, StropheSrv, $log, $rootScope) {
 
 RosterCtl.$inject = ['$scope','StropheSrv','$log', '$rootScope'];
 
-function MsgCtl($scope, $log) {
+function MsgCtl($scope, $log, StropheSrv, $rootScope) {
 
-    $scope.conversations = [];
+    $scope.conversations = {};
 
     $scope.activeConversation = '';
 
-    $scope.$on('msgrequest', function(event, contact) {
-        $log.log(contact);
-        if (_.indexOf($scope.conversations, contact)==-1) {
-            $scope.conversations.push(contact);
+    function addTab(contact) {
+        if (!_.has($scope.conversations, contact)) {
+            $scope.conversations[contact] = [];
+        }
+    };
+
+    function addMessage(conv,from,body) {
+        $scope.conversations[conv].push({from:from, body:body});
+    };
+
+    function onMessage(message) {
+        var full_jid = $(message).attr('from');
+        var jid = Strophe.getBareJidFromJid(full_jid);
+        addTab(jid);
+        var body = $(message).find("html > body");
+
+        if (body.length === 0) {
+            body = $(message).find('body');
+            if (body.length > 0) {
+                body = body.text();
+            } else {
+                body = null;
+            }
+        } else {
+            body = body.contents();
+            var span = $("<span></span>");
+            body.each(function () {
+                if (document.importNode) {
+                    $(document.importNode(this, true)).appendTo(span);
+                } else {
+                    // IE workaround
+                    span.append(this.xml);
+                }
+            });
+            body = span;
         }
+        if (body) {
+            addMessage(jid,jid,body);
+        }
+    };
+
+    $scope.sendMessage = function(message,to) {
+        var msg = $msg({to: to, "type": "chat"}).c('body').t(message);
+        addMessage(to,$rootScope.self.jid,message);
+        StropheSrv.send(msg);
+    };
+
+    $scope.$on('connected', function() {
+        StropheSrv.addHandler(onMessage, 'message', 'chat');
+    });
+
+    $scope.$on('msgrequest', function(event, contact) {
+        addTab(contact);
         $scope.activeConversation = contact;
     });
 
     $scope.delete = function(conversation) {
-        $scope.conversations.splice(_.indexOf($scope.conversations, conversation),1);
+        delete $scope.conversations[conversation];
     };
 
     $scope.activate = function(conversation) {
-        $log.log(conversation+' was clicked');
         $scope.activeConversation = conversation;
     };
 
@@ -133,4 +180,4 @@ function MsgCtl($scope, $log) {
     };
 }
 
-MsgCtl.$inject = ['$scope','$log'];
\ No newline at end of file
+MsgCtl.$inject = ['$scope','$log','StropheSrv', '$rootScope'];
\ No newline at end of file
diff --git a/alias-angular/app/js/directives.js b/alias-angular/app/js/directives.js
index d650c23..c64f314 100644
--- a/alias-angular/app/js/directives.js
+++ b/alias-angular/app/js/directives.js
@@ -2,7 +2,8 @@
 /* http://docs-next.angularjs.org/api/angular.module.ng.$compileProvider.directive */
 
 
-angular.module('Alias.directives', []).
+angular.module('Alias.directives', [])
+/*.
     directive('navTabs', function() {
         return function(scope, elm, attrs) {
             elm.on('click', function(event) {
@@ -10,3 +11,4 @@ angular.module('Alias.directives', []).
             });
         };
     });
+*/
\ No newline at end of file
diff --git a/alias-angular/app/js/services.js b/alias-angular/app/js/services.js
index 906fe18..5a3d207 100644
--- a/alias-angular/app/js/services.js
+++ b/alias-angular/app/js/services.js
@@ -13,11 +13,11 @@ angular.module('Alias.services', [], function($provide) {
                         $rootScope.$apply(callback(data));
                     });
                 },
-                addHandler: function(callback, name) {
+                addHandler: function(callback, name, type) {
                     connection.addHandler(function (stanza) {
                         $rootScope.$apply(callback(stanza));
                         return true;
-                    }, null, name, null, null, null, null);
+                    }, null, name, type, null, null, null);
                 },
                 send: function(stanza) {
                     $rootScope.$apply(connection.send(stanza));