editing timer after its complete. done. #95

front/public/js/alpha.js

@@ -189,7 +189,7 @@ $(document).ready(function() {
    * rendertimers renders your list of past timers in the ui.
    * centralises all the view rendering.
    */
-  var rendertimers = function() {
+  var rendertimers = function(edit, id) {
     // transform the timers Object to an Array so we can SORT it below:
     var arr = Object.keys(timers).map(function(id) {
     var timer = timers[id];
@@ -202,15 +202,27 @@ $(document).ready(function() {
     // Add timer to past-timers list using handlebars
     var raw_template = $('#timer_list_template').html();
     var template = Handlebars.compile(raw_template);
+    var editor_template_raw = $('#timer_edit_template').html();
+    var editor_template = Handlebars.compile(editor_template_raw);
     var parent = $("#past-timers-list");
     var html = '';
-    byDate.map(function(i){
+    byDate.map(function(i) {
       var timer = i // timers[i]
       timer.took = timeformat(timer.elapsed); // repetitive ...
-      html += template(timer);
-      console.log(" >>> "+i, timer);
+      // show edit form if render called with edit true and an id
+      if(edit && timer.id === id) {
+        html += editor_template(timer);
+      }
+      else {
+        html += template(timer);
+      }
+      // console.log(" >>> "+i, timer);
     })
     parent.html(html); // completely re-write the DOM each time! :-O
+    // attach a listener event to each timer list entry
+    arr.map(function(timer){
+      editlistener(timer.id);
+    });
     return;
   }
 
@@ -301,7 +313,6 @@ $(document).ready(function() {
       }
     })
 
-
     // enter key: http://stackoverflow.com/questions/979662
     // $(document).keypress(function(e) {
     //   if(e.which == 13) {
@@ -316,6 +327,31 @@ $(document).ready(function() {
 
   }
 
+  var editlistener = function(id) {
+    console.log(' - - - - - - edit listener - - - - -');
+    var ed = $('#'+id);
+    ed.click(function(e) {
+      rendertimers('edit', this.id);
+      // console.log(e);
+      console.log(this.id);
+      // console.log($(this))
+    });
+    console.log('#'+id+"-save");
+    $('#'+id+"-save").click(function(event){
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      console.log(this);
+      var timer = timers[this.id.replace('-save','')];
+      timer.desc = $('#'+id+"-desc").val();
+      timer.took = $('#'+id+"-took").val();
+      console.log("TIMER EDIT", timer);
+      timerupsert(timer, function(){
+        rendertimers();
+      });
+    })
+    return;
+  }
+
   var sb = $("#stop"); // stop button
   sb.click( function() {
     console.log("#stop Clicked!")

front/views/index.html

@@ -16,6 +16,7 @@
     <section id="main">
       <div class="timer-time">
         <div id="t">00:00</div>
+<!-- is putting the buttons *ABOVE* the description the best place...? -->
         <button id="stop">
           <i class="fa fa-stop" aria-hidden="true"></i>
         </button>
@@ -58,6 +59,16 @@
     </li>
   </script>
 
+<!-- Handlebars form for updating the description of the timer -->
+<script id="timer_edit_template" type="text/x-handlebars-template">
+  <form class="timer-one-line" id="\{{id}}-edit">
+      <button type="submit" id="\{{id}}-save" class="fa floppy-o">save</button>
+      <input class="timer-desc" type="text" autocomplete id="\{{id}}-desc" value="\{{desc}}" />
+      <!-- <input type class="timer-time" type="text" autocomplete id="\{{id}}-took" value="\{{took}}" /> -->
+      <span class="timer-time">\{{took}}</span>
+  </form>
+</script>
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="/public/js/alpha.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>

models/timer.js

@@ -6,6 +6,7 @@ module.exports = {
     ct: Joi.forbidden(), // don't allow people to set this!
     start:   Joi.date().iso(),
     end:     Joi.date().iso().optional(),
+    endtimestamp: Joi.string().optional(), // convenience
     aid:     Joi.string(),
     session: Joi.string().optional(),
     id: Joi.string().optional(),