Duration display, time formatting, UI tweaks.

Client Behaviour (ts.js)
========================

- Created EntryView.getViewModel: translates model data to view data,
  specifically synthesizes the start time and duration from the timestamp.
- Added nextModel option to EntryView, needed for calculating the entry
  duration.
- Created EntryView.formatStart: given the timestamp, return the start time,
  in HH:MM format. Code is written for both 24hr and 12hr format, still need
  to write a selector mechanism. For now, uses 12hr format.
- Created EntryView.formatDuration: Get the duration of the entry based on
  this entry's timestamp and and the next entry's timestamp in a display-able
  form. If nextModel is `null` or `undefined` it is assumed that `model`
  is the most recent model and duration is calculated against the current time.
- Changed EntryView.render to use getViewModel.
- Added 'blur' listeners to the mark and timestamp input fields to close them
  without persisting the changes.
- Created EntryView.update: Refresh the display based on the model using the
  existing DOM elements.
- EntryView.save() now uses EntryView.update() instead of EntryView.render()
  and no longer includes an implicit close()
- EntryView.close() has been split into seperate save() and close() functions,
  to persist the changes and hide the input dialogs, respectively.
- EntryListView.addOne now passes the nextModel to EntryViews is creates.
- EntryListView.createNewEntryOnEnter() now clear the new intry input after
  creating a new entry.
- EntryListView.render() now uses a for-structure to traverse the entry
  collection and passes the nextModel (if there is one) to EntryListView.addOne.

Client UI (ts-screen.scss)
==========================

- Font size, family, and color adjusted on timeline and user input fields.
- Day seperator secondary header colors adjusted.
- Mark column width shortened, timestamp and duration columns widened.
- Styles added for notes UI

Client UI (index.yaws)
======================

- Markup changes needed for getViewModel chanes.
- Expanded day seperator.

www/js/ts.js

@@ -98,18 +98,31 @@ $(document).ready(function(){
             "keypress .timestamp-input" : "updateOnEnter"
         },
 
-        initialize: function() {
+        initialize: function(options) {
             _.bindAll(this, 'render', 'close', 'editTImestamp',
-                'editMark', 'updateOnEnter');
+                'editMark', 'updateOnEnter', 'getViewModel');
             this.model.bind('change', this.render);
             this.model.view = this;
+
+            this.nextModel = options.nextModel;
         },
 
         render: function() {
-            $(this.el).html(ich.entryTemplate(this.model.toJSON()));
+            $(this.el).html(ich.entryTemplate(this.getViewModel()));
+            this.$(".mark-input").bind('blur', this.close);
+            this.$(".timestamp-input").bind('blur', this.close);
             return this;
         },
 
+        update: function() {
+            var data = this.getViewModel();
+            this.$('.mark').text(data.mark);
+            this.$('.mark-input').val(data.mark);
+            this.$('.timestamp').text(data.start);
+            this.$('.timestamp-input').val(data.timestamp);
+            this.$('.duration').text(data.duration);
+        },
+
         editMark: function() {
             $(this.el).addClass('edit-mark');
             this.$('.mark-input').focus();
@@ -122,16 +135,62 @@ $(document).ready(function(){
             return this;
         },
 
+        getViewModel: function() {
+            var data = this.model.toJSON();
+
+            // create start and duration values
+            var tsDate = new Date(data.timestamp);
+            data.start = this.formatStart(tsDate);
+            data.duration = this.formatDuration(this.model, this.nextModel);
+            return data;
+        },
+
         close: function() {
+            $(this.el).removeClass('edit-mark edit-timestamp');
+        },
+
+        save: function() {
             this.model.save({
                 mark: this.$('.mark-input').val(), 
                 timestamp: this.$('.timestamp-input').val()});
-            $(this.el).removeClass('edit-mark edit-timestamp');
-            this.render();
+            this.update();
         },
 
         updateOnEnter: function(e) {
-            if(e.keyCode == 13) this.close();
+            if(e.keyCode == 13) { this.save(); this.close(); }
+        },
+
+        formatStart: function(startDate) {
+            // 24 hour
+            // return startDate.getHours() + ":" + startDate.getMinutes();
+
+            // 12 hour
+            var hour = startDate.getHours() % 12;
+            return (hour == 0 ? 12 : hour) + ":" + startDate.getMinutes() +
+                " " + (startDate.getHours() > 11 ? "pm" : "am");
+        },
+
+        formatDuration: function(model, nextModel) {
+            var d1 = new Date(model.get('timestamp'));
+            var d2, diff;
+            var day, hr, min;
+
+            // if no next model, assume it's an onoing task
+            if (nextModel) { d2 = new Date(nextModel.get('timestamp')); }
+            else { d2 = new Date(); }
+
+            diff= d2.getTime() - d1.getTime();
+            day = Math.floor(diff / 86400000); // milliseconds in a day
+            diff %= 86400000;
+            
+            hr = Math.floor(diff / 3600000); // millis in an hour
+            diff %= 3600000;
+
+            min = Math.floor(diff / 60000); // millis in a minute
+
+            return (day > 0 ? day + "d " : "") +
+                   (hr  > 0 ? hr + "hr " : "") +
+                   min + "m ";
         }
     });
 
@@ -151,8 +210,9 @@ $(document).ready(function(){
             this.entryContainer = this.$("#entries")
         },
 
-        addOne: function(entry) {
+        addOne: function(entry, nextEntry) {
             if (!entry.view) { new TS.EntryView({model: entry}); }
+            entry.view.nextModel = nextEntry
             this.entryContainer.prepend(entry.view.render().el);
         },
 
@@ -167,12 +227,21 @@ $(document).ready(function(){
                 this.collection.create({mark: entryMark,
                                         notes: '',
                                         timestamp: getUTCTimestamp()}).fetch();
-            }
+
+                // clear the input for the next entry
+                this.$("#new-entry-input").val("");
+
+            } 
         },
 
         render: function() {
             this.entryContainer.empty();
-            this.collection.each(this.addOne);
+            for (var i = 0, len = this.collection.length; i < len; i++) {
+                var entry = this.collection.at(i);
+                var nextEntry = (i + 1 < len ? this.collection.at(i + 1) : null);
+
+                this.addOne(entry, nextEntry);
+            }
         }
     });
 
@@ -236,7 +305,7 @@ $(document).ready(function(){
         },
 
         updateOnEnter: function(e) {
-            if (e.keyCode == 13) this.close();
+            if (e.keyCode == 13) { this.close(); this.save() }
         }
 
     });