webui: chat: sending messages

libresapi/src/webui-src/README.md

@@ -43,7 +43,7 @@ google material design has nice rules for color, spacing and everything: https:/
 should provide forward, backward and follow-list-end
 [ ] backend: view/create identities
 [ ] backend: chat lobby participants list
-[ ] chat: send_message
+[X] chat: send_message
 [ ] backend: chat typing notifications
 [ ] make routines to handle retroshare links
 [ ] backend: edit shared folders

libresapi/src/webui-src/app/_chat.sass

@@ -45,7 +45,11 @@
         padding-top: 0px
         padding-left: 0px
         padding-right: 0px
-    
+    &.bottom
+        position: absolute
+        bottom: 0px
+        right: $right_width
+        left: $left_width
     &.msg
         padding: 0px
         $author_width: 100px

libresapi/src/webui-src/app/chat.js

@@ -3,7 +3,9 @@
 var m = require("mithril");
 var rs = require("retroshare");
 
-function msg(from, when, text){
+var msg = null;
+
+function dspmsg(from, when, text){
     return m(".chat.msg.container",[
         m(".chat.msg.from", from),
         m(".chat.msg.when", when),
@@ -45,6 +47,15 @@ function getLobbyDetails(lobbyid){
     return null;
 }
 
+function sendmsg(msgid){
+    var txtmsg = document.getElementById("txtNewMsg");
+	rs.request("chat/send_message", {
+		chat_id: msgid,
+		msg: txtmsg.value
+	});
+    txtmsg.value="";
+}
+
 function lobby(lobbyid){
     var msgs;
     var lobby = getLobbyDetails(lobbyid);
@@ -100,12 +111,30 @@ function lobby(lobbyid){
                 },"subscribe as " + item.name);
             }),
         ];
+    } else {
+        msg = m(".chat.bottom",[
+            m("div","enter new message:"),
+            m("input",{
+                id:"txtNewMsg",
+                onkeydown: function(event){
+                    if (event.keyCode == 13){
+                        sendmsg(lobbyid);
+                    }
+                }
+            }),
+            m("div.btn2", {
+                style: {textAlign:"center"},
+                onclick: function(){
+                    sendmsg(lobbyid);
+                }
+            },"submit")
+        ]);
     }
     return [
         intro,
         mem.msg.map(function(item){
             var d = new Date(new Number(item.send_time)*1000);
-            return msg(
+            return dspmsg(
                 item.author_name,
                 d.toLocaleDateString() + " " + d.toLocaleTimeString(),
                 item.msg
@@ -116,37 +145,45 @@ function lobby(lobbyid){
 
 module.exports = {
     frame: function(content, right){
-        return m(".chat.container", [
+        return m("div", [
-            m(".chat.header", [
+            m(".chat.container", [
-                m(
+                m(".chat.header", [
-                    "h2",
+                    m(
-                    {style:{margin:"0px"}},
+                        "h2",
-                    "chat"
+                        {style:{margin:"0px"}},
-                )
+                        "chat"
+                    )
+                ]),
+                m(".chat.left", [
+                    m("div.chat.header[style=position:relative]","lobbies:"),
+                    m("br"),
+                    lobbies(),
+                ]),
+                m(".chat.right", right),
+                m(".chat.middle", content),
+                m(".chat.clear", ""),
             ]),
-            m(".chat.left", [
+            msg != null
-                m("div.chat.header[style=position:relative]","lobbies:"),
+            ? msg
-                m("br"),
+            : [],
-                lobbies(),
-            ]),
-            m(".chat.right", right),
-            m(".chat.middle", content),
-            m(".chat.clear", ""),
         ]);
     },
     view: function(){
         var lobbyid = m.route.param("lobby");
+        msg = null;
         if (lobbyid != undefined ) {
             return this.frame(
-                lobby(lobbyid),[]
+                lobby(lobbyid),
+                []
             );
         };
         return this.frame(
-                m(
+            m(
-                    "div",
+                "div",
-                    {style: {margin:"10px"}},
+                {style: {margin:"10px"}},
-                    "please select lobby"
+                "please select lobby"
-                ),
+            ),
-                m("div","right"));
+            m("div","right")
+        );
     }
 }