From a7bd9747eb9a341fd875b5429acd56f551bffaaa Mon Sep 17 00:00:00 2001 From: Steven Ramkumar Date: Thu, 30 Dec 2010 21:28:14 -0800 Subject: [PATCH 1/4] add functionality to show the most active rooms on the homepage and to join them --- backend/Storage.js | 44 +++++++++++++++++---- backend/server.js | 12 +++++- frontend/css/chat_style.css | 65 ++++++++++++++++++++++++++++++- frontend/images/button-green.gif | Bin 0 -> 96 bytes frontend/images/button-grey.gif | Bin 0 -> 150 bytes frontend/index.html | 4 +- frontend/js/chat_client.js | 36 +++++++++++++++++ 7 files changed, 150 insertions(+), 11 deletions(-) create mode 100644 frontend/images/button-green.gif create mode 100644 frontend/images/button-grey.gif diff --git a/backend/Storage.js b/backend/Storage.js index 62490b6..4bfe098 100644 --- a/backend/Storage.js +++ b/backend/Storage.js @@ -8,15 +8,43 @@ var DB_NAME = 'uwchat', DB_ADDESS = '127.0.0.1', DB_PORT = 27017; +/** + * Inserts document into mongodb + * @param {String} coll_name name of the collection in the database + * @param {Object} data an object literal to insert into the database + */ Storage.save = function(coll_name, data) { - var client = new Db(DB_NAME, new Server(DB_ADDESS, DB_PORT)); + var client = new Db(DB_NAME, new Server(DB_ADDESS, DB_PORT)); - client.open(function(p_client) { - client.collection(coll_name, function(err, collection) { - collection.insert(data, function(err, docs) { - sys.puts('log message ' + JSON.stringify(data) + '.'); - client.close(); - }); + client.open(function(p_client) { + client.collection(coll_name, function(err, collection) { + collection.insert(data, function(err, docs) { + sys.puts('log message ' + JSON.stringify(data) + '.'); + client.close(); + }); + }); + }); +} + +/** + * Gets the most active rooms on UWChat. Does a SQL-like GROUP BY + * query to get the number of messages in the last half hour in each + * existing chat room. + * @param {String} coll_name name of the collection in the database + * @param {Object} data an object literal to insert into the database + */ +Storage.getActiveRooms = function(coll_name, callback){ + var client = new Db(DB_NAME, new Server(DB_ADDESS, DB_PORT)); + + var SINCE = [300000, 600000, 1800000]; //5, 10, 30 minutes + + client.open(function(p_client) { + client.collection(coll_name, function(err, collection) { + collection.group(['room'], {type: 'msg', timestamp: {$gt : new Date().getTime() - SINCE[2]}}, {sum:0}, function(doc, prev){ prev.sum += 1}, function(err, docs) { + sys.puts('log message ' + JSON.stringify(docs) + '.'); + callback(docs); + client.close(); + }); + }); }); - }); } diff --git a/backend/server.js b/backend/server.js index 6fe54d7..8cf8172 100644 --- a/backend/server.js +++ b/backend/server.js @@ -15,7 +15,8 @@ var fu = require("./fu"), ch = require("./Channel"), sys = require("sys"), url = require("url"), - qs = require("querystring"); + qs = require("querystring"), + storage = require('./Storage.js'); var SESSION_TIMEOUT = 60 * 1000; @@ -442,3 +443,12 @@ fu.get("/send", function (req, res) { res.simpleJSON(200, { rss: mem.rss }); }); +fu.get("/activerooms", function (req, res) { + sys.puts('serv: activerooms'); + + storage.getActiveRooms('messages', function(data){ + res.simpleJSON(200, data); + }); + +}); + diff --git a/frontend/css/chat_style.css b/frontend/css/chat_style.css index 9d0b010..018d341 100644 --- a/frontend/css/chat_style.css +++ b/frontend/css/chat_style.css @@ -130,7 +130,7 @@ a:hover { text-decoration: underline; color: #aaa; } text-align: center; width: 600px; margin: 0 auto; - margin-top: 200px; + margin-top: 50px; z-index: 3; } @@ -173,3 +173,66 @@ a:hover { text-decoration: underline; color: #aaa; } font-size:0.8em; text-align:center; } + +/* + BUTTONS +*/ +.button{ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + background: url("/images/button-grey.gif") repeat-x scroll left top #D8D8D8; + border-color: #BBBBBB #BBBBBB #999999; + border-style: solid; + border-width: 1px; + color: #333333; + cursor: pointer; + display: inline; + font-size: 0.6em; + font-weight: bold; + padding: 3px 6px; + text-align: center; + text-shadow: 0 1px #F0F0F0; +} + +.join_button{ + background-color: #C3DD82; + background-image: url("/images/button-green.gif"); + border-bottom: 1px solid #648517; + border-color: #8CB332 #8CB332 #648517; + color: #406A24; + text-shadow: 0 1px #D4ED95; +} + +.join_button:hover{ + border-color: #BBBBBB #BBBBBB #999999; + color: #406A24; +} + + +#activerooms_splash{ + text-align: center; + width: 250px; + margin: 0 auto; + margin-top: 75px; + z-index: 3; +} + +#activerooms_splash > div{ + clear: both; +} + +#activerooms_splash h2{ + font-size: 0.8em; + font-weight: normal; + text-decoration: underline; + margin-bottom: 10px; +} + +.room_name{ + float: left; + font-size: 0.8em; +} + +.join_button_div { + float: right; +} diff --git a/frontend/images/button-green.gif b/frontend/images/button-green.gif new file mode 100644 index 0000000000000000000000000000000000000000..fd165fbb0e1998580b48eb2060d148a9315cd4d5 GIT binary patch literal 96 zcmZ?wbhEHbWMq(F*v!Ci<;A?a@7JDu*mL?(|B-tw*Iq5W`FiQuCzH-UoqFtk+wC{2 y?tj>L>G{m#_d5^YZDL?xQ2faPBpDcVKm^DP1{U4|)>N*97d#h*3KKNk7_0$xH7fo9 literal 0 HcmV?d00001 diff --git a/frontend/images/button-grey.gif b/frontend/images/button-grey.gif new file mode 100644 index 0000000000000000000000000000000000000000..3a9fff4b627739a643923d6ca9223017bbbfa076 GIT binary patch literal 150 zcmZ?wbhEHbWMq(FIKsg2`_G@}&!2z!^5xd8Tfct&`taey-FtWc{rmUu;lpp=zW?~~ zotrmrzIyrU&)+|fA3wfv;|2p>p!kyoEUyD1L3T2* b3O_JpY?;L2^Ux${L%@k-2j`HxiVW5O%Wg=W literal 0 HcmV?d00001 diff --git a/frontend/index.html b/frontend/index.html index 41f21cd..f1698d9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -38,7 +38,9 @@
- + +

Active Rooms

+

Room Title

diff --git a/frontend/js/chat_client.js b/frontend/js/chat_client.js index 971d1a8..ebe552e 100644 --- a/frontend/js/chat_client.js +++ b/frontend/js/chat_client.js @@ -276,6 +276,34 @@ function updateUptime () { } } +function updateActiveRooms (data) { + var topRoomsTable = $("#activerooms_splash"), + room, + content = ''; + + //mongodb-native doesn't have a sort function after a + // group query. So we have to sort client side. + data.sort(function(a,b){ return b.sum - a.sum}); + + // What about using Mustache templates instead? + data.forEach(function(obj){ + room = obj.room.length > 21 ? obj.room.substr(0, 15).toLowerCase() + "..." : obj.room.toLowerCase(); + + content += '
' + room + '
' + + '
Join
'; + }); + + topRoomsTable.append(content); + + $("#activerooms_splash .join_button").click(function(e){ + //Should probably abstract this out later. + var roomName = $(this).attr("data-action"); + $("#nickInput").attr("value", roomName); + $("#connectButton").click(); + }); + +} + var transmission_errors = 0; var first_poll = true; @@ -420,10 +448,17 @@ function showChat (nick) { $("#loading").hide(); $("#example").hide(); + $("#activerooms_splash").hide(); scrollDown(); } +function showActiveRooms () { + jQuery.get("/activerooms", {}, function (data) { + updateActiveRooms(eval("(" + data + ")")); + }); +} + //we want to show a count of unread messages when the window does not have focus function updateTitle(){ if (CONFIG.unread) { @@ -590,6 +625,7 @@ $(document).ready(function() { $("#log table").remove(); showConnect(); + showActiveRooms(); }); //if we can, notify the server that we're going away. From 521606fb47b25ef522fee01351830c543e883cf7 Mon Sep 17 00:00:00 2001 From: Steven Ramkumar Date: Thu, 30 Dec 2010 21:40:02 -0800 Subject: [PATCH 2/4] add message if there are no active rooms --- frontend/css/chat_style.css | 9 +++++++-- frontend/js/chat_client.js | 4 ++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/css/chat_style.css b/frontend/css/chat_style.css index 018d341..f9315d3 100644 --- a/frontend/css/chat_style.css +++ b/frontend/css/chat_style.css @@ -228,11 +228,16 @@ a:hover { text-decoration: underline; color: #aaa; } margin-bottom: 10px; } -.room_name{ +#activerooms_splash .no_active_rooms{ + color: grey; + font-size: 0.7em; +} + +#activerooms_splash .room_name{ float: left; font-size: 0.8em; } -.join_button_div { +#activerooms_splash .join_button_div { float: right; } diff --git a/frontend/js/chat_client.js b/frontend/js/chat_client.js index ebe552e..c1229ed 100644 --- a/frontend/js/chat_client.js +++ b/frontend/js/chat_client.js @@ -281,6 +281,10 @@ function updateActiveRooms (data) { room, content = ''; + if (data.length == 0){ + //No active rooms + topRoomsTable.append("
None
") + } //mongodb-native doesn't have a sort function after a // group query. So we have to sort client side. data.sort(function(a,b){ return b.sum - a.sum}); From dbd9242a673a345abeb0f85389f1cf3865371366 Mon Sep 17 00:00:00 2001 From: Steven Ramkumar Date: Thu, 30 Dec 2010 21:58:48 -0800 Subject: [PATCH 3/4] remove toLowerCase --- frontend/js/chat_client.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/js/chat_client.js b/frontend/js/chat_client.js index c1229ed..7e70779 100644 --- a/frontend/js/chat_client.js +++ b/frontend/js/chat_client.js @@ -291,10 +291,10 @@ function updateActiveRooms (data) { // What about using Mustache templates instead? data.forEach(function(obj){ - room = obj.room.length > 21 ? obj.room.substr(0, 15).toLowerCase() + "..." : obj.room.toLowerCase(); + room = obj.room.length > 21 ? obj.room.substr(0, 20) + "..." : obj.room; content += '
' + room + '
' - + '
Join
'; + + '
Join
'; }); topRoomsTable.append(content); From 45c50eb568458af4dc7028609d850ef4f657b865 Mon Sep 17 00:00:00 2001 From: Steven Ramkumar Date: Fri, 31 Dec 2010 07:11:26 -0800 Subject: [PATCH 4/4] some formatting and added a return statement if there are no active rooms --- backend/Storage.js | 4 ++-- frontend/js/chat_client.js | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/backend/Storage.js b/backend/Storage.js index 4bfe098..2fc4247 100644 --- a/backend/Storage.js +++ b/backend/Storage.js @@ -31,7 +31,7 @@ Storage.save = function(coll_name, data) { * query to get the number of messages in the last half hour in each * existing chat room. * @param {String} coll_name name of the collection in the database - * @param {Object} data an object literal to insert into the database + * @param {Function} callback callback to send document back to */ Storage.getActiveRooms = function(coll_name, callback){ var client = new Db(DB_NAME, new Server(DB_ADDESS, DB_PORT)); @@ -42,7 +42,7 @@ Storage.getActiveRooms = function(coll_name, callback){ client.collection(coll_name, function(err, collection) { collection.group(['room'], {type: 'msg', timestamp: {$gt : new Date().getTime() - SINCE[2]}}, {sum:0}, function(doc, prev){ prev.sum += 1}, function(err, docs) { sys.puts('log message ' + JSON.stringify(docs) + '.'); - callback(docs); + if(typeof callback == "function") callback(docs); client.close(); }); }); diff --git a/frontend/js/chat_client.js b/frontend/js/chat_client.js index 7e70779..9b23e96 100644 --- a/frontend/js/chat_client.js +++ b/frontend/js/chat_client.js @@ -283,7 +283,8 @@ function updateActiveRooms (data) { if (data.length == 0){ //No active rooms - topRoomsTable.append("
None
") + topRoomsTable.append("
None
"); + return; } //mongodb-native doesn't have a sort function after a // group query. So we have to sort client side. @@ -293,8 +294,12 @@ function updateActiveRooms (data) { data.forEach(function(obj){ room = obj.room.length > 21 ? obj.room.substr(0, 20) + "..." : obj.room; - content += '
' + room + '
' - + '
Join
'; + content += '
' + + '
' + room + '
' + + '
' + + 'Join' + + '
' + + '
'; }); topRoomsTable.append(content);