Implemented new timeline functionality client-side.

* Fixed returned information in ts_api:put_timeline/3
* Added UI for new timeline button.
* Added client-side implementation of new timeline creation. There is a problem
  on the server-side, PUT should support creating new items and updating
  existing items.

doc/issues/desktop/0017tn2.rst

@@ -0,0 +1,7 @@
+Implement timeline creation.
+============================
+
+=========  ==========
+Created:   2011-05-15
+Resolved:  YYYY-MM-DD
+=========  ==========

doc/issues/mobile/0000tn5.rst

@@ -0,0 +1 @@
+Prototype out mobile workflow.

src/ts_api.erl

@@ -321,7 +321,7 @@ put_timeline(YArg, Username, TimelineId) ->
 
         no_record -> make_json_404(YArg,
             [{error, "no such timeline"},
-             {see_docs, "/ts_api_doc/timelines.html#POST"}]);
+             {see_docs, "/ts_api_doc/timelines.html#PUT"}]);
 
         Error -> 
             error_logger:error_report("Unable update timeline: ~p", [Error]),

www/css/ts-screen.css

@@ -74,8 +74,13 @@ input {
       text-align: right;
       right: 0;
       width: 172.41%; }
-      #timeline .drop-menu .drop-menu-items .timeline-link {
+      #timeline .drop-menu .drop-menu-items .new-timeline-link, #timeline .drop-menu .drop-menu-items .timeline-link {
+        padding-left: 0.5em;
         font-size: medium; }
+        #timeline .drop-menu .drop-menu-items .new-timeline-link img, #timeline .drop-menu .drop-menu-items .timeline-link img {
+          position: relative;
+          top: 4px;
+          left: -4px; }
 
 .dialog {
   background: white;

www/css/ts-screen.scss

@@ -100,8 +100,15 @@ input {
             right: 0;
             width: 172.41%;
 
-            .timeline-link {
+            .new-timeline-link, .timeline-link {
+                padding-left: 0.5em;
                 font-size: medium;
+
+                img {
+                    position: relative;
+                    top: 4px;
+                    left: -4px;
+                }
             }
         }
     }

www/index.yaws

@@ -76,6 +76,8 @@ out(YArg) ->
                     <div class="timeline-id">(&nbsp;{{id}}&nbsp;)</div>
                     <input class="timeline-id-input" type="text" value='{{id}}'/>
                     <ul class="drop-menu-items">
+                        <li class="new-timeline-link"><a href="#">
+                            <img src="/img/round_plus_icon_16.png"/>new</a></li>
                     </ul>
                 </div>
         </script>

www/js/ts.js

@@ -356,7 +356,8 @@ $(document).ready(function(){
             "dblclick .timeline-id"         : "editId",
             "dblclick .timeline-desc"       : "editDesc",
             "keypress .timeline-id-input"   : "updateOnEnter",
-            "keypress .timeline-desc-input" : "updateOnEnter"
+            "keypress .timeline-desc-input" : "updateOnEnter",
+            "click .new-timeline-link"      : "showNewTimelineDialog"
         },
 
         initialize: function(options) {
@@ -406,6 +407,10 @@ $(document).ready(function(){
             this.render();
         },
 
+        showNewTimelineDialog: function() {
+            TS.app.newTimelineDialog.show();
+        },
+
         updateOnEnter: function(e) {
             if (e.keyCode == 13) { this.close(); this.save() }
         }
@@ -468,9 +473,6 @@ $(document).ready(function(){
             // create the login dialog
             this.loginDialog = new TS.LoginView
 
-            // create the new timeline dialog
-            this.newTimelineDialog = new TS.NewTimelineView
-
             // initialize data, either from boostrapped data, or via user login
             if (window.bootstrap) { this.initializeData(window.bootstrap()) }
             else {
@@ -500,6 +502,10 @@ $(document).ready(function(){
                 {collection: this.timelines.collection,
                  initialTimelineId: data.initialTimelineId});
 
+            // create the new timeline dialog
+            this.newTimelineDialog = new TS.NewTimelineView(
+                {timelineCollection: this.timelines.collection});
+
             // create entry models from the bootstrapped data
             var entryModels = _.map(data.entries, function(entry) {
                 return new TS.EntryModel(entry);
@@ -614,8 +620,7 @@ $(document).ready(function(){
             if (options.timelineCollection == undefined) {
                 throw "Can not create the NewTimelineView without the timeline collection."
             } else {
-                this.timelineCollection = this.collection.get(
+                this.timelineCollection = options.timelineCollection;
-                    options.timelineCollection);
             }
 
         },
@@ -624,14 +629,16 @@ $(document).ready(function(){
             var timelineId = this.$("#new-timeline-id").val();
             var timelineDesc = this.$("#new-timeline-desc").val();
             this.timelineCollection.create(
-                {id: timelineId, description: timelineDesc});
+                {id: timelineId, description: timelineDesc, 
+                 created: getUTCTimestamp()});
+            this.hide();
         },
 
         hide: function() { $(this.el).addClass('hidden'); },
 
         show: function() {
-            this.$("#new-timeline-id".val('');
+            this.$("#new-timeline-id").val("");
-            this.$("#new-timeline-desc".val('');
+            this.$("#new-timeline-desc").val("");
             $(this.el).removeClass('hidden');
             this.$("#new-timeline-id").focus();
         }