From 2b80cf3a9a934226ab3548c09d4c48abc4daad33 Mon Sep 17 00:00:00 2001 From: Drew Fisher Date: Mon, 12 May 2014 22:54:26 -0700 Subject: [PATCH] Refactor JS, rename a couple CSS classes --- reactornado/dispatcher.js | 52 +++++++++++++++++++++++++++++++ reactornado/index.html | 2 +- reactornado/main.js | 9 +++--- reactornado/ribbon_passthrough.py | 3 +- reactornado/style.css | 18 +++++++---- reactornado/widgets.js | 31 +++++++++++------- 6 files changed, 91 insertions(+), 24 deletions(-) diff --git a/reactornado/dispatcher.js b/reactornado/dispatcher.js index 872ae41..9dfcda8 100644 --- 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 3fa7df3..bc028bb 100644 --- a/reactornado/index.html +++ b/reactornado/index.html @@ -14,7 +14,7 @@
-
+
diff --git a/reactornado/main.js b/reactornado/main.js index 76cf334..02a8176 100644 --- 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 3a24aaa..2603f67 100644 --- 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 8268956..f4bebfe 100644 --- 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 be04c3d..a1202dd 100644 --- 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
+ return
-
-
{this.props.display_name}
-
{this.props.status}
+
+
{this.props.display_name}
+
{this.props.status_msg}
; } @@ -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
{ things }
; + return
{ things }
; } }); -- 2.39.5