Add login page and make haml compile in a specified scope

dinmaker.js

@@ -1,36 +1,48 @@
 include('/utils.js');
 var server = require("http_server.js");
 var haml = require("haml.js");
-
-// haml.render({}, 'interface.haml', function (html) {
-//   puts(html);
-// });
-
+var listeners = {};
 
 // This is the handler for long-poll requests.  We don't want to respond to these right away, but wait till
 // there is something to report.  We will set up an event listener that closes the connection upon an event.
 function long_poll(req, res, username) {
-
+ listeners[username] = function (message) {
+   puts(JSON.stringify({username: username, message: message}));
+   res.finish();
+ }
 }
 
 function send_message(req, res, username, message) {
+  for (name in listeners) {
+    if (listeners.hasOwnProperty(name)) {
+      (listeners[name])(message);
+    }
+  }
  puts("Message" + message);
- res.close();
+ res.finish();
 }
 
 
-// Render the interface.haml file for requests to the base path
+// Serve js, css, and png files as static resources
+server.get(/^(\/.+\.(?:js|css|png|ico|tci))$/, function (req, res, path) {
+ server.staticHandler(req, res, "public" + path);
+});
+
+// Render the login window
 server.get(/^\/$/, function (req, res) {
- haml.render({}, 'interface.haml', function (html) {
+ haml.render({}, 'login.haml', function (html) {
    res.simpleHtml(200, html);
  });
 });
 
-// Serve js, css, and png files as static resources
-server.get(/^(\/.+\.(?:js|css|png|ico|tci))$/, function (req, res, path) {
- server.staticHandler(req, res, "public" + path);
+// Render the chat interface
+server.get(/^\/([^\/]*)$/, function (req, res, username) {
+ haml.render({username: username}, 'interface.haml', function (html) {
+   res.simpleHtml(200, html);
+ });
 });
 
+
 // Handle long_poll requests
 server.get(/^\/listen\/(.*)$/, long_poll);
 

interface.haml

@@ -9,9 +9,11 @@
     %script{ src: "/external/jquery.haml-1.3.js", type: "text/javascript" }
     %script{ src: "/lib/TC.js", type: "text/javascript" }
     :javascript
+      console.log($('username'));
       $(function () {
         TC.set_path("lib/");
-        TC.render_interface('Demo.js');
+        // Scope for this template is #{JSON.stringify(this)}
+        TC.render_interface('Demo.js', #{JSON.stringify(this.username)});
       });
     :css
       .other, .self {

login.haml

@@ -0,0 +1,37 @@
+!!! XML
+!!! Strict
+%html{ xmlns: "http://www.w3.org/1999/xhtml" }
+  %head
+    %title Login - DinMaker - A real-time chat demo for TopCloud and NodeRouter
+    %link{ href: "/external/ui-darkness/jquery-ui-1.7.2.custom.css", rel: "stylesheet", type: "text/css" }
+    %link{ href: "login.css", rel: "stylesheet", type: "text/css" }
+    %script{ src: "/external/jquery-1.3.2.min.js", type: "text/javascript" }
+    %script{ src: "/external/jquery-ui-1.7.2.custom.min.js", type: "text/javascript" }
+    :javascript
+      function login(form) {
+        window.open("/" + escape($('input', form).val()), "DinMaker", "status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=1,scrollbars=0,height=400,width=700");
+      }
+  %body
+    .ui-widget-overlay
+    
+    %form{ onsubmit: "return false;" }
+      #shadow
+        .ui-widget-shadow
+      %table#login.ui-widget.ui-widget-content.ui-corner-all
+        %thead
+          %tr
+            %th.ui-widget-header.ui-corner-top{ colspan: "2" }
+              Enter your desired username for DinMaker
+        %tr
+          %th
+            Name
+          %td
+            %input{ name: "name" }
+        %tr
+          %th
+          %td
+            %button{ title: "Enter the chat room.", onclick: "login(this.form)" }
+              %span.ui-icon.ui-icon-unlocked
+              Launch
+    
+    

public/Demo.js

@@ -1,19 +1,52 @@
 /*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true */
 /*globals TC, jQuery*/
 
-TC.defineController("Demo", function (params) {
+TC.defineController("Demo", function (username) {
+
+  var $ = jQuery, self = this, messages = [], users = {};
 
 	this.bindData("selected_users", {value: {}});
+	this.bindData("new_message", {value: ""});
+
+	this.send_message = function () {
+	  var message = self.new_message.get();
+	  if (message === '') {
+	    return;
+	  }
+	  $.ajax({
+      type: "POST",
+      url: "/message/" + username,
+      processData: false,
+      data: message
+    });
+    self.new_message.set("");
+	}
+
 	this.table_model = {
 	  get_num_rows: function () {
-	    return 1;
+	    return 2;
 	  },
 	  get_value_at: function (row_index, column) {
-	    return "Tim";
+	    return ["Tim", "Bob"][row_index];
 	  }
-
-
-
 	};
+
+	function long_poll() {
+	  $.ajax({
+      type: "POST",
+      url: "/listen/" + username,
+      success: function (data) {
+        console.log(data);
+        long_poll();
+      },
+      error: function (err) {
+        console.error("Long-Poll Error, retrying in 10 seconds...");
+        setTimeout(long_poll, 10000);
+      }
+    });
+	}
+
+	// Kick off the long poll process on load
+	$(long_poll);
 
 });

public/Demo.tci

@@ -11,9 +11,10 @@ DataTable width: 200, right: 10, top: 10, bottom: 40
 	checked: @selected_users
 
 TextEntry left: 10, bottom: 10, right: 120, height: 20
-	value: "New message goes here"
+	value: @new_message
 
 Button right: 10, bottom: 10, height: 20, width: 100
 	value: "Send Message"
 	icon: "mail-closed"
+	click: @send_message
 

public/login.css

@@ -0,0 +1,9 @@
+table, #shadow, .ui-widget-shadow { width: 400px; height: 160px; }
+table#login, #shadow { font-size: 15px; position: absolute; top: 50%; left: 50%; margin-top: -80px; margin-left: -200px; }
+table#login td, table#login th { vertical-align: middle; }
+#login tr.ui-state-error { font-size: 12px; }
+#login tr.ui-state-error td { padding: 5px 10px; }
+#login tr.ui-state-error span { float: left; margin-right: 0.3em; }
+#login .ui-widget-header { line-height: 2em; height: 2em; }
+#login button { font-size: 12px; cursor: pointer; line-height: 1em; padding: 2px 5px 2px 2px; }
+#login button .ui-icon { float: left; line-height: 1em; }