Refactor JS, rename a couple CSS classes

diff --git a/reactornado/dispatcher.js b/reactornado/dispatcher.js
index 872ae41c8d1cd035da46f9dfbcfa78ab26b6a5aa..9dfcda80e37ae9079df134ceedad61006caa05a8 100644 (file)
--- a/reactornado/dispatcher.js
+++ b/reactornado/dispatcher.js
@@ -7,6 +7,58 @@ var Dispatcher = {
             "params": params
         };
         window.ws_conn.send(JSON.stringify(m));
+    },
+    handle_msg: function(obj) {
+        console.log(obj);
+        if (obj.sender == "blist") {
+            this.handle_blist_message(obj.method, obj.params);
+        } else if (obj.sender == "conversations") {
+            this.handle_conversations_message(obj.method, obj.params);
+        }
+    },
+    handle_blist_message: function(method, params) {
+        bid = params.proto + ":" + params.account + ":" + params.buddy;
+        // Create buddy entry in blist if none exists yet
+        if (window.blist[bid] === undefined) {
+            window.blist[bid] = {
+                proto: params.proto,
+                account: params.account,
+                buddy: params.buddy,
+                status: {}
+            };
+        }
+        if (method == "buddy_status_changed") {
+            window.blist[bid].status = params.status;
+        } else if (method == "buddy_icon_changed") {
+            window.blist[bid].bicon_url = params.url;
+        }
+        window.buddy_list.onChange(window.blist);
+    },
+    handle_conversations_message: function(method, params) {
+        console.log("conversations:", method, params);
+        bid = params.proto + ":" + params.account + ":" + params.buddy;
+        if (window.conversations[bid] === undefined) {
+            window.conversations[bid] = {
+                proto: params.proto,
+                account: params.account,
+                buddy: params.buddy,
+                messages: [],
+                visible: false,
+                type_state: "stopped"
+            };
+        }
+
+        if (method == "recv_im") {
+            window.conversations[bid].visible = true;
+            window.conversations[bid].messages.push({
+                message: params.message,
+                timestamp: params.timestamp,
+                sender: "them"
+            });
+        } else if (method == "buddy_typing_state") {
+            window.conversations[bid].type_state = params.state;
+        }
+        // TODO: repaint conversations window
     }
 };
 

diff --git a/reactornado/index.html b/reactornado/index.html
index 3fa7df3b3c15fe8687c178401601399c3dfccec4..bc028bbd18b34eba29a82cbfb373b2f53204d4b5 100644 (file)
--- a/reactornado/index.html
+++ b/reactornado/index.html
@@ -14,7 +14,7 @@
                <!-- A div for the initial login form -->
                <div id="loginform"></div>
                <!-- A div for the buddy list -->
-               <div id="blist"></div>
+               <div id="buddy_list"></div>
                <!-- A div for the tabbed chat view -->
                <div id="chats"></div>
        </body>

diff --git a/reactornado/main.js b/reactornado/main.js
index 76cf33402969464674d57f86c2e8923cbdb7b2db..02a81762e6b968b0227c40a8e7ef8b51d38b4868 100644 (file)
--- a/reactornado/main.js
+++ b/reactornado/main.js
@@ -1,6 +1,7 @@
 // this is like a main.js
 
