MT#5811 Add inbound/outbound xmpp chat skeleton

share/static/css/bootstrap-select/bootstrap-select.min.css

@@ -0,0 +1,7 @@
+/*!
+ * bootstrap-select v1.4.2
+ * http://silviomoreto.github.io/bootstrap-select/
+ *
+ * Copyright 2013 bootstrap-select
+ * Licensed under the MIT license
+ */.bootstrap-select.btn-group,.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:10px;margin-left:0}.form-search .bootstrap-select.btn-group,.form-inline .bootstrap-select.btn-group,.form-horizontal .bootstrap-select.btn-group{margin-bottom:0}.bootstrap-select.form-control{margin-bottom:0;padding:0;border:0}.bootstrap-select.btn-group.pull-right,.bootstrap-select.btn-group[class*="span"].pull-right,.row-fluid .bootstrap-select.btn-group[class*="span"].pull-right{float:right}.input-append .bootstrap-select.btn-group{margin-left:-1px}.input-prepend .bootstrap-select.btn-group{margin-right:-1px}.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]){width:220px}.bootstrap-select{width:220px\0}.bootstrap-select.form-control:not([class*="span"]){width:100%}.bootstrap-select>.btn{width:100%}.error .bootstrap-select .btn{border:1px solid #b94a48}.dropdown-menu{z-index:2000}.bootstrap-select.show-menu-arrow.open>.btn{z-index:2051}.bootstrap-select .btn:focus{outline:thin dotted #333 !important;outline:5px auto -webkit-focus-ring-color !important;outline-offset:-2px}.bootstrap-select.btn-group .btn .filter-option{overflow:hidden;position:absolute;left:12px;right:25px;text-align:left}.bootstrap-select.btn-group .btn .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}.bootstrap-select.btn-group>.disabled,.bootstrap-select.btn-group .dropdown-menu li.disabled>a{cursor:not-allowed}.bootstrap-select.btn-group>.disabled:focus{outline:none !important}.bootstrap-select.btn-group[class*="span"] .btn{width:100%}.bootstrap-select.btn-group .dropdown-menu{min-width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .dropdown-menu.inner{position:static;border:0;padding:0;margin:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.bootstrap-select.btn-group .dropdown-menu dt{display:block;padding:3px 20px;cursor:default}.bootstrap-select.btn-group .div-contain{overflow:hidden}.bootstrap-select.btn-group .dropdown-menu li{position:relative}.bootstrap-select.btn-group .dropdown-menu li>a.opt{position:relative;padding-left:35px}.bootstrap-select.btn-group .dropdown-menu li>a{cursor:pointer}.bootstrap-select.btn-group .dropdown-menu li>dt small{font-weight:normal}.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a i.check-mark{display:inline-block;position:absolute;right:15px;margin-top:2.5px}.bootstrap-select.btn-group .dropdown-menu li a i.check-mark{display:none}.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text{margin-right:34px}.bootstrap-select.btn-group .dropdown-menu li small{padding-left:.5em}.bootstrap-select.btn-group .dropdown-menu li:not(.disabled)>a:hover small,.bootstrap-select.btn-group .dropdown-menu li:not(.disabled)>a:focus small,.bootstrap-select.btn-group .dropdown-menu li.active:not(.disabled)>a small{color:#64b1d8;color:rgba(255,255,255,0.4)}.bootstrap-select.btn-group .dropdown-menu li>dt small{font-weight:normal}.bootstrap-select.show-menu-arrow .dropdown-toggle:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #CCC;border-bottom-color:rgba(0,0,0,0.2);position:absolute;bottom:-4px;left:9px;display:none}.bootstrap-select.show-menu-arrow .dropdown-toggle:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid white;position:absolute;bottom:-4px;left:10px;display:none}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before{bottom:auto;top:-3px;border-top:7px solid #ccc;border-bottom:0;border-top-color:rgba(0,0,0,0.2)}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after{bottom:auto;top:-3px;border-top:6px solid #fff;border-bottom:0}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before{right:12px;left:auto}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after{right:13px;left:auto}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:before,.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:after{display:block}.bootstrap-select.btn-group .no-results{padding:3px;background:#f5f5f5;margin:0 5px}.mobile-device{position:absolute;top:0;left:0;display:block !important;width:100%;height:100% !important;opacity:0}.bootstrap-select.fit-width{width:auto !important}.bootstrap-select.btn-group.fit-width .btn .filter-option{position:static}.bootstrap-select.btn-group.fit-width .btn .caret{position:static;top:auto;margin-top:-1px}.control-group.error .bootstrap-select .dropdown-toggle{border-color:#b94a48}.bootstrap-select-searchbox{padding:4px 8px}.bootstrap-select-searchbox input{margin-bottom:0}

share/templates/subscriber/webphone.tt

@@ -1,23 +1,29 @@
 [% site_config.title = 'Web Phone for ' _ subscriber.username _ '@' _ subscriber.domain.domain -%]
 
 <style>
-    #xmpp-roster .available {
+    #xmpp-roster {
+        list-style-type: none;
+    }
+    .xmpp-roster-entry {
+        font-size: 1.2em;
+    }
+    .xmpp-roster-entry.available {
         color: green;
     }
-    #xmpp-roster .unavailable {
-        color: red;
+    .xmpp-roster-entry.unavailable {
+        color: gray;
     }
-/* 
-    #xmpp-roster .chat {
+    .xmpp-roster-entry.chat {
         color: green;
     }
-    #xmpp-roster .away, #xmpp-roster .xa {
+    .xmpp-roster-entry.away, 
+    .xmpp-roster-entry.xa {
         color: orange;
     }
-    #xmpp-roster .dnd {
-        color: orange;
+    .xmpp-roster-entry.dnd {
+        color: red;
     }
-*/
+
 </style>
 
 <div class="row">
