davidknaack · jamesharr · Jun 25, 2013 · Jun 26, 2013 · Jun 26, 2013
diff --git a/README.md b/README.md
@@ -9,4 +9,4 @@ project so that I can play with node.js.
 [Express](http://expressjs.com/)
 [Jade](http://jade-lang.com/) for templating
 [everyauth](http://everyauth.com/) for authentication
-[Twitter Bootstrap](http://twitter.github.com/bootstrap/) for styling
+[Twitter Bootstrap](http://twitter.github.com/bootstrap/) for styling
diff --git a/app.js b/app.js
@@ -2,40 +2,67 @@ var express = require('express');
 var app = module.exports = express();
 var config = require('./config.js')(app, express);
 
-var dataModels = {  
-    kibitz: { 
-        kibItems: [], 
-        add: function(kib){ 
-            dataModels.kibitz.kibItems.push(kib);
-            var l = dataModels.kibitz.kibItems.length;
-            if ( l > 5)
-                dataModels.kibitz.kibItems = dataModels.kibitz.kibItems.slice(l-5,l);
-        }}
-};
-
-app.get('/', function(req, res){
-    if (app.requireAuth === true && req.loggedIn === false)
-        res.redirect('/auth/twitter');
+var kibitzModel = function(){
+    var id = 0;
+    var kibItems = [];
+    var listeners = [];
+    var get = function(){
+        return kibItems;
+    };
+    var getLastId = function(){
+        if ( kibItems.length === 0 )
+            return 0;
+        return kibItems[kibItems.length-1].id;
+    }
+    var add = function(nick, message){
+        id++;
+        kibItems.push({id:id, nick:nick, message:message});
+
+        var l = kibItems.length;
+        if ( l > 5 )
+            kibItems = kibItems.slice(l - 5, l);
+
+        // Send each listener all the kibItems
+        listeners.forEach(function(l){l();});
+        listeners = [];
+    };
+    var listen = function(l){
+        listeners.push(l);
+    };
+
+    // Return public methods
+    return {
+        get: get,
+        add: add,
+        listen: listen,
+        getLastId: getLastId
+    };
+}();
 
-    req.session.username = req.session.username||'guest';
-    res.render('index.jade', {
-        title: 'OMG Kibitz',
-        username: req.session.username,
-        kibItems: dataModels.kibitz.kibItems
-    });
+app.get('/chatlog/:lastId', function(req, res){
+    var done = false;
+    var finish = function(){
+        if (!done) res.send(kibitzModel.get());
+        done= true;
+    };
+
+    if ( req.params.lastId < kibitzModel.getLastId() ) {
+        // If client doesn't have the latest ID, just finish.
+        finish();
+    } else {
+        // If client does, wait 30 seconds or until a message is sent.
+        setTimeout(finish, 30000);
+        kibitzModel.listen(finish);
+    }
 });
 
-app.post('/posta', function(req, res){
-    console.log(req.body);
-
-    req.session.username = req.body.from;
-
-    if (req.body.newtext)
-        dataModels.kibitz.add({date: 1, from: req.session.username, text: req.body.newtext});
-
-    res.render('kibitzs.jade', {
-        kibItems: dataModels.kibitz.kibItems
-    });
+app.post('/send', function(req, res){
+    req.session.username = req.body.nick;
+    if (req.body.message)
+        kibitzModel.add(req.body.nick, req.body.message);
+
+    // Send an empty response. We don't poll the chat log from here.
+    res.send("");
 });
 
 console.log(process.env.PORT);

diff --git a/manifest.yml b/manifest.yml
@@ -1,7 +1,7 @@
 ---
 applications:
   .:
-    name: OMGKibitz
+    name: jharr-OMGKibitz
     framework:
       name: node
       info:

diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
-    "name": "application-name"
+    "name": "kibitz"
   , "version": "0.0.1"
   , "private": true
   , "dependencies": {
       "express": ">=2.5.8"
-    , "jade": ">= 0.0.1"
     , "everyauth": ">=0.2.32"
+    , "node-static": ">=0.6.0"
   },
   "engines": {
     "node": "0.6.x",

diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<html>
+    <head>
+        <title>OMG Kibitz</title>
+        <link rel="stylesheet" href="stylesheets/style.css" />
+        <link rel="icon" href="images/siteicon.png" />
+        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
+        <script src="js/app.js"></script>
+        <script src="js/services.js"></script>
+        <script src="js/controller.js"></script>
+    </head>
+    <body ng-app="kibitz">
+        <div>
+            <h1>OMG Kibitz</h1>
+        </div>
+        <div ng-view></div>
+    </body>
+</html>
diff --git a/public/javascripts/bootstrap.min.js b/public/javascripts/bootstrap.min.js
diff --git a/public/javascripts/jquery-1.8.1.min.js b/public/javascripts/jquery-1.8.1.min.js
diff --git a/public/js/app.js b/public/js/app.js
@@ -0,0 +1,10 @@
+'use strict';
+
+
+angular.module('kibitz', ['kibitzServices']).
+    config(['$routeProvider', function($routeProvider) {
+        $routeProvider.
+            when('/login', {templateUrl: 'partials/login.html', controller: LoginCtrl}).
+            when('/chat', {templateUrl: 'partials/chat.html', controller: ChatCtrl}).
+            otherwise({redirectTo: '/login'});
+        }]);
diff --git a/public/js/controller.js b/public/js/controller.js
@@ -0,0 +1,58 @@
+'use strict';
+
+function LoginCtrl($scope, $location, ChatSession){
+    $scope.nick = "";
+
+    // Login form submitted
+    $scope.login = function() {
+        ChatSession.nick = $scope.nick;
+
+        $location.url("/chat");
+    }
+}
+//LoginCtrl.$inject = ['$scope', '$location', 'ChatSession'];
+
+
+
+function ChatCtrl($scope, $location, $http, $timeout, ChatSession) {
+    // Force a login if we don't have an ID.
+    if ( ! ChatSession.nick ) {
+        $location.url("/login");
+        return;
+    }
+
+    // Set up initial variables
+    $scope.nick = ChatSession.nick;
+    $scope.chatlog = [];
+    $scope.message = "";
+
+    // When someone hits enter.
+    $scope.sendMessage = function(){
+        var resetForm = function(){
+            $scope.message = "";
+        }
+
+        // Send message, reset form
+        $http.
+            post('/send', {'nick':$scope.nick, 'message':$scope.message}).
+            success(resetForm).
+            error(resetForm);
+    };
+
+    // start a refresh
+    // FIXME - This is probably an antipattern.
+    var lastMsgId = 0;
+    var refresh = function(){
+        $http.get("/chatlog/" + lastMsgId).
+            success(function(data){
+                $scope.chatlog = data;
+                if ( data.length > 0 )
+                    lastMsgId = data[data.length-1].id;
+                $timeout(refresh, 100);
+            }).error(function(){
+                $timeout(refresh, 5000);
+            });
+    };
+    refresh();
+}
+//ChatCtrl.$inject = ['$scope', '$location', '$http', '$timeout', 'ChatSession'];
diff --git a/public/js/services.js b/public/js/services.js
@@ -0,0 +1,13 @@
+'use strict';
+
+
+// ChatSessions service just keeps the name of the user
+angular.module('kibitzServices', []).
+    factory('ChatSession', function(){
+
+        // Return the service
+        return {
+            'nick': ""
+        };
+
+    });
diff --git a/public/partials/chat.html b/public/partials/chat.html
@@ -0,0 +1,11 @@
+
+<div class="kibItemWrap" ng-repeat="message in chatlog">
+    <div class="kibitzItem">
+        <p class="kibitzname">{{message.nick}}</p>
+        <div class="idioticspacer"></div>
+        <div class="bubble">{{message.message}}</div>
+  </div>
+</div>
+<form ng-submit="sendMessage()">
+    {{nick}}: <input type="text" ng-model="message" placeholder="Type message here" autofocus />
+</form>
diff --git a/public/partials/login.html b/public/partials/login.html
@@ -0,0 +1,6 @@
+<div>
+  <form ng-submit="login()" ng-controller="LoginCtrl">  
+    <input type="text" ng-model="nick" placeholder="Enter a nickname" style="width: 10em" autofocus/>
+    <input type="submit" id="submit" value="Submit" />
+  </form>
+</div>
diff --git a/views/index.jade b/views/index.jade
diff --git a/views/kibitzs.jade b/views/kibitzs.jade