-window.blist = {}
+window.blist = {} // buid -> {proto, account, buddy, status, bicon_url }
+window.conversations = {} // buid -> {proto, account, buddy, messages[], visible, type_state }
 
 window.onload = function () {
     // Create websocket and attach to window
@@ -9,7 +10,7 @@ window.onload = function () {
     ws.onmessage = function(evt) {
         //console.log("message received: " + evt.data);
         var message = JSON.parse(evt.data)
-        console.log(message);
+        window.Dispatcher.handle_msg(message);
     };
     ws.onclose = function(evt) {
         console.log("connection closed");
@@ -25,9 +26,9 @@ window.onload = function () {
         document.getElementById('loginform')
     );
 
-    window.blist = React.renderComponent(
+    window.buddy_list = React.renderComponent(
         window.widgets.BuddyList(),
-        document.getElementById('blist')
+        document.getElementById('buddy_list')
     );
     console.log("loaded");
 };

diff --git a/reactornado/ribbon_passthrough.py b/reactornado/ribbon_passthrough.py
index 3a24aaa5e80b925a165c37d34245a76a331c2acd..2603f67f06c6ebe5fa0741d6401dce2d103a210e 100644 (file)
--- a/reactornado/ribbon_passthrough.py
+++ b/reactornado/ribbon_passthrough.py
@@ -75,6 +75,7 @@ application = tornado.web.Application([
     (r'/(index.html)', tornado.web.StaticFileHandler, {'path': pwd}),
     (r'/([a-z]*\.js)', tornado.web.StaticFileHandler, {'path': pwd}),
     (r'/([a-z]*\.css)', tornado.web.StaticFileHandler, {'path': pwd}),
+    (r'/icons/(.*)', tornado.web.StaticFileHandler, {'path': os.path.join(pwd, 'state', 'icons')}),
     (r'/ws', WSHandler),
 ])
 
@@ -82,7 +83,7 @@ application = tornado.web.Application([
 if __name__ == "__main__":
     # Spawn the ribbon subprocess
     ribbon_binary = os.path.join(os.path.dirname(pwd), "ribbon", "ribbon")
-    ribbon = subprocess.Popen( [ribbon_binary], close_fds=True )
+    ribbon = subprocess.Popen( [ribbon_binary, "--state-dir", os.path.join(pwd, "state")], close_fds=True )
 
     # Spawn the http server
     http_server = tornado.httpserver.HTTPServer(application)

diff --git a/reactornado/style.css b/reactornado/style.css
index 82689562af4789d1cd46463e1d6198c0aeaa0201..f4bebfe958900ae897c260b747fd22c92a2a15a2 100644 (file)
--- a/reactornado/style.css
+++ b/reactornado/style.css
@@ -1,3 +1,9 @@
+body {
+       margin: 0px;
+       padding: 0px;
+       min-height: 100vh;
+}
+
 .form {
        float: left;
 }
@@ -10,35 +16,35 @@
        margin-bottom: 20px;
 }
 
-#blist {
+#buddy_list {
        float: right;
 }
 
 /* buddy list things */
-.blistitem {
+.buddy {
        width: 200px;
        height: 48px;
        font-size: small;
 }
 
-.blistitem > img {
+.buddy > img {
        display: inline-block;
        width: 48px;
        height: 48px;
        float: left;
 }
 
-.blistitemcontainer {
+.buddycontainer {
        display: inline-block;
        vertical-align: top;
        width: 152px;
 }
 
-.blist-buddyname {
+.buddyname {
        font-weight: bold;
 }
 
-.blisttext {
+.buddytext {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;

diff --git a/reactornado/widgets.js b/reactornado/widgets.js
index be04c3d0a86cffae3050c8bd9616b77fb7fce402..a1202dd8470e45fb46e8c8a425e82cd27cc2b76f 100644 (file)
--- a/reactornado/widgets.js
+++ b/reactornado/widgets.js
@@ -32,12 +32,7 @@ var LoginForm = React.createClass({
     },
     handleLogin: function () {
         console.log("Imma log in now");
-        command = {
-                  "destination": "accounts",
-                  "method": "create_account",
-                  "params": this.state
-        };
-        window.ws_conn.send(JSON.stringify(command));
+        window.Dispatcher.send_msg("accounts", "create_account", this.state);
     },
 
     render: function () {
@@ -60,11 +55,11 @@ var LoginForm = React.createClass({
 
 var BuddyListItem = React.createClass({
     render: function () {
-        return <div className="blistitem">
+        return <div className="buddy">
         <img className="buddyicon" src={this.props.bicon_url} />
-        <div className="blistitemcontainer">
-            <div className="blist-buddyname blisttext">{this.props.display_name}</div>
-            <div className="blisttext">{this.props.status}</div>
+        <div className="buddycontainer">
+            <div className="buddyname buddytext">{this.props.display_name}</div>
+            <div className="buddytext">{this.props.status_msg}</div>
         </div>
     </div>;
     }
@@ -75,7 +70,19 @@ var BuddyList = React.createClass({
         return {"buddies": []};
     },
     onChange: function(newData) {
-        this.setState( { "buddies": newData } );
+        // parse out newData and convert to structure expected by widget
+        var buddy_ids = Object.keys(newData);
+        buddy_ids.sort();
+        var buddies = [];
+        for (var i = 0 ; i < buddy_ids.length ; i++) {
+            var buddy = newData[buddy_ids[i]];
+            buddies.push({
+                bicon_url: buddy.bicon_url,
+                display_name: buddy.buddy,
+                status_msg: buddy.status.status_msg
+            });
+        }
+        this.setState( { "buddies": buddies } );
     },
     render: function () {
         // for each thing in this.state:
@@ -85,7 +92,7 @@ var BuddyList = React.createClass({
             var s = this.state.buddies[i];
             things.push(BuddyListItem(this.state.buddies[i]));
         }
-        return <div className="blist">{ things }</div>;
+        return <div className="buddy_list">{ things }</div>;
     }
 });