@@ -33,6 +39,9 @@
     <script type="text/javascript" src="/js/libs/jssip-0.3.0.min.js"></script>
     <!--<script type="text/javascript" src="/js/libs/stanzaio.bundle.min.js"></script>-->
     <script type="text/javascript" src="/js/libs/stanzaio.bundle.js"></script>
+    <script type="text/javascript" src="/js/libs/bootstrap-select.min.js"></script>
+    <script type="text/javascript" src="/js/libs/bootstrap-select.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select/bootstrap-select.min.css"/>
     <script type="text/javascript">
 
         var phone = null;
@@ -82,10 +91,37 @@
 
             var xmpp_configuration = data.aaData.xmpp;
             chat = XMPP.createClient(xmpp_configuration);
-
+/*
             chat.on('*', function(name, data) {
-                //console.log("xmpp cb " + name);
-                //console.log(data);
+                console.log("xmpp cb " + name);
+                console.log(data);
+            });
+*/
+
+            chat.on('disconnected', function() {
+                $("#xmpp-status").html("disconnected.");
+            });
+
+            chat.on('chatState', function(obj) {
+                console.log("got chat state", obj);
+                var jid = obj.from.bare;
+                var msg;
+                if(obj.chatState == "composing") {
+                    msg = jid + " is typing...";
+                } else if(obj.chatState == "paused") {
+                    msg = jid + " has stopped typing.";
+                } else if(obj.chatState == "active") {
+                    // chat session started/closed
+                }
+                $("#xmpp-status").html(msg);
+            });
+            chat.on('chat', function(obj) {
+                console.log("got message ", obj);
+                var jid = obj.from.bare;
+                $("#xmpp-status").html(jid + " has sent: " + obj.body);
+            });
+            chat.on('groupchat', function(message) {
+                console.log("got group message ", message);
             });
 
             chat.on('session:started', function() {
@@ -99,9 +135,16 @@
                         $.each(resp.roster.items, function(index, item) {
                             console.log(item.name);
                             var jidid = item.jid.bare.replace(/[^a-zA-Z0-9_]/g, '-');
-                            $("#xmpp-roster").append('<li id="' + jidid + '">' + item.jid.bare + ' <i>' + item.name + '</i></li>');
+                            $("#xmpp-roster").append('<li id="' + jidid + '"><span class="xmpp-roster-entry icon-user"></span> ' + item.jid.bare + '</span> <i>' + item.name + '</i> <span class="icon-comment xmpp-start-chat" data-jid="' + item.jid.bare + '"></span></li>');
                         });
                     }
+                    $('.xmpp-start-chat').click(function(obj) {
+                        var jid = obj.currentTarget.dataset.jid;
+                        console.log("starting chat with " + jid);
+
+                        chat.sendMessage({to: jid, body: "hello world"});
+                    });
+
                 });
             });
             chat.on('presence', function(pres) {
@@ -110,11 +153,18 @@
                     return 1;
                 }
                 var type = pres.type || 'available';
+                var show;
+                if(type == 'available') {
+                    show = pres.show || 'available';
+                } else {
+                    show = pres.show || 'unavailable';
+                }
                 var jidid = pres.from.bare.replace(/[^a-zA-Z0-9_]/g, '-');
 
-                $("#xmpp-roster #" + jidid).removeClass().addClass(type);
+                $("#xmpp-roster #" + jidid + " .xmpp-roster-entry").removeClass().addClass("xmpp-roster-entry icon-user " + show);
 
-                console.log("+++++++ xmpp cb " + pres.type + " for from=" + pres.from.bare + " and to=" + pres.to.bare, pres);
+                //console.log("+++++++ xmpp cb " + pres.type + " for from=" + pres.from.bare + " and to=" + pres.to.bare, pres);
+                console.log("+++++++ type=" + pres.type + ", show=" + pres.show);
             });
 
             chat.connect();
@@ -158,6 +208,23 @@
             phone.call('sip:voicebox@pbx1.demo.sipwise.com', options);
         }
 
+        $(function() {
+            $('.selectpicker').selectpicker();
+
+            $('#xmpp-pres').change(function(obj) {
+                var show = obj.currentTarget[obj.currentTarget.selectedIndex].value;
+                var type = (show == "unavailable" ? "unavailable" : "available");
+                console.log("changing xmpp presence status, show=" + show + ", type=" + type);
+                if(show == "available") {
+                    chat.sendPresence();
+                } else {
+                    chat.sendPresence({ type: type, show: show });
+                }
+            });
+
+        });
+
+
     </script>
 
     <div class="row">
@@ -169,6 +236,22 @@
     <div class="row">
         <button onclick="javascript:call();" class="btn btn-large btn-primary">Call</a>
     </div>
+    <div class="row">
+        <h3>Change XMPP Status</h3>
+        <select id="xmpp-pres" class="selectpicker">
+            [% FOR opt IN 
+                [
+                    { n = "available", d = "Available" },
+                    { n = "away", d = "Away" },
+                    { n = "xa", d = "Extended Away" },
+                    { n = "dnd", d = "Do Not Disturb" },
+                    { n = "unavailable", d = "Offline" },
+                ]
+            -%]
+                <option value="[% opt.n %]" data-content="<span class='icon-user xmpp-roster-entry [% opt.n %]'></span><span> [% opt.d %]</span>">[% opt.d %]</option>
+            [% END -%]
+        </select>
+    </div>
     <div class="row">
         <h3>XMPP Roster</h3>
         <ul id="xmpp-roster">