Move web application into /web.

web/www/js/test.js

@@ -0,0 +1,131 @@
+var Test = {};
+
+$(document).ready(function() {
+
+    Test.U = Backbone.Model.extend({
+        url: '/ts_api/users',
+
+        initialize: function() {
+            this.timelines = {};
+        }
+    });
+
+    Test.E = Backbone.Model.extend({
+        url: '/ts_api/entries/jdbernard/work'
+    });
+
+    Test.UView = Backbone.View.extend({
+
+        el: $("#user"),
+        model: Test.U,
+
+        initialize: function() {
+            _.bindAll(this, 'render');
+            this.model.bind('change', this.render);
+            this.model.view = this;
+        },
+
+        render: function() {
+            this.$('.fullname').text(this.model.get('name'));
+            this.$('.username').text(this.model.get('id'));
+        }
+    });
+
+    Test.EList = Backbone.Collection.extend({
+        model: Test.E,
+
+        url: '/ts_api/entries/jdbernard/work',
+
+        initalize: function(models, options) {
+            this.user = options.user;
+        },
+
+        comparator: function(entry) {
+            return entry.get('timestamp');
+        }
+    });
+
+    Test.EView = Backbone.View.extend({
+
+        model: Test.E,
+
+        initialize: function() {
+            _.bindAll(this, 'render');
+            this.model.bind('change', this.render);
+            this.model.view = this;
+        },
+
+        render: function() {
+            $(this.el).html("<span class='entry-id'>" + this.model.get('id') + "<span class='mark'>" + this.model.get('mark') + "</span>");
+            return this;
+        }
+    });
+
+    Test.EListView = Backbone.View.extend({
+        el: $("#entry-list"),
+        initialize: function() {
+            _.bindAll(this, 'render', 'refresh', 'addOne');
+
+            this.collection.bind('add', this.addOne);
+            this.collection.bind('refresh', this.refresh);
+        },
+
+        addOne: function(entry) {
+            var view = new Test.EView({model: entry});
+            $(this.el).append(view.render().el);
+        },
+
+        refresh: function() {
+            $(this.el).empty();
+            var thisRef = this;
+            this.collection.each(function(entry) {thisRef.addOne(entry)});
+        }
+    });
+
+    Test.currentUser = new Test.U;
+    Test.userView = new Test.UView({model: Test.currentUser});
+
+    // wire the login dialog using jQuery UI
+    $("#login-dialog").dialog({
+        autoOpen: false,
+        height: 400,
+        width: 400,
+        modal: true,
+        buttons: { Login: function(){login()} }
+    });
+
+    $('#login-dialog').dialog('open');
+
+});
+
+function login() {
+    // lookup the login dialog elements
+    var name = $("#login-name");
+    var pwd = $("#login-password");
+
+    // call the API via AJAX
+    $.ajax({
+        url: "/ts_api/login",
+        processData: false,
+        data: JSON.stringify({username: name.val(), password: pwd.val()}),
+        type: "POST",
+
+        error: function(jqXHR, textStatus, error) {
+            // assuming bad credentials (possible server error or bad request,
+            // we should check that, FIXME
+            var tips = $(".validate-tips");
+            tips.text("Incorrect username/password combination.");
+            tips.addClass("ui-state-error");
+            tips.slideDown();
+        },
+
+        success: function(data, textStatus, jqXHR) {
+            $("#login-dialog").dialog('close');
+            Test.currentUser.set({id: name.val()}, {silent: true});
+            Test.currentUser.fetch();
+
+            Test.currentEntryList = Test.currentUser.timelines['work'] = new Test.EList([], {user: Test.currentUser});
+            new Test.EListView({collection: Test.currentEntryList});
+            Test.currentEntryList.fetch();
+        }});
+}