webgui: first steps in chat

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

@@ -1,5 +1,5 @@
 .chat
-    $color: lightblue
+    $color: black
     $header_height: 50px
     $left_width: 200px
     $right_width: 200px
@@ -26,7 +26,7 @@
         width: $left_width
         border-right: solid 1px gray
         box-sizing: border-box
-        background-color: lightgray
+        background-color: black
     &.right
         position: absolute
         top: $header_height
@@ -59,7 +59,7 @@
             width: $author_width
             top: 10px
             left: 0px
-            color: gray
+            color: white
             text-align: right
         &.when
             float: right

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var m = require("mithril");
+var rs = require("retroshare");
 
 function msg(from, when, text){
     return m(".chat.msg.container",[
@@ -10,18 +11,59 @@ function msg(from, when, text){
     ]);
 }
 
+function lobbies(){
+    var lobs = rs("chat/lobbies");
+    if (lobs === undefined) {
+        return m("div","loading ...")
+    };
+    var dta = lobs.map(function (lobby){
+        return m("div.btn",{
+            title: "topic: " + lobby.topic + "\n"
+                + "subscribed: " + lobby.subscribed,
+            onclick: function(){
+                m.route("/chat?lobby=" + lobby.chat_id);
+            }
+                    },lobby.name + (lobby.unread_msg_count > 0 ? ("(" + lobby.unread_msg_count + ")") : ""));
+    });
+    return dta;
+
+}
+
+function lobby(lobbyid){
+    var msgs = rs("chat/messages/" + lobbyid);
+    var info = rs("chat/info/" + lobbyid);
+    if (msgs === undefined || info === undefined) {
+        return m("div","waiting ...");
+    }
+    return msgs.map(function(item){
+        var d = new Date(new Number(item.send_time)*1000);
+        return msg(item.author_name, d.toLocaleDateString() + " " + d.toLocaleTimeString(),item.msg);
+    });
+}
+
 module.exports = {
-    view: function(){
+    frame: function(content, right){
         return m(".chat.container", [
             m(".chat.header", "headerbar"),
-            m(".chat.left", "left"),
-            m(".chat.right", "right"),
-            m(".chat.middle", [
-                msg("Andi", "now", "Hallo"),
-                msg("Test", "now", "Hallo back"),
-                msg("Somebody", "now", "Hallo back, sfjhfu dsjkchsd wehfskf sdjksdf sjdnfkjsf sdjkfhjksdf jksdfjksdnf sjdefhsjkn cesjdfhsjk fskldcjhsklc ksdj"),
+            m(".chat.left", [
+                m("div.chat.header","lobbies:"),
+                m("hr"),
+                lobbies(),
             ]),
+            m(".chat.right", right),
+            m(".chat.middle", content),
             m(".chat.clear", ""),
         ]);
+    },
+    view: function(){
+        var lobbyid = m.route.param("lobby");
+        if (lobbyid != undefined ) {
+            return this.frame(
+                lobby(lobbyid),[]
+            );
+        };
+        return this.frame(
+                m("div", "please select lobby"),
+                m("div","right"));
     }
-}
+}