From f4fe5559b13aacb4b247d3a850f88040af983e5d Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jonathan_bernard@quantumdigital.com>
Date: Wed, 27 Apr 2011 16:59:33 -0500
Subject: [PATCH] Reorganizing UI, adding TimelineListView.

---
 Makefile       |  9 +++++----
 doc/model.txt  |  4 ++--
 www/index.yaws | 28 ++++++++++++++-------------
 www/js/ts.js   | 51 +++++++++++++++++++++++++++++++++++++++++++++-----
 yaws.dev.conf  |  4 ++--
 5 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/Makefile b/Makefile
index 091c664..08eebea 100644
--- a/Makefile
+++ b/Makefile
@@ -3,22 +3,23 @@ BEAMS = $(MODS:src/%.erl=ebin/%.beam)
 TEST_MODS = $(wildcard test/*.erl)
 TEST_BEAMS = $(TEST_MODS:test/%.erl=test/%.beam)
 TS_ROOT=/usr/lib/yaws/jdb-labs/timestamper
+CWD = `pwd`
 
 default: compile
 
 all : compile test
 
-compile : $(BEAMS)
+compile : init $(BEAMS)
 
-compile-test : $(TEST_BEAMS)
+compile-test : init $(TEST_BEAMS)
 
 test : start-test-server run-test stop-test-server
 
-test-shell : compile compile-test
+test-shell : compile compile-test config-yaws-dev
 	@echo Starting an interactive YAWS shell with test paths loaded.
 	@yaws -i --pa test --id test_inst
 
-run-test : compile compile-test
+run-test : compile compile-test config-yaws-dev
 	@erl -pa ./ebin -pa ./test -run timestamper_api_tests test -run init stop -noshell
 
 start-test-server :
diff --git a/doc/model.txt b/doc/model.txt
index ea15525..6c4932f 100644
--- a/doc/model.txt
+++ b/doc/model.txt
@@ -19,9 +19,9 @@ UserView
 Data Dependencies
 -----------------
 UserModel: none
-TimelineModel: UserModel
+TimelineModel: none
 TimelineListModel: UserModel
-EntryModel: TimelineModel
+EntryModel: none
 EntryListModel: TimelineModel
 
 
diff --git a/www/index.yaws b/www/index.yaws
index aef2d14..d9041e3 100644
--- a/www/index.yaws
+++ b/www/index.yaws
@@ -23,7 +23,7 @@
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 
         <script id="timelineLink" type="text/html">
-                        <li><a href="#">{{id}}</a></li>
+                        <li class="timeline-link"><a href="#">{{id}}</a></li>
         </script>
         <script id="entry" type="text/html">
             <div class="entry">
@@ -65,19 +65,21 @@
 
         </div>
 
-        <div id="new-entry">
-            <input id="new-entry-input" class="mark-input"
-                placeholder="Start a new task..." type="text" />
-        </div>
+        <div id="entry-list">
+            <div id="new-entry">
+                <input id="new-entry-input" class="mark-input"
+                    placeholder="Start a new task..." type="text" />
+            </div>
 
-        <div id="entries">
-            <div class="entry">
-                <div class="mark">ITHelp: Entering tickets.</div>
-                <input class="mark-input" type="text"/>
-                <div class="timestamp">12:32</div>
-                <input class="timestamp-input" type="text"/>
-                <div class="duration">4<span class="tick-tock">:</span>03<span class="tick-tock">:</span>57</div>
-                <div class="notes">Some notes should go here, but they should be hidden by default</div>
+            <div id="entries">
+                <div class="entry">
+                    <div class="mark">ITHelp: Entering tickets.</div>
+                    <input class="mark-input" type="text"/>
+                    <div class="timestamp">12:32</div>
+                    <input class="timestamp-input" type="text"/>
+                    <div class="duration">4<span class="tick-tock">:</span>03<span class="tick-tock">:</span>57</div>
+                    <div class="notes">Some notes should go here, but they should be hidden by default</div>
+                </div>
             </div>
         </div>
 
diff --git a/www/js/ts.js b/www/js/ts.js
index 4b27d4e..2a86064 100644
--- a/www/js/ts.js
+++ b/www/js/ts.js
@@ -71,6 +71,10 @@ $(document).ready(function(){
             _.bindAll(this, 'url');
         },
 
+        comparator: function(timeline) {
+            return timeline.get('id');
+        },
+
         url: function() {
             return "/ts_api/timelines/" + this.user.get('id');
         }
@@ -93,7 +97,8 @@ $(document).ready(function(){
         },
 
         initialize: function() {
-            _.bindAll(this, 'render', 'close');
+            _.bindAll(this, 'render', 'close', 'editTImestamp',
+                'editMark', 'updateOnEnter');
             this.model.bind('change', this.render);
             this.model.view = this;
         },
@@ -129,21 +134,33 @@ $(document).ready(function(){
 
     TS.EntryListView = Backbone.View.extend({
         
-        el: $("#entries"),
+        el: $("#entry-list"),
+
+        events: {
+            "#new-entry"    : "createNewEntry"
+        },
 
         initialize: function() {
-            _.bindAll(this, 'addOne', 'render');
+            _.bindAll(this, 'addOne', 'createNewEntry', 'render');
             this.collection.bind('add', this.addOne);
             this.collection.bind('refresh', this.render);
             this.collection.view = this;
+            this.entryContainer = this.$("#entries")
         },
 
         addOne: function(entry) {
-            $(this.el).append(entry.view.render().el);
+            if (!entry.view) { new TS.EntryView({model: entry}); }
+            this.entryContainer.prepend(entry.view.render().el);
+        },
+
+        createNewEntry: function() {
+            var entryMark = this.$("#new-entry-input").val();
+            var newEntry = TS.EntryModel({mark: entryMark});
+            this.collection.create({mark: entryMark}).fetch();
         },
 
         render: function() {
-            $(this.el).empty();
+            this.entryContainer.empty();
             this.collection.each(this.addOne);
         }
     });
@@ -199,6 +216,30 @@ $(document).ready(function(){
         }
     });
 
+    TS.TimelineListView = Backbone.View.extend({
+        el: $("#timeline .drop-menu-items"),
+
+        collection: TS.TimelineList,
+
+        initialize: function() {
+            _.bindAll(this, 'render', 'renderOne');
+            this.collection.bind('add', this.renderOne);
+            this.collection.bind('refresh', this.render);
+            this.collection.view = this;
+        },
+
+        renderOne: function(timeline) {
+            if (!timeline.view) { new TS.TimelineView(timeline); }
+            $(this.el).append(ich.timelineLink(timeline.toJSON()));
+        },
+
+        render: function() {
+            $(this.el).remove(".timeline-link");
+            this.collection.each(this.renderOne);
+            return this;
+        }
+    });
+
     TS.UserView = Backbone.View.extend({
         
         el: $("#user"),
diff --git a/yaws.dev.conf b/yaws.dev.conf
index 3ccb8d5..13843f3 100644
--- a/yaws.dev.conf
+++ b/yaws.dev.conf
@@ -1,4 +1,4 @@
-ebin_dir = /home/jdbernard/projects/jdb-labs/timestamper/web-app/ebin
+ebin_dir = T:/projects/jdb-labs/timestamper/web-app/ebin
 #include_dir = /home/jdbernard/projects/timestamper/web-app/src
 
 runmod = timestamper_dev
@@ -6,6 +6,6 @@ runmod = timestamper_dev
 <server timestamper-local>
     port = 8000
     listen = 127.0.0.1
-    docroot = /home/jdbernard/projects/jdb-labs/timestamper/web-app/www
+    docroot = T:/projects/jdb-labs/timestamper/web-app/www
     appmods = ts_api
 </